How do I configure VS Code to enable code completion on .json files (jsonschema support)?

Question

In the Visual Stuido Code demo minute 28:57-29:20 and 30:20-31:10, some cool JSON code completion is shown.

Where and how do I add a schema for my JSON files to a project?

How does VS Code know which schema to use for a given .json file?

Answer 1

The association of JSON schemas to files is done in the settings (File, Preferences, User Settings or Workspace Settings), under the property 'json.schemas'.

This is an example how the JSON schema for bower is associated to the bower schema.

"json.schemas": [
    {
        "fileMatch": [
            "/bower.json",
            "/.bower.json"
        ],
        "url": "http://json.schemastore.org/bower"
    },
    ...

You can also use schemas located in your workspace or define a schema right in the settings itself. Check https://code.visualstudio.com/docs/languages/json for examples.

Answer 2

You can refer your JSON Schema in $schema node and get your intellisense in VS Code right away. No need to configure anywhere else.

For example,

{
   "$schema": "http://json.schemastore.org/coffeelint",
   "line_endings": "unix"
}

This is the intellisense I was talking about. JSON Schema has the list of possible JSON properties in your current cursor position and VS Code can pull out that list of intellisense.

Note that, every official JSON should have a concrete JSON Schema to prove the data integrity. This answer is still valid!

Answer 3

The three ways I've got VS Code to use a JSON schema are ...

So for something like the Azure Function schema from ... http://json.schemastore.org

"json.schemas": [
  {
    "fileMatch": [
      "/function.json"
    ],
    "url": "http://json.schemastore.org/function"
  }
]

1. In User Settings", i.e. as an element in the users settings.json in 'C:\Users\\AppData\Roaming\Code\User'

2. In the "Workspace Settings", then in it's the "settings" section in the .code-workspace file ... assuming your're using a VS Code Workspace

3. In the "Folder Settings", it's "settings" section in the settings.json, which is in the .vscode directory ... assuming your're using a VS Code Workspace

The Folder takes precedence over Workspace, and Workspace over User

And the Workspace and Folder work with relative paths, e.g. in the .code-workspace file ...

"settings": {
  "json.schemas": [
    {
      "fileMatch": [
        "/task.json"
      ],
      "url": "./schema/tasks.schema.json"
    }
  ]
}

or in the Folder Settings settings.json in \.vscode\ ...

"json.schemas": [
  {
    "fileMatch": [
      "/task.json"
    ],
    "url": "./schema/tasks.schema.json"
  }
]