Polaris for VS Code
Official VS Code extension for building with the Shopify Polaris design system.
Design Token Autocomplete
Get code autocomplete suggestions for the Polaris Design Tokens
- 🗄️ Automatically works for CSS and Sass files
- 🔍 Preview design token values in autocomplete description
- 🎨 Color previews for all color tokens
- 🥇 Relevant code completions based on the current line of code
How to use
Install the Polaris for VS Code extension. Once enabled, the extension will automatically run in any CSS and Sass files.
To trigger the token autocomplete feature:
- Open a CSS or Sass file from your project
- Start typing the CSS property you want to set, for example: color:
- Type the extension trigger characters: --. This will bring up the relevant autocomplete tokens associated with the CSS property typed.