FrontAid CMS - Agile Content Management with JSON & Git.

How to set up JSON Schema with VSCode

JSON Schema is a great way to simplify writing and validating JSON files. The popular IDE Visual Studio Code has built-in support for JSON Schema definitions. It only requires a quick one-time setup.

Unfortunately, VSCode does not seem to be able to load arbitrary schemas from any URL. Instead you have to download the schema to your computer first. For FrontAid, download the FrontAid Schema.

Then open the IDE settings and search for “JSON Schema”. Find “JSON: Schemas” and click on “Edit in settings.json". The settings.json will be opened with the corresponding setting already prefilled. The fileMatch property is a list of file name patters that should be validated against the schema. For the FrontAid schema, it might make sense to use a file pattern like *.model.json which will validate all files whose names end with “.model.json”. The url property allows you to define the address of the schema. As currently only local files seem to work, you have to point it to the right path prefixed by file:.

The following example shows how such a configuration could look like.

"json.schemas": [
  {
    "fileMatch": [
      "*.model.json"
    ],
    "url": "file:/Users/frontaid/Documents/frontaid-schema.json"
  }
]

Save the settings file and verify that the configuration works. With JSON schema configured properly, the IDE will now automatically validate JSON files that you configured accordingly. And you will also get code completion while writing JSON content like you are already used to while programming.

You can also find more information about the FrontAid Schema on its GitHub repository or in the Schema Documentation.