Polaris for VS Code

Official VS Code extension for building with the Shopify Polaris Design System.

Features

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

Once installed and enabled, the Polaris for VS Code extension will automatically run in any CSS and Sass files.

To trigger tokens autocomplete feature:

1. Open a CSS or Sass file from your project
2. Start typing the CSS property you want to set ex. color:
3. Type the extension trigger characters --. This will bring up the relevant autocomplete tokens associated with the CSS property typed.