VS Codeの設定を調整しようとしたとき、「settings.jsonはどこから開けばいいの？」と迷うことがあります。
自動整形やPrettierの設定を追加したいときも、設定画面ではなくJSONを直接編集したい場面は少なくありません。
結論からいうと、VS Codeのsettings.jsonは設定画面から開く方法とコマンドパレットから開く方法があります。
また、settings.json にはユーザー設定とワークスペース設定があるため、どちらを開くべきかもあわせて理解しておくことが大切です。
この記事では、VS Codeのsettings.json の開き方、ユーザー設定とワークスペース設定の違い、よくある迷いどころまでわかりやすく解説します。
もくじ
VS Codeのsettings.jsonとは？
settings.jsonは、VS Codeの設定内容をJSON形式で保存するためのファイルです。
設定画面からオン・オフすることもできますが、細かい設定をまとめて管理したい場合は、settings.jsonを直接編集する方がわかりやすいことがあります。
たとえば、保存時の自動整形や既定のフォーマッター設定などは、JSONで見た方が整理しやすいです。
設定画面とsettings.jsonはどちらを使うべき？
VS Codeの設定は、設定画面から変更する方法と、settings.jsonを直接編集する方法があります。
どちらも同じ設定を変更できますが、向いている場面が少し異なります。
| 方法 | 向いているケース |
|---|---|
| 設定画面 | 項目を検索しながら、意味を確認して設定したい場合 |
| settings.json | 設定をまとめて管理したい場合や、記事・ドキュメントの設定例をそのまま書きたい場合 |
VS Codeに慣れていないうちは設定画面の方がわかりやすいですが、複数の設定をまとめて管理したい場合はsettings.jsonの方が便利です。
特に、自動整形やフォーマッター設定のようにコード例で紹介されることが多い設定は、JSONで直接編集した方が理解しやすいことがあります。
VS Codeでsettings.jsonを開く方法は主に2つ
VS Codeでsettings.jsonを開く方法は、主に次の2つです。
| 方法 | 特徴 | 向いている人 |
|---|---|---|
| 設定画面から開く | 画面を見ながら進めやすい | 初心者向け |
| コマンドパレットから開く | 素早くアクセスしやすい | 慣れてきた人向け |
初めて開く場合は設定画面からでも問題ありませんが、何度も使うならコマンドパレットから開く方法も覚えておくと便利です。
設定画面からsettings.jsonを開く方法
まずは、設定画面からsettings.jsonを開く方法です。
VS Code左下の歯車アイコンをクリックする
「設定」を開く
右上付近の「設定をJSONで開く」アイコンをクリックする
この方法は画面上で場所を確認しながら進められるため、VS Codeに慣れていない段階でもわかりやすいです。
コマンドパレットからsettings.jsonを開く方法
すばやく開きたい場合は、コマンドパレットを使う方法が便利です。
Ctrl + Shift + Pでコマンドパレットを開くsettings jsonと入力するPreferences: Open User Settings (JSON)などを選択する
よく使う設定にすばやくアクセスしたい場合は、こちらの方法の方が効率的です。
ユーザー設定とワークスペース設定の違い
settings.jsonで迷いやすいのが、ユーザー設定とワークスペース設定の違いです。
| 種類 | 反映範囲 | 向いている設定 |
|---|---|---|
| ユーザー設定 | 自分のVS Code全体 | 保存時整形、フォントサイズ、表示設定など |
| ワークスペース設定 | 開いているプロジェクト単位 | 案件ごとに変えたい設定、チーム用設定など |
ざっくりいうと、どのフォルダを開いていても共通で使いたい設定はユーザー設定、案件ごとに変えたい設定はワークスペース設定に入れるイメージです。
ワークスペース設定はどこに保存される？
ワークスペース設定は、一般的にプロジェクト内の.vscode/settings.jsonに保存されます。
そのため、プロジェクトごとに設定を分けたい場合は、このワークスペース設定を使うと管理しやすくなります。
たとえば、「この案件だけタブ幅を変えたい」「このフォルダでは別のフォーマッターを使いたい」といった場面で便利です。
project-folder/ ├─ .vscode/ │ └─ settings.json ├─ src/ └─ package.json
一方で、どの案件でも共通で使いたい設定は、ワークスペース設定ではなくユーザー設定に入れる方が整理しやすいです。
どちらのsettings.jsonを編集すればよい？
どちらを編集すべきか迷った場合は、次の考え方で分けると整理しやすいです。
| 入れたい設定 | おすすめの置き場所 |
|---|---|
| 保存時に自動整形したい | ユーザー設定 |
| フォントサイズを変えたい | ユーザー設定 |
| この案件だけタブ幅を変えたい | ワークスペース設定 |
| このプロジェクトだけ別のフォーマッターを使いたい | ワークスペース設定 |
個人の使い勝手に関わる設定はユーザー設定、プロジェクトや現場に依存する設定はワークスペース設定、と考えるとわかりやすいです。
settings.jsonでよく使う設定例
たとえば、自動整形まわりでは次のような設定を使うことがあります。
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
このように書くと、保存時に自動整形しやすくなります。
自動整形の詳しい設定方法は、以下の記事でもまとめています。
-
【VS Code】拡張機能で自動整形する方法｜保存時フォーマットの設定も解説
VS Codeでコードを書いていると、インデントや改行位置がばらついて見づらくなることがあります。 特にフリーランスや複数案件を行き来する働き方だと、現場が変わるたびに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の設定をJSONで管理するファイル- 開き方は「設定画面から開く」「コマンドパレットから開く」の2つが基本
- 共通設定はユーザー設定、案件ごとの設定はワークスペース設定に分けると整理しやすい
- ワークスペース設定は
.vscode/settings.jsonに保存されることが多い - 自動整形やフォーマッター設定を入れるときにもよく使う
最初は設定画面から開く方法だけ覚えれば十分ですが、慣れてきたらコマンドパレットから開く方法も覚えておくと便利です。
settings.jsonを使えるようになると、VS Codeの設定をかなり整理しやすくなります。