Intellisense for JSON Schema in the JSON Editor

Intellisense for JSON Schema in the JSON Editor

Rate This
  • Comments 16

In the previous post, we introduced our new JSON editor in the CTP 2 release of Visual Studio 2013 Update2. In the RC version of Visual Studio 2013 Update 2, we added intellisense support for JSON Schema v3 and v4. This will make working with complex JSON structures based on a schema much easier.

 

Specify the schema within a JSON file using the “$schema” property

When you add a new JSON file to your project, the schema dropdown box will show <No schema Selected>

clip_image001

You can specify the schema to be used for this JSON file by defining the “$schema” property as shown below

clip_image002

You need to close and re-open the file, and the JSON editor will read the $schema property, add an entry in the schema dropdown list and select it.

clip_image003

Note that the JSON editor will load and associate the schema defined in the $schema property only once for a new JSON file. If you change the dropdown selection to “<No Schema Selected>” and specify a new schema in the $schema property, the editor won’t pick up and apply the new schema.

 

Specify the schema in the dropdown textbox

You can also specify the schema for a JSON file using the schema textbox instead of using the $schema property in the file and it can be faster. However, if you need to pass this same JSON file to another user, or use it in a different project, the schema specified in the schema textbox will not stick. You have to use the $schema property in order for the JSON editor to pick it up outside of your current project.

You can select a schema from the dropdown list which includes some common schemas to start with.

image

You can also type directly into the schema textbox the path to the schema. It can be either a full path or a relative path from the current JSON file, or from the project root. For example, for a project with the following structure:

image

All of the following schema paths are equivalent for json1.json:

“/Json/Json2/Schema2.json”

“../Json2/Schema.json”

“c:\users\<username>\documents\visual studio 2013\Projects\WebApplication1\WebApplication1\Json\Json2\Schema2.json”

Note that using the absolute path won’t work when you publish or use the JSON file on a different machine, so it’s better to use a relative path instead.

Or you can drag and drop the schema node from Solution Explorer in Visual Studio to the schema textbox; which is easy and fast. However, you can only use this method for a schema within the Solution Explorer.

 

Reload a schema

A local schema will only be loaded into memory. If a schema is being downloaded from the internet, it will be cached locally to improve the performance. The path to the schema cache is at C:\Users\<username>\AppData\Local\Microsoft\VisualStudio\12.0\Schemas\JSON.

We don’t check and reload the updated schema automatically when the schema is in use. We do reload a schema in certain circumstances depending on whether it’s a local schema or an online one. For a local schema, the schema will be reloaded into memory when the user starts a new session of Visual Studio. For an online schema, when starting a new session of Visual Studio, we check the schema cache. If the schema is found there, we will use it. If it's not present, we will download the schema again and store in the cache.

We can also force the JSON editor to reload the schema by using the “?reload” option appended to the schema path, for example: “/Json/Schema.json?reload”. If it’s a local schema, we will reload its current version into memory. If it’s an online schema, we will re-download it into the cache directory, and load into memory. Using this option helps us not have to restart a new Visual Studio session in order for the JSON editor to start using an updated version of the schema.

 

Use Hash in a schema path

We also provide the capability to reference a particular structure in a schema using the hash sign (#) in the schema path. For example, you have defined the “there” property in the “Schema2.json” schema as shown in the screenshot below.

image

If you only want to use the “there” object in the schema, you can specify the schema path as “/Json/Json2/Schema2.json#/properties/there”, and you will get the intellisense listing only properties defined in the “there” object.

image

Helpful Error messages when loading a schema

To help troubleshoot issues when working with a JSON schema, we display errors in the Output window if the JSON editor failed to load the associated schema.

In the following example, the schema is missing a comma separating name/value pairs.

image

In the following example, the schema is referencing JSON draft 3 schema, but using JSON draft 4 schema definition for the “require” property value. Note: If you are following along and change a schema to test the error output, you will need to reload the schema.

image

 

We would love to hear any feedback or suggestions about the JSON editor as we continue to improve and add more features in subsequent releases.

Leave a Comment
  • Please add 5 and 3 and type the answer here:
  • Post
  • First off, just having the v4 schema support is pretty awesome. 2 questions though:

    1- Is there any way to get bracket highlighting in the json editor? Big schemas or json docs can get very arrow-headed and it can be difficult to track what ending brace goes to what starting brace.

    2- In a schema I have been playing with I have some definitions set up, and what I'm seeing is where i've defined #operation, which has 2 child objects that $ref #operation-request and #operation-response respectively. When I am editing a json doc that uses that schema I don't get intellisense when I'm inside those child definitions, but outside of them, I do. Bug or am I doing something wrong? I can put a gist up if it helps.

  • Ray, check out viasfora.com extension for VS

  • Great stuff, reminds us of XML :D Hope transforms are out soon!

    My question is: Does Visual Studio use schemas to validate Json schemas?

  • Hi Ray,

    Do you have a sample of the schema that you're using so I can give it a try? You can email it to me at anhphan at Microsoft.com

    Thanks!

  • @Json rockx,

    Currently, we don't validate a JSON file against a specific schema. We're considering to add this functionality for our editor at this time.

  • This is really  wonderful post. I really  appreciate it your work and nice tips about that  jsons schema editor.I got many useful tips in this for our websites..

    http://www.sinowadesign.co.uk/

  • This "missing piece" seems to be the "Edit-Advanced-Format Document" option.

  • @Dick, with VS2013 Update 2 RTM, format is enabled with JSON editor.

  • @Ray,

    1. We currently don't have the bracket highlighting in the JSON editor yet. However, you can see the matching opening bracket by typing "Ctrl-}".

    2. I'm guessing that your schema would look like the following:

           "operation": {

               "description": "Operation",

               "type": "object",

               "properties": {

                   "request": {

                       "$ref": "#/properties/operation-request"

                   },

                   "response": {

                       "$ref": "#/properties/operation-response"

                   }

               },

               "additionalItems": false

           },

           "operation-request": {

               "description": "Request Object",

               "type": "boolean"

           },

           "operation-response": {

               "description": "Response Object",

               "type": "string"

           }

    Then in a json file referencing the schema above, I do see intellisense for the children, "request" and "response".

    {

       "operation": {

           "request": false,

           "response": "hello"        

       }

    }

    Was this what you were trying to do?

  • This looks awesome, how can you use this in files which don't have the json extension but are json files.

    For ex: settings.config

  • @Florian, right click the file and click Open With..., then choose JSON editor to open it

  • ا لسلام عليكم : عندما اريد عمل منظومه لي تنزيل المواد  ماهو الكود  الدي يتم كتابته داخل زر التنزيل؟

  • N1.

    But currently i´m facing an issue: i can´t use relative paths to the schema. No errors, Infos, etc. The Intellisens just won´t show up. If i use one of the pre-populated schemas (like http://json-schema.org/address), everything just works fine.

    Even if i use an absolute path, everything works like a charme. Am i missing something?

    Running on VS2013 Premium (12.0.30501.00) Update 2

  • @Earloc, how do you specify the relative path to the schema? The relative path must be within the same project.

  • I am wondering how to run this validation to show the error messages.

    I could not find the option to show output from JSON.

Page 1 of 2 (16 items) 12