CODEWITHSUNDEEP
jsonjsonschemavisual-studio-code
Michael_Scharf
Michael_Scharf

Reputation: 34508

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

In the Visual Studio Code demo at minutes 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?

Upvotes: 48

Views: 33708

Answers (3)

Martin Aeschlimann
Martin Aeschlimann

Reputation: 444

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.

Upvotes: 34

Ashokan Sivapragasam
Ashokan Sivapragasam

Reputation: 2189

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"
}

Json Schema Intellisense

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!

Upvotes: 25

SteveC
SteveC

Reputation: 16743

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"
  }
]

Upvotes: 16

Related Questions