Codeは多くの部分をユーザーが自由に設定できる。その基本と、IDEを中心とした設定項目を取り上げる。Codeの設定「虎の巻」:IDE編』をバージョン1.22に合わせて改訂したものです。Code)ではさまざまな部分をユーザーが自由に設定できるようになっている。画面の配色テーマもそうだし、エディタの表示方法も細かく調整できる。Codeの基本設定のカスタマイズについて見てみよう。Codeの設定について簡単にまとめておこう。1.22で動作を確認している(他の環境では異なる部分があるかもしれない)。Codeの設定には「ユーザー設定」と「ワークスペース設定」の2つがある(加えて、キーバインドの設定もあるが、これについては本稿では取り上げない。配色テーマとアイコンテーマは設定ファイルに記述されるので、以降で取り上げる)。Codeの設定で、その内容は以下のディレクトリに「settings.json」というファイル名で保存される。$HOME/.config/Code/Userなお、Windowsの%APPDATA%環境変数の値は通常「C:\Users\<ユーザー名>\AppData\Roaming」となる。macOSのHOME環境変数の値は通常「/Users/<ユーザー名>」に、Linuxの場合は「/home/<ユーザー名>」が一般的だ。ワークスペース設定は個別のワークスペースやプロジェクトごとの設定を行うもので、ユーザー設定よりもこちらが優先される。Codeで開いたワークスペースの最上位ディレクトリ直下にある.vscodeディレクトリに「settings.json」というファイル名で保存される。マルチルートワークスペース機能を利用して、複数のフォルダを1つのワークスペースに構成している場合には、カスタマイズした内容はマルチルートワークスペースの構成ファイル(.code-workspaceファイル)内に保存される。このとき、個々のフォルダに対して行っているワークスペース設定は、基本的にマルチルートワークスペースには適用されないようになっている。Codeで開いた場合には、個々のフォルダに対して行ったワークスペース設定は基本的には適用されず、マルチルートワークスペースに対して行った設定が適用される。ユーザー設定/ワークスペース設定(マルチルートワークスペース設定)を行うには、メニューバーの[ファイル]−[基本設定]−[設定](macOSでは[Code]−[基本設定]−[設定])を選択する。すると、以下に示すような[ユーザー設定]タブが表示される。[ユーザー設定]タブユーザー設定とワークスペース設定の切り替えはタブの右上で行える(赤枠内)。表示されているのは筆者のユーザー設定である。マルチルートワークスペースを開いている場合には、さらに各フォルダの設定を参照するためのドロップダウンも表示される。ユーザー設定とワークスペース設定の切り替えはタブの右上で行える。[ワークスペースの設定]を選択すると、タブの表示が[ワークスペースの設定]に変化するエディタに[ワークスペースの設定]タブが表示される。どちらの設定を行っているかによって、[エクスプローラー]ビューでの表示も変わるので、自分がどちらの設定を行っているかをよく確認するようにしよう。[ワークスペースの設定]タブマルチルートワークスペースを開いている場合には、次のような画面になる。マルチルートワークスペースを開いている場合の設定画面ワークスペースを構成する個々のフォルダの設定内容を参照するためのドロップダウンが表示される(赤枠内)。この場合には、ワークスペースを構成する個々のフォルダで行われているワークスペース設定を参照するためのドロップダウンが表示される(上の画面の赤枠内)。前に挙げたユーザー設定/ワークスペースの設定の画面とは、タブ右側の内容が少し異なっていることにも注意しよう。folders項目はマルチルートワークスペースを構成するフォルダを列挙していて、その下のsettings項目にマルチルートワークスペースの設定を記述していくことになる。タブ右上のドロップダウンで、フォルダを選択すると、そのフォルダで行っている設定を参照できる。このとき、左側の[エクスプローラー]ビューの表示が以下のようになることがある。これはマルチルートワークスペースを構成するsamplefolder01フォルダの設定を表示したところだ。マルチルートワークスペースを構成するフォルダのワークスペース設定を表示したところ左側の[エクスプローラー]ビューでは、settings.jsonファイル(とそれを含んでいる.vscode/samplefoler01の2つのフォルダ)が緑色で表示され、右側には「1」と表示されている。これはsettings.jsonファイルの内容に1つ問題があることを示している。エディタの内容を見ると、ビックリマークが表示されている項目がある。マウスカーソルを合わせてみると、「ビックリマークが付いた項目はマルチルートワークスペースでは適用されない」というメッセージが表示される。フォルダを単独で開いた場合には適用されるので、これを削除することはないだろうが、個々のフォルダの設定を参照しようとしたときには少しびっくりするかもしれない。逆にfiles.excludeなどの項目はマルチルートワークスペースでも適用される(これが上では「基本的には適用されない」と書いた理由だ)。[ユーザー設定]タブ/[ワークスペースの設定]タブの左側には、設定可能な項目とそのデフォルト値が「よく使用するもの」「エディター」「ワークベンチ」などのカテゴリーごとに表示され、右側にはカスタマイズした内容が表示される。[設定の検索]ボックスにテキストを入力すれば、入力内容にマッチするものだけがフィルタリング表示されるので、設定したい項目に関連する内容を適当に入力してみよう。以下の画像を見れば分かる通り、英数字だけではなく、日本語を入力してもフィルタリングしてくれるのは便利といえる。[設定の検索]ボックスに「フォント」と入力したところ個々の項目の設定を行うには、左側で設定対象を選んでコピーして、右側にペーストし、手入力をしてもよいが、項目の左側に表示される[編集]アイコンをクリックすると表示されるコンテキストメニューを使う方が簡単だ。フォントサイズを変更しようとして、「editor.fontSize」項目の左にある[編集]アイコンをクリックすると次の画像のように[設定にコピー]というメニュー項目が表示される。フォントサイズを変更するために[編集]アイコンをクリックしたところ[設定にコピー]を選択すれば、右側にその内容がコピーされるので、後は自分でフォントサイズを書き込むだけだ。[編集]アイコンをクリックしたときに表示されるメニュー項目は項目による。右側のペーンでも[編集]アイコンをクリックして、設定内容を変更できる場合もある。「editor.wordWrap」項目の[編集]アイコンをクリックすると、指定可能な値がポップアップ表示されるので、そこから設定したい値を選択すればよい。Code設定の基本についての説明は終わりだ。次に、実際の設定項目について見ていこう。CodeのIDE部分の設定項目の中から、主なものをカテゴリー分けして取り上げる。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。