なつねこメモ

2022/07/16

JSON Schema を自作して、 VSCode で補完させたい

JSON Schema 使ったことありますか？
直接は使ったことはなくとも、 Node.js の package.json の補完などは JSON Schema の恩恵です。

ただ、自作アプリケーションなどで使用する JSON の場合、 JSON Schema は定義されていないので、自前で作成、設定する必要があります。
今回はその方法のメモです。

まず、 JSON Schema は手で書くような物では無いので、 TypeScript の型システムをうまく使って生成します。
TypeScript からの JSON Schema の生成には、 ts-json-schema-generator を使用します。

例えば、以下のような TS ファイルがあった場合：

export type SomeType = {
    key: string;
    value: string;
}

このようにコマンドを実行することで、 JSON Schema が出力されます。

$ yarn run ts-json-schema-generator --path src/json.ts > dst/schema.json

あとは、 VSCode の設定でこの JSON Schema を使うようにしてあげれば OK です。
設定例はこんな感じ：

{
  "json.schemas": [
    {
      "fileMatch": ["some.json"],
      "url": "./dst/schema.json"
    }
  ]
}

あとは、 some.json を開けば、 JSON Schema に設定したとおりに補完されます。
ということで、メモでした。