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

結論

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

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

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

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

前提

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

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

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

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

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

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

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

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

プロファイル登場以前

私はプロファイル機能の登場以前、 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"
    }
}

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

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

の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. 最終的なプロファイル設定

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

Discussion