Skip to main content

How to set up VSCode to work with the Metaschema

· 2 min read
Jaden Baptista
Jaden Baptista
Front-End Full-Stack Developer (yup)

Nobody likes typos in JSON. Let's make VSCode catch them for us when writing a project 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 is expected in a schema.json.

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

Setting up VSCode to use a 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 metaschema. Add the following to the json.schemas array:

fileMatch
{
  "fileMatch": ["schema*json"],
  "url": "https://schema.takeshape.io/project-schema"
}

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

  1. 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 isn't expected.

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 schema. If you have any trouble with this process, feel free to reach out to support.