ジャンルから探す

Web Design & Dev English

VSCodeを日本語化する方法【Mac】インストールから表示切り替えまで

VSCode(Visual Studio Code)を日本語表示にする手順を、Macの画面付きでまとめました。

結論から書くと、コマンドパレットで「Configure Display Language」を選び、一覧から日本語を選んで再起動するだけです。拡張機能ビューを開いて言語パックを探しにいく必要はありません。

私が確認したのは、macOS 上の Visual Studio Code 1.135.0 です。この記事では、インストールから日本語表示に切り替えるところまでを順に書きます。あわせて、以前のバージョンで使われていた「Install Additional Languages…」を経由する手順も残しておきます。

スポンサーリンク

VSCodeを日本語化する手順は3ステップ

結論:コマンドパレットを開く → Configure Display Language を選ぶ → 日本語を選んで再起動する、の3ステップで終わります。

  1. コマンドパレットを開く(Macは shift + command + p)
  2. 「Configure Display Language」を選ぶ
  3. 一覧から「日本語(ja)」を選び、再起動する

Visual Studio Code は初期状態では英語表記です。日本語表示にするには、Microsoft が配布している日本語言語パック(拡張機能ID: ms-ceintl.vscode-language-pack-ja)が必要になります。ただし現在のバージョンでは、上の手順3で日本語を選んだ時点でこの言語パックが自動でインストールされます。

以下、それぞれのステップを画面付きで解説します。

Visual Studio CodeをMacにインストールする

結論:公式ページからzipをダウンロードし、解凍したアプリをそのままダブルクリックすれば起動します。まだ入れていない人向けの手順です。すでにインストール済みなら次の見出しへ進んでください。

Visual Studio Codeの公式ダウンロードページへアクセスし、お使いのOSに合ったインストーラーをクリックします。この記事ではMacで進めます。

Visual Studio Code 公式サイトのダウンロードページ

ダウンロードしたzipファイルをダブルクリックして解凍し、出てきた Visual Studio Code をダブルクリックすると、下記の画面が開きます。この状態ではメニューもサイドバーもすべて英語です。

英語表記のまま起動したVisual Studio Codeの初期画面

1. Visual Studio Codeを開く

Visual Studio Code のアイコンをダブルクリックして開きます。ここから先の操作は、すべてこのウィンドウの中で完結します。

2. コマンドパレットを開く

結論:メニューバーの View > Command Palette、またはショートカットの shift + command + p で開きます。

コマンドパレットは、VSCode のあらゆる操作をキーワード検索から呼び出せる入力欄です。日本語化の設定もここから行います。

Visual Studio CodeのメニューバーからCommand Paletteを開いたところ

3. Configure Display Language を選ぶ

結論:コマンドパレットに「display」と打つと候補が絞り込まれるので、「Configure Display Language」を選びます。

コマンド名をすべて入力する必要はありません。数文字打った時点で候補に出てきます。

コマンドパレットでConfigure Display Languageを検索したところ

4. 日本語を選んで再起動する

結論:選択できる言語の一覧が出るので「日本語(ja)」を選びます。言語パックが未インストールなら自動でダウンロードされ、再起動を促すポップアップが出ます。

ポップアップ内の「Restart」をクリックすれば再起動されます。VSCode をいったん閉じて立ち上げ直しても同じです。

再起動後に日本語表記になったVisual Studio Codeの画面

再起動後にメニューバーやサイドバーが日本語になっていれば完了です。

スポンサーリンク

拡張機能ビューから言語パックを入れる方法もある

結論:コマンドパレットを使わず、拡張機能ビューで「Japanese Language Pack」を検索してインストールしても日本語化できます。結果は同じなので、好きなほうを選んでください。

以前のバージョンの VSCode では、「Configure Display Language」を選んだあとに「Install Additional Languages…」をクリックし、拡張機能ビューへ移動する手順が挟まっていました。現在は言語の一覧から直接選べるようになっていますが、拡張機能ビューから入れる経路自体は今も使えます。

Install Additional Languagesをクリックして拡張機能ビューへ移動したところ

拡張機能ビューの一覧から「Japanese Language Pack for Visual Studio Code」を選び、開いた画面の「Install」をクリックします。発行元は Microsoft(MS-CEINTL)で、拡張機能IDは ms-ceintl.vscode-language-pack-ja です。同じ名前の非公式な拡張機能と間違えないよう、発行元を確認してから入れてください。

拡張機能ビューでJapanese Language Pack for Visual Studio Codeを選んだところ

英語表記に戻したいときはどうするか

結論:同じ「Configure Display Language」を開き、一覧から「English (en)」を選んで再起動すれば戻ります。

日本語言語パックをアンインストールする必要はありません。表示言語の設定と言語パックの有無は別物なので、パックを入れたまま英語表示で使うこともできます。

英語のエラーメッセージをそのまま検索したい場面では、英語表記のほうが情報を見つけやすいこともあります。切り替えは何度でもできるので、使いながら決めれば十分です。

日本語化のあとにやると作業が速くなること

結論:日本語化は入口です。拡張機能とキーバインドを整えたほうが、コーディングの速度は目に見えて変わります。

VSCode は素の状態でも十分に使えますが、Webコーディングで毎日触るなら、自分の用途に合わせて手を入れる価値があります。私が実際に入れているものと、逆に今は入れなくてよくなったものはVSCodeのおすすめ拡張機能7つにまとめました。標準機能に取り込まれて不要になった拡張機能もあるので、古い記事のまま入れっぱなしになっていないか確認してみてください。

キー操作そのものを速くしたい場合は、VSCodeでVimを使う手順も参考になります。Vim のキーバインドとモード切り替えを VSCode の中でそのまま使えるようになります。

ターミナル側の見た目と補完を整えたい場合は、MacターミナルをIcebergとPrezto+pureで設定する手順もあわせてどうぞ。エディタとターミナルの配色を揃えると、画面を行き来したときの負担が減ります。