本記事ではVisual Studio Codeの環境構築を行います。
Visual Studio Code(VSCode)とは
Visual Studio CodeはMicrosoftが開発している
Windows、Linux、macOS、webで無料で提供されているソースコードエディタです。
調べるときに良くVSCodeとも出てきます。
最大の特徴は拡張機能が豊富にあり、
・英語・中国語・日本語表示
・各開発言語の開発効率を向上させる機能(ソースコード入力補助等)
様々あるため、現在最も多く利用されているエディタといわれています。
![みみねこ](https://nyanblog2222.com/wp-content/uploads/2021/07/2645602.png)
なにより多くの機能が無料で使える!
これに尽きます。
Visual Studio Codeのインストール
さっそくVisual Studio Codeをインストールしていきます。
まずはVisual Studio Codeのページから赤枠をクリックし、ファイルをダウンロードします。
![VSCode ダウンロード](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)
ダウンロードしたファイル「VSCodeUserSetup-x64-[ver名].exe」をダブルクリックし
インストールを開始します。
セットアップ画面が開いたら
「同意する」にチェックをつけて、「次へ」をクリックします。
![VSCode セットアップ](https://nyanblog2222.com/wp-content/uploads/2020/05/dab39e13a9447a6af6677a51575cfbac-4.png)
インストール先を指定します。
特に変更する必要がなければそのまま「次へ」をクリックします。
![VSCode セットアップ](https://nyanblog2222.com/wp-content/uploads/2020/05/722d363e728379067c00b01a068530a0.png)
スタートメニューにショートカットを作成します。
特にこだわりがなければ、このまま「次へ」をクリックします。
![VSCode セットアップ](https://nyanblog2222.com/wp-content/uploads/2020/05/67c57268ebc9d8c32aaea6c8e913c9a2.png)
ここでは、インストール時の追加要素を選択することができます。
今回は変更していませんが、おすすめは以下の3つです。
・エクスプローラーのファイル コンテキストメニューに[Code で開く]アクションを追加する
・エクスプローラーのディレクトリ コンテキストメニューに[Code で開く]アクションを追加する
・PATHへの追加
他のサイトでよくインストール作業の内容に関して、環境変数に設定する内容が記載されていますが、ここでPATHへの追加にチェックを入れておくと自分で作業する必要が無くなります。
そのため、チェックをつけた状態で「次へ」をクリックしましょう。
![VSCode セットアップ](https://nyanblog2222.com/wp-content/uploads/2020/05/0182d5ad9156e01eb0f854096ccca089-1.png)
インストールの確認前画面です。
内容に問題なければ「インストール」をクリックしてください。
![VSCode セットアップ](https://nyanblog2222.com/wp-content/uploads/2020/05/98bfa2948a2cf57531107bf79c2b4c77.png)
インストールが完了したら「完了」をクリックし、セットアップ画面を閉じてください。
これでVisual Studio Codeのインストールが完了です。
![VSCode セットアップ](https://nyanblog2222.com/wp-content/uploads/2020/05/1da942a1b0f32f831099a98ad72c5fb1.png)
Visual Studio Codeに拡張機能をインストール
拡張機能でインストールする方法を紹介します。
まず使うであろう「日本語化」の拡張機能をインストールします。
Visual Studio Codeを開きます。
左側のアクティビティバーにある、赤枠「拡張機能」をクリックします。
![Visual Studio Code](https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-55-47_No-00-min.png)
「Marketplace」に「Japanese」と入力してください。
![](https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-55-58_No-00-min-5.png)
「Japanese Language Pack for Visual Studio Code」
のインストールを行ってください。
![](https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-55-58_No-00-min-4.png)
locale.jsonで日本語に設定します。
「Ctrl」+「Shift」+「P」でコマンドパレットを起動します。
「configure」と入力すると予測変換が出てくるので
「Configure Display Language」をクリックします。
![Visual Studio Code 日本語](https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-59-8_No-00-min.png)
「ja」(japanese)をクリックします。
![Visual Studio Code 日本語](https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Welcome-Visual-Studio-Code_2020-5-11_8-59-11_No-00-min.png)
再起動するか確認するメッセージボックスが出ますので、「Restart」をクリックしてください。
![Visual Studio Code 再起動](https://nyanblog2222.com/wp-content/uploads/2020/05/SnapCrab_Visual-Studio-Code_2020-5-11_8-59-22_No-00.png)
これで日本語化の完了です。