【VSCode】JSON・XMLを整形・最小化する方法

JSONはWeb開発・アプリ開発において欠かせないデータ形式であり、設定ファイルやAPIレスポンスなど多くの場面で利用されています。特に package.json、project.json、tsconfig.json など、VS Codeで扱うファイルの多くがJSON形式で構成されています。

一方、XML（Extensible Markup Language） も長く利用されているデータ記述形式で、Webサービスの設定ファイル（pom.xml など）や、APIフォーマットでも利用されています。

VSCodeはJSONとの相性がよく、標準で次のような便利な機能をサポートしています。

• シンタックスハイライト
• 構文エラー検知
• 補完（IntelliSense）
• 整形（Format Document）

XMLも十分扱うことができますが、拡張機能によって機能を補う必要があります。

本記事では、VS CodeでJSON/XMLを効率的に整形し、編集作業をスムーズにするための設定・拡張機能を詳しく解説します。初心者の方でもすぐに実践できる内容から、上級者向けのカスタマイズまで網羅しています。

記事のポイント

• VSCodeはJSONの整形機能を標準搭載しており、ショートカットで即整形できる。
• より高度な整形やプロジェクト統一には Prettier の導入が有効。
• editor.formatOnSave により保存時の自動整形を実現できる。
• XML も拡張機能によってインデント整形可能。
• 言語別フォーマッター設定で JSON・XML を個別に最適化できる。

【VSCode】ビルトイン機能によるJSON整形

VS Codeには追加の拡張機能をインストールしなくても使える便利な整形機能が備わっています。まずはその基本を押さえておきましょう。

JSONサンプルデータ

本記事では下記JSONを例に解説します。

1
{
2
  "name": "Taro Yamada",
3
  "age": 28,
4
  "email": "taro@example.com",
5
  "isActive": true
6
}

JSONフォーマットの実行方法

VS Codeに標準搭載されているJSONフォーマッターは、次の方法で実行できます。

ショートカットで整形

• Windows: Shift + Alt + F
• macOS: Shift + Option + F（または Alt + Shift + F）

JSON整形前

JSON整形後

マウス操作で整形

1. 編集画面内で右クリック＞ドキュメントのフォーマット を選択します

2. 下記のようにJSONが整形されます

エディタが自動で問題箇所を強調

整形とあわせて、VS CodeはJSONの構文エラー（カンマ抜け、引用符閉じ忘れなど）を強調表示してくれるため、修正もしやすくなっています。

JSON標準フォーマッターの特徴

• 導入不要で手軽に使える
• JSONに特化しており動作が軽い
• シンプルだが基本的な整形は十分こなせる

VS Code標準の整形で十分なケースも多いため、まずはビルトイン機能を使いこなすところから始めるのがおすすめです。

【VSCode】拡張機能を利用した高度なJSON整形

ビルトインフォーマッターが物足りない場合や、プロジェクト全体で整形ルールを統一したい場合には、拡張機能を利用するのが効果的です。

Prettier - Code formatter の活用

Prettierは最も人気が高いコードフォーマッターで、JSONだけでなく幅広い言語に対応しています。

インストール方法

1. VS Code左側の 拡張機能（Extensions） アイコンをクリック

2. 検索ボックスに 「Prettier」 と入力

3. Prettier - Code formatter をインストール

発行元の信頼を聞かれたら、発行元を信頼してインストールするを押下。

Prettierをデフォルトフォーマッターに設定（setting.json）

settings.json に以下を追加します。

1
"editor.defaultFormatter": "esbenp.prettier-vscode"

Prettierをデフォルトフォーマッターに設定（GUI）

VS Code設定画面からGUIで指定することも可能です。
右クリック＞ドキュメントのフォーマット…を指定します。

既定のフォーマッタを構成…を選択します。

Prettieer - Code formatterを選びます。

Prettierのメリット

• JSON / JS / TS / HTML / CSS など多数の形式に対応
• プロジェクト全体でコードスタイルを統一できる
• 自動整形（Format On Save）と相性がよい
• Prettier専用設定（.prettierrc）で細かいルールを指定可能

チーム開発ではPrettierを導入してコードスタイルを統一するケースが一般的です。

JSON Tools の活用

JSONを日常的に扱う方におすすめなのが、JSON Tools という拡張機能です。標準機能ではできないJSONの最小化や、部分的な整形にも対応しているため、開発中のJSONを頻繁に扱う方に非常に便利です。

