Visual Studio Code のインストール

Visual Studio Code のインストール手順を紹介します。

ジョナスン
質問: Visual Studio Codeの導入
HTMLやJSONファイルを編集するエディタとして、Visual Studio Code が良いと聞きました。インストール方法を教えて下さい。

Visual Studio Codeのダウンロード

Visual Studio Codeのインストーラーをダウンロードします。https://azure.microsoft.com/ja-jp/products/visual-studio-codeに アクセスします。下図のページが表示されます。ページの[VS Codeをダウンロードする]ボタンをクリックします。

Visual Studio Code のインストール:画像1

ダウンロードページが表示されます。今回はWindows版をインストールしますので、[Windows]のタイルをクリックします。
なお、PCのすべてのユーザーに対してインストールしたい場合は、[System Installer]の項目の[64 bit] [32 bit] [ARM] のタイルをクリックして、システムインストーラーをダウンロードします。

Visual Studio Code のインストール:画像2

下図のダウンロードページが表示されます。インストーラーのダウンロードが始まります。
Visual Studio Code のインストール:画像3

Visual Studio Codeのインストーラーがダウンロードできました。
Visual Studio Code のインストール:画像4

Visual Studio Code のインストール

ダウンロードしたインストーラーを実行します。 インストーラーが起動し、[使用許諾契約書の同意]ダイアログが表示されます。 [同意する]ラジオボタンをクリックしてチェックを付けます。チェック後 [次へ] ボタンをクリックします。

Visual Studio Code のインストール:画像5 Visual Studio Code のインストール:画像6

[インストール先の指定]画面が表示されます。Visual Studio Codeをインストールするディレクトリを指定します。 今回はデフォルトのままとします。[次へ]ボタンをクリックします。
Visual Studio Code のインストール:画像7

[プログラムグループの指定]画面が表示されます。作成するプログラムグループを指定します。 今回はデフォルトの "Visual Studio Oode" のままとします。[次へ]ボタンをクリックします。
Visual Studio Code のインストール:画像8

[追加タスクの選択]画面が表示されます。デスクトップにアイコンの作成などのオプションを追加できます。 今回は環境に変更をなるべく加えたくないため、すべてのチェックを外します。[次へ]ボタンをクリックします。
Visual Studio Code のインストール:画像9 Visual Studio Code のインストール:画像10

[インストール準備完了]画面が表示されます。[インストール]ボタンをクリックし、インストールを開始します。
Visual Studio Code のインストール:画像11

インストールが始まります。
Visual Studio Code のインストール:画像12 Visual Studio Code のインストール:画像13

インストールが完了すると下図の画面が表示されます。[完了]ボタンをクリックしてインストーラを終了します。
Visual Studio Code のインストール:画像14

Visual Studio Codeを起動します。下図のウィンドウが表示されます。
Visual Studio Code のインストール:画像15

UIの日本語化

ウィンドウ左側のツールバーの[Extensions]のボタンをクリックします。
Visual Studio Code のインストール:画像16

ウィンドウの左側に[EXTENSIONS]パネルが表示され、拡張機能のリストが表示されます。
Visual Studio Code のインストール:画像17

EXTENSIONSパネル上部の検索ボックスに"Japanese"を入力して検索します。 リストに "Japanese Language Pack for Visual Studio Code" の項目が表示されますのでクリックして選択します。
Visual Studio Code のインストール:画像18

"Japanese Language Pack for Visual Studio Code"の項目を選択すると右側に拡張機能の詳細画面が表示されます。 右側のエリアの上部の[Install]ボタンをクリックします。"Japanese Language Pack for Visual Studio Code"の項目を選択すると右側に拡張機能の詳細画面が表示されます。 右側のエリアの上部の[Install]ボタンをクリックします。
Visual Studio Code のインストール:画像19

インストールが完了すると下図の画面になります。右下のポップアップウィンドウの[Change Language and Restart]のボタンをクリックします。
Visual Studio Code のインストール:画像20

Visual Studio Codeが再起動されます。UIの表示が日本語に変わりました。
Visual Studio Code のインストール:画像21

AuthorPortraitAlt
著者
iPentecの企画・分析担当。口が悪いのでなるべく寡黙でありたいと思っている。が、ついついしゃべってしまい、毎回墓穴を掘っている。
作成日: 2019-04-25