MENU
contact

VSCodeでJSONをフォーマットする方法

VSCode

採用はこちら

VS Codeには、JSONを整形するためのフォーマット機能が標準で用意されています。
そのため、単純にJSONを読みやすく整形したいだけであれば、Prettierなどの拡張機能を追加する必要はありません。

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

{"name":"Taro","age":30,"skills":["HTML","CSS","JavaScript"]}

VS Codeでフォーマットを実行すると、次のようにインデントや改行が自動的に整えられます。

{
  "name": "Taro",
  "age": 30,
  "skills": [
    "HTML",
    "CSS",
    "JavaScript"
  ]
}

JSONを手作業で改行したり、スペースを調整したりする必要がなくなるため、JSONファイルを編集するときはVS Codeのフォーマット機能を活用すると便利です。

目次

ショートカットキーでJSONをフォーマットする

VS CodeでJSONをフォーマットする最も簡単な方法は、「Format Document」を実行することです。

Windowsの場合

Windowsでは、JSONファイルを開いた状態で次のショートカットキーを押します。

Shift + Alt + F

現在開いているドキュメント全体がフォーマットされます。

macOSの場合

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

Shift + Option + F

WindowsとはAltキーとOptionキーの表記が異なりますが、基本的な操作は同じです。

Linuxの場合

Linuxでは、デフォルトでは次のショートカットキーが割り当てられています。

Ctrl + Shift + I

OSによって「Format Document」のデフォルトショートカットが異なるため、自分が利用している環境に合わせて使い分けましょう。

右クリックメニューからJSONをフォーマットする

ショートカットキーを覚えていない場合は、右クリックメニューからフォーマットできます。

Format Documentを実行する

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

表示されたメニューから、

Format Document

を選択します。

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

選択すると、現在開いているJSONファイル全体がフォーマットされます。

コマンドパレットからJSONをフォーマットする

VS Codeのコマンドパレットから「Format Document」を実行する方法もあります。

コマンドパレットを開く

WindowsまたはLinuxでは、次のショートカットキーを押します。

Ctrl + Shift + P

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

Command + Shift + P

コマンドパレットが表示されたら、

Format Document

と入力します。

一覧から「Format Document」を選択すれば、現在開いているJSONファイル全体が整形されます。

ショートカットキーが変更されている場合や、どのコマンドを実行すればよいか分からない場合にも便利な方法です。

JSONの一部分だけをフォーマットする

JSONファイル全体ではなく、選択した部分だけをフォーマットすることもできます。

Format Selectionを利用する

フォーマットしたい範囲を選択してから、「Format Selection」を実行します。

WindowsやLinuxでは、デフォルトで次のキーが利用できます。

Ctrl + K
Ctrl + F

Ctrl + Kを押したあと、続けてCtrl + Fを押します。

macOSでは次のキーです。

Command + K
Command + F

JSON全体を整形したくない場合や、一部分だけインデントを整えたい場合に利用できます。

JSONを保存したときに自動フォーマットする

JSONを頻繁に編集する場合は、保存時に自動的にフォーマットされるよう設定しておくと便利です。

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

WindowsやLinuxでは、次のショートカットキーから設定画面を開けます。

Ctrl + ,

macOSでは次のキーです。

Command + ,

設定画面を開いたら、検索ボックスに次の文字列を入力します。

format on save

「Editor: Format On Save」を有効にします。

これで、ファイルを保存するたびにフォーマッターが自動的に実行されます。

settings.jsonで保存時フォーマットを設定する

GUIではなく、settings.jsonを直接編集して設定することもできます。

すべての対応ファイルを保存時にフォーマットする

すべての対応言語で保存時フォーマットを有効にする場合は、次の設定を追加します。

{
  "editor.formatOnSave": true
}

この設定を有効にすると、JSONだけでなく、利用可能なフォーマッターが設定されているほかの言語でも保存時フォーマットが実行されます。

JavaScriptやHTMLなどまで自動整形したくない場合は、言語ごとの設定を利用した方がよいでしょう。

JSONだけ保存時にフォーマットする

JSONだけ自動整形したい場合は、言語固有設定を利用できます。

JSON専用の設定を追加する

settings.jsonに次のように記述します。

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

[json]は、JSONにだけ適用する設定を意味します。

この方法であれば、JavaScriptやHTMLなどの保存時フォーマットには影響を与えず、JSONだけを自動整形できます。

JSONCも保存時にフォーマットする

VS Codeでは、通常のJSONとは別に「JSON with Comments」という言語モードがあります。

JSONCとは

JSONCは、JSONにコメントなどを記述できるようにした形式です。

VS Codeでは、次のような設定ファイルがJSONCとして扱われます。

settings.json
tasks.json
launch.json

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

{
  // エディターの設定
  "editor.fontSize": 14
}

通常のJSONではコメントを記述できません。

そのため、JSONとJSONCは同じものではない点に注意しましょう。

JSONCでも保存時フォーマットを有効にする

JSONとJSONCの両方を保存時に整形したい場合は、次のように設定できます。

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

