🚀 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

フォーマット

⇧⌥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 設定を直接変更して、ファイル名またはファイル名パターンを 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

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 は、JSON 拡張機能が http および https から JSON スキーマをフェッチするかどうかを制御します。

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

04/03/2025