VSCodeでJSONを整形する方法について

2026年10月26日

Visual Studio Code（VSCode）では、JSONファイルを簡単に整形できます。

1行にまとまったJSONや、インデントが崩れて読みづらくなったJSONも、VSCodeの標準機能を使えば見やすい形に自動で整えられます。

JSONだけを整形するのであれば、基本的に追加の拡張機能をインストールする必要はありません。

ここでは、VSCodeでJSONを整形する基本的な方法から、保存時の自動整形、Prettierを使う方法、整形できない場合の原因まで詳しく解説します。

VSCodeではJSONを標準機能で整形できる

VSCodeには、JSONを扱うための機能が標準で搭載されています。

たとえば、次のように1行にまとまったJSONがあるとします。

{"name":"Taro","age":30,"address":{"city":"Tokyo","zip":"100-0001"}}

VSCodeのフォーマット機能を実行すると、次のように自動整形されます。

{
  "name": "Taro",
  "age": 30,
  "address": {
    "city": "Tokyo",
    "zip": "100-0001"
  }
}

適切な位置で改行され、インデントやスペースも自動的に調整されます。

JSONの階層構造が分かりやすくなるため、設定ファイルの編集やAPIレスポンスの確認などにも便利です。

ショートカットキーでJSONを整形する

JSONをもっとも手軽に整形する方法は、ショートカットキーを使用する方法です。

Windowsの場合

Windows版VSCodeでは、JSONファイルを開いた状態で次のキーを押します。

Shift + Alt + F

「Format Document」が実行され、ファイル全体が自動的に整形されます。

macOSの場合

macOSでは、次のショートカットを使用します。

Shift + Option + F

Linuxの場合

Linuxでは、一般的に次のショートカットが割り当てられています。

Ctrl + Shift + I

なお、VSCodeのキーバインドを変更している場合は、ショートカットが異なることがあります。

コマンドパレットからJSONを整形する

ショートカットキーを覚えていなくても、コマンドパレットからJSONを整形できます。

コマンドパレットを開く

Windowsでは、次のキーを押します。

Ctrl + Shift + P

macOSでは、次のキーを使用します。

Command + Shift + P

コマンドパレットを開いたら、次のコマンドを検索します。

Format Document

日本語表示では、「ドキュメントのフォーマット」と表示される場合があります。

コマンドを選択すると、現在開いているJSONファイル全体が整形されます。

右クリックメニューからJSONを整形する

VSCodeでは、エディターの右クリックメニューからフォーマットすることもできます。

JSONファイルを開き、エディター内で右クリックします。

表示されたメニューから、次の項目を選択します。

Format Document

日本語環境では、「ドキュメントのフォーマット」などと表示されます。

ショートカットキーを覚えていない場合には、この方法も便利です。

JSONの選択範囲だけを整形する

VSCodeには、ファイル全体だけでなく選択した範囲をフォーマットする機能もあります。

Format Selectionを使用する

整形したい部分を選択し、コマンドパレットから次のコマンドを実行します。

Format Selection

WindowsとLinuxでは、標準設定なら次のショートカットも利用できます。

Ctrl + K
Ctrl + F

macOSでは、次のショートカットです。

Command + K
Command + F

ただし、JSONはオブジェクトや配列の階層構造を持っているため、選択範囲によっては期待どおりにフォーマットできない場合があります。

JSONでは、基本的に「Format Document」でファイル全体を整形する方法が分かりやすいでしょう。

保存時にJSONを自動整形する

JSONを頻繁に編集する場合は、ファイルを保存するたびに自動整形する設定が便利です。

VSCodeには、次の設定があります。

editor.formatOnSave

設定画面からFormat On Saveを有効にする

VSCodeの設定画面を開きます。

Windowsでは、次のショートカットを使用できます。

Ctrl + ,

macOSでは、次のショートカットです。

Command + ,

設定画面の検索欄に、次の文字列を入力します。

Format On Save

「Editor: Format On Save」を有効にすると、ファイルを保存したタイミングで自動的にフォーマットされるようになります。

settings.jsonで保存時の自動整形を設定する

VSCodeの設定ファイルであるsettings.jsonに直接記述することもできます。

すべての対応ファイルで保存時のフォーマットを有効にする場合は、次のように設定します。

{
  "editor.formatOnSave": true
}

これにより、フォーマッターが利用できるファイルでは、保存時に自動整形が行われます。

