VS CodeでJSONを整形するには、ファイルを開いた状態でWindowsは「Shift + Alt + F」、Macは「Shift + Option + F」を押すだけです。APIのレスポンスなどを貼り付けた場合は、先に言語モードをJSONに切り替えないと整形されません。この記事ではショートカットでの整形、1行になったJSONを展開する手順、整形できない場合の原因と対処、拡張機能「Prettier」との違いまで解説します。
VS CodeでJSONを整形する方法
VS CodeでJSONを整形するには、基本的に2つの方法があります。一つはVS Codeのビルトイン機能を利用する方法、もう一つは拡張機能を利用する方法です。以下にその手順を説明します。
1. VS Codeのビルトイン機能を利用する方法
VS CodeにはJSONを整形する機能（ドキュメントのフォーマット）が最初から組み込まれています。整形したいJSONファイルを開き、下記のショートカットキーを押すだけです。
| OS | ショートカットキー |
|---|---|
| Windows | Shift + Alt + F |
| Mac | Shift + Option + F |
| Linux | Ctrl + Shift + I |
ショートカットキーを忘れた場合は、次の2つの方法でも同じ整形を実行できます。
- 右クリックして「ドキュメントのフォーマット」を選択する
- コマンドパレット（Windows: Ctrl + Shift + P／Mac: Command + Shift + P）を開き「Format Document」と入力する
一部だけを整形したい場合は、範囲を選択してから「Ctrl + K」→「Ctrl + F」（Macは「Command + K」→「Command + F」）を押すと、選択範囲のみが整形されます。
2. 拡張機能を利用する方法
VS Codeには多くの拡張機能が提供されており、その中にはJSONをさらに効率的に整形する機能を提供するものもあります。ここでは、その中でも人気の「Prettier」を利用した整形方法を説明します。
- VS Codeを開き、左側のアクティビティバーにある「Extensions」（拡張機能）をクリックします。
- 検索ボックスに「Prettier – Code formatter」と入力し、表示されたものをインストールします。
- インストールが完了したら、整形したいJSONファイルを開きます。
- 「Ctrl + Shift + P」を押してコマンドパレットを開き、「Format Document With…」を選択します。
- 出てきた選択肢から「Prettier」を選びます。
これでPrettierを使ってJSONファイルを整形できます。
1行になったJSONを貼り付けて整形する
APIのレスポンスやログから取り出したJSONは、改行のない1行の状態になっていることがほとんどです。ファイルとして保存せずにその場で整形したい場合は、次の手順で行います。
- 新しいファイルを開きます（Windows: Ctrl + N／Mac: Command + N）。
- 1行のJSONを貼り付けます。
- 言語モードをJSONに切り替えます。ウィンドウ右下の「プレーンテキスト」という表示をクリックし、一覧から「JSON」を選択します（Windows: Ctrl + K → M／Mac: Command + K → M でも同じ一覧が開きます）。
- 「Shift + Alt + F」（Macは「Shift + Option + F」）で整形します。
新規ファイルは既定で「プレーンテキスト」として扱われるため、手順3を飛ばすとショートカットを押しても何も起こりません。ここでつまずくケースが最も多いので、整形されないときはまず右下の言語モードを確認してください。
JSONが整形できない場合の原因と対処
ショートカットキーを押しても整形されない場合、原因は次のいずれかです。上から順に確認してください。
- 言語モードがJSONになっていない — 右下の言語モード表示を「JSON」に変更します。貼り付けただけの新規ファイルで最も多い原因です。
- JSONの構文にエラーがある — 末尾に余分なカンマがある、引用符が閉じていないなど構文が壊れていると整形されません。波線が表示されている箇所を修正してください。設定ファイルなどでコメントを含むJSONを扱う場合は、言語モードを「JSON with Comments（jsonc）」にします。
- 既定のフォーマッタが決まっていない — Prettierなど複数の拡張機能を入れていると、どれを使うか確定せず処理が止まることがあります。コマンドパレットから「Format Document With…」を選び、使いたいフォーマッタを指定して「既定のフォーマッタを構成する」を選択します。
- ショートカットキーが他の機能と重複している — 日本語入力ソフトや他の拡張機能にキーを奪われている場合があります。右クリックの「ドキュメントのフォーマット」で整形できるなら、キー割り当ての問題です。
毎回ショートカットを押すのが面倒な場合は、設定（Windows: Ctrl + ,／Mac: Command + ,）で「Format On Save」を検索してチェックを入れると、保存するたびに自動で整形されます。
ビルトイン機能と拡張機能の違い
以下の表は、VS Codeのビルトイン機能と拡張機能「Prettier」の特徴を比較したものです。
| ビルトイン機能 | Prettier | |
|---|---|---|
| インストール | 不要 | 必要 |
| 設定 | 限定的 | 幅広い |
| 整形可能なファイル種類 | JSONのみ | JSON, JavaScript, TypeScript, CSS, HTML等 |
ビルトイン機能は手軽に利用できますが、整形可能なファイル種類や設定の柔軟性に限りがあります。一方、Prettierはインストールが必要ですが、多くの種類のファイルを整形でき、設定も細かく行うことができます。
関連動画
まとめ
今回はVS CodeでJSONを整形する方法について説明しました。VS Codeのビルトイン機能を使った方法と、拡張機能「Prettier」を使った方法の2種類を紹介しました。どちらの方法もそれぞれに利点があり、使い方はあなたのプロジェクトや作業スタイルによります。VS Codeのこのような機能を活用して、より効率的にコーディングを進めてください。
VSCodeのショートカットの練習
下記のSTARTボタンをクリックするとVSCodeのショートカットの練習ができます。ここで繰り返し練習をすることで無意識にショートカットキーが扱えるようになれるように作ってあります。ぜひお試しください。
※推奨ブラウザ Google Chrome
