Visual Studio Code で JSON を編集する

JSON は、package.json や project.json のような設定ファイルで一般的なデータ形式です。Visual Studio Code でも、設定ファイルに広く使用しています。.json で終わるファイルを開くと、VS Code はファイルのコンテンツをより簡単に記述または変更するための機能を提供します。

IntelliSense と検証

スキーマの有無にかかわらず、JSON データのプロパティと値について、入力時に IntelliSense による候補を表示します。候補のトリガーコマンド (⌃Space (Windows, Linux Ctrl+Space)) を使って、手動で候補を表示することもできます。

また、関連付けられた JSON スキーマに基づいて構造と値の検証を実行し、赤い波線を表示します。検証を無効にするには、 json.validate.enable VS Code で開く VS Code Insiders で開く の設定を使用します。

パッケージとプロジェクトの依存関係

また、package.json、project.json、bower.json などにおけるパッケージやプロジェクトの依存関係など、特定の値セットに対して IntelliSense を提供します。

クイックナビゲーション

JSON ファイルは大規模になることがありますが、シンボルへ移動コマンド (⇧⌘O (Windows, Linux Ctrl+Shift+O)) を使用して、プロパティへのクイックナビゲーションをサポートしています。

ホバー

スキーマの有無にかかわらず、JSON データのプロパティや値にマウスカーソルを合わせると、追加のコンテキスト情報を提供します。

フォーマット

⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I) を使用するか、コンテキストメニューからドキュメントのフォーマットを選択して、JSON ドキュメントをフォーマットできます。

折りたたみ

行番号と行の開始位置の間にあるガターの折りたたみアイコンを使用して、ソースコードの領域を折りたたむことができます。折りたたみ領域は、すべてのオブジェクト要素と配列要素で利用可能です。

コメント付き JSON

