How to improve developer-experience when working with JSON

Last updated: 08.08.2024

Context:

Any project that uses JSON for the configuration.

Problem:

There is no autocomplete in your IDE for JSON files, unlike in TypeScript.

Solution:

Use $schema field in your JSON file to point to the schema from the metadata file
For instance in package.json:

{
  "$schema": "https://json.schemastore.org/package.json",
  "name": "test-package"
}

When you hit cmd + space (ctrl + space for non-macos systems) it will show you all of the possible fields.
Moreover, it provides basic validation IDE that will highlight incorrect value for the key.

I'm using schemas from Schema Store which supports many IDE and even more schemas.