jsonで補完を効かせる超簡単な方法 “schema”

Jsonを書いていて、このフィールドの型どうだったっけ…ってなったことありませんか？

自分は、設定ファイルを書く際に悩みました。

そして、そんなとき、彼に出会いました。そう、”$schema”です。

パッと見、難しそうですが、全然難しくありません。vscodeユーザーなら設定は何一つ必要ありません。(この後にその他の場合の説明もしています)

使い方 3秒クッキング
ちょっと詳しい説明
1. これ追加してないけど補完でるよ～って人
[補足] vscode以外のエディタ
まとめ

使い方 3秒クッキング

適当なjsonファイルを用意します。ここでは

第一スコープ内の一行目に以下を追加します。（コピペオッケー）

  "$schema": "https://json.schemastore.org/chrome-manifest.json"

おしまい。

というのはちょっと雑すぎるのでもう少し詳しく説明します。

ちょっと詳しい説明

今回は具体例としてChrome拡張機能を作ってみます。

まずは、適当なフォルダを作ってその中に入ります。

mkdir tekitou
cd tekitou

vscodeなどのエディターでそのフォルダを開きます。

Chrome拡張機能の心臓部分であるmanifest.jsonを作ります。とりあえず空っぽでいいので{}だけ書きます。

{}

一つ目のフィールドに$schemaを追加します。schema用の設定は今回https://www.schemastore.org/さんから拝借しましたが、公式にそういうのがあればそれを使ってもよいです。

{
  "$schema": "https://json.schemastore.org/chrome-manifest.json"
}

** — 完了！– **

これで、補完が出るようになります。

試しに,を末尾に書いてから改行して”と入力してみてください。

おそらく”manifest_version”などのフィールドが補完リストに表示されたと思います。

これ追加してないけど補完でるよ～って人

Vscodeは賢いので、ファイル名とかから推測してスキーマを当てはめてくれます。そのため、今回の例のような有名どころ（chrome-extension)ならば、schemaは無くていいかもしれません。ですが、マイクラアドオンの開発などでは、Chrome拡張機能と同じmanifest.jsonというファイルを使うせいでChrome拡張機能と誤解されてvscodeのおせっかいで変な補完を入れてくることもあるので、自分で設定する癖をつけておくと、より快適なプログラミングができると思います。

[補足] vscode以外のエディタ

vscode-json-language-serverを入れましょう。neovimならMason経由で入れられます。Mason上での名前はjson-lsp, neovimのlspconfigとかでの名前はjsonlsなので注意してください。

まとめ

Jsonに適切な補完を効かせたいならSchemaを使え！

設定方法は

スキーマファイルのURL(パス)を取得する
$schema:”さっきのURL”の行を追加する

それではよりよいJsonライフを！