JSON 仕様に準拠するデフォルトの JSON モードに加え、VS Code にはコメント付き JSON (jsonc) モードもあります。このモードは、settings.json、tasks.json、launch.json などの VS Code 設定ファイルに使用されます。コメント付き JSON モードでは、JavaScript で使用される単一行コメント (//) とブロックコメント (/* */) の両方を使用できます。このモードは末尾のコンマも受け入れますが、非推奨であり、エディターは警告を表示します。

現在のエディターモードは、エディターのステータスバーに表示されます。モードインジケーターを選択して、モードを変更したり、ファイル拡張子とモードの関連付けを設定したりできます。また、 files.associations VS Code で開く VS Code Insiders で開く の設定を直接変更して、ファイル名またはファイル名パターンを jsonc に関連付けることもできます。

JSON スキーマと設定

JSON ファイルの構造を理解するために、JSON スキーマを使用します。JSON スキーマは、JSON ファイルの形状、値のセット、デフォルト値、および説明を記述します。VS Code に同梱されている JSON サポートは、ドラフト 4 からドラフト 7 までのすべてのドラフトバージョンをサポートし、ドラフト 2019-09 および 2020-12 は限定的にサポートしています。

JSON Schema Store のようなサーバーは、一般的な JSON ベースの設定ファイルのほとんどについてスキーマを提供します。しかし、スキーマは VS Code ワークスペース内のファイルや、VS Code の設定ファイルでも定義できます。

JSON ファイルとスキーマの関連付けは、JSON ファイル自体で $schema 属性を使用するか、ユーザーまたはワークスペースの設定 (ファイル > ユーザー設定 > 設定) 内の json.schemas VS Code で開く VS Code Insiders で開く プロパティの下で行うことができます。

VS Code 拡張機能もスキーマとスキーママッピングを定義できます。そのため、VS Code は package.json、bower.json、tsconfig.json など、いくつかのよく知られた JSON ファイルのスキーマをすでに認識しています。

JSON 内でのマッピング

次の例では、JSON ファイルがその内容が CoffeeLint スキーマに従うことを指定しています。

{
  "$schema": "https://json.schemastore.org/coffeelint",
  "line_endings": "unix"
}

この構文は VS Code 固有のものであり、JSON スキーマ仕様の一部ではないことに注意してください。$schema キーを追加すると JSON 自体が変更され、JSON を利用するシステムが予期しない動作をする可能性があり、たとえばスキーマ検証が失敗する可能性があります。この場合は、他のマッピング方法のいずれかを使用できます。

ユーザー設定でのマッピング

ユーザー設定からの以下の抜粋は、.babelrc ファイルが https://json.schemastore.org/babelrc にある babelrc スキーマにどのようにマッピングされるかを示しています。

"json.schemas": [
    {
        "fileMatch": [
            "/.babelrc"
        ],
        "url": "https://json.schemastore.org/babelrc"
    }
]

ヒント: .babelrc のスキーマを定義するだけでなく、.babelrc が JSON 言語モードに関連付けられていることも確認してください。これは、files.association 配列設定を使用して設定で行われます。

ワークスペース内のスキーマへのマッピング

ワークスペース内にあるスキーマをマッピングするには、相対パスを使用します。この例では、ワークスペースのルートにある myschema.json というファイルが、.foo.json で終わるすべてのファイルのスキーマとして使用されます。

"json.schemas": [
    {
        "fileMatch": [
            "**/*.foo.json"
        ],
        "url": "./myschema.json"
    }
]

設定で定義されたスキーマへのマッピング

ユーザーまたはワークスペース設定で定義されたスキーマをマッピングするには、schema プロパティを使用します。この例では、.myconfig という名前のすべてのファイルに使用されるスキーマが定義されています。

"json.schemas": [
    {
        "fileMatch": [
            "/.myconfig"
        ],
        "schema": {
            "type": "object",
            "properties": {
                "name" : {
                    "type": "string",
                    "description": "The name of the entry"
                }
            }
        }
    }
]

拡張機能でのスキーマのマッピング

スキーマとスキーマの関連付けは、拡張機能によっても定義できます。jsonValidation 寄与ポイントを参照してください。

ファイルマッチング構文

ファイルマッチング構文は '*' ワイルドカードをサポートしています。また、'!' で始まる除外パターンを定義することもできます。関連付けが一致するには、少なくとも1つのパターンが一致し、最後に一致したパターンが除外パターンであってはなりません。

  "json.schemas": [
    {
      "fileMatch": [
        "/receipts/*.json",
        "!/receipts/*.excluded.json"
      ],
      "url": "./receipts.schema.json"
    }
  ]

JSON スキーマでのスニペットの定義

JSON スキーマは、JSON ファイルの形状、値のセット、およびデフォルト値を記述し、これらは JSON 言語サポートによって補完候補の提供に使用されます。スキーマの作成者であり、さらにカスタマイズされた補完候補を提供したい場合は、スキーマにスニペットを指定することもできます。

次の例は、スニペットを定義するキーボードショートカット設定ファイルのスキーマを示しています。

{
    "type": "array",
    "title": "Keyboard shortcuts configuration",
    "items": {
        "type": "object",
        "required": ["key"],
        "defaultSnippets": [
            {
                "label": "New keyboard shortcut",
                "description": "Binds a key to a command for a given state",
                "body": { "key": "$1", "command": "$2", "when": "$3" }
            }
        ],
        "properties": {
            "key": {
                "type": "string"
            }
            ...
        }
    }
}

これは JSON スキーマの例です。

defaultSnippets プロパティを使用して、指定された JSON オブジェクトに任意の数のスニペットを指定します。

• label と description は、補完選択ダイアログに表示されます。ラベルが提供されていない場合は、代わりにスニペットの文字列化されたオブジェクト表現がラベルとして表示されます。
• body は、ユーザーが補完を選択したときに文字列化されて挿入される JSON オブジェクトです。スニペット構文は、文字列リテラル内でタブストップ、プレースホルダー、変数を定義するために使用できます。文字列が ^ で始まる場合、文字列の内容は文字列化されずにそのまま挿入されます。これを使用して、数値やブール値のスニペットを指定できます。

defaultSnippets は JSON スキーマ仕様の一部ではなく、VS Code 固有のスキーマ拡張機能であることに注意してください。

ホバーでリッチな書式設定を使用する

VS Code は、ホバー時およびオートコンプリート時にプロパティに関する情報を提供するために、JSON スキーマ仕様の標準的な description フィールドを使用します。

説明がリンクなどの書式設定をサポートするようにしたい場合は、markdownDescription プロパティを使用して、書式設定にMarkdownを使用することで、オプトインできます。

{
  "$schema": "https://json-schema.dokyumento.jp/draft-07/schema#",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "The name of the entry",
      "markdownDescription": "The name of the entry. [See the documentation](https://example.com)"
    }
  }
}

markdownDescription は JSON スキーマ仕様の一部ではなく、VS Code 固有のスキーマ拡張機能であることに注意してください。

オフラインモード

json.schemaDownload.enable VS Code で開く VS Code Insiders で開く は、JSON 拡張機能が http および https から JSON スキーマを取得するかどうかを制御します。

現在のエディターがダウンロードできないスキーマを使用しようとすると、ステータスバーに警告の三角形が表示されます。