検索
連載

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

配色テーマのカスタマイズを例に、コマンドパレット/[設定]エディタ/settings.jsonファイルを使ったカスタマイズの方法と、設定を同期する方法を紹介します。

PC用表示 関連情報
Share
Tweet
LINE
Hatena

[設定]エディタ

 コマンドパレットで「open settings」などと入力をして、[基本設定: 設定(UI)を開く](Preferences: Open Settings (UI))を選択するか、Windows/Linuxでは[Ctrl]+[,]キーを、macOSでは[Command]+[,]キーを押すことで、[設定]エディタがエディタ領域に表示されます。

[設定]エディタ
[設定]エディタ

 [設定]エディタはVS Codeでカスタマイズ可能な多くの設定へのアクセスを提供するユーザーインタフェースとなっています。エディタの最上部には、設定項目を検索するためのボックスがあり、その下には[ユーザー]と[ワークスペース]の2つのタブがあります(これについてはこの後で説明します)。その下には、設定項目をまとめた見出しが左側に個々の設定項目が右側に並んでいます([設定]エディタ上部にある[設定の同期をオンにする]については後述します)。

 このエディタでは次の2種類の設定を変更可能です。

  • ユーザー設定:VS Codeの既定の設定を上書きし、VS Codeを起動したときに以下のワークスペース設定がない限りは、全てのウィンドウに適用される設定(ユーザー固有)
  • ワークスペース設定:特定のワークスペース/フォルダに限って適用される設定

 なお、ワークスペースとは複数のフォルダを1つの作業フォルダのように扱うためにVS Codeで採用されている考え方です。単一のフォルダの下に、プロジェクトの全ファイルが格納されている場合はフォルダ=ワークスペースと考えてよいでしょう。

 このユーザー設定とワークスペース設定のどちらをカスタマイズするかを決めるのが、エディタ上部にある[ユーザー]と[ワークスペース]の2つのタブということです。これらの使い分け方ですが、プロジェクトごとに固有に設定をした方がよいものはワークスペース設定を使ってカスタマイズし、それ以外はユーザー設定としてカスタマイズするのがよいでしょう。

 ここでは例として、先ほど見た配色テーマを[設定]エディタを使ってカスタマイズする方法を見てみましょう。[設定]エディタのテキストボックスに「color theme」などと入力すると以下のように表示が変わります。

配色テーマを[設定]エディタで検索
配色テーマを[設定]エディタで検索

 [ユーザー]タブの下に[Workbench: Color Theme]という項目が表示されて、その値が先ほど設定した[Ayu Light Bordered]になっていることが分かります。ここでドロップダウンをクリックすれば、次のようにこのUIからでも配色テーマを変更できます。

[設定]エディタでも配色テーマを変更可能
[設定]エディタでも配色テーマを変更可能

 ここで[ワークスペース]タブに切り替えてみるとどうなっているでしょうか。

[ワークスペース]タブに切り替えてみたところ
[ワークスペース]タブに切り替えてみたところ

 「Workbench: Color Theme」の隣に「変更されています: ユーザー」とあり、先ほど[ユーザー]タブで行った設定でVS Codeの既定値が上書きされていることが分かります(が、ワークスペース設定での値はVS Codeの既定値のままとなっています。実際には、ドロップダウンでワークスペース設定を明示的に上書きしない限り、この値は無視されます)。

 ここでワークスペース設定の方を何か適当な値に変更してみましょう。ここでは[Light+]にしました。

ワークスペース設定で配色テーマを[Light+]に変更
ワークスペース設定で配色テーマを[Light+]に変更

 これにより、VS Codeの配色は次のように変わります。

変更された配色
変更された配色

 これはVS Codeの既定値である[Dark+]をユーザー設定の[Ayu Light Bordered]で上書きしたものを、さらにワークスペース設定の[Light+]で上書きした状態です。ここで、いまオープンしているフォルダを閉じるとどうなるでしょうか。フォルダを閉じてみます(これにはWindows/Linuxでは[Ctrl]+[K]→[F]キーを、macOSでは[Command]+[K]→[F]キーを押します)。

フォルダを閉じたので、ワークスペース設定の効果がなくなり、ユーザー設定で指定した[Ayu Light Bordered]が有効になった
フォルダを閉じたので、ワークスペース設定の効果がなくなり、ユーザー設定で指定した[Ayu Light Bordered]が有効になった

 これでユーザー設定とワークスペース設定の効果(有効範囲)がどのようになっているかが体感できたと思います。ここでもう一度、同じフォルダを読み込んで、[設定]エディタで[ユーザー]タブを選択すると、次のようにワークスペース設定でも変更されていることが分かるようになっています。

ワークスペース設定でも変更されていることが分かる
ワークスペース設定でも変更されていることが分かる

 ここで[Workbench: Color Theme]項目の左に歯車アイコンが表示されていることに気が付いた人もいるでしょう。これをクリックすると、次のようなメニューが表示されます。

歯車アイコンにより表示されるメニュー
歯車アイコンにより表示されるメニュー

 [設定をリセット]はもちろんVS Codeの既定値に戻すことを意味します。その次の[設定IDをコピー]は、このカスタマイズ項目に割り当てられているIDをテキストとしてクリップボードにコピーします。ここでは「workbench.colorTheme」というIDがコピーされます。このIDを使って、インターネットを検索するなどの用途にも使えますし、VS Codeの設定についてブログを書くときにもIDを間違えずに記述できるでしょう。[JSONとして設定をコピー]は、JSON形式(設定ID: 値」という形式。この場合は「"workbench.colorTheme": "Ayu Light Bordered"」)で設定IDとその値がコピーされます。[設定]エディタ右上にある[設定の同期をオンにする]ボタンをクリックして、もろもろの作業を行うと、[この設定を同期]という項目も表示されるようになりますが、これについては後述する設定の同期が有効なときにこの項目を同期するかどうかの指定です。

 このように、[設定]エディタを使った、カスタマイズの基本は検索ボックスに何らかの語句を入力して、求める項目が見つかったら、それを好きな値にするというものです。上で見たのはドロップダウンから設定値を選択するものでしたが、チェックボックスを使って有効/無効を指示するものや、[設定]エディタでは指定が難しいので、カスタマイズした設定を保存するsettings.jsonファイルを直接編集する必要があるものもあります。

 というわけで、次にsettings.jsonファイルについて見てみましょう。

Copyright© Digital Advantage Corp. All Rights Reserved.

[an error occurred while processing this directive]
ページトップに戻る