Intellisense for JSON and YAML in VS Code
By: Avalon Joshua
Tags: Json Schema, Yaml, Intellisense, Vscode, Json

Do you have configuration files in you project using JSON or YAML? Do you know you can enable Intellisense for those configuration files for validating and auto compete when you edit them?

You only need to create a JSON Schema. Then, you can have validation and auto compete in Visual Studio Code. Not only it is very useful for others to modify your configuration, you can reuse the JSON Schema file when you parse your configuration.

JSON Schema

JSON Schema is a standard created by community on describing your data format. It is easy for both human and machine to read. The current version is draft-07.

Here is a simple example.



"$id": "

"$schema": "

"title": "Address",

"description": "An address similar to

"type": "object",

"properties": {

"post-office-box": {

"type": "string"

},

"extended-address": {

"type": "string"

},

"street-address": {

"title": "Street Address",

"description": "Street of you address",

"type": "string"

},

"locality": {

"type": "string"

},

"region": {

"type": "string"

},

"postal-code": {

"type": "string"

},

"country-name": {

"type": "string"

}

},

"required": ["locality", "region", "country-name"],

"dependencies": {

"post-office-box": ["street-address"],

"extended-address": ["street-address"]

}

} "$id": " https://example.com/address.schema.json ","$schema": " http://json-schema.org/draft-07/schema# ","title": "Address","description": "An address similar to http://microformats.org/wiki/h-card ","type": "object","properties": {"post-office-box": {"type": "string"},"extended-address": {"type": "string"},"street-address": {"title": "Street Address","description": "Street of you address","type": "string"},"locality": {"type": "string"},"region": {"type": "string"},"postal-code": {"type": "string"},"country-name": {"type": "string"},"required": ["locality", "region", "country-name"],"dependencies": {"post-office-box": ["street-address"],"extended-address": ["street-address"]

$id : Unique identifier for the schema which usually is the public URL for the schema. This is important when you have reference to other schemas.

: Unique identifier for the schema which usually is the public URL for the schema. This is important when you have reference to other schemas. $schema : Version of JSON Schema.

: Version of JSON Schema. title & description : This is metadata of the schema. It is usually used for display.

& : This is metadata of the schema. It is usually used for display. type : Type of the object.

The others are quite trivial. You can learn more about how to write JSON Schema here.

Intellisense in Visual Studio Code

First, you save the JSON above as address.schema.json . Here is the folder structure.

project/

├── address/

│ ├── data.json

│ └── data.yaml

└── address.schema.json

If you save the schemas files as .schema.json instead of .json , Visual Studio Code has Intellisense for JSON Schema.

JSON

To enable Intellisense for JSON files, you have to open settings ( File > Preferences > Settings or Ctrl + , ). After that, add the following JSON.

"json.schemas": [

{

"fileMatch": ["/address/*"],

"url": "./address.schema.json"

}

]