Visual Studio Code初期設定手順(インストール、日本語化、配色テーマ設定手順)

2021-05-04Others,VS Code,Windows

Visual Studio Code(VS Code)のダウンロードからインストール、画面表示色(テーマ)の変更、日本語化までの初期設定手順です。
Windows端末へのインストールを例に手順を確認しています。
また、画面表示色(テーマ)の変更例についても紹介しています。

※Windows 11(バージョン26H2)環境を利用して手順を確認しています。

スポンサーリンク

Windows端末へVisual Studio Codeをインストールする手順

Visual Studio Codeとは

Visual Studio Code 公式サイト(code.visualstudio.com)
Visual Studio Code(マイクロソフト社サイト)
Visual Studio Code をインストールする(Microsoft Learn)

Visual Studio Codeは、さまざまなソフトウェアを開発するためのソースコードエディタです。
Microsoftがオープンソースとして無料で提供しており、PythonやTypeScript、JavaScript、C#、Goなど多くのプログラミング言語に対応しています。
Windows OSだけではなく、MacやLinuxなどのプラットフォームでも利用できます。

Visual Studio Codeでは、多くの拡張機能が提供されており、GitHubとの連携やGitHub Copilotによるコード補完も可能です。
また、Azureリソースの操作やコンテナ管理、Terraform、Ansibleなどの構成管理ツールの実行環境としても利用できます。

Windows端末へのインストール手順

Visual Studio Codeは、公式サイトからインストーラーをダウンロードしてインストールします。
Windows版では複数の形式のインストーラーが提供されており、用途に応じて選択できます。

    • System Installer：システム全体にインストールされ、PCを利用しているすべてのユーザーが利用できます(管理者権限が必要)
    • User Installer:インストールを実行したユーザーのみが利用できます(管理者権限が不要)
    • .zip:ダウンロード後にファイルを解凍して利用します(インストール作業が不要なポータブル版)

公式では、User Installerが推奨されています。
.zip形式の場合は、インストールせずに利用できますが、PATH環境変数などを自分で設定する必要があります。
それ以外にも、ターミナル経由で操作する場合に利用するVS Code CLI(コマンドラインインターフェース)も提供されています。

インストーラーは、Visual Studio Codeの公式サイトからダウンロードできます。
今回は、User Installer(x64)を利用して、Windows端末へVisual Studio Codeをインストールしています。

Visual Studio Code 公式サイト(code.visualstudio.com)
Download Visual Studio Code
Visual Studio Code(マイクロソフト社サイト)

インストール手順

Azureの公式サイト(azure.microsoft.com)からダウンロードする手順です。
VS Codeをダウンロードするを選択します。
インストラーファイル先のOSとインストーラーの種類を選択します。
ダウンロードが開始されると、ブラウザーにWhat’s Newの画面が表示されます。

Visual Studio Code(マイクロソフト社サイト)

Azureの公式サイトからダウンロード(VS Codeのインストール手順)
インストラーファイルのダウンロード画面(VS Codeのインストール手順)

 
VS Codeのダウンロード開始画面(VS Codeのインストール手順)

Visual Studio Codeの公式サイト(code.visualstudio.com/)からダウンロードする場合の手順です。
Download for Windowsを選択すると、User Installerがダウンロードされます。

Visual Studio Code 公式サイト(code.visualstudio.com)

VS Code公式サイトからインストラーファイルをダウンロード(VS Codeのインストール手順)

VSCodeUserSetup-x64-1.141.0.exeという名前のインストーラーファイルがダウンロードされます。
ダウンロードしたインストーラーをダブルクリックして、インストールを開始します。

※対象のOSなどによりインストラーのファイル名は異なります。
※インストラーファイルは記事執筆時点のバージョンです。適時アップデートが提供されており、バージョン番号はどんどん新しくなっています。

 VS Codeインストラーファイル(VS Codeのインストール手順)

使用許諾契約書の同意を確認する画面が表示されます。
内容を確認し、同意するを選択します。
次へを選択します。

※管理者権限でインストーラーを実行した場合、以下のメッセージが表示されることがあります。その場合は、OKを選択して先に進みます。

 VS Code使用許諾契約書の同意画面(VS Codeのインストール手順)

インストール先の指定をする画面が表示されます。
User Installerの場合、デフォルトのインストール先はユーザーのAppData配下(C:\Users<ユーザー名>\AppData\Local\Programs\Microsoft VS Code)です。
インストール先を変更しない場合は、そのまま次へをクリックします。

※System Installerの場合、デフォルトのインストール先はC:\Program Files\Microsoft VS Codeです。

 VS Codeインストール先指定画面(VS Codeのインストール手順)
スタートメニューフォルダーの指定をする画面が表示されます。
表示名を設定します。
特に要件がない場合は、変更せず次に進めます。		 VS Codeスタートメニューフォルダーの指定画面(VS Codeのインストール手順)

追加タスクを選択する画面が表示されます。
デスクトップアイコンの追加や、エクスプローラーの右クリックメニューにCodeで開くを表示するかどうかを選択します。
また、サポートされているファイル形式のエディターとしてVS Codeを登録するかどうかも選択できます。

※デスクトップにアイコンを追加する場合は、該当する項目にチェックを入れます。
※迷った場合は、デフォルトの状態のまま次へをクリックしても問題ありません。

 VS Code追加タスクの選択画面(VS Codeのインストール手順)

インストール準備完了の画面です。
内容を確認しインストールを開始します。

 

 VS Codeインストール準備の完了画面(VS Codeのインストール手順)
VS Codeインストール中の画面(VS Codeのインストール手順)

