【VSCode】試行錯誤の末たどりついた設定管理術

みなさんは VSCode の設定をどのように管理していますか？
この記事では、プロファイル機能を使って VSCode の設定をきれいに保つ方法を紹介します。

※ この記事はシンプルな説明のために、 VSCode の Remote Development や DevContainer を使わないローカル開発を前提としています。

結論

私は VSCode の設定を以下の3つに分類して管理しています。

① どのワークスペースでも有効化したい設定
→ 既定（Default）のプロファイルで管理する

② 特定のワークスペースにおいて、チームで合意した設定
→ 各ワークスペースの.vscode/settings.jsonで管理する

③ 特定のワークスペースにおいて、個人的に有効化したい設定
→ 各プロファイルで管理する

前提

VSCode の設定には異なる2つのスコープが用意されています。

• ユーザー設定
• ワークスペース設定

簡単に言うと、ユーザー設定はグローバルに適用される設定、ワークスペース設定は特定のフォルダにおいてのみ適用される設定です。
ワークスペース設定はプロジェクトに.vscode/settings.jsonファイルを作成することで、ユーザー設定を上書きします。

この.vscode/settings.jsonファイルは Git で管理すれば Formatter の設定などを他の開発者と共有できて便利です。

VSCodeのプロファイル機能とは

プロファイル機能とは、複数のユーザー設定を作成し、必要に応じて切り替えることができる機能です。

言語ごとにプロファイルを作成してもいいですし、プライベートと仕事用でざっくり分ける、フロントエンドとバックエンドで分けるなどいろいろな使い方が考えられます。

そして、プロファイルで管理できるのは設定だけではありません。拡張機能、キーボードショートカット、スニペット、タスク、UIの状態も管理することができます。

ちなみに、ワークスペース設定がユーザー設定を上書きするという挙動は変わりませんので、プロファイルの設定は.vscode/settings.jsonで上書きされることに注意しましょう。

プロファイル登場以前

私はプロファイル機能の登場以前、 VSCode の設定に2つの不満を持っていました。

①カオス化するユーザー設定

いくつかのプロジェクトを経験すると、ユーザー設定のファイルはけっこう混沌としてきます。

例えば以下のような設定が増えていきます。

• 特定のプロジェクトでしか使わない設定
• 特定の拡張機能でしか使わない設定
• VSCodeや拡張機能のアップデートに追いつけていない設定
• その他使わないのに有効化されたままの設定

このような設定を放置すると、設定変更のときに混乱しますし、意図しない動作を引き起こす可能性もあります。

②気軽に変更できないワークスペース設定

VSCode のワークスペース設定は以下2つの特徴からわかる通り、少しクセがあります。

• 共有が前提になっている
• VSCode の設定の仕組みの中で最後に override される最強の設定である

個人開発の場合は問題ないのですが、共有が前提になっているためチームで開発するときには基本的に Pull Request を出す必要があり、少々手間がかかります。

また、ワークスペース設定は最後に override されるので、設定は強制されます。
したがって、本当にチームの利益になるものでなければ追加するべきではありません。

このように、ワークスペース設定は変更に対する敷居が高く、個人の好みに合わせて気軽に設定を変更することが難しい状況でした。

プロファイル機能のメリット

プロファイル機能を使うことで、上記の2つの不満は解消されました。

プロファイル機能を使えば、絶対に必要な設定を既定（Default）のプロファイルに押し込めることで、設定をいじったときの影響範囲を特定のプロファイルに留めることができるので、設定があまり汚れません。（詳細は次の実践の項で述べます）

新規プロジェクトを始める際には、既存のプロファイルを使い回すこともできますし、新規のプロファイルを作成することでクリーンな設定から再構築することもできます。

この柔軟性により、開発者は各プロジェクトに最適な設定環境を維持しながら、効率的に作業を進めることができるのです。

実践

では、実際に私がどのようにプロファイルを設定しているか説明します。
ここでは例として以下のような設定を適用したいと考えています。

