VSCode

VSCodeを日本語で使おう!日本語化でエラーメッセージやメニューをわかりやすく

VSCodeの日本語化でメッセージやメニューの理解がラクに

VSCode(Visual Studio Code)を日本語化することで、エラーメッセージやメニューの理解が格段にラクになります。
本記事では、これからプログラミングを始める人向けに、VSCodeを日本語化する方法と、その設定後に行える便利なカスタマイズについて解説します。

VSCodeを日本語化する手順

VSCodeを日本語化する手順を解説します。

STEP1:VSCodeを開く

まずは、VSCodeを開始します。アプリケーションがインストールされていない場合は、公式サイト(Visual Studio Code)からダウンロードしてインストールしてください。

STEP2:拡張機能のビューを開く

VSCodeの左サイドバーにある「拡張機能」アイコン(四角い形に4つの四角が並んでいるアイコン)をクリックして、拡張機能のビューを開きます。

拡張機能のビューを開く

STEP3: 日本語パックを検索

拡張機能の検索バーに「Japanese Language Pack」と入力し、検索結果から「Japanese Language Pack for Visual Studio Code」を見つけます。

「Japanese Language Pack」と入力

STEP4: インストールをクリック

検索結果で見つかった日本語パックの「インストール」ボタンをクリックします。インストールが完了すると、VSCodeを日本語で利用できるようになります。

「インストール」ボタンをクリック

STEP5: VSCodeの再起動

日本語パックのインストール後、VSCodeを再起動します。これで、インターフェースが日本語化されているはずです。

インターフェースが日本語化されている

STEP6: 設定の確認(必要に応じて)

もし日本語化が反映されない場合は、以下の手順で「日本語」が選択されているか確認しましょう。

  1. Ctrl+Shift+P (Windows/Linux) または Cmd+Shift+P (Mac) を押して、コマンドパレットを開きます。
  2. コマンドパレットに「Configure Display Language」と入力して該当するコマンドを選択します。
  3. インストール済みの言語パック一覧から、「ja」または「Japanese」を選びます。これで、VSCodeのUIが日本語に切り替わります。
  4. 設定が適用されるように、VSCodeを再起動します。
日本語が選択されているか確認

VSCode日本語化後のカスタマイズ

日本語化設定後におすすめのカスタマイズ設定を紹介します。

テーマの変更

テーマの変更は、エディタの見た目を自分好みにカスタマイズし、視認性を高めるために大切です。暗いテーマは目の疲れを軽減し、明るいテーマは明るい環境での視認性を高めます。

テーマの変更手順

STEP1:コマンドパレットを開く

Ctrl+Shift+P (Windows/Linux) または Cmd+Shift+P (Mac) を押して、コマンドパレットを開きます。

コマンドパレットを開く
STEP2: テーマ設定を検索

コマンドパレットに「Color Theme」と入力し、表示された「Preferences: Color Theme」を選択します。

「Preferences: Color Theme」を選択
STEP3: テーマの選択

矢印キーを使って、使用したいテーマを選択します。VSCodeには標準で多数のテーマが用意されており、ダークテーマやライトテーマなど、好みに合わせて選ぶことができます。

ダークテーマやライトテーマなど、好みに合わせて選ぶ

フォントの調整

フォントの調整は、読みやすさを向上させるだけでなく、コーディングの効率を上げるためにも重要です。プログラミング用フォントは、ゼロと大文字のOのように、似ている文字の区別を容易にします。

フォントの調整手順

STEP1:設定を開く

画面左下の歯車アイコンをクリックし、「設定」を選択します。
ショートカットキー: Ctrl + , (Windows/Linux) または Cmd + , (Mac)

STEP1:設定を開く
STEP2:ユーザー設定にアクセス

画面の上部にある検索バーに「フォント」と入力します。関連する設定がフィルタリングされ、簡単にアクセスできるようになります。

STEP2:ユーザー設定にアクセス
STEP3:フォントファミリーの変更

「Editor:Font Family」の設定を見つけ、好みのフォントファミリーに変更します。例えば、「’Fira Code’, ‘Consolas’, ‘Courier New’, monospace」のように入力します。

フォントファミリーの変更

「Fira Code」はプログラミング用にデザインされたフォントで、リガチャ(特定の文字列を美しい合字で表示する機能)をサポートしてくれるためコードの可読性が向上します。

「Consolas」や「Courier New」は広く利用されているモノスペースフォントで、文字の幅が一定であるため、コードの構造が視認しやすくなります。

フォント名はシングルクォーテーションで囲み、複数指定する場合はカンマで区切ります。

STEP4:リガチャの有効化(オプション)

「Fira Code, JetBrains Mono, Consolas」のようなリガチャをサポートするフォントを使用している場合、リガチャを有効化することで、特定の文字表示を変更できます。

