Visual Studio Code CSS Intellisense for HTML
HTML id and class attribute completion for Visual Studio Code.
Features
- HTML
idandclassattribute completion. - Supports linked and embedded style sheets.
- Supports template inheritance.
- Supports additional style sheets.
- Supports other HTML like languages.
- Validates CSS selectors on demand.
Usage
You can view a list of id and class attribute suggestions via ctrl + space.
Linked and Embedded Style Sheets
Linked [<link rel="stylesheet">] and embedded [<style></style>] style sheets are used in completion for id and class attributes. Links support local and remote files. Absolute local file paths are relative to the workspace folder while others are relative to HTML file:
index.html
<!DOCTYPE html>
<html>
<head>
<!-- Remote style sheet -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- Local style sheet relative to workspace folder -->
<link rel="stylesheet" href="/style.css">
<!-- Local style sheet relative to this file -->
<link rel="stylesheet" href="style.css">
<!-- Embedded style sheet -->
<style>
#content {
display: block;
}
.internal {
display: block;
}
</style>
</head>
<body>
<div class="container external internal" id="content">
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
</div>
</body>
</html>All local links point to the same file which is in the root of workspace folder:
style.css
.external {
display: block;
}Template Inheritance
Template inheritance is supported for the following tags:
{% extends "base" %}
@extends('base')
{{< base }}
{{> base }}
Styles defined in base.html will also be available for completion in home.html:
base.html
<!doctype html>
<html>
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
#content {
display: block;
}
.internal {
display: block;
}
</style>
<title>{{ title }}</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>home.html
{% extends "base" %}
{% block content %}
<div id="content" class="container internal">
<h1>Home</h1>
</div>
{% endblock %}Additional Style Sheets
If it is not possible to specify local or remote styles in HTML or via template inheritance, they can be specified in VS Code settings per workspace folder in .vscode/settings.json and will suggest for all HTML files within that workspace folder.
Example
.vscode/settings.json
{
"css.styleSheets": [
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
"/style.css",
"style.css",
"${fileBasenameNoExtension}.css"
]
}All relative paths will be evaluated relative to the file being edited. ${fileBasenameNoExtension} will be replaced with the file name of the file being edited without extension.
Supported 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, 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.
Commands
Validate Attributes
Validates all id and class attributes in the active editor.
Clear Cache
Clears file cache.
Installation
Extension can be installed from Visual Studio Code Marketplace.