JSONファイルを自動整形して表示する方法

Visual Studio CodeでJSONファイルを扱う際、1行に圧縮されたデータを毎回手動で整形するのは面倒ではありませんか？本記事では、JSONファイルを自動的に整形表示する効率的な方法を解説します。

問題点：手動整形の煩雑さ

JSONファイルを扱う際、以下の課題に直面することがあります：

• 1行に圧縮されたJSONデータの可読性が低い
• 毎回手動で整形（Shift+Alt+F）する手間
• ファイルが定期的に更新され、再整形が必要になる

解決策：キーボードショートカットによる迅速な整形

最も基本的かつ効果的な方法は、VS Codeの組み込みキーボードショートカットを使用することです：

プラットフォーム	ショートカットキー
Windows	Shift + Alt + F
Mac	Shift + Option + F
Linux	Ctrl + Shift + I

このショートカットはVS Codeに標準で組み込まれており、追加の拡張機能をインストールする必要はありません。

使用手順

1. JSONファイルを開く
2. ショートカットキーを押す
3. ファイルが自動的に整形される
4. 保存（Ctrl+S）で変更を確定

重要な設定：Keep Linesオプション

場合によっては、整形が期待通りに動作しないことがあります。これは「JSON > format: Keep Lines」設定が有効になっている可能性があります。

// settings.json
{
  "json.format.keepLines": false // デフォルトはfalse
}

注意点

Keep Linesが有効になっていると、1行のJSONファイルや同じ行に複数のキー/値があるJSONは期待通りに整形されません。この設定を無効にして再度整形してください。

拡張機能を使用する方法

より高度な機能が必要な場合、拡張機能の導入も検討できます：

推奨拡張機能

• JSON (Microsoft公式) - 基本的なJSONサポート
• JSON Prettifier - 専門的な整形機能
• Meezilla JSON - 追加の整形オプション（Cmd/Ctrl+Shift+Jでクイック整形）

インストール方法

# VS Code内で実行
ext install json
# または
ext install JSON Prettifier

設定例

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

自動整形の設定

より効率的に作業するために、自動整形設定を有効にすることができます：

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

自動保存時の注意

formatOnSaveを有効にすると、保存時に自動的に整形されますが、場合によっては意図しない変更が加えられる可能性もあるため、重要なファイルでは注意が必要です。

まとめ

JSONファイルの自動整形には、以下のアプローチが効果的です：

1. 標準ショートカット：最も簡単で確実な方法
2. 設定の確認：Keep Linesオプションを適切に設定
3. 拡張機能：追加機能が必要な場合に導入
4. 自動化設定：formatOnSaveで効率化

これらの方法を組み合わせることで、JSONファイルの可読性を大幅に向上させ、開発効率を高めることができます。