<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>VSCode アーカイブ - nyanblog ~にゃんぶろぐ~</title>
	<atom:link href="https://nyanblog2222.com/tag/vscode/feed/" rel="self" type="application/rss+xml" />
	<link>https://nyanblog2222.com/tag/vscode/</link>
	<description>ちょっとしたことを調べているよ</description>
	<lastBuildDate>Tue, 28 Mar 2023 13:41:18 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.7</generator>

<image>
	<url>https://nyanblog2222.com/wp-content/uploads/2021/09/cropped-favicon-32x32.png</url>
	<title>VSCode アーカイブ - nyanblog ~にゃんぶろぐ~</title>
	<link>https://nyanblog2222.com/tag/vscode/</link>
	<width>32</width>
	<height>32</height>
</image> 
<atom:link rel="hub" href="https://pubsubhubbub.appspot.com"/><atom:link rel="hub" href="https://pubsubhubbub.superfeedr.com"/><atom:link rel="hub" href="https://websubhub.com/hub"/>	<item>
		<title>Visual Studio Codeのインストールや日本語化設定</title>
		<link>https://nyanblog2222.com/programming/javascript/5187/</link>
					<comments>https://nyanblog2222.com/programming/javascript/5187/#respond</comments>
		
		<dc:creator><![CDATA[nyan2222]]></dc:creator>
		<pubDate>Sat, 25 Mar 2023 15:12:41 +0000</pubDate>
				<category><![CDATA[HTML/CSS]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[プログラミング]]></category>
		<category><![CDATA[VSCode]]></category>
		<category><![CDATA[環境構築]]></category>
		<guid isPermaLink="false">https://nyanblog2222.com/?p=5187</guid>

					<description><![CDATA[<p><img src="https://nyanblog2222.com/wp-content/uploads/2023/03/20230328_1.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" decoding="async" fetchpriority="high" srcset="https://nyanblog2222.com/wp-content/uploads/2023/03/20230328_1.png 1280w, https://nyanblog2222.com/wp-content/uploads/2023/03/20230328_1-300x157.png 300w, https://nyanblog2222.com/wp-content/uploads/2023/03/20230328_1-1024x536.png 1024w, https://nyanblog2222.com/wp-content/uploads/2023/03/20230328_1-768x402.png 768w" sizes="(max-width: 1280px) 100vw, 1280px" />本記事ではVisual Studio Codeの環境構築を行います。 目次 Visual Studio Code（VSCode）とはVisual Studio CodeのインストールVisual Studio Codeに [&#8230;]</p>
<p>投稿 <a href="https://nyanblog2222.com/programming/javascript/5187/">Visual Studio Codeのインストールや日本語化設定</a> は <a href="https://nyanblog2222.com">nyanblog ~にゃんぶろぐ~</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[<img src="https://nyanblog2222.com/wp-content/uploads/2023/03/20230328_1.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://nyanblog2222.com/wp-content/uploads/2023/03/20230328_1.png 1280w, https://nyanblog2222.com/wp-content/uploads/2023/03/20230328_1-300x157.png 300w, https://nyanblog2222.com/wp-content/uploads/2023/03/20230328_1-1024x536.png 1024w, https://nyanblog2222.com/wp-content/uploads/2023/03/20230328_1-768x402.png 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" />
<p>本記事ではVisual Studio Codeの環境構築を行います。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">Visual Studio Code（VSCode）とは</a></li><li><a href="#toc2" tabindex="0">Visual Studio Codeのインストール</a></li><li><a href="#toc3" tabindex="0">Visual Studio Codeに拡張機能をインストール</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">Visual Studio Code（VSCode）とは</span></h2>



<p><span class="marker-under">Visual Studio Code</span>はMicrosoftが開発している<br>Windows、Linux、macOS、webで<span class="bold-red">無料で提供</span>されているソースコードエディタです。</p>



<p>調べるときに良く<span class="marker-under">VSCode</span>とも出てきます。</p>



<p><span class="bold-red">最大の特徴</span>は<span class="marker-under">拡張機能が豊富</span>にあり、<br>・英語・中国語・<span class="marker-under">日本語表示</span><br>・各開発言語の開発効率を向上させる機能（ソースコード入力補助等）<br>様々あるため、現在最も多く利用されているエディタといわれています。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://nyanblog2222.com/wp-content/uploads/2021/07/2645602.png" alt="みみねこ" class="speech-icon-image"/></figure><div class="speech-name">みみねこ</div></div><div class="speech-balloon">
<p>なにより<span class="marker-under">多くの機能が無料で使える</span>！<br>これに尽きます。</p>
</div></div>



<h2 class="wp-block-heading"><span id="toc2">Visual Studio Codeのインストール</span></h2>



<p>さっそくVisual Studio Codeをインストールしていきます。<br>まずは<a rel="noopener" href="https://code.visualstudio.com/" target="_blank">Visual Studio Codeのページ</a>から<span class="bold-red">赤枠</span>をクリックし、ファイルをダウンロードします。</p>



<figure class="wp-block-image size-large"><img decoding="async" width="596" height="374" src="https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Visual-Studio-Code-Code-Editing-Redefined-Google-Chrome_2020-5-12_22-39-14_No-00.png" alt="VSCode　ダウンロード" class="wp-image-459" srcset="https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Visual-Studio-Code-Code-Editing-Redefined-Google-Chrome_2020-5-12_22-39-14_No-00.png 596w, https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Visual-Studio-Code-Code-Editing-Redefined-Google-Chrome_2020-5-12_22-39-14_No-00-300x188.png 300w" sizes="(max-width: 596px) 100vw, 596px" /></figure>



<p><span class="bold-red">ダウンロードしたファイル「VSCodeUserSetup-x64-[ver名].exe」</span>をダブルクリックし<br>インストールを開始します。</p>



<p>セットアップ画面が開いたら<br><span class="bold-red">「同意する」</span>にチェックをつけて、<span class="bold-red">「次へ」</span>をクリックします。</p>



<figure class="wp-block-image size-large"><img decoding="async" width="539" height="427" src="https://nyanblog2222.com/wp-content/uploads/2020/05/dab39e13a9447a6af6677a51575cfbac-4.png" alt="VSCode セットアップ" class="wp-image-464" srcset="https://nyanblog2222.com/wp-content/uploads/2020/05/dab39e13a9447a6af6677a51575cfbac-4.png 539w, https://nyanblog2222.com/wp-content/uploads/2020/05/dab39e13a9447a6af6677a51575cfbac-4-300x238.png 300w" sizes="(max-width: 539px) 100vw, 539px" /></figure>



<p>インストール先を指定します。<br>特に変更する必要がなければそのまま<span class="bold-red">「次へ」</span>をクリックします。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="539" height="427" src="https://nyanblog2222.com/wp-content/uploads/2020/05/722d363e728379067c00b01a068530a0.png" alt="VSCode セットアップ" class="wp-image-465" srcset="https://nyanblog2222.com/wp-content/uploads/2020/05/722d363e728379067c00b01a068530a0.png 539w, https://nyanblog2222.com/wp-content/uploads/2020/05/722d363e728379067c00b01a068530a0-300x238.png 300w" sizes="auto, (max-width: 539px) 100vw, 539px" /></figure>



<p>スタートメニューにショートカットを作成します。<br>特にこだわりがなければ、このまま<span class="bold-red">「次へ」</span>をクリックします。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="539" height="427" src="https://nyanblog2222.com/wp-content/uploads/2020/05/67c57268ebc9d8c32aaea6c8e913c9a2.png" alt="VSCode セットアップ" class="wp-image-466" srcset="https://nyanblog2222.com/wp-content/uploads/2020/05/67c57268ebc9d8c32aaea6c8e913c9a2.png 539w, https://nyanblog2222.com/wp-content/uploads/2020/05/67c57268ebc9d8c32aaea6c8e913c9a2-300x238.png 300w" sizes="auto, (max-width: 539px) 100vw, 539px" /></figure>



<p>ここでは、インストール時の追加要素を選択することができます。</p>



<p>今回は変更していませんが、おすすめは以下の3つです。</p>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p>・エクスプローラーのファイル　コンテキストメニューに[Code で開く]アクションを追加する<br>・エクスプローラーのディレクトリ　コンテキストメニューに[Code で開く]アクションを追加する<br>・<span class="bold-red">PATHへの追加</span></p>
</div>



<p>他のサイトでよくインストール作業の内容に関して、環境変数に設定する内容が記載されていますが、ここで<span class="bold-red">PATHへの追加</span>にチェックを入れておくと自分で作業する必要が無くなります。<br>そのため、チェックをつけた状態で<span class="bold-red">「次へ」</span>をクリックしましょう。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="539" height="427" src="https://nyanblog2222.com/wp-content/uploads/2020/05/0182d5ad9156e01eb0f854096ccca089-1.png" alt="VSCode セットアップ" class="wp-image-473" srcset="https://nyanblog2222.com/wp-content/uploads/2020/05/0182d5ad9156e01eb0f854096ccca089-1.png 539w, https://nyanblog2222.com/wp-content/uploads/2020/05/0182d5ad9156e01eb0f854096ccca089-1-300x238.png 300w" sizes="auto, (max-width: 539px) 100vw, 539px" /></figure>



<p>インストールの確認前画面です。<br>内容に問題なければ<span class="bold-red">「インストール」</span>をクリックしてください。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="539" height="427" src="https://nyanblog2222.com/wp-content/uploads/2020/05/98bfa2948a2cf57531107bf79c2b4c77.png" alt="VSCode セットアップ" class="wp-image-469" srcset="https://nyanblog2222.com/wp-content/uploads/2020/05/98bfa2948a2cf57531107bf79c2b4c77.png 539w, https://nyanblog2222.com/wp-content/uploads/2020/05/98bfa2948a2cf57531107bf79c2b4c77-300x238.png 300w" sizes="auto, (max-width: 539px) 100vw, 539px" /></figure>



<p>インストールが完了したら<span class="bold-red">「完了」</span>をクリックし、セットアップ画面を閉じてください。<br>これでVisual Studio Codeのインストールが完了です。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="539" height="427" src="https://nyanblog2222.com/wp-content/uploads/2020/05/1da942a1b0f32f831099a98ad72c5fb1.png" alt="VSCode セットアップ" class="wp-image-471" srcset="https://nyanblog2222.com/wp-content/uploads/2020/05/1da942a1b0f32f831099a98ad72c5fb1.png 539w, https://nyanblog2222.com/wp-content/uploads/2020/05/1da942a1b0f32f831099a98ad72c5fb1-300x238.png 300w" sizes="auto, (max-width: 539px) 100vw, 539px" /></figure>



<h2 class="wp-block-heading"><span id="toc3">Visual Studio Codeに拡張機能をインストール</span></h2>



<p>拡張機能でインストールする方法を紹介します。<br>まず使うであろう<span class="bold-red">「日本語化」</span>の拡張機能をインストールします。</p>



<p>Visual Studio Codeを開きます。</p>



<p>左側のアクティビティバーにある、<span class="bold-red">赤枠「拡張機能」</span>をクリックします。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="619" height="464" src="https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-55-47_No-00-min.png" alt="Visual Studio Code" class="wp-image-475" srcset="https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-55-47_No-00-min.png 619w, https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-55-47_No-00-min-300x225.png 300w" sizes="auto, (max-width: 619px) 100vw, 619px" /></figure>



<p>「Marketplace」に<span class="bold-red">「Japanese」</span>と入力してください。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="620" height="183" src="https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-55-58_No-00-min-5.png" alt="" class="wp-image-485" srcset="https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-55-58_No-00-min-5.png 620w, https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-55-58_No-00-min-5-300x89.png 300w" sizes="auto, (max-width: 620px) 100vw, 620px" /></figure>



<p><span class="bold-red">「Japanese Language Pack for Visual Studio Code」</span><br>のインストールを行ってください。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="620" height="177" src="https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-55-58_No-00-min-4.png" alt="" class="wp-image-484" srcset="https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-55-58_No-00-min-4.png 620w, https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-55-58_No-00-min-4-300x86.png 300w" sizes="auto, (max-width: 620px) 100vw, 620px" /></figure>



<p>locale.jsonで日本語に設定します。<br><span class="bold-red">「Ctrl」+「Shift」+「P」</span>でコマンドパレットを起動します。</p>



<p>「configure」と入力すると予測変換が出てくるので<br><span class="bold-red">「Configure Display Language」</span>をクリックします。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="617" height="179" src="https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-59-8_No-00-min.png" alt="Visual Studio Code　日本語" class="wp-image-483" srcset="https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-59-8_No-00-min.png 617w, https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-59-8_No-00-min-300x87.png 300w" sizes="auto, (max-width: 617px) 100vw, 617px" /></figure>



<p><span class="bold-red">「ja」</span>(japanese)をクリックします。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="617" height="180" src="https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-59-11_No-00-min.png" alt="Visual Studio Code　日本語" class="wp-image-486" srcset="https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-59-11_No-00-min.png 617w, https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-59-11_No-00-min-300x88.png 300w" sizes="auto, (max-width: 617px) 100vw, 617px" /></figure>



<p>再起動するか確認するメッセージボックスが出ますので、<span class="bold-red">「Restart」</span>をクリックしてください。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="567" height="205" src="https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Visual-Studio-Code_2020-5-11_8-59-22_No-00.png" alt="Visual Studio Code　再起動" class="wp-image-488" srcset="https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Visual-Studio-Code_2020-5-11_8-59-22_No-00.png 567w, https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Visual-Studio-Code_2020-5-11_8-59-22_No-00-300x108.png 300w" sizes="auto, (max-width: 567px) 100vw, 567px" /></figure>



<p>これで日本語化の完了です。</p>



<p></p>
<p>投稿 <a href="https://nyanblog2222.com/programming/javascript/5187/">Visual Studio Codeのインストールや日本語化設定</a> は <a href="https://nyanblog2222.com">nyanblog ~にゃんぶろぐ~</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nyanblog2222.com/programming/javascript/5187/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
