VS CodeでJSONを編集する方法

JSONはキーと値のペアでデータを保持するファイルフォーマットで、設定ファイルやサーバとのデータ送受信などでよく使用される。
今回は、VS CodeでこのJSONファイルを編集する方法について記載する。

環境
基本的な機能
JSON with Comments (JSONC)
JSONファイルとスキーマファイルの関連付け
JSON Schema Store
参考

環境

Windows 11 Home 23H2
Visual Studio Code 1.92

基本的な機能

他のファイルの機能と同様。

候補をトリガー…Ctrl+Space
クイックナビゲーション…Ctrl+Shift+O
フォーマット…Shift+Alt+F
折り畳み
- 行番号とコード開始位置間の折り畳みアイコンをクリック
- 折り畳む…Ctrl+Shift+[
- 元に戻す…Ctrl+Shift+]

JSON構造と指定したスキーマに基づいたバリデーションもサポートしている。

JSON with Comments (JSONC)

通常のJSONファイルにはコメントを記載することはできないが、JSONCではコメントを記載することができる (//～、/*～*/)
VS Codeで使用される設定系ファイル(settings.json, tasks.json, or launch.json)にコメントを記載することができるのは、JSONCとして定義されているため。

ファイルがJSONとJSONCのどちらとして扱われているかは、ステータスバーを確認すれば良い。

JSONファイルとスキーマファイルの関連付け

XML同様にJSONファイルにもスキーマを定義することが可能で、JSONファイルとスキーマファイルを関連付けるには、以下の方法がある。

JSONファイルからスキーマファイルを参照
設定ファイルにスキーマ情報を定義

JSONファイルからスキーマファイルを参照

JSONファイルの$schema属性からスキーマファイルを参照し、JSONファイルとスキーマファイルを関連付ける方法 (最もシンプルな関連付け方法)

例. Chrome Extensionのマニフェストファイルとスキーマファイルを関連付け

// manifest.json
{
  "$schema": "https://json.schemastore.org/chrome-manifest.json",
  "manifest_version": 3,
  "name": "Handle JSON in VS COde",
  "version": "1.0.0",
  "description": "Article about how to handle json in vs code.",
  "icons": {
    // ...
  }
}

設定ファイルにスキーマ情報を定義

設定ファイル(settings.json、.code-workspace)で、以下のようなスキーマに関する情報を設定し、JSONファイルとスキーマ、もしくはスキーマ定義を関連付ける方法。

JSONファイルとスキーマファイルの関連付け
JSONファイルのスキーマ定義そのもの

設定ファイルを使って、JSONファイルとスキーマファイルの関連付け

設定ファイルでJSONファイルとスキーマファイルを関連付けるには、json.schema属性内で、適用するファイルパターンとURLを定義する。

例. Chrome Extensionのマニフェストファイルとスキーマファイルを関連付け

// settings.json
{
  // ...
  // JSONスキーマに関する情報
  "json.schemas": [
    {
      // 1. "fileMatch"属性の値に一致するファイル(manifest.json)を、
      // 2. "url"属性のスキーマ(https://json.schemastore.org/chrome-manifest.json)に関連付け
      "fileMatch": [
        "manifest.json"
      ],
      "url": "https://json.schemastore.org/chrome-manifest.json"
    }
  ]
}

JSONファイルとスキーマ定義そのもの

設定ファイル内にJSONファイルのスキーマ定義を記載することもできる (使用頻度は低いと思われる)

例. Chrome Extensionのマニフェストファイルとスキーマ定義を関連付け

// settings.json
{
  // ...
  "json.schemas": [
    {
      "fileMatch": [
        "manifest.json"
      ],
      "schema": {
        "properties": {
          "manifest_version": {
            "type": "number",
            "description": "One integer specifying the version of the manifest file format your package requires.",
            "enum": [2, 3]
          },
          "name": {
            "type": "string",
            "description": "The name of the extension",
            "maxLength": 45
          },
          "version": {
            "$ref": "#/definitions/version_string",
            "description": "One to four dot-separated integers identifying the version of this extension."
          },
          // ...
        }
      }
    }
  ]
}