アフィリエイト広告を紹介しています
Working Class Hero：泥臭く、スマートに生き抜く。

汗と汚れの染み込む現場も、キーボードを叩く現場も、どちらも知っている。 元ライン工の僕が、ITの世界で見つけた「少しだけ楽に、自分らしく働くための知恵」を置いておきます。

僕が働き方を変えた理由
【学ぶ】ITスキル習得
【学ぶ】ITスキル習得
【変える】エンジニア転職
【変える】エンジニア転職
【知る】工場勤務のリアル
【知る】工場勤務のリアル

【VSCode】JSONを整形する方法3選！ショートカット・自動保存・Prettier完全解説

2026.03.13

JSONがぐちゃぐちゃで読めない…。

そんなとき、VSCodeならショートカット一発で自動整形できます。拡張機能も、コピペも不要です。

太郎
太郎

この記事を読めば、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ショートカットでこれだけ変わります。覚えておくだけで毎日得します。

【自動化】保存時に自動整形する設定

毎回ショートカットを押すのが面倒なら、保存と同時に自動整形させましょう。

1
設定を開く

`Cmd + ,`（Mac）または `Ctrl + ,`（Windows）で設定画面を開く

2
「Format On Save」を検索

検索バーに `format on save` と入力

3
チェックを入れて完了

「Editor: Format On Save」にチェックを入れる

これで Cmd + S（または Ctrl + S）で保存するたびに自動整形されます。

私
私

一度設定すれば、あとは意識しなくていい。これが一番楽な運用です。

整形が効かないときの対処法

原因1：ファイルがJSONとして認識されていない

拡張子がない・または .json 以外のファイルは、言語モードを手動で設定する必要があります。

1
右下の言語表示をクリック

VSCode右下に「Plain Text」や「Plaintext」と表示されている部分をクリック

2
「JSON」を選択

表示されたリストから「JSON」を選択する

原因2：フォーマッターが複数ある

Prettierなど複数のフォーマッターが入っていると「どれを使うか」と聞かれます。

Shift + Option + F を押したとき「フォーマッターを選択してください」と出た場合、使いたいフォーマッターを選んでデフォルトに設定してください。

【拡張機能】Prettierを入れるとさらに便利

VSCode標準の整形でも十分ですが、Prettierを入れると JSON 以外のファイルも一括対応できます。

拡張機能 特徴 おすすめ度
Prettier JSON・HTML・CSS・JSすべてに対応 ★★★★★
JSON Tools JSONの圧縮・展開・ソートも可能 ★★★★☆
Sort JSON キーをアルファベット順にソート ★★★☆☆
太郎
太郎

Prettierを入れておけば、JSON以外にもHTML・CSS・JavaScriptなどまとめて整形してくれます。プロジェクト全体の書き方を統一できるのが最大のメリットです。

コマンドパレットからも実行できる

ショートカットを忘れた場合の保険として覚えておくと便利です。

  1. Cmd + Shift + P（Mac）または Ctrl + Shift + P（Windows）
  2. Format Document と入力
  3. 「ドキュメントのフォーマット」を選択して実行

まとめ：JSON整形はショートカット一発でOK

この記事のポイント
  • Mac： `Shift + Option + F` / Windows： `Shift + Alt + F` で即整形
  • 「Format On Save」設定で保存時に自動整形
  • 整形が効かないときは言語モードを「JSON」に変更
  • Prettierを入れると全ファイル形式をまとめて整形できる

JSON整形は毎日使うスキルなので、ショートカットだけでも今すぐ覚えておきましょう。

プログラミングを効率よく学ぶなら

独学で限界を感じていませんか？プロのカリキュラムなら最短でスキルが身につきます。

※無料体験・無料カウンセリングあり

コメント