リガチャの有効化は、「Editor:Font LIgatures」から「settings.json」をクリックし、表示されたファイルに「”editor.fontLigatures”: true」と記入します。

Fira Codeの場合、主に記号の表示が大きく変化します。テキストなどで学習を進めている人は、表示が変わるため混乱してしまう可能性があります。

Fira Code適用前

Fira Code適用前

Fira Code適用後

Fira Code適用後

これで、VSCodeのフォントの調整は完了です。好みに合わせて調整してみてください。

拡張機能の追加

拡張機能を追加することで、VSCodeの機能を拡張し、開発効率を大幅に向上させることができます。拡張機能のインストール方法とプログラミングを始めたばかりの人におすすめの拡張機能を紹介します。

拡張機能のインストール手順

STEP1:拡張機能ビューを開く

左サイドバーにある「拡張機能」アイコン(四角が縦に並んだマーク)をクリックします。

拡張機能ビューを開く
STEP2:拡張機能を検索

上部にある検索ボックスに、インストールしたい拡張機能の名前を入力します。

拡張機能を検索
STEP3:拡張機能をインストール

検索結果から選択し、拡張機能のページを開きます。そこにある「インストール」ボタンをクリックします。

拡張機能をインストール
STEP4:インストール完了

インストールが完了すると、拡張機能が自動的に有効になります。一部の拡張機能では、VSCodeの再起動が必要な場合もあります。

おすすめの拡張機能

Python
Python

コードを書きながら間違いをすぐに指摘してくれる拡張機能です。書きたいコードの一部を自動で完成させてくれる自動補完機能、問題を見つけやすくするデバッグ機能があり、Python学習がぐっと楽になります。

Prettier – Code formatter
Prettier - Code formatter

コードを美しく整形してくれる拡張機能です。コードを書く際に、時々行の長さやインデントなどで統一感がなくなりがちですが、Prettierを使うと、一定のルールに基づいて自動的にコードを整えてくれます。

Live Server
Live Server

ローカルサーバーを立ち上げ、Webページをリアルタイムでプレビューできる拡張機能です。 HTMLやCSSを編集しているときに、変更が即座にブラウザに反映されるため、ウェブ開発の学習が効率的に行えます。

GitLens — Git supercharged
GitLens — Git supercharged

コードの履歴や変更点を詳細に追跡できる拡張機能です。各行のコードがいつ誰によって編集されたかを表示し、過去のコミットを簡単に探索できます。また、ブランチ間の差分の確認や、プルリクエストの管理など、チームでの共同作業をサポートする機能も充実しています。

ショートカットキーの設定

ショートカットキーのカスタマイズにより、よく使用する機能へのアクセスが迅速になり、コーディングの効率が上がります。以下の手順で設定の変更が可能です。

ショートカットキーの設定変更方法

STEP1: コマンドパレットを開く

VSCodeで Ctrl+Shift+P (Windows/Linux) または Cmd+Shift+P (Mac) を押し、コマンドパレットを開きます。

STEP2:ショートカットキー設定を開く

コマンドパレットに「キーボード ショートカット」と入力し、「キーボード ショートカットを開く」を選択します。

ショートカットキー設定を開く
STEP3:ショートカットキーを検索する

ショートカットキー設定タブが開きます。ここで、変更したいショートカットの機能名を検索バーに入力して見つけます。

ショートカットキーを検索する
STEP4:ショートカットキーを編集する

変更したいショートカットキーの行をクリックし、「キーバインドの変更」を選択します。新しいキーバインド(ショートカットキーの組み合わせ)を入力し、Enter を押して確定します。

STEP5:変更を保存する

自動的に変更が保存されます。設定ウィンドウを閉じて完了です。

便利なショートカットキー(デフォルト設定)

以下は、開発効率を上げるために役立つ便利なショートカットキーです。

コマンドWindowsMac
ファイル間の移動Ctrl+TabCmd+Tab
コマンドパレットの表示Ctrl+Shift+PCmd+Shift+P
ファイルの保存Ctrl+SCmd+S
ファイルの新規作成Ctrl+NCmd+N
サイドバーの表示/非表示Ctrl+BCmd+B
ファイル検索Ctrl+PCmd+P
現在のファイル内での検索Ctrl+FCmd+F
現在のファイル内での置換Ctrl+HCmd+H

VSCodeを日本語にして効率を上げよう

今回は、VSCodeを日本語化する方法と、その設定後に行える便利なカスタマイズについて解説しました。日本語の拡張機能を導入することで、メニューなどの理解が容易になり、作業効率を格段に上げられます。学習スピードを上げるためにも、ぜひ導入してみてください。