HTML id and class attribute completion for Visual Studio Code.
- HTML
idandclassattribute 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
Supported languages can be configured with the css.enabledLanguages global 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, vue, typescript etc. You should also install corresponding language extension which registers the specific 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 and variable substitutions 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:
| Pattern | Matches |
|---|---|
* |
zero or more characters in a path segment |
? |
one character in a path segment |
** |
any number of path segments, including none |
{} |
group conditions like **/*.{css,scss} |
[] |
a range of characters like [0-9] or negate [!0-9] |
The following variable substitutions are supported for local style sheets as well:
| Variable | Substitution |
|---|---|
${fileBasename} |
Current file's basename |
${fileBasenameNoExtension} |
Current file's basename with no extension |
${fileExtname} |
Current file's extension |
Configuration depends on your layout of the project. The following most basic setup will suggest from all css files in project's src folder:
.vscode/settings.json
{
"css.styleSheets": ["src/**/*.css"]
}If Bootstrap npm module is used with additional scss the following can be a starting point:
.vscode/settings.json
{
"css.styleSheets": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/**/*.scss"
]
}or in case of Bootstrap CDN with additional plain css:
.vscode/settings.json
{
"css.styleSheets": [
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css",
"src/**/*.css"
]
}All of Bootstrap's class selectors with additional user defined styles in the project will be available for completion in html files.
Enable typescript or javascript in global settings depending on your usage and restart VS Code:
{
"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:
.vscode/settings.json
{
"css.styleSheets": ["src/base-styles.ts"]
}Variable substitution can be used to refer to a related css file. If you are working on my-component.ts and your css is in my-component-css.ts then a suitable setup can be:
.vscode/settings.json
{
"css.styleSheets": ["**/${fileBasenameNoExtension}-css.ts"]
}Install your favorite Vue language extension from Marketplace which registers vue language id then enable vue in global settings and restart VS Code:
{
"css.enabledLanguages": ["html", "vue"]
}Styles defined in component's <style> section will be available for completion in component's <template> section.
Variable substitution can be used for Angular development:
.vscode/settings.json
{
"css.styleSheets": ["**/${fileBasenameNoExtension}.css"]
}With this setup, styles defined in e.g. app.component.css will be available in app.component.html.
Go to definition for id and class selectors for local style sheets are supported. Selecting Go to Definition from context menu (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.
Extension can be installed from Visual Studio Code Marketplace.