JSONだけ保存時に自動整形する

JSONだけに保存時のフォーマットを適用したい場合は、言語別設定を使用します。

{
  "[json]": {
    "editor.formatOnSave": true
  }
}

これなら、JavaScriptやCSSなどには影響を与えず、JSONだけ保存時に整形できます。

JSONCも保存時に自動整形する

VSCodeでは、通常のJSONとは別に「JSON with Comments」という形式も使用されます。

略してJSONCと呼ばれます。

JSONとJSONCの両方に保存時フォーマットを適用する場合は、次のように設定できます。

{
  "[json]": {
    "editor.formatOnSave": true
  },
  "[jsonc]": {
    "editor.formatOnSave": true
  }
}

JSONとJSONCの違い

VSCodeを使用するうえでは、JSONとJSONCの違いも理解しておくと便利です。

通常のJSONではコメントを書けない

標準的なJSONでは、JavaScriptのようなコメントを記述できません。

たとえば、次の形式は通常のJSONとしては無効です。

{
  // ユーザー名
  "name": "Taro"
}

JSONCではコメントを記述できる

JSONCでは、次のようなコメントを記述できます。

{
  // 保存時に自動整形する
  "editor.formatOnSave": true
}

VSCodeのsettings.jsonなどは、ファイル名こそ.jsonですが、VSCode上ではJSONCとして扱われます。

そのため、コメントを記述できます。

JSONCでは末尾カンマも扱える

通常のJSONでは、最後の要素の後ろにカンマを記述できません。

次のJSONは標準JSONとしては無効です。

{
  "name": "Taro",
  "age": 30,
}

一方、VSCodeのJSONCでは末尾カンマを受け入れられる場合があります。

ただし、末尾カンマは推奨されないこともあるため、特別な理由がなければ最後の要素にはカンマを付けないほうが安全です。

JSONのインデント幅を変更する

JSONを整形したときのインデント幅も設定できます。

2スペースに設定する

たとえば、JSONのインデントを2スペースにする場合は、次のように設定します。

{
  "[json]": {
    "editor.tabSize": 2
  }
}

4スペースに設定する

4スペースにしたい場合は、次のようにします。

{
  "[json]": {
    "editor.tabSize": 4
  }
}

JSONでは2スペースが使われることも多いですが、プロジェクトのコーディングルールに合わせるのが基本です。

タブではなくスペースを使う

インデントにタブではなくスペースを使用したい場合は、editor.insertSpacesを設定します。

{
  "[json]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  }
}

この設定では、JSONのインデントに2個のスペースを使用します。

ただし、Prettierなど外部フォーマッターを使用している場合は、外部フォーマッター側の設定が関係することがあります。

JSON用フォーマッターを指定する

VSCodeでは、複数のフォーマッターが利用できる場合に、デフォルトで使用するフォーマッターを指定できます。

VSCode標準のJSONフォーマッターを指定する

VSCode標準のJSONフォーマッターを明示的に指定する場合は、次のように設定できます。

{
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features",
    "editor.formatOnSave": true
  }
}

JSONCにも指定する場合は、次のようにします。

{
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features",
    "editor.formatOnSave": true
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features",
    "editor.formatOnSave": true
  }
}

ただし、VSCodeにはJSON用のフォーマット機能が標準搭載されているため、通常はeditor.defaultFormatterを明示しなくても問題ありません。

Prettierなど複数のフォーマッターがインストールされている場合に、使用するフォーマッターを固定したいときに便利です。

複数のフォーマッターから選択する

Prettierなどの拡張機能を導入していると、JSONに対して複数のフォーマッターが利用できる場合があります。

その場合は、コマンドパレットから次のコマンドを利用できます。

Format Document With...

ここから、使用したいフォーマッターを選択できます。

「JSONの整形を実行しても期待どおりにならない」という場合は、どのフォーマッターが選択されているか確認するとよいでしょう。

Prettierを使ってJSONを整形する

VSCode標準機能だけでもJSONを整形できますが、Web開発ではPrettierを使用するケースもあります。

Prettierは、JavaScriptやTypeScript、JSON、HTML、CSS、Markdownなどを統一されたルールでフォーマットできるツールです。

Prettierをデフォルトフォーマッターにする

PrettierのVSCode拡張機能をインストールしている場合は、次のように設定できます。

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

JSONだけPrettierを使用したい場合は、次のようにします。

