JSONファイルがぐちゃぐちゃで読めない…。
そんな経験はありませんか？
VSCodeなら、ショートカット一発でJSONを自動整形できます。拡張機能も不要です。
たった1つのショートカットを覚えるだけ！3秒でキレイに整形できますよ。
JSONを整形するショートカット
Mac： Shift + Option + F
Windows： Shift + Alt + F
これだけでJSONが自動的にインデント付きで整形されます。
整形前
{"name":"太郎","age":25,"skills":["HTML","CSS","JavaScript"],"address":{"city":"東京","zip":"100-0001"}}
整形後
{
"name": "太郎",
"age": 25,
"skills": [
"HTML",
"CSS",
"JavaScript"
],
"address": {
"city": "東京",
"zip": "100-0001"
}
}
たった1つのショートカットでこれだけ見やすくなります！
保存時に自動整形する設定
毎回ショートカットを押すのが面倒なら、保存時に自動整形する設定がおすすめです。
設定を開く
`Cmd + ,`（Mac）または `Ctrl + ,`（Windows）で設定画面を開く
Format On Saveを検索
検索バーに「format on save」と入力
チェックを入れる
「Editor: Format On Save」にチェックを入れる
これで Cmd + S で保存するたびに自動的に整形されます。
JSONファイルとして認識されない場合
整形が効かない場合は、ファイルの言語モードがJSONになっていない可能性があります。
言語モードを確認
VSCode右下の言語表示（「Plain Text」など）をクリック
JSONを選択
表示されたリストから「JSON」を選択
拡張子が `.json` のファイルは自動的にJSON認識されますが、拡張子がないファイルは手動で設定が必要です。
コマンドパレットからも整形できる
ショートカットを忘れた場合は、コマンドパレットからも実行可能です。
Cmd + Shift + P（Mac）またはCtrl + Shift + P（Windows）- 「Format Document」と入力
- 「ドキュメントのフォーマット」を選択
JSON整形に便利な拡張機能
VSCode標準でも十分ですが、より高機能な整形が必要な場合は以下の拡張機能もおすすめです。
| 拡張機能 | 特徴 | おすすめ度 |
|---|---|---|
| Prettier | 多言語対応の定番フォーマッター | ★★★★★ |
| JSON Tools | JSONの圧縮・展開が可能 | ★★★★☆ |
| Sort JSON | キーをアルファベット順にソート | ★★★☆☆ |
Prettierを入れておけば、JSON以外にもHTML・CSS・JavaScriptなど全部まとめて整形してくれますよ！
もっとVSCodeを使いこなしたいなら
- 関連記事
-
- [VSCode拡張機能おすすめ15選](/blog/3326/)
- [VSCodeのショートカットキーおすすめ20選](/blog/3324/)
- [VSCodeのEmmetの使い方](/blog/3411/)
- [VSCodeのターミナルの使い方](/blog/3406/)
プログラミングを効率よく学ぶなら
独学で限界を感じていませんか？プロのカリキュラムなら最短でスキルが身につきます。
※無料体験・無料カウンセリングあり
まとめ：JSONの整形はショートカット一発！
- この記事のポイント
-
- `Shift + Option + F`（Mac）で一瞬で整形
- 「Format On Save」設定で保存時に自動整形
- 言語モードがJSONになっているか確認
- Prettier拡張を入れるとさらに便利
JSONの整形は日常的に使うので、ショートカットは必ず覚えておきましょう！
コメント