通常の.jsonファイルとVS Codeの設定ファイルの両方を編集する場合に便利です。

JSONCでは末尾カンマにも注意する

JSONCでは、コメントだけでなく末尾カンマを扱えるケースもあります。

例えば次のような記述です。

{
  "editor.fontSize": 14,
}

ただし、VS Codeでは設定内容や対象ファイルによって警告が表示されることがあります。

一般的なJSONとして外部システムに渡すデータでは、末尾カンマを使わない方が安全です。

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

Prettierなど複数のフォーマッターをインストールしている場合、JSONで使用するフォーマッターを明示的に指定できます。

標準JSONフォーマッターを設定する

VS Code標準のJSONフォーマッターを利用する場合は、次のように設定できます。

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

vscode.json-language-featuresは、VS Codeに標準搭載されているJSON関連機能の識別子です。

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

PrettierでJSONをフォーマットする

Web開発では、Prettierを使ってJSONをフォーマットする方法もよく利用されます。

Prettierを使うメリット

PrettierはJSONだけでなく、次のようなファイルのフォーマットにも利用できます。

JavaScript
TypeScript
JSON
HTML
CSS
Markdown

プロジェクト全体でフォーマットルールを統一したい場合に便利です。

JSONだけを編集するのであればVS Code標準フォーマッターでも十分ですが、Web開発ではPrettierを導入するケースが多くあります。

Prettierをインストールする

VS Codeの拡張機能画面からPrettierをインストールできます。

拡張機能画面を開く

WindowsやLinuxでは、次のショートカットキーを利用できます。

Ctrl + Shift + X

拡張機能の検索欄に、

Prettier - Code formatter

と入力します。

該当する拡張機能をインストールします。

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

Prettierをインストールしただけでは、環境によってVS Code標準フォーマッターが使用される場合があります。

settings.jsonでPrettierを指定する

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

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

esbenp.prettier-vscodeは、VS Code版Prettier拡張機能の識別子です。

これにより、JSONファイルを保存したときにPrettierで自動整形できます。

JSONとJSONCでフォーマッターを分ける

JSONではPrettierを使い、JSONCではVS Code標準フォーマッターを使う設定も可能です。

フォーマッターを言語ごとに指定する

例えば、次のように設定できます。

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

これは一例です。

JSONCでもPrettierを利用できるため、必ずVS Code標準フォーマッターを使用しなければならないわけではありません。

プロジェクトの運用ルールに合わせて選択しましょう。

GUIからデフォルトフォーマッターを変更する

settings.jsonを直接編集しなくても、VS Codeの画面からフォーマッターを指定できます。

Format Document Withを利用する

JSONファイルを開いた状態で右クリックし、

Format Document With...

を選択します。

続いて、

Configure Default Formatter...

を選択します。

利用できるフォーマッターが一覧表示されるため、

Prettier - Code formatter

またはVS Code標準のJSONフォーマッターを選択します。

同じ言語に複数のフォーマッターが登録されている場合、この方法で使用するフォーマッターを明示するとトラブルを防げます。

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

JSONを2スペースではなく4スペースで整形したい場合もあります。

VSCode側のインデント設定

VS Codeには、次のようなインデント設定があります。

{
  "editor.tabSize": 4,
  "editor.insertSpaces": true
}

editor.tabSizeはインデント幅を指定します。

editor.insertSpacesをtrueにすると、Tab入力時にタブ文字ではなくスペースを使用します。

ただし、フォーマット時のインデント幅は使用するフォーマッター側の設定に影響される場合があります。

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

Prettierを使っている場合は、Prettier側で設定するのが確実です。

.prettierrcでtabWidthを指定する

例えば、.prettierrcに次のように記述します。

{
  "tabWidth": 4
}

これにより、Prettierでは4スペースを基準としてフォーマットされます。

チーム開発では、VS Codeの個人設定だけに依存せず、.prettierrcなどのプロジェクト設定で統一すると環境差を減らせます。

Prettierでは設定ファイルが優先される

Prettierを利用する場合は、設定の優先順位にも注意が必要です。

プロジェクト側の設定を確認する

例えば、プロジェクト内に次のようなファイルが存在する場合があります。

.prettierrc
prettier.config.js
.editorconfig

これらの設定が存在すると、VS Code側で設定したPrettierの値よりプロジェクト設定が優先される場合があります。

そのため、

「VS CodeでtabWidthを変更したのに反映されない」

といった場合は、プロジェクト内のPrettier設定ファイルも確認しましょう。

JSONをフォーマットできない原因

VS CodeでJSONをフォーマットできない場合は、いくつかの原因が考えられます。

JSONに構文エラーがある

JSONの構文が壊れていると、正常にフォーマットできない場合があります。

例えば、次のJSONにはカンマが不足しています。

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

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

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

VS Codeでは構文エラーがある部分に赤い波線などが表示されることがあります。

フォーマットできない場合は、まずJSONに構文エラーがないか確認しましょう。

ファイルの言語モードがJSONになっていない

