HTML id
and class
attribute completion for Visual Studio Code.
- HTML
id
andclass
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:
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] |
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/[email protected]/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.
Extension can be installed from Visual Studio Code Marketplace.