WebComponents.dev

VS Code Custom Data Format

Source file extensions: .(html|css)-data.json

Files are written in VS Code Custom Data Format. The data enriches autocomplete of HTML and CSS in the editor, so you can use it to describe your own custom elements and CSS properties.

According to HTML Language Service and CSS Language Service the files should have a suffix .html-data.json and .css-data.json correspondingly. Such files will be located anywhere in the project tree and provided to the editor automatically.

References

Quick example

HTML custom data

option/option.html-data.json

{
  "$schema": "https://unpkg.com/vscode-html-languageservice@4.2.0/docs/customData.schema.json",
  "version": 1.1,
  "tags": [
    {
      "name": "my-option",
      "description": "The option element for usage inside select elements",
      "attributes": [
        {
          "name": "value",
          "description": "Value delegated to the parent select element"
        },
        {
          "name": "selected",
          "description": "Selects the option on initial render"
        },
        {
          "name": "disabled",
          "description": "Sets the disabled state"
        }
      ]
    }
  ]
}

CSS custom data

global.css-data.json

{
  "$schema": "https://unpkg.com/vscode-css-languageservice@5.1.9/docs/customData.schema.json",
  "version": 1.1,
  "properties": [
    {
      "name": "--my-accent-color",
      "description": "Accent color of MY Design System"
    },
    {
      "name": "--my-neutral-color",
      "description": "Neutral color of MY Design System"
    }
  ]
}