VS Codeのsettings.jsonの書き方｜基本構文とよく使う設定例をわかりやすく解説

「VS Codeの設定をもっと細かく変えたいけど、settings.jsonにどう書けばいいのか分からない」「サンプルを見ながら自分好みの開発環境を作りたい」

そんな悩みを抱えていませんか？VS Codeには豊富な設定項目がありますが、GUI（画面操作）では変更できない細かい設定もたくさんあります。

この記事では、VS Codeのsettings.jsonの基本的な書き方と、すぐに使えるよく使う設定例を初心者向けに分かりやすく紹介します。

settings.jsonとは

設定ファイルの役割

settings.jsonは、VS Codeの動作や見た目をカスタマイズするための設定ファイルです。このファイルを編集することで、以下のような細かい調整ができます：

エディタの動作（自動保存、フォーマット等）
見た目の設定（フォント、色、インデント等）
拡張機能の動作設定
言語ごとの個別設定

JSON形式について

settings.jsonは、JSON（JavaScript Object Notation）という形式で書かれています。JSONは人間にも読みやすく、コンピュータにも処理しやすいデータ形式として広く使われています。

settings.jsonの基本構文

基本の書き方

settings.jsonは以下のような構造で記述します：

{
  "キー": 値,
  "キー": 値
}

記述ルール

設定を書く際は、以下のルールを守る必要があります：

文字列の扱い

文字列（テキスト）は必ずダブルクォーテーション（" "）で囲みます：

{
  "editor.fontFamily": "Menlo, monospace"
}

数値の扱い

数値はクォーテーションなしで記述します：

{
  "editor.tabSize": 2,
  "editor.fontSize": 14
}

真偽値の扱い

true（有効）またはfalse（無効）で設定します：

{
  "editor.formatOnSave": true,
  "editor.minimap.enabled": false
}

カンマの使い方

複数の設定を書く場合、最後の項目以外はカンマで区切ります。最後の項目にはカンマを付けないよう注意してください（エラーの原因になります）：

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true
}

よく使う設定例

エディタの基本設定

保存時に自動フォーマット

ファイルを保存するたびに、自動でコードを整形してくれる便利な機能です：

{
  "editor.formatOnSave": true
}

この設定により、コードの見た目が自動的に整い、チーム開発でのコードスタイル統一に役立ちます。

デフォルトフォーマッタの指定

複数のフォーマッタ拡張がインストールされている場合、優先的に使用するものを指定できます：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

この設定により、Shift + Alt + F（Windows/Linux）またはShift + Option + F（Mac）でPrettierが動作します。

タブ幅（インデントサイズ）の変更

コードのインデント幅を調整します：

{
  "editor.tabSize": 2
}

Web開発では2スペース、Python開発では4スペースが一般的です。

行番号の表示設定

行番号の表示方法を変更できます：

{
  "editor.lineNumbers": "relative"
}

"on": 絶対行番号（デフォルト）
"relative": 相対行番号
"off": 非表示

見た目とフォント設定

フォントファミリーの変更

エディタで使用するフォントを指定します：

{
  "editor.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace"
}

フォントサイズの調整

文字の大きさを変更します：

{
  "editor.fontSize": 16
}

フォントの合字（リガチャー）を有効化

プログラミング用フォントの合字機能を使用します：

{
  "editor.fontLigatures": true
}

ファイル管理の設定

自動保存の有効化

ファイルの変更を自動的に保存します：

{
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}

末尾の空白文字を自動削除

保存時に行末の不要なスペースを削除します：

{
  "files.trimTrailingWhitespace": true
}

言語別の個別設定

特定の言語だけ設定を変える方法

プログラミング言語ごとに異なる設定を適用できます：