{
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

Prettierのインデント幅を設定する

Prettierでは、tabWidthでインデント幅を指定できます。

たとえば、.prettierrcを次のように設定します。

{
  "tabWidth": 2,
  "useTabs": false
}

Prettierを使用している場合は、VSCode側のeditor.tabSizeだけでなく、Prettier側の設定も確認することが重要です。

VSCode標準フォーマッターとPrettierはどちらがおすすめか

JSONだけを整形したいのであれば、VSCodeの標準フォーマッターで十分です。

VSCode標準フォーマッターがおすすめのケース

次のような場合は、標準フォーマッターで問題ありません。

JSONを簡単に整形したい
余計な拡張機能を追加したくない
個人で設定ファイルを編集している
APIレスポンスを見やすくしたい
settings.jsonなどを編集したい

Prettierがおすすめのケース

Web開発プロジェクト全体のフォーマットを統一したい場合は、Prettierが便利です。

たとえば、次のようなファイルを同じプロジェクトで扱う場合です。

JavaScript
TypeScript
JSX・TSX
JSON
CSS
HTML
Markdown

チーム開発では、Prettierの設定ファイルを共有することで、メンバーごとのコードスタイルの違いを減らせます。

大量の1行JSONを整形する方法

APIレスポンスなどでは、大量のJSONが1行にまとまっていることがあります。

たとえば、次のようなJSONです。

{"users":[{"id":1,"name":"Taro"},{"id":2,"name":"Hanako"},{"id":3,"name":"Jiro"}],"count":3}

このJSONをVSCodeに貼り付けて「Format Document」を実行すると、次のように整形できます。

{
  "users": [
    {
      "id": 1,
      "name": "Taro"
    },
    {
      "id": 2,
      "name": "Hanako"
    },
    {
      "id": 3,
      "name": "Jiro"
    }
  ],
  "count": 3
}

API開発やデバッグでは、特に便利な使い方です。

JSONが整形できない場合の原因

VSCodeでフォーマットを実行しても正常に整形されない場合は、JSONの構文に問題がないか確認しましょう。

カンマが抜けている

次のJSONでは、"Taro"の後ろにカンマがありません。

{
  "name": "Taro"
  "age": 30
}

正しくは、次のように記述します。

{
  "name": "Taro",
  "age": 30
}

末尾に不要なカンマがある

標準JSONでは、最後の項目の後ろにカンマを付けられません。

{
  "name": "Taro",
  "age": 30,
}

正しくは、次のようにします。

{
  "name": "Taro",
  "age": 30
}

JavaScriptのオブジェクトでは末尾カンマを使用できますが、標準JSONとはルールが異なります。

シングルクォートを使用している

JSONの文字列には、ダブルクォートを使用します。

次の形式は標準JSONとして無効です。

{
  'name': 'Taro'
}

正しくは、次のようにします。

{
  "name": "Taro"
}

キーをダブルクォートで囲んでいない

JavaScriptでは、次のような記述ができます。

const user = {
  name: "Taro"
};

しかし、JSONではキーもダブルクォートで囲む必要があります。

{
  "name": "Taro"
}

JSONとJavaScriptのオブジェクトリテラルは似ていますが、同じものではありません。

ファイルがJSONとして認識されているか確認する

JSONが整形できない場合は、VSCodeがファイルをJSONとして認識しているか確認しましょう。

画面右下の言語モードを確認する

VSCodeの画面右下には、現在の言語モードが表示されています。

JSONファイルであれば、通常は次のように表示されます。

JSON

もし次のようになっている場合は、JSONとして認識されていません。

Plain Text

言語モード部分をクリックし、「JSON」を選択します。

その後、再度フォーマットを実行してください。

JSONファイルには「.json」拡張子を使用する

通常のJSONファイルであれば、ファイル名を次のようにします。

data.json

VSCodeは.jsonファイルを自動的にJSONとして認識します。

一方、次のようなファイルの場合は、プレーンテキストとして認識される可能性があります。

data.txt

JSONデータとして保存するのであれば、基本的には.json拡張子を使用するのがおすすめです。

JSONの構文エラーをVSCodeで確認する

VSCodeには、JSONの構文チェック機能もあります。

JSONに問題がある場合は、該当箇所に波線が表示されたり、「問題」パネルにエラーが表示されたりします。

Windowsでは、次のショートカットで「問題」パネルを表示できます。

Ctrl + Shift + M

JSONがフォーマットできない場合は、最初に構文エラーが表示されていないか確認するとよいでしょう。

なお、構文エラーがあると、フォーマットが正常に実行されなかったり、期待どおりの結果にならなかったりする場合があります。

大きなJSONでは折りたたみ機能も便利

数百行や数千行あるJSONでは、整形するだけでも全体を確認しにくい場合があります。

そのようなときは、VSCodeの折りたたみ機能を活用できます。

たとえば、次のようなJSONがあるとします。

{
  "user": {
    "profile": {
      "name": "Taro",
      "age": 30
    }
  }
}

行番号付近に表示される折りたたみアイコンをクリックすると、オブジェクトや配列の内容を折りたためます。

大規模なAPIレスポンスや設定ファイルを確認するときに便利です。

JSON編集におすすめのVSCode設定

JSONを頻繁に編集するのであれば、次のような設定にしておくと使いやすくなります。

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

この設定では、JSONとJSONCについて次のような環境になります。

保存時に自動フォーマットする
インデントを2スペースにする
タブではなくスペースを使用する
VSCode標準のJSONフォーマッターを使用する

Prettierを利用している場合は、Prettier側のフォーマット設定との重複にも注意しましょう。

VSCodeでJSONを整形する方法のまとめ

VSCodeでは、追加の拡張機能をインストールしなくても、標準機能だけでJSONを整形できます。

もっとも簡単なのは、「Format Document」を使用する方法です。

Windowsでは、次のショートカットを使用できます。

Shift + Alt + F

macOSでは、次のショートカットです。

Shift + Option + F

さらに、毎回手動でフォーマットするのが面倒な場合は、editor.formatOnSaveを有効にしておくと、保存時に自動整形できます。

{
  "editor.formatOnSave": true
}

JSONだけを編集するのであれば、VSCode標準のフォーマッターで十分な場合がほとんどです。

一方、JavaScriptやTypeScript、CSS、HTML、Markdownなども含めてプロジェクト全体のフォーマットルールを統一したい場合は、Prettierを利用すると管理しやすくなります。

また、JSONが正常に整形できない場合は、カンマの不足、末尾カンマ、シングルクォート、キーのダブルクォート不足などの構文エラーも確認することが重要です。

特にVSCodeでは、通常のJSONとJSONCで扱える構文が異なるため、settings.jsonなどを編集するときはJSONCとの違いも理解しておくと、トラブルを避けやすくなります。

以上、VSCodeでJSONを整形する方法についてでした。

最後までお読みいただき、ありがとうございました。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

VSCodeでJSONを整形する方法について

採用はこちら

VSCodeではJSONを標準機能で整形できる

ショートカットキーでJSONを整形する

Windowsの場合

macOSの場合

Linuxの場合

コマンドパレットからJSONを整形する

コマンドパレットを開く

右クリックメニューからJSONを整形する

JSONの選択範囲だけを整形する

Format Selectionを使用する

保存時にJSONを自動整形する

設定画面からFormat On Saveを有効にする

settings.jsonで保存時の自動整形を設定する

JSONだけ保存時に自動整形する

JSONCも保存時に自動整形する

JSONとJSONCの違い

通常のJSONではコメントを書けない

JSONCではコメントを記述できる

JSONCでは末尾カンマも扱える

JSONのインデント幅を変更する

2スペースに設定する

4スペースに設定する

タブではなくスペースを使う

JSON用フォーマッターを指定する

VSCode標準のJSONフォーマッターを指定する

複数のフォーマッターから選択する

Prettierを使ってJSONを整形する

Prettierをデフォルトフォーマッターにする

Prettierのインデント幅を設定する

VSCode標準フォーマッターとPrettierはどちらがおすすめか

VSCode標準フォーマッターがおすすめのケース

Prettierがおすすめのケース

大量の1行JSONを整形する方法

JSONが整形できない場合の原因

カンマが抜けている

末尾に不要なカンマがある

シングルクォートを使用している

キーをダブルクォートで囲んでいない

ファイルがJSONとして認識されているか確認する

画面右下の言語モードを確認する

JSONファイルには「.json」拡張子を使用する

JSONの構文エラーをVSCodeで確認する

大きなJSONでは折りたたみ機能も便利

JSON編集におすすめのVSCode設定

VSCodeでJSONを整形する方法のまとめ

関連記事