主な機能

• Pretty（整形）: Ctrl + Alt + M

• Minify（最小化）: Alt + M

JSONファイルだけフォーマッターを指定

以下のように記述すると、JSONだけ別のフォーマッターを使うことも可能です。

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

JSONのキーを自動ソートする拡張機能

JSON編集の効率をさらに高めるため、VS Codeには他にも便利な機能や拡張があります。 Sort JSON objects を使うと、キーの並び順を簡単に統一できます。アルファベットやキー名の長さなどのソートを指定することができます。

Sort JSON objectsでアルファベット順にソートする場合

Ctrl + Shift + PからSort JSONを入力し、…(by alphanum)を選択します。

下記のようにキーの並びがアルファベット順にソートされました。

【VSCode】XMLの整形

JSONだけでなく、XMLも設定ファイルやデータ連携で頻繁に扱われます。ここではVS CodeでXMLを快適に整形・編集するためのポイントをまとめます。

XMLサンプルデータ

本記事では下記XMLを例に解説します。

1
<person>
2
  <name>Taro Yamada</name>
3
  <age>28</age>
4
  <email>taro@example.com</email>
5
  <isActive>true</isActive>
6
</person>

XMLフォーマットの実行方法

• ドキュメントの整形: JSONと同様に Shift + Alt + F（Windows）や Shift + Option + F（macOS）で整形が利用できます。ただし、XMLは専用の拡張機能を入れる必要があります。

XML整形おすすめの拡張機能

1. XML

XMLの拡張機能をインストールすることで、Shift + Alt + Fの整形が可能になります。

XML整形前

XML整形後

2. XML Tools

XML Toolsは整形に加えてMinify（最小化）など開発者に便利な機能を提供します。

XMLを最小化したい場合

例えばXML ToolsでXMLを最小化したい場合は、Ctrl + Shift + PからXML Tools: Minify XMLを実行します。

XML Tools: Minify XMLを実行。

XMLが以下のように1行に最小化される。

1
<person><name>Taro Yamada</name><age>28</age><email>taro@example.com</email><isActive>true</isActive></person>

XML整形デフォルトフォーマッターの設定例

settings.json に言語別設定を追加して、XML専用のフォーマッターを指定できます。

1
"[xml]": {
2
  "editor.defaultFormatter": "redhat.vscode-xml"
3
}

上記の場合、整形実行時にRed HatのXMLフォーマッターが使われるようになります。

【VSCode】ファイル保存時の自動フォーマット設定

手動で整形するのは簡単ですが、毎回ショートカットを押したり、右クリックから整形を選んだりするのは意外と手間です。VS Codeでは保存と同時に自動整形する設定が可能です。

Format On Save（保存時フォーマット）を有効化

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

1
"editor.formatOnSave": true

GUIで設定する場合：

1. Ctrl + , で設定画面を開く

2. 「Format On Save」を検索し、チェックを入れる

以下はJSONが自動整形される例です。

保存前

保存後

自動フォーマットが効かないときのチェックポイント

• フォーマッターが複数インストールされている（Prettier と VS Code 標準など）
• ワークスペース・ユーザー・フォルダの設定が競合している
• .prettierrc や .editorconfig が別の設定を上書きしている

特に「複数フォーマッター問題」は多くの開発者が経験するため、デフォルトフォーマッターの指定は重要です。

【VSCode】JSON・XML整形まとめ

• 手軽に整形するなら ビルトイン機能 をまず使う。
• プロジェクト全体でルールを統一するなら Prettier を導入するのが効果的。
• JSON特化の処理には JSON Tools や Sort JSON objects などの拡張が便利。
• XMLを扱う場合は XML(Red Hat) や XML Tools を入れる。

VS Codeの標準機能・拡張機能をうまく使い分けて、JSON／XMLどちらの編集もより快適にしましょう。

VSCode学習者にお勧めの本

これ1冊でできる！Visual Studio Code 超入門

Visual Studio Code完全入門　Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り

Visual Studio Codeパーフェクトマスター

ITエンジニアにお勧めの本

世界一流エンジニアの思考法 (文春e-book)

ソフトウェア開発現場の「失敗」集めてみた。 42の失敗事例で学ぶチーム開発のうまい進めかた

IT用語図鑑［エンジニア編］ 開発・Web制作で知っておきたい頻出キーワード256