ここから始めるVS Codeのカスタマイズ：Visual Studio Codeで快適Pythonライフ（3/3 ページ）

[かわさきしんじ，Deep Insider編集部]

JSONエディタ

　配色テーマは、VS Codeのウィンドウの各部の配色を一括して変更するものでした。では、そのうちの1カ所だけを変更したいというときにはどうすればよいでしょう。先ほどは［設定］エディタに「color theme」と入力しましたが、このとき、ウィンドウ下部に次のような項目が表示されていたのに気が付いた人はいるでしょうか。

settings.jsonファイルを直接編集する必要がある設定項目

　項目名は［Workbench: Color Customizations］となっていて、その下には説明があり、さらにその下に［settings.jsonで編集］というリンクが表示されています。この項目がまさにウィンドウの各部の配色をカスタマイズするためのものです。恐らく、項目数がかなり多いことや、ドロップダウンでの値の選択などが難しいことから［設定］エディタではなく、settings.jsonファイルを直接編集する必要があるのでしょう。

　そこで、このリンクをクリックすると、以下のように［settings.json］エディタが表示されます（ここでは［ユーザー］タブにあるリンクをクリックしたものとします）。

［settngs.json］エディタがオープンされたところ

　［settings.json］エディタでは、いきなりIntelliSenseによる補完が効いて、設定可能な項目が表示されています。上の方にある「[Abyss]」「[Ayu Light Bordered」などの候補は、選択された配色テーマごとに配色を細かくカスタマイズするための項目です。ここではsettings.jsonファイルの編集方法を見るだけなので、［ESC］キーを押すか、候補以外の場所をクリックするかして、候補をいったん消しておきましょう。

　これから編集するのは「"workbench.colorCustomizations"」という項目ですが、その上に「"workbench.colorTheme"」という項目があり、その値が「"Ayu Light Bordered"」になっている点にも注意してください。これはまさに上で設定した配色テーマの設定IDとその値です。このように、［設定］エディタでカスタマイズした項目についても実際にはsettings.jsonファイルにその内容が保存されます（その上にはVS CodeにPython拡張機能をインストールした際に自動的に設定されたカスタマイズの内容も含まれています）。

　では、「"a」と入力してみましょう。すると、再度候補が表示されるので、ここでは「"activityBar.background"」を選んで［Tab］キーを押してください。

「"activityBar.background"」を選んで［Tab］キーを押す

　これにより、アクティビティーバーの背景色を指定するJSON形式の項目のひな型がsettings.jsonファイルに挿入されるので、その値を「#008888」にしてみましょう。

アクティビティーバーの背景色の設定を変更

　ファイルを保存すると、次のようにアクティビティーバーの背景色が変更されるのが分かるはずです。

アクティビティーバーの背景色が変更された

　このように、settings.jsonファイルを直接編集することでカスタマイズが可能な項目もあることは覚えておきましょう。なお、上で少し話をした配色テーマごとのカスタマイズを行うための「[Ayu Light Bordered]」などは次のようにして使えます。

{
    // 省略
    "workbench.colorCustomizations": {
        "[Default Light+]": {
            "activityBar.background": "#008888"
        },
        "[Ayu Light Bordered]": {
            "activityBar.background": "#00ffff"
        }
    }
}

settings.jsonでのカスタマイズの例

　ここでは配色テーマが「Default Light+」のときと、「Ayu Light Bordered」のときとでアクティビティーバーの背景色を別の色に変更しています。このような設定方法もVS Codeのカスタマイズや設定ではよく見られるので（Pythonでコードを書いているときと、TypeScriptでコードを書いているときとで、設定を変えたいときなどが特にそうです）、徐々に慣れていくようにしましょう。

　なお、配色テーマの一部をカスタマイズしたいという方はVS Codeのドキュメント「Theme Color」に詳しい情報が記載されているので、そちらも参照してください。

設定の同期

　最後に設定の同期について簡単に紹介します（2021年6月9日時点では、この機能はまだプレビュー段階となっています）。設定の同期とは、MicrosoftアカウントかGitHubアカウントのいずれかを利用して、設定を同期することで、別のマシンでVS Codeを使用するときにも、いつものカスタマイズ内容をその環境に適用するものです。

　同期されるものとしては、今見たようなカスタマイズした設定、ショートカットキー、拡張機能、UI状態などです。設定の同期を有効にするには、先ほども見たように［設定］エディタの右上にある［設定の同期をオンにする］ボタンをクリックします（あるいは、アクティビティーバーの下から2つ目の［アカウント］アイコンをクリックして、［設定の同期をオンにする］を選択します）。

［設定の同期をオンにする］ボタン

　設定の同期機能がプレビュー段階にあることを知らせるダイアログが表示されたら、ドキュメントを読んだ上で［オンにする］ボタンをクリックしましょう。すると、同期する項目を選択するメニューと［サインインしてオンにする］ボタンがコマンドパレットに表示されます。

同期する項目を選択して［サインインしてオンにする］ボタンをクリック

　同期したい項目をチェックして（上では全選択）、［サインインしてオンにする］ボタンをクリックします。すると、サインインに使うアカウントの選択画面になります。

どのアカウントでサインインするかを選択する

　サインインはWebブラウザで行い、認証が終わったらブラウザのタブを閉じて、VS Codeに戻ります。

　これで同期がオンになりました。同期を行うのであれば、アクティビティーバーの下部にある歯車アイコン（［管理］アイコン）をクリックして、［設定の同期がオン］をクリックします。

［設定の同期がオン］をクリック

　すると、コマンドパレットに同期に関連する項目が表示されるので、適切なものを選択します。

［設定の同期がオン］をクリック

　例えば、手元のマシンの設定を同期するなら［設定の同期: 今すぐ同期する］を選択します（他の項目についてはここでは説明を省略します）。

　この機能はまだプレビュー段階であり、また、設定内容が衝突する可能性もあります。便利ですが、使うのであれば、VS Codeのドキュメント「Settings Sync」を参照した上で、注意点をよく理解した上で使うようにしましょう。

---

　今回はVS Codeをカスタマイズするはじめの一歩ということで、コマンドパレットから配色テーマをカスタマイズする方法、同じことを［設定］エディタで行う方法、settings.jsonファイルを使ったカスタマイズの方法、設定の同期について見ました。次回は覚えておくと便利かもしれない設定項目を紹介します。

「Visual Studio Codeで快適Pythonライフ」