カラーテーマの設定
カラーテーマは、視覚上のインパクトがもっとも大きな設定項目です。好みの設定を探すのも楽しいでしょう。
ワークベンチ―外観―Color Theme
ワークベンチの配色テーマです。ワークベンチとは作業スペースのことで、ウィンドウのアクティビティバー、ステータスバーを除いた部分です。デフォルトでは「Dark+（既定のDark）」という黒地を基本とした配色となります。黒地が苦手という人は、「Light+（既定のLight）」や「Light （Visual Studio）」などの白地のテーマに切り替えるとよいでしょう（図6）。
ウィンドウ―Auto Detect Color Scheme
この項目にチェックを入れると、OSの外観モードなどに合わせて配色テーマを自動的に切り替えられます。外観モードがダークであればWorkbench Prefered Dark Themeの設定が、ライトであればWorkbench Prefered Dark Themeの設定が、それぞれ使用されます。これらはそれぞれ、OSの外観モードがダークおよびライトであるときに使われる配色テーマです。デフォルトでは「Dark+（既定のDark）」および「Light+（既定のLight）」になっています。
［NOTE］OSの外観モードの設定
OSの外観モードは、以下のように設定できます。macOS Montereyでは、［システム環境設定］―［一般］―［外観モード］です。ライト、ダーク、自動から選択できます。
Windows 10では、［設定］―［個人用設定］―「色」―［色を選択する］です。ライト、ダーク、カスタムから選択できます。自動、カスタムともに最終的にはライト、ダークに決まるので、必ずOSの設定に合わせた配色テーマとすることができます。
自動更新の設定
VSCodeは、常に改良が行われており、定期的にアップデートが提供されます。不具合が改善されるのはもちろんのこと、機能の追加もありますから、基本的に最新版でVSCodeを利用するようにしましょう。
デフォルトでは、更新の有無は自動的にチェックされ、更新版があれば図7のようにポップアップが表示されます。［今すぐ更新］をクリックすれば、更新が実行されてVSCodeが再起動します。
更新に関する設定があり、更新の有無の確認タイミングなどを指定できます。アプリケーション―更新―Modeで選択します。
- none：更新を適用しない
- manual：手動でチェックするのみ
- start：VSCodeの起動時のみチェックする
- default：定期的にチェックする（デフォルト）
基本的にはdefaultで問題ありませんが、作業中に割り込まれるのがイヤだとかいう場合には、startかmanualを選択します。manualを選択した場合には、［Code］―［更新の確認...］（macOS）、［ヘルプ］―［更新の確認...］（Windows）から更新の有無を確認できます。
ワークスペースとフォルダー
ここまで基本的な設定を見てきましたが、これらの設定は、いくつかの異なる場所に保存されます。エディターグループに「設定」タブが追加されると、「設定の検索」テキストボックスの下に「ユーザー」「ワークスペース」「XXXXX フォルダー」（XXXXXはフォルダー名）といったタブが表示されています（フォルダーは、ワークスペースにフォルダーを追加しているときのみ現れる）。
これをクリックして（フォルダーの場合はプルダウンからフォルダーを選択して）切り替えると、同じ項目が並んでいることに気付くでしょう。つまり、設定はユーザーレベル、ワークスペースレベル、フォルダーレベルで別々に行うことが可能です。
- ユーザー設定：VSCode全体に適用される基本的な設定。ファイルを単独で開いた場合にはこれが適用される
- ワークスペースの設定：ワークスペースに適用される設定。ユーザー設定を上書きする
- フォルダーの設定：ワークスペース内のフォルダーに適用される設定。ユーザーの設定、ワークスペースの設定を上書きする
タブを切り替えないで設定を行うと、それはユーザー設定となりますが、ワークスペース、フォルダーに切り替えて設定を行うと、それはワークスペースとフォルダー独自の設定となり、ユーザー設定を上書きします。そこで、ワークスペースとフォルダーについて紹介しておきましょう。
ワークスペース
ワークスペースとは、目的に応じて複数のフォルダをまとめて管理する仕組みです。同じプログラミング言語を使うプロジェクトをまとめたり、研究用と業務用でワークスペースを分けたりと、設定を共有したいフォルダをまとめて設定できるので非常に便利です。
ワークスペースは、ファイルを単独で開いていない限り、既定で有効になっています。以下の操作が可能です。
- ［ファイル］―［フォルダーをワークスペースに追加...］でフォルダーを追加できる（複数可）
- ［ファイル］―［名前を付けてワークスペースを保存...］でワークスペースを保存できる
- ［ファイル］―［ファイルでワークスペースを開く...］でワークスペースを開く
- ［ファイル］―［ワークスペースを閉じる］でワークスペースを閉じる
1. で追加するフォルダーはどこの階層にあってもよいことになっています。追加したフォルダーは、2. でワークスペースのファイルに保存されます。保存するファイル名はworkspace.code-workspaceがデフォルトですが、もちろん任意の名前を指定できます。そしてそのファイルは3. で読み込むことで、ワークスペースが復元されます。ワークスペースが開いている場合、4. あるいは［Command］＋［K］［F］／［Ctr］l＋［K］［F］で閉じることができます。なお、ワークスペースは、下記のフォルダーとは排他的に利用することになっています。
フォルダー
フォルダーは、ワークスペースよりも単純な仕組みです。文字どおり、あるフォルダーのみを取り扱います。フォルダーは、以下の操作が可能です。
- ［ファイル］―［フォルダーを開く...］でフォルダーを開く
- ［ファイル］―［フォルダーを閉じる］でフォルダーを閉じる
この通り、1. あるいは［Command］＋［F］［Command］＋［O］／［Ctrl］＋［F］［Ctrl］＋［O］で開いて、2. あるいは［Command］＋［K］［F］／［Ctrl］＋［K］［F］で閉じるだけなので、非常に単純です。既出の通り、フォルダーはワークスペースと排他的に利用することになっています。ただし、フォルダーをワークスペースに含める場合はその限りではありません。
設定の保存場所
3つの設定の保存場所は、以下の通りです。
- ユーザー設定
macOSでは$HOME/Library/Application Support/Code/User/settings.jsonファイルに、Windowsでは%APPDATA%\Code\User\settings.jsonファイルに保存されます。なお、$HOMEはmacOSにおける/users/naoなど、%APPDATA%はWindowsにおけるC:\Users\nao\AppData\Roamingなどのフォルダを表します。
- ワークスペースの設定
macOS、Windowsともに、保存したワークスペースのファイル（workspace.code-workspaceなど）に、設定も保存されます。
- フォルダーの設定
macOS、Windowsともに、フォルダー内の.vscode/settings.jsonファイルに保存されます。
settings.jsonで編集
設定項目のうち、「settings.json で編集」と表示されているものは、その意味の通りsettings.jsonファイルで直接設定項目を書き換えます（ワークスペースではworkspace.code-workspaceなど）。例えば、「テキスト エディター」カテゴリの「フォント」にある「Font Weight」で［settings.json で編集］をクリックすると、エディターグループにsettings.jsonタブ（workspace.code-workspaceタブ）が追加され、対応する項目にカーソルがセットされた状態で開かれます。
{
"workbench.colorTheme": "Default Dark+",
"explorer.confirmDelete": false,
"editor.fontWeight": "normal" ←ここにカーソルがセットされる
}
このとき、項目名や値にマウスポインタを乗せると説明が表示されます。項目を編集して反映するには、settings.jsonファイル（workspace.code-workspaceファイル）の保存が必要です。
設定を同期する
複数のデバイスでVSCodeを使う場合、設定を同期すると便利です。設定の同期には、MicrosoftアカウントかGitHubアカウントが必要なので、どちらかをあらかじめ取得しておきます。両者に機能上の違いは出ないので、都合のよい方を取得しておきましょう。筆者は、手持ちのMicrosoftアカウントで進めました。
アクションバーにある
アイコンをクリックすると、メニューがプルダウンします。メニューに「どのアカウントにもサインインしていません」と表示されているのを確認して、［設定の同期をオンにする...］をクリックします（図10）。
エディターグループ上部に「設定の同期」というメニューがプルダウンするので、青い［サインインしてオンにする］をクリックします（図11）。このとき、［設定］～［UIの状態］まですべてチェックが入っていて構いません。
メニューに［Microsoft でサインイン］［GitHub でサインイン］が表示されるので、使用する方を選択します（図12）。双方とも、Webブラウザが開いてサインインのページになるので、必要事項を入力してサインインします。「You are signed in now and can close this page.」とページに表示されたらサインインは完了です。ページは閉じてしまって構いません。
ウインドウ右下に「設定の同期（ログを表示）がオンになりました」と表示され、アイコンのクリックで表示されるプルダウンにサインインしたアカウントが表示されていれば、設定の同期は始まっています。設定の同期が不要になったら、ここから［サインアウト］を選択すればサインアウトできます。
今回登場のショートカットキー
| 機能 | macOS | Windows |
|---|---|---|
| 設定を開く | [Command]＋[,] | [Ctrl]＋[,] |
| フォルダーを開く | [Command]＋[F] [Command]＋[O] | [Ctrl]＋[F] [Ctrl]＋[O] |
| フォルダーを閉じる | [Command]＋[K][F] | [Alt]＋[K][F] |
| ワークスペースを閉じる | [Command]＋[K][F] | [Alt]＋[K][F] |
まとめ
今回は、VSCodeの設定について、基本的な設定、ワークスペース、フォルダー、設定の同期、カラーテーマなどを見てみました。
次回は、VSCodeの利用の幅をグッと拡げる拡張機能を紹介します。
