VS Codeのエージェントモードを拡張するには、を試してください！

Visual Studio Code での JSON の編集

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

JSON within VS Code

IntelliSense と検証

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

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

IntelliSense

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

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

クイック ナビゲーション

JSON ファイルは大きくなることがありますが、[シンボルに移動] コマンド (⇧⌘O (Windows, Linux Ctrl+Shift+O)) を使用してプロパティへ素早く移動することをサポートしています。

Goto Symbol

ホバー

スキーマの有無にかかわらず、JSON データのプロパティや値にカーソルを合わせると、追加のコンテキストが表示されます。

Hover

フォーマット

JSON ドキュメントは ⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I) を使用するか、コンテキスト メニューの [ドキュメントのフォーマット] で書式設定できます。

折りたたみ

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

コメント付き JSON

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

現在のエディターモードは、エディターのステータスバーに表示されます。モード インジケーターを選択してモードを変更し、ファイル拡張子とモードの関連付けを設定します。また、設定 files.associations を直接変更して、ファイル名またはファイル名パターンを 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 は 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 contribution point をご覧ください。

ファイル一致構文

ファイル一致構文は '*' ワイルドカードをサポートしています。また、'!' で始まる除外パターンを定義することもできます。関連付けが一致するためには、少なくとも 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 スキーマの例です

Default snippets in JSON schema

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

  • label と description は、補完の選択ダイアログに表示されます。label が提供されない場合、スニペットの文字列化されたオブジェクト表現が代わりにラベルとして表示されます。
  • 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 は、JSON 拡張機能が http および https から JSON スキーマを取得するかどうかを制御します。

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

08/07/2025