【VS Code】settings.json の開き方｜ユーザー設定とワークスペース設定の違いも解説

VS Codeのsettings.jsonとは？

settings.jsonは、VS Codeの設定内容をJSON形式で保存するためのファイルです。

設定画面からオン・オフすることもできますが、細かい設定をまとめて管理したい場合は、settings.jsonを直接編集する方が向いている場合があります。

たとえば、保存時の自動整形や既定のフォーマッター設定などは、JSONで見た方が整理しやすいです。

設定画面とsettings.jsonはどちらを使うべき？

VS Codeの設定は、設定画面から変更する方法と、settings.jsonを直接編集する方法があります。

どちらも同じ設定を変更できますが、向いている場面が少し異なります。

VS Codeに慣れていないうちは設定画面の方がわかりやすいですが、複数の設定をまとめて管理したい場合はsettings.jsonの方が便利です。

特に、自動整形やフォーマッター設定のように、コード例で紹介されることが多い設定は、JSONで直接編集した方が反映しやすい場合があります。

VS Codeでsettings.jsonを開く方法は主に2つ

VS Codeでsettings.jsonを開く方法は、主に次の2つです。

初めて開く場合は設定画面からでも問題ありませんが、何度も使うならコマンドパレットから開く方法も覚えておくと便利です。

設定画面からsettings.jsonを開く方法

まずは、設定画面からsettings.jsonを開く方法です。

この方法は画面上で場所を確認しながら進められるため、VS Codeに慣れていない段階でもわかりやすいです。

コマンドパレットからsettings.jsonを開く方法

すばやく開きたい場合は、コマンドパレットを使う方法が便利です。

よく使う設定にすばやくアクセスしたい場合は、こちらの方法の方が効率的です。

ユーザー設定とワークスペース設定の違い

settings.jsonで迷いやすいのが、ユーザー設定とワークスペース設定の違いです。

ざっくりいうと、どのフォルダを開いていても共通で使いたい設定はユーザー設定、案件ごとに変えたい設定はワークスペース設定に入れるイメージです。

ワークスペース設定はどこに保存される？

フォルダ単位で開いている場合、ワークスペース設定は一般的にプロジェクト内の.vscode/settings.jsonに保存されます。

そのため、プロジェクトごとに設定を分けたい場合は、このワークスペース設定を使うと管理しやすくなります。

たとえば、「この案件だけタブ幅を変えたい」「このフォルダでは別のフォーマッターを使いたい」といった場面で便利です。

project-folder/
├─ .vscode/
│  └─ settings.json
├─ src/
└─ package.json

一方で、どの案件でも共通で使いたい設定は、ワークスペース設定ではなくユーザー設定に入れる方が整理しやすいです。

どちらのsettings.jsonを編集すればよい？

どちらを編集すべきか迷った場合は、次の考え方で分けると整理しやすいです。

個人の使い勝手に関わる設定はユーザー設定、プロジェクトや現場に依存する設定はワークスペース設定、と考えるとわかりやすいです。

設定が競合したときの優先順位

VS Codeでは、同じ設定項目が複数の場所に書かれている場合、より細かい範囲に対する設定が優先されます。

つまり、同じ項目が重複している場合は、ワークスペース設定がユーザー設定より優先されます。

この順番で上書きされるため、3つに同じ設定がある場合は、最後に反映されるワークスペース設定が使われます。

デフォルト設定とは、VS Codeが最初から持っている既定値のことです。

通常は自分で編集するsettings.jsonとは別物で、ユーザー設定やワークスペース設定で何も指定していない場合に使われます。

なお、デフォルト設定はPreferences: Open Default Settings (JSON)からJSON形式で確認できますが、開かれるdefaultSettings.jsonは読み取り専用です。

たとえば、ユーザー設定でeditor.tabSizeを2にしていても、ワークスペース設定で4を指定していれば、そのプロジェクトではワークスペース設定の4が適用されます。

settings.jsonでよく使う設定例

たとえば、自動整形まわりでは次のような設定を使うことがあります。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2
}

editor.formatOnSaveは保存時に自動整形する設定、editor.defaultFormatterは既定のフォーマッターを指定する設定です。

editor.tabSizeはインデント幅を指定する設定で、ユーザー設定に入れればVS Code全体、ワークスペース設定に入れればその案件だけに反映できます。

自動整形の詳しい設定方法は、以下の記事でもまとめています。

settings.jsonを編集するときの注意点

カンマの付け忘れに注意する

settings.jsonはJSON形式で書かれているため、項目の区切りにカンマが必要です。

1行追加しただけでも構文エラーになることがあるため、前後の記述もあわせて確認すると安心です。

同じ設定を重複して書かない

同じキーを何度も書くと、どの設定が効いているのかわかりにくくなります。

設定を追加する前に、同じ項目がすでにないか確認しておくのがおすすめです。

ユーザー設定とワークスペース設定を混同しない

自分のVS Code全体に効かせたいのか、その案件だけに効かせたいのかで、編集するsettings.jsonが変わります。

設定を追加する前に、どちらに入れるべきかを確認しておくと整理しやすいです。

settings.jsonが開けない・見つからないときの確認ポイント

設定画面のJSONアイコンが見つからない

VS Codeのバージョンや画面幅によって、ボタンの見え方が少し違うことがあります。

その場合は、コマンドパレットから開く方法を試すと見つけやすいです。

意図したsettings.jsonを開けているか確認する

設定を書いたのに反映されない場合は、開いているのがユーザー設定なのか、ワークスペース設定なのかを確認してみてください。

特に案件ごとの設定を変えたいのにユーザー設定を編集していると、思った動きにならないことがあります。

JSONの書き方を間違えている

settings.jsonはJSON形式なので、カンマの抜けや構文ミスがあると正しく反映されないことがあります。

追加するときは、前後の記述もあわせて確認すると安心です。

まとめ

VS Codeのsettings.jsonは、設定画面からでもコマンドパレットからでも開けます。

最初は設定画面から開く方法だけ覚えれば十分ですが、慣れてきたらコマンドパレットから開く方法も覚えておくと便利です。

settings.jsonを使えるようになると、VS Codeの設定をかなり整理しやすくなります。