{
  "[python]": {
    "editor.tabSize": 4,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "ms-python.black-formatter"
  },
  "[javascript]": {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

この例では、Pythonファイルはタブ幅4でBlackフォーマッタを使用し、JavaScriptファイルはタブ幅2でPrettierを使用します。

よく使われる言語設定例

HTML/CSS

{
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features",
    "editor.tabSize": 2
  },
  "[css]": {
    "editor.defaultFormatter": "vscode.css-language-features",
    "editor.tabSize": 2
  }
}

JSON

{
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features",
    "editor.tabSize": 2
  }
}

複数設定をまとめて記述する例

実際の開発では、複数の設定をまとめて記述することが一般的です：

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.fontSize": 14,
  "editor.fontFamily": "'Fira Code', monospace",
  "editor.fontLigatures": true,
  "files.autoSave": "afterDelay",
  "files.trimTrailingWhitespace": true,
  "[python]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "ms-python.black-formatter"
  },
  "[markdown]": {
    "editor.wordWrap": "on"
  }
}

settings.jsonの編集方法と保存場所

ユーザー設定（グローバル設定）

VS Code全体に適用される設定です。すべてのプロジェクトで共通して使いたい設定を記述します。

編集方法

Cmd + Shift + P（Mac）またはCtrl + Shift + P（Windows/Linux）でコマンドパレットを開く
以下のコマンドを入力・選択：

Open Settings (JSON)

保存場所

Mac: ~/Library/Application Support/Code/User/settings.json
Windows: %APPDATA%\Code\User\settings.json
Linux: ~/.config/Code/User/settings.json

ワークスペース設定（プロジェクト別設定）

特定のプロジェクトでのみ適用したい設定を記述します。チーム開発では、プロジェクト固有の設定をここに記述することで、メンバー間で設定を共有できます。

ファイルの作成場所

プロジェクトのルートディレクトリに以下のファイルを作成します：

<プロジェクトフォルダ>/.vscode/settings.json

設定の優先順位

ワークスペース設定はユーザー設定よりも優先されます。同じ設定項目がある場合、ワークスペース設定が適用されます。

トラブルシューティング

よくあるエラーと対処法

JSON構文エラー

settings.jsonに構文エラーがあると、VS Codeが正常に動作しない場合があります：

よくある間違い

最後の項目にカンマを付けている
文字列をシングルクォートで囲んでいる
閉じ括弧が不足している

確認方法 VS Codeはエラーがある行に赤い波線を表示し、問題パネルにエラー詳細を表示します。

設定が反映されない場合

VS Codeを再起動する
拡張機能が最新版か確認する
ワークスペース設定とユーザー設定の競合を確認する

設定の確認方法

現在適用されている設定を確認するには：

Cmd + ,（Mac）またはCtrl + ,（Windows/Linux）で設定画面を開く
右上の「設定をJSONで開く」アイコンをクリック

高度な設定例

開発効率を上げる便利設定

ミニマップの非表示

画面右側のコード全体表示を無効にします：

{
  "editor.minimap.enabled": false
}

ブラケットペアの色分け

対応する括弧を色分けして見やすくします：

{
  "editor.bracketPairColorization.enabled": true
}

タブの表示制限

開きすぎたタブを自動的に閉じます：

{
  "workbench.editor.limit.enabled": true,
  "workbench.editor.limit.value": 10
}

Git関連の設定

Git自動フェッチの有効化

{
  "git.autofetch": true,
  "git.confirmSync": false
}

Git差分表示の改善

{
  "diffEditor.ignoreTrimWhitespace": false,
  "git.decorations.enabled": true
}

まとめ

VS Codeのsettings.jsonは、開発環境を自分好みにカスタマイズするための強力なツールです。

重要なポイント

JSON形式で"キー": 値をカンマ区切りで記述
保存時フォーマットやフォーマッタ指定など、便利な設定をまとめて管理
ユーザー設定（全体）とワークスペース設定（プロジェクト別）を使い分け
言語別の個別設定で、より細かい制御が可能

設定のコツ

最初は基本的な設定（フォーマット、タブ幅等）から始める
必要に応じて少しずつ設定を追加する
チーム開発では、プロジェクト固有の設定をワークスペースに記述
定期的に設定を見直し、不要なものは削除する