HTML CSS Support – Visual Studio Marketplace


HTML CSS Support – Visual Studio Marketplace Skip to content

HTML id and class attribute completion for Visual Studio Code.

Features

  • HTML id and class attribute 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 [] and embedded [

] 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

1 of 2
2 of 2

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

{{ title }} {% block content %}{% endblock %}

home.html

{% extends “base” %} {% block content %}

Home

{% 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.

Source