HTML id and class attribute completion for Visual Studio Code.

• HTML id and class attribute completion
• Supports completion from in file defined styles
• Supports specifying remote and local style sheets
• Supports any language for completion
• Supports go to definition for selectors
• Validates class attributes on demand

You can view a list of id and class attribute suggestions in configured languages.

Supported languages can be configured with the css.enabledLanguages setting. By default html is enabled:

{
  "css.enabledLanguages": ["html"]
}

Extension can be configured to support any language where it makes sense such as nunjucks, twig, mustache, typescript etc. You should also install corresponding language extension which registers the language id in VS Code.

This setting is application scoped and changing the setting requires restarting VS Code.

Remote and local style sheets with optional glob patterns can be specified in VS Code settings per workspace folder in .vscode/settings.json and will suggest in all configured languages within that workspace folder.

Glob patterns for local style sheets can have the following syntax:

Configuration depends on your layout of the project. The following most basic setting will suggest from all your css files in your project's src folder:

.vscode/settings.json

{
  "css.styleSheets": ["src/**/*.css"]
}

If you are using Bootstrap npm module with additional scss this can be a starting point:

{
  "css.styleSheets": [
    "node_modules/bootstrap/dist/css/bootstrap.css",
    "src/**/*.scss"
  ]
}

or if you are using Bootstrap CDN with additional plain css:

{
  "css.styleSheets": [
    "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css",
    "src/**/*.css"
  ]
}

First typescript or javascript should be enabled in global settings depending on your usage and VS Code should be restarted:

{
  "css.enabledLanguages": ["html", "typescript"]
}

Component's static styles will be available for completion elsewhere in the component. If you need to use some base styles in every component you can specify as follows:

{
  "css.styleSheets": ["src/base-styles.ts"]
}

Go to definition for id and class selectors for local style sheets are supported. Selecting Go to Definition from context menu, pressing F12 or ⌘ click on a selector will open the local style sheet which the selector is defined.

Validates all class selectors in the active editor. Auto validation can be configured in extension settings globally or per workspace.

Clears style sheets cache.

• Github Sponsors
• Buy me a coffee

Extension can be installed from Visual Studio Code Marketplace.