HTML id
and class
attribute completion for Visual Studio Code.
- HTML
id
andclass
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/[email protected]/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/[email protected]/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.