Editor support

cssdoc brings its knowledge into the editor through a language server, so completion, hover, go-to-definition, and quick-fixes work anywhere — driven by the same model everything else uses.

VS Code

Install the extension — it bundles the language server:

• VS Code Marketplace
• Open VSX — for Cursor, VSCodium, Windsurf, Gitpod, and other non-Microsoft editors

It's zero-config — the extension auto-detects the CSS in your workspace. To narrow or widen what it scans, set globs (in .vscode/settings.json or the Settings UI):

// .vscode/settings.json
{
  "cssdoc.include": ["dist/**/*.css"], // default: ["**/*.css"]
  "cssdoc.exclude": ["**/node_modules/**"], // default: ["**/node_modules/**"]
}

For an exact list instead, cssdoc.css takes explicit paths and overrides auto-detection. The set refreshes automatically when files or settings change.

cssdoc.json is applied automatically

The server reads the nearest cssdoc.json walking up from each documented CSS file, so your custom tags, modifier convention, rule severities, and name-case rules all take effect in the editor — no extra settings. In a monorepo, each package's cssdoc.json governs its own CSS independently, so packages can use different conventions side by side. Editing a cssdoc.json reloads the affected rules live.

In CSS (.css, .scss, .less) and host files (HTML, JSX/TSX, Vue, Svelte, Astro, Markdown) you get:

• Completion — cssdoc @tags (with their description) while typing inside a /** */ doc comment; a component's modifiers inside class/className; and declared custom properties inside var(--…). The extension enables editor.quickSuggestions for comments (and, in JS/TS, strings) on these languages by default, so the tag menu pops up the same way JSDoc's does — set it back to off in your own settings to disable that;
• Hover — a modifier's or custom property's documentation. A [class*="-icon-"] attribute selector shows its -icon-* family; a reference to another documented component shows that component's card; and a custom property resolves its var() chain through the indexed sheets to a terminal value, the way a browser's dev tools do;
• Definition — jump to the CSS rule that defines a class or @property;
• Diagnostics + quick-fix — doc-comment hygiene in embedded CSS, and unknown or deprecated modifiers where classes are used (class, className, :class, class:name), plus @element host-tag enforcement (disallowed-element), with a one-click replace-with-canonical fix for deprecated modifiers.

To cover embedded CSS, widen the scan globs to your host files:

// .vscode/settings.json
{
  "cssdoc.include": ["src/**/*.{css,scss,vue,svelte,tsx}"],
}

See Embedded CSS for what's read from each host.

A component's hover card links each custom-property <type> (e.g. <color>, <length>) out to its MDN reference page, and you can tune the card:

// .vscode/settings.json
{
  "cssdoc.hover.detail": "custom", // "compact" | "full" | "custom"
  // custom: choose which sections show — "auto" | "on" | "off"
  "cssdoc.hover.sections": { "examples": "off" },
  // choose the section order (omitted keys are dropped); empty = default order
  "cssdoc.hover.sectionOrder": ["summary", "modifiers", "parts", "customProperties"],
}

Any LSP editor

@cssdoc/language-server is editor-agnostic. Point your editor's LSP client at the cssdoc-language-server binary and pass the CSS paths as initialization options:

{
  "command": "cssdoc-language-server",
  "initializationOptions": { "css": ["dist/components.css"] },
}

That's the same protocol Neovim, Zed, and JetBrains speak, so the features above work there too.

Zero-setup completions

If you'd rather not run a server, the VS Code custom data generator gives you class-name and custom-property completions through VS Code's built-in language services with just a settings entry.