VisualStudioCode(通称VSCode)はMicrosoftが提供しているプログラミングに特化したエディタで無料で使えるという素晴らしいソフトウェアです。
カバーしている開発言語の対応数もかなり多く、開発を手助けしてくれる機能を拡張することができるのでこれからプログラミングを学習する人はぜひ使いこなしていきたいツールのひとつです。
まずはVSCodeをダウンロードするために下記URLにアクセスします。
https://code.visualstudio.com/
Download for Windowsボタンを押すと自分のPCに合ったインストーラーをダウンロードすることができるのですが、ここでは自分でVSCodeのバージョンを選択してダウンロードする方法の手順で進めていきます。
![](https://fullstacklife.net/wp-content/uploads/2021/04/01-4.png)
Other platformsリンクをクリックします。
![](https://fullstacklife.net/wp-content/uploads/2021/04/02-3.png)
User Installerの自分のCPU、OSに合ったバージョンをクリックしてダウンロードします。
![](https://fullstacklife.net/wp-content/uploads/2021/04/03-4.png)
![](https://fullstacklife.net/wp-content/uploads/2021/04/04-6.png)
ダウンロードしたファイルを実行してインストーラーを起動します。
![](https://fullstacklife.net/wp-content/uploads/2021/04/05-4.png)
このユーザーインストーラーは、管理者として実行するためのものではありません。 このシステムのすべてのユーザーにVSCodeをインストールする場合は、https://code.visualstudio.comから代わりにシステムインストーラーをダウンロードしてください。 続行してもよろしいですか?
英語のメッセージが表示されますが問題ないのでOKボタンをクリックして続行します。
![](https://fullstacklife.net/wp-content/uploads/2021/04/06-4.png)
「同意する」を選択して「次へ」ボタンをクリックします。
![](https://fullstacklife.net/wp-content/uploads/2021/04/07-2.png)
インストールするフォルダを指定して(基本はそのままでOK)「次へ」ボタンをクリックします。
![](https://fullstacklife.net/wp-content/uploads/2021/04/08-3.png)
スタートメニューフォルダー名は基本そのままで「次へ」ボタンをクリックします。
![](https://fullstacklife.net/wp-content/uploads/2021/04/09-3.png)
セッティング関連の確認画面が出るので必要に応じてチェックを入れて「次へ」ボタンをクリックします。
![](https://fullstacklife.net/wp-content/uploads/2021/04/10-3.png)
セッティング関連を終えるとインストール内容確認画面になるので内容を確認して「インストール」ボタンをクリックします。
![](https://fullstacklife.net/wp-content/uploads/2021/04/11-4.png)
インストール進行中が表示されます。。。
![](https://fullstacklife.net/wp-content/uploads/2021/04/12-2.png)
インストール完了画面。とりあえずそのままVSCodeを立ち上げる場合は「Visual Studio Codeを実行する」にチェックを入れて「完了」ボタンをクリックします。
![](https://fullstacklife.net/wp-content/uploads/2021/04/13-4.png)
VSCodeが立ち上がればインストール完了です。
![](https://fullstacklife.net/wp-content/uploads/2021/04/15-4-1024x613.png)
①アクティビティバー
サイドバーにどのビューを表示するかを選択する機能です。
初期状態で選択できるビューは「Exploler」「Search」「Source Control」「Run and Debug」「Extensions」
あとはアクティビティバーから設定できるメニューとして「Account」「Manage」があります。
設定によってアクティビティバーのコントロールアイコンを増やしたり変更したりすることができます。
②サイドバー
アクティビティバーの選択によって詳細なコントロールを表示するエリアです。
③エディタ
VSCodeのメインであるコードを編集するエリアです。エディタエリアではソースコードの表示を複数のエディタウィンドウに分割して表示したり自由にレイアウトすることができます。
④パネル
コマンドを実行できるターミナルやプロジェクトの警告デバッグ時のコンソール出力を行うことができるエリアです。各機能をタブによって切り替えて表示することができます。
⑤ステータスバー
現在表示しているエディタのファイルの文字コードやファイル種別、コードチェックによる警告等を表示するエリアです。また表示だけでなく文字コード等の変更もここのステータスバーを通して変更することができます。