インストールが正常に完了すると、Visual Studio Codeセットアップウィザードの完了画面が表示されます。
Visual Studio Codeを実行するにチェックを入れた状態で完了をクリックすると、Visual Studio Codeが自動的に起動します。

 

 VS Codeセットアップウィザード完了画面(VS Codeのインストール手順)
VS Code初回起動画面(VS Codeのインストール手順)

Visual Studio Codeの画面表示の配色テーマ(カラーテーマ)を変更する手順

配色テーマ(Color Theme)の設定変更手順

Visual Studio Codeの画面表示の配色は、配色テーマ(Color Theme)のメニューで設定します。
デフォルト状態では黒色で配色されたダークテーマ(Dark Modern)が設定されています。
標準で白色で配色されたライトテーマ(Light Modern)など複数の配色テーマが用意されています。
配色テーマ設定の変更は、画面左下の歯車アイコン(管理メニュー)、またはコマンドパレットから行うことができます。

Color Themes(Visual Studio Code 公式ドキュメント)

カラーテーマの変更手順

画面左下の歯車アイコン(管理メニュー)を選択します。
“Themes(テーマ)"にある、"Color Theme(配色テーマ)"を選択します。

 VS Codeカラーテーマメニューを表示(VS Codeのカラーテーマ設定手順)
コマンドパレット(Ctrl+Shift+P)からも設定を表示できます。
“Preferences: Color Theme"と入力して選択します。		 コマンドパレットからカラーテーマメニューを表示(VS Codeのカラーテーマ設定手順)
選択できるThemes(テーマ)の一覧が表示されます。
“Light Modern"を選択すると背景の表示を白くできます。		 標準で選択できるカラーテーマ(VS Codeのカラーテーマ設定手順)
カラーテーマでライトテーマを選択した場合(VS Codeのカラーテーマ設定手順)

各配色テーマ(Color Theme)の画面表示例

標準で用意されている配色テーマ(Color Theme)の画面表示です。

配色テーマの画面表示例
Light Modernなど、白色が中心に配色されたライトテーマを選択した場合の画面例です。 【Light 2026】
カラーテーマでLight 2026を選択した場合(VS Codeのカラーテーマ設定手順)
【Light (Visual Studio)】
カラーテーマでLight(Visual Studio)を選択した場合(VS Codeのカラーテーマ設定手順)
【Light Modern】
カラーテーマでLight Modernを選択した場合(VS Codeのカラーテーマ設定手順)
Dark Modernなど、黒色が中心に配色されたライトテーマを選択した場合の画面例です。 【Dark 2026】
カラーテーマでDark 2026を選択した場合(VS Codeのカラーテーマ設定手順)
【Dark (Visual Studio)】
カラーテーマでDark(Visual Studio)を選択した場合(VS Codeのカラーテーマ設定手順)
【Dark Modern】
カラーテーマでDark Modernを選択した場合(VS Codeのカラーテーマ設定手順)
【Monokai Dimmed】
カラーテーマでMonokai Dimmedを選択した場合(VS Codeのカラーテーマ設定手順)
その他にもいろいろなテーマが用意されています。 【Quiet Light】
カラーテーマでQuiet Lightを選択した場合(VS Codeのカラーテーマ設定手順)
【RED】
カラーテーマでREDを選択した場合(VS Codeのカラーテーマ設定手順)

Visual Studio Codeのメニュー表示を日本語化する手順

Visual Studio Codeのメニュー表示を日本語に変更する場合の手順です。
通常インストール直後は、メニュー表示が英語となっています。
日本語の言語パック(Japanese Language Pack for Visual Studio Code)をインストールし、表示言語を日本語に切り替えます。

Japanese Language Pack for Visual Studio Code(Marketplace)
Display Language(Visual Studio Code 公式ドキュメント)

日本語化手順

Visual Studio Codeを起動します。
メニューバーのViewにある"Command Palette"を選択します。

※Ctrlキー+Shiftキー+PでもCommand Paletteを表示できます。

 コマンドパレットを表示(VS Codeの日本語化設定手順)
Command Paletteに"Language"と入力します。
“Configure Display Language"を選択します。		 コマンドパレットで言語メッセージを表示(VS Codeの日本語化設定手順)
日本語(ja)を選択します。
言語パックのインストールが開始されます。		 日本語の言語モジュールをインストール(VS Codeの日本語化設定手順)

再起動の確認メッセージが表示されます。
Restartを選択して、Visual Studio Codeを再起動します。

 VS Code再起動確認メッセージ(VS Codeの日本語化設定手順)
メニューが日本語で表示されていることを確認できます。 日本語化済みのVS Codeを起動した後の画面(VS Codeの日本語化設定手順)
拡張機能を表示すると、Japanese Language Pack for VS Codeがインストールされていることを確認できます。

—広告—

最後に

Visual Studio Codeのインストール、画面の色の変更、日本語化までの初期設定手順を確認しました。
Visual Studio Codeには多くの拡張機能が提供されており、カスタマイズすることで非常に使いやすいエディタになります。
引き続き、いろいろ試してみたいと思います。

Visual Studio CodeでGitHub Copilotを使用するための設定手順については、こちらで紹介しています。

Visual Studio CodeのGitHub Copilotで、Azure OpenAIのモデルを使用する方法については、こちらで紹介しています。

Visual Studio CodeでAzure CLIやAzure PowerShellを使うための設定手順を紹介しています。

Windows環境へのPythonのインストール手順については、こちらで紹介しています。

Tera Termのインストールから表示の日本語化、文字化け対応の手順を紹介しています。

スポンサーリンク

Others,VS Code,Windows