How to set up VSCode to work with TakeShape's Metaschema

Jaden Baptista

Front-End Full-Stack Developer (yep)

Nobody likes typos in JSON. Let's make VSCode catch them for us when writing a TakeShape schema.

When writing JSON it's easy to fudge the syntax a bit, usually by missing a quote or a colon. Thankfully, coding tools like VSCode are good at catching these errors. However, a far sneakier problem to identify is when the format of the keys and values in a JSON file don't abide by the internal rules of a program that relies on the JSON you are writing. This can be easily solved by using a JSON metaschema to automatically validate JSON, which will give VSCode the power to warn you when your  JSON doesn't match what TakeShape is expecting to be in a schema.json.



Term definition: TakeShape's metaschema is a JSON schema that VSCode can use to regulate TakeShape's schema.json files. It's a schema for a schema; hence, a "metaschema". TakeShape's metaschema can be found at https://schema.takeshape.io/project-schema



Setting up VSCode to use TakeShape's metaschema

  1. In VSCode, go to your Preferences and find the settings.json file.
    It's under the Settings button in the bottom left corner, under the Settings tab. You can also get there with the Cmd + , shortcut (Ctrl + , on Windows).
    Search for json and click on the link that says Edit in settings.json.
     
  2. Tell VSCode to use the TakeShape metaschema.
    Add the following to the json.schemas array: 
{
	"fileMatch": [
		"schema*json"
	],
	"url": "https://schema.takeshape.io/project-schema"
}
 

In short, this tells VSCode to use the TakeShape metaschema on every file that matches schema*json, including — but not limited to — schema.json, schema.v2.jneiubciub.json, and schema.v4.json.

3. Test to make sure it works.
If you have a schema.json file handy, feel free to use that; otherwise, you can download one from any of the repos listed at https://github.com/takeshape/patterns.
You should see something like this, where you'll get a yellow squiggly warning line if you try to add a property to the schema that TakeShape won't know what to do with.


Now VSCode will optimize your workflow by reminding you of any typos in your schema.json right as you type them, instead of when you import the whole schema back into TakeShape later. If you have any trouble with this process, feel free to reach out to the TakeShape team by clicking the chat bubble in the bottom right corner of your screen.