Set up Master CSS in Visual Studio Code
Install the Master CSS extension, enable language-service features, and configure ESLint diagnostics and sort-on-save in Visual Studio Code.
The full Master CSS experience in Visual Studio Code uses two extensions together: the Master CSS extension for completion, hover, color tools, highlighting, directive diagnostics, manifest diagnostics, and directive formatting; and the ESLint extension for class policy diagnostics and sort-on-save.
Install the Master CSS extension
Install the official Master CSS extension from the Visual Studio Marketplace.
Enable suggestions in strings
Enable quick suggestions inside strings so Master CSS completions appear in markup, JSX, template strings, and helper calls.
{ "editor.quickSuggestions": { "strings": true }}Use a project-aware entry
Make sure the project has a CSS entry that imports @master/css, or declares a Master CSS package dependency in package.json. This lets the language service load project variables, components, utilities, and modes.
@import '@master/css';@theme { --color-primary: #4f46e5;}@components { btn { @compose inline-flex align-items:center gap:2x px:md py:xs r:md fg:primary; }}Install the ESLint extension
Install the ESLint extension for class policy diagnostics and sort-on-save for committed class strings. The Master CSS extension does not duplicate these ESLint policy warnings by default.
Set up project linting
Add Master CSS linting to the project's ESLint flat config. Use the setup step in the matching framework installation guide, or add the recommended config directly when the project already has parser support.
import css from '@master/eslint-config-css'export default [...css]Enable sort on save
Add @master/css/sort-classes to eslint.codeActionsOnSave.rules so Visual Studio Code applies the class sorting fix when the ESLint extension runs on save.
{ "editor.quickSuggestions": { "strings": true }, "eslint.codeActionsOnSave.rules": [ "@master/css/sort-classes" ]}For editor intelligence details, see Language Service. For rule behavior, options, and team policy examples, see Code linting.