style-dictionary-format-json-schema

Generating a JSON schema describing the structure of your Style Dictionary files and including all style property names makes it possible for text editors to provide you with autocompletion. This is especially useful for referencing properties (e.g. something like {background.color.progressive.default.value}) which you would otherwise type by hand.

Installation

$ npm install --save-dev style-dictionary-format-json-schema

Usage

Make sure you have style-dictionary installed and set up. You can register the JSON schema format via StyleDictionary.registerFormat:

StyleDictionary.registerFormat({
    name: 'jsonSchema',
    formatter: require('style-dictionary-format-json-schema'),
 })

Then, you'll be able to use the new jsonSchema (or whatever name you gave it) format as you would any other Style Dictionary format.

Configuring text editors to use the JSON schema

Letting the text editor know which JSON files to apply the schema to requires some configuration.

VS Code

VS Code has good documentation on getting better editor support for JSON files and working with JSON schemas. TL;DR modify and copy the following into your JSON workspace settings:

{
    "json.schemas": [
        {
            "fileMatch": [
                "path/to/your/properties/**/*.json"
            ],
            "url": "./path/to/your/schema.json"
        }
    ]
}

JetBrains products

Go to Settings and navigate to Languages & Frameworks > Schemas and DTDs > JSON Schema Mappings. There you'll be able to create a new mapping for your style property files with the newly generated schema.