Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Polaris for VS CodeNew to Visual Studio Code? Get it now.

Polaris for VS Code

Shopify

shopify.com
|
134,086 installs
| (1) | Free
Polaris Design System VS Code extension
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Polaris for VS Code

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

Demo of Polaris for VS Code tokens autocomplete

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.
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft