HTML id and class attribute completion for Visual Studio Code.

• HTML id and class attribute completion
• Supports completion from in file 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.

Style sheets can be specified in VS Code settings per workspace folder in .vscode/settings.json and will suggest for all configured languages within that workspace folder.

.vscode/settings.json

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

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.

Configuration depends on your layout of the project but some samples are below:

If you are using Bootstrap npm module:

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

If you are using Bootstrap CDN:

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

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

{
  "css.styleSheets": ["src/view/style.ts"]
}

Validates all class selectors in the active editor.

Clears style cache.

Extension can be installed from Visual Studio Code Marketplace.