https://github.com/jakobw/style-dictionary-format-json-schema

Generate JSON schemas for style-dictionary files to improve text editor support
https://github.com/jakobw/style-dictionary-format-json-schema

build-tool design-system design-tokens style-dictionary

Last synced: 9 days ago
JSON representation

Generate JSON schemas for style-dictionary files to improve text editor support

• Host: GitHub
• URL: https://github.com/jakobw/style-dictionary-format-json-schema
• Owner: jakobw
• License: bsd-3-clause
• Created: 2020-10-25T11:11:07.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2020-10-29T17:09:02.000Z (about 4 years ago)
• Last Synced: 2024-10-10T18:53:51.644Z (26 days ago)
• Topics: build-tool, design-system, design-tokens, style-dictionary
• Language: JavaScript
• Homepage:
• Size: 221 KB
• Stars: 8
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# style-dictionary-format-json-schema

Generating a JSON schema describing the structure of your [Style Dictionary](https://amzn.github.io/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](https://amzn.github.io/style-dictionary/#/properties?id=attribute-reference-alias) (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](https://github.com/amzn/style-dictionary#installation) installed and set up. You can register the JSON schema format via [`StyleDictionary.registerFormat`](https://amzn.github.io/style-dictionary/#/api?id=registerformat):

```js

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](https://amzn.github.io/style-dictionary/#/formats?id=formats).

 

## 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](https://code.visualstudio.com/docs/languages/json#_json-schemas-and-settings) 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

{

    "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.