VSCodeを日本語化する
VSCodeのメニューやメッセージはデフォルトでは英語です。個人的には英語のままでの利用をお勧めしますが、英語はやはり苦手という方は、先に進む前にここで日本語化しておきましょう。日本語化は、「Japanese Language Pack for Visual Studio Code」というMicrosoft自身がリリースしている拡張機能を利用します。
日本語化は、以下の手順で行います。これは、拡張機能をインストールする場合の共通の手順となりますので、この機会に慣れておくことにしましょう。
すでに紹介した手順でVSCodeを起動します。一番左側のツールバー(アクティビティバーといいます)にある拡張機能アイコン をクリックします(図2)。すると、その内側のサイドバー(プライマリサイドバーといいます)の表示が「EXPLORER」(エクスプローラー)から「EXTENSIONS」(拡張機能)に変わります(図3)。
サイドバーの上部にある入力ボックスに、「japanese」と入力します。すると選択候補が下に現れますので、その中から地球儀のアイコンの付いた「Japanese Language Pack for Visual Studio Code」(全部は見えないかもしれません)に表示された、青い[インストール]をクリックします(図4)。サイドバーの右に「Japanese Language Pack for Visual Studio Code」の情報が表示されますので、青い[インストール]をクリックします(図5)。
ウインドウの右下に「in order to use VS Code in Japanese, …」と表示されますので、[Restart]をクリックします(図6)。再起動後、日本語になっているのを確認できるでしょう(図7)。以降は、日本語化したものとして解説を進めていきます。
[NOTE]自動で日本語化する
VSCodeを起動した直後に、ウインドウ右下に図8のようなポップアップが表示されたら、それは自動で日本語化できる合図です。[インストールして再起動 (Install and Restart)]をクリックすると、自動的にプラグインのインストールが実行されて再起動します。
[NOTE]拡張機能のアンインストール
インストールした拡張機能は、不要になったらアンインストールできます。例えば、ここでインストールした「Japanese Language Pack for Visual Studio Code」であれば、拡張機能アイコン をクリックした時点でプライマリサイドバーに表示されるはずです。それをクリックすると、エディタ画面に拡張機能の詳細が現れるので、[アンインストール]ボタンをクリックします。これで、拡張機能はアンインストールされます。
画面構成
日本語化も済んだので、先ほど少しだけ触れた画面構成を見ていきましょう。図9は、とあるプロジェクトの画面です。主な場所に番号を振りましたので、順番に紹介していきます。なお、これらは表示と非表示を切り替えたり、レイアウトをある程度自由に変更できたりします。図9では、これらを全て表示させていますが、レイアウトはほぼデフォルトのままとなっています。
1. キャプションバー
編集中のファイルやワークスペースが表示されるのがキャプションバーです。Windows版ではキャプションバーにメニューも表示されます(macOS版ではメニューはOSのメニューバーに統合される)。
キャプションバーには、ファイル名などのほかにショートカットアイコンが4個右側に表示されます。左から、以下の機能となっています。
- プライマリサイドバーの表示切り替え
- パネルの表示切り替え
- セカンダリサイドバーの表示切り替え
- レイアウトのカスタマイズ
それぞれのサイドバー、パネルについては後述します。
2. アクティビティバー
ウィンドウの左端にあり、タスク(作業)の内容を大きく切り替えるのがアクティビティバーです。アクティビティバーには、初期状態で上に5つ、下に2つのアイコンがあります。上から順番に、以下の機能となっています。
- エクスプローラー:ファイルやフォルダをツリー表示する
- 検索:検索を実行し、結果を表示する
- ソース管理:変更のあったファイルを一覧表示し、コミットも行う
- 実行とデバッグ:編集中のファイルから直ちに実行したり、デバッグしたりする
- 拡張機能:拡張機能をインストールしたり、アンインストールしたりする
- アカウント:サインイン中のユーザの情報や設定の同期を行う
- 設定:VSCodeのさまざまな設定を行う
3. プライマリサイドバー
アクティビティバーのアイコンのクリックによって表示され、対応する作業の場所となるのがプライマリサイドバーです。すでに日本語化の拡張機能をインストールしましたが、その際に検索を行い一覧を表示したのがプライマリサイドバーです。通常はエクスプローラーを表示させておくことが多いので、非常に利用頻度の高いサイドバーです。
4. エディタグループ
エディタとしてはある意味メインとなる部分がエディタグループです。開いているファイルをタブで表示したり、アクティビティバーの操作によって作業ページをタブで表示したりします。エディタグループ内では、エディタを左右または上下に分割したり、ファイルについては変更内容をdiff形式で表示したりすることができます。
5. セカンダリサイドバー
プライマリサイドバーのサブ的な位置付けとして使用できるのがセカンダリサイドバーです。今年(v1.64)になって追加された新しいサイドバーです。具体的には、初期状態ではプライマリサイドバーにある「アウトライン」や「タイムライン」をセカンダリサイドバーに移動し、縦長の状態で見やすくできるというものです。これについては、実際に「アウトライン」等が存在していた方がわかりやすいので、詳細は後続の回で改めます。
6. パネル
通常はエディタグループの下に表示され、問題の箇所、コンソール出力、デバッグコンソール、ターミナルなどを切り替えながら利用できるスペースがパネルです。エディタグループと並んで常時表示することが多いでしょう。編集中に発生している問題をリアルタイムで見たり、コンパイルメッセージや実行中のデバッグメッセージなどを表示させて確認したり、ターミナルでコマンド操作も可能になっています。パネルでも、上下左右の分割やターミナルで問題が発生した場合の強制終了など、いくつかの便利なショートカットアイコンが配置されています。
7. ステータスバー
ステータスバーには、Gitのブランチ名、GitHubへの発行ボタン、問題の発生状況、カーソル位置、タブのスペース数、文字コード、改行文字、プログラミング言語、フィードバックや通知のショートカットアイコンが表示されます。