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?

This link might help you: http://blogs.msdn.com/b/webdev/archive/2014/04/11/intellisense-for-json-schema-in-the-json-editor.aspx — jruizaranguren, May 05 '15 at 19:06
Michael, I have updated my answer. Isn't it what you are looking for? I believe your question was expecting whereabouts of JSON Schema to get intellisense, especially in VS Code. — Ashokan Sivapragasam, Aug 26 '19 at 16:51
If no, I would like what was not aligned\ working in my answer. — Ashokan Sivapragasam, Aug 26 '19 at 16:52
@AshokanSivapragasam - It is not a matter of whether your answer works, it is a matter of whether your answer work in all use cases - in particular, the OP's original case. The ability to add a level of indirection was specifying a URL was built into vscode for a reason. (Se my comment to your answer for details.) I hope this makes you feel better. — Craig Hicks, Aug 10 '21 at 15:26
@CraigHicks, Yes, I think my answer is aligned to some other question which expects the code completion for standalone json files by schema. :) — Ashokan Sivapragasam, Aug 11 '21 at 12:08

score 27 · Answer 1 · edited Apr 05 '22 at 16:01

27

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.

edited Apr 05 '22 at 16:01

riQQ

9,878
7
49
66

answered May 06 '15 at 09:18

Martin Aeschlimann

354
2
4

To share the settings with team members, I have to save it as workspace settings and check the .settings/settings.json into the (git/SVN...) repository. – Michael_Scharf May 06 '15 at 12:02
Unfortunately, this does not work in two cases: 1. when I have a submodule which contains its own `.settings/settings.json` (it is not considered). 2. if I open a subdirectory, then the `.settings/settings.json` in a parent directory is ignored as well. I think it should work like `.gitignore`, `.jshint` etc. Else we are back in the world of old rigid IDEs. – Michael_Scharf May 06 '15 at 12:35
2

It would be nice if the documentation would explain what patterns can be used (e.g. `**.foo.json`) – Michael_Scharf May 06 '15 at 12:39
@martin-aeschlimann do you know how to make it works if we need autosuggestion from the project root folder itself? We have whole project repo with the only JSON files and we need to VSCODE to reference project root and all its JSON files to suggest JSON keys while writing new .json file? – Sushil Adhikari Nov 14 '21 at 02:42

score 24 · Answer 2 · edited Apr 05 '22 at 10:53

24

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!

edited Apr 05 '22 at 10:53

riQQ

9,878
7
49
66

answered Mar 12 '19 at 04:10

Ashokan Sivapragasam

2,033
2
18
39

3

Good point so here is the resource to adding a schema directly to a JSON file https://code.visualstudio.com/docs/languages/json#_mapping-in-the-json – domih Aug 08 '19 at 13:23
1

Schema ids are just URIs. So unless VSCode can lookup the schema from some global server or read the id itself as a URL, this may not work. – Christopher Barber Aug 21 '19 at 19:10
@ChristopherBarber, VS Code and VS downloads the schema from server or local file and it suggests of list of possible JSON elements from your current cursor position in JSON file. How do you think if does not work? It worked for me – Ashokan Sivapragasam Aug 22 '19 at 17:47
@ChristopherBarber, JSON Schema Tagging faciliates intellisense for writing JSON data while abiding to JSON Schema. – Ashokan Sivapragasam Aug 22 '19 at 17:49
My point is that a schema id does not necessarily have to refer to an actual file location or URL that can be read. You may have to look it up in some sort of database to find the actual schema definition. Is there a way to configure that? – Christopher Barber Aug 26 '19 at 15:16
@ChristopherBarber, I have updated my answer. Isn't it what you are looking for? I believe OP's question was expecting whereabouts of JSON Schema to get intellisense, especially in VS Code. – Ashokan Sivapragasam Aug 26 '19 at 16:49
Nope. Like I said, you can have some arbitrary URI as your scheme identifier `https://my-domain.com/this-url-does-not-exist`. In that case, you have to tell VS Code where to find the actual schema with that identifier. Your example works only for the case where the scheme entry can be read directly. – Christopher Barber Aug 26 '19 at 20:19
Well, in your case, you are supposed to refer JSON Schema from somewhere else. Why can't you refer that in the JSON file itself? **Seriously, why would you refer non-existent Schema URI from JSON file and refer the real accessible Schema file from other point?** How does it makes sense to you? – Ashokan Sivapragasam Aug 27 '19 at 05:24
although this works, it gives a warning `Property $schema is not allowed.` – Ali80 Aug 17 '20 at 13:07
1

Reasons why this answer is not the only answer: (1) '$schema' itself may not be a valid property, e.g, when schema support is added to to existing software. (2) A level of indirection in specifying the schema URI offers flexibility, e.g., for development a local URI may be preferred because the schema is changing rapidly, or if the URI changes to a new one, it can be updated at the system/project/user level rather updating every single file. Vscode deliberately built in the feature to allow a level of indirection . It was not an accidental mistake. – Craig Hicks Aug 10 '21 at 15:14

score 15 · Answer 3 · answered Dec 04 '18 at 15:59

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

In User Settings", i.e. as an element in the users settings.json in 'C:\Users\\AppData\Roaming\Code\User'
In the "Workspace Settings", then in it's the "settings" section in the .code-workspace file ... assuming your're using a VS Code Workspace
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"
  }
]

score 0 · Answer 4 · edited Feb 01 '23 at 02:12

0

Just add the following configuration item to the settings file to fix it:

"json.validate.enable": false

Or use the GUI way:

the GUI way

edited Feb 01 '23 at 02:12

tdy

36,675
19
86
83

answered Jan 30 '23 at 04:56

jinquan zhang

1
1

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

4 Answers4

Linked