{
    "files.autoSave": "onFocusChange",
    "editor.fontSize": 16,
    "typescript.inlayHints.parameterNames.enabled": "all",
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

この設定を、冒頭の結論でも述べた

1. どのワークスペースでも有効化したい設定
2. 特定のワークスペースにおいて、チームで合意した設定
3. 特定のワークスペースにおいて、個人的に有効化したい設定

の3つに分類していきます。

1. プロファイル設定

まずは設定を分類する前に、プロファイルを作成して上記の設定を適用します。
プロファイルの作成は簡単です。コマンドでPreferences: Open Profiles (UI)を実行して、プロファイル画面を開きます。

「新しいプロファイル」をクリックすると、上のような画面になります。

プロファイルで管理できるコンテンツ（設定、キーボードショートカット、タスク、スニペット、拡張機能）は、それぞれ

• 既存のプロファイルからのコピー
• 既定プロファイルの使用
• 空のコンテンツの作成

のいずれかを選択できます。

「既存のプロファイルからのコピー」または「空のコンテンツの作成」を選択した場合は、このプロファイルがアクティブなときのみ有効になる設定を適用していくことができます。

コマンドでPreferences: Open User Settings (JSON)を実行して、設定ファイルを開きます。

一旦例示した設定をここにすべて記述します

.../Code/User/profiles/{profile_id}/settings.json

{
    "files.autoSave": "onFocusChange",
    "editor.fontSize": 16,
    "typescript.inlayHints.parameterNames.enabled": "all",
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

ここに保存した設定は、このプロファイルがアクティブなときのみ有効化され、他のプロファイルのときには適用されません。

2. デフォルト設定

では、「どのワークスペースでも有効化したい設定」を既定（Default）のプロファイルに移します。
プロファイルを作成するとき、既定（Default）というプロファイルがすでに存在していたことにお気づきかもしれません。

既定（Default）は特別なプロファイルで、設定を「すべてのプロファイルに適用」できるオプションが存在します。

それが"workbench.settings.applyToAllProfiles"というIDの設定です。ここに「どのワークスペースでも有効化したい設定」を指定していきます。

"workbench.settings.applyToAllProfiles"に設定IDを指定すると、その設定はすべてのプロファイルにおいて適用されます。

.../Code/User/settings.json

{
    "workbench.settings.applyToAllProfiles": [
        "files.autoSave",
        "editor.fontSize",
    ],
    "files.autoSave": "onFocusChange",
    "editor.fontSize": 16,
}

さきほど作成したプロファイルに戻ると、グレーアウトしていることが確認できます。

こうしておくと、あとから全プロファイルに設定を適用したいときも、"workbench.settings.applyToAllProfiles"をいじるだけで済み、すべてのプロファイル設定を変更して回る必要がありません。

GUIからは設定の左側にある歯車から、「設定をすべてのプロファイルに適用」を選択することで指定が可能です。

ちなみに拡張機能も同様にすべてのプロファイルに適用することができます。

これで、新規に作成するプロファイルではデフォルトで拡張機能を有効化した状態にすることができます。

3. ワークスペース設定

続いて「特定のワークスペースにおいて、チームで合意した設定」をワークスペース設定に移します。
これは/.vscode/settings.jsonを編集するだけです。
すでに触れたように、ここに書いたものはメンバーに設定を強制するものになるので、コミットする場合はチームの合意を取るようにしましょう。

/.vscode/settings.json

{
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
}

4. 最終的なプロファイル設定

この過程を経ると、プロファイルには「特定のワークスペースにおいて、個人的に有効化したい設定」が残ります。
実際にやってみるとおわかりいただけると思いますが、めちゃめちゃスッキリします。

.../Code/User/profiles/{profile_id}/settings.json

{
    // - ちょっと試しに使ってみたい
    // - このプロジェクトでは有効化すると便利だと思うけどみんなに共有するほどではない
    // といった設定が入ります。
    "typescript.inlayHints.parameterNames.enabled": "all",
}

プロファイルはエクスポートやインポートも可能で移行・共有が簡単なので、このように整理しておけばすぐに理想の設定で開発を始めることができます。
（このあたりは私があまり使えていないので他の記事に説明を譲ります）
https://zenn.dev/hankei6km/articles/vscode-profiles

まとめ

VSCodeのプロファイル機能を活用することで、以下のような利点が得られます：

• グローバルに適用したい設定と、ワークスペース固有の設定を明確に分離できる
• チームで共有する設定と個人の設定を効率的に管理できる
• 必要最低限の設定で、整理された開発環境を実現できる

それではみなさん、良い VSCode ライフを！

参考

https://speakerdeck.com/yuhei_fujita/yami-nabe-vscode

https://code.visualstudio.com/docs/getstarted/settings

https://code.visualstudio.com/docs/editor/profiles