.txtファイルなどにJSONを書いている場合、VS CodeがJSONとして認識していない可能性があります。

ステータスバーで言語モードを確認する

画面右下の言語モードを確認します。

例えば、

Plain Text

になっている場合は、クリックして、

JSON

を選択します。

JSONCとして扱いたい場合は、

JSON with Comments

を選択します。

言語モードが正しく設定されることで、JSON向けのフォーマット機能を利用できるようになります。

複数のフォーマッターが設定されている

Prettierなど複数のフォーマッターが登録されている場合、使用するフォーマッターの選択を求められることがあります。

デフォルトフォーマッターを指定する

次のメニューを利用します。

Format Document With...

その後、

Configure Default Formatter...

を選択します。

または、settings.jsonで次のように指定できます。

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

使用するフォーマッターを明示しておくと、環境による動作の違いを減らせます。

PrettierのrequireConfig設定を確認する

Prettierを使用している場合は、prettier.requireConfigにも注意が必要です。

requireConfigがtrueになっている場合

例えば次の設定があるとします。

{
  "prettier.requireConfig": true
}

この設定が有効になっている場合、.prettierrcなどのPrettier設定ファイルが存在しないプロジェクトでは、Prettierがフォーマットを実行しない場合があります。

Prettierを選択しているのにJSONが整形されない場合は、この設定も確認するとよいでしょう。

.prettierignoreを確認する

Prettierでは、.prettierignoreによってフォーマット対象からファイルを除外できます。

JSONが除外されていないか確認する

例えば、.prettierignoreに次のような記述があるとします。

data/*.json

この場合、対象ディレクトリ内のJSONファイルはPrettierのフォーマット対象から除外される可能性があります。

特定のJSONファイルだけフォーマットできない場合は、.prettierignoreも確認しましょう。

JSONとJSONCの違いを理解しておく

JSONとJSONCを混同すると、構文エラーやフォーマットエラーの原因になります。

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

次のような記述は、通常のJSONでは正しい形式ではありません。

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

通常のJSONでは、コメントを削除する必要があります。

{
  "name": "Taro"
}

JSONCではコメントを書ける

VS Codeのsettings.jsonなどではJSONCが利用されるため、コメントを書くことができます。

{
  // フォントサイズ
  "editor.fontSize": 14
}

JSONを外部APIやWebサービスに送信する場合は、基本的に標準JSONとして有効な形式にする必要があります。

VS Code内部の設定ファイルと、一般的なJSONデータを区別して扱いましょう。

VSCode標準フォーマッターとPrettierのどちらを使うべきか

JSONをフォーマットする方法として、VS Code標準フォーマッターとPrettierのどちらを選ぶべきか迷うことがあります。

JSONだけを編集するならVSCode標準機能で十分

単純にJSONを読みやすく整形したいだけであれば、VS Code標準フォーマッターで十分です。

追加の拡張機能をインストールする必要がないため、設定もシンプルです。

Web開発全体で統一するならPrettierが便利

JavaScriptやTypeScript、HTML、CSS、Markdownなども同じプロジェクトで扱う場合は、Prettierを利用するとフォーマットルールを統一しやすくなります。

チーム開発では.prettierrcなどをGitで共有することで、メンバー間のフォーマット差も減らせます。

JSONだけならVS Code標準、Web開発プロジェクト全体を整形するならPrettierという使い分けが分かりやすいでしょう。

VSCodeでJSONをフォーマットするおすすめ設定

JSONを頻繁に扱う場合は、保存時フォーマットまで有効にしておくと便利です。

VSCode標準機能だけを使う場合

拡張機能を使わずにJSONとJSONCを自動整形する場合は、次のように設定できます。

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

シンプルなJSON編集であれば、この設定で十分です。

Prettierを使う場合

Web開発でPrettierを使用する場合は、例えば次のように設定できます。

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

さらにプロジェクト側に.prettierrcを配置しておけば、チーム全体で同じフォーマットルールを共有できます。

まとめ

VS Codeでは、標準機能だけでJSONを簡単にフォーマットできます。

最も手軽なのは「Format Document」を利用する方法です。

Windowsでは、

Shift + Alt + F

macOSでは、

Shift + Option + F

Linuxでは、

Ctrl + Shift + I

を利用できます。

さらに、

{
  "editor.formatOnSave": true
}

を設定すると、ファイル保存時に自動フォーマットできます。

JSONだけを整形するのであればVS Code標準フォーマッターで十分です。

一方、JavaScriptやTypeScript、HTML、CSSなどを含むWeb開発プロジェクトでは、Prettierを利用するとフォーマットルールを統一しやすくなります。

JSONをフォーマットできない場合は、構文エラー、言語モード、デフォルトフォーマッター、prettier.requireConfig、.prettierignore、JSONとJSONCの違いなどを順番に確認すると原因を特定しやすくなります。

以上、VSCodeでJSONをフォーマットする方法についてでした。

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

VSCode
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

  1. ホーム
  2. VSCode
  3. VSCodeでJSONをフォーマットする方法
目次