HTML

HTML / CSS / Sass / Less /Emmet

About

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets CSS and scripting languages such as JavaScript.

Installation

Change enable from False to True in the html section (cf module installation).

vscode-anywhere:
    html:
        enabled: True

You can also take a look at the VSCode-Anywhere html module configuration.

For more details, read the the official documentation HTML and CSS / SCSS / Less.

VSCode includes native support of emmet.

Requirements

No requirements.

VSCode

VSCode extensions

Zignd.html-css-class-completion

This extension adds CSS support for HTML documents.

Zignd.html-css-class-completion

This extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace for external files referenced through the link element.

pranaygp.vscode-css-peek

This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (classes and IDs) found in strings within the source code.

bradgashler.htmltagwrap

This extension allows to wrap your selection in HTML tags. Can wrap inline selections and selections that span multiple lines (works with both single selections and multiple selections at once).

Umoxfo.vscode-w3cvalidation

This extension enables W3C validation support by the Nu Html Checker library.

Extension highlights the wrong properties and values when enabled. Just install the extension and open your CSS file. Validation will be performing in background.

vincaslt.highlight-matching-tag

This extension is intended to provide the missing functionality that should be built-in out of the box in VSCode - to highlight matching opening or closing tags.

formulahendry.auto-rename-tag

This extension automatically renames paired HTML/XML tag.

mrmlnc.vscode-autoprefixer

This extension provides an interface to autoprefixer.

esbenp.prettier-vscode

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

naumovs.color-highlight

This extension styles css/web colors found in your document.

smelukov.vscode-csstree

CSSTree validator validates CSS according to W3C specs and browser implementations.

VSCode settings

Global settings

{
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

Windows settings

{
    "vscode-w3cvalidation.javaHome": "C:\\VSCode-Anywhere\\apps\\scoop\\apps\\openjdk\\current"
}

Assuming you have installed in the default directory C:\VSCode-Anywhere.

Linux settings

{
    "vscode-w3cvalidation.javaHome": "/home/linuxbrew/.linuxbrew/opt/openjdk/libexec"
}

MacOS settings

{
    "vscode-w3cvalidation.javaHome": "/home/linuxbrew/.linuxbrew/opt/openjdk/libexec"
}

VSCode keybindings

No keybindings.

Software

Windows software

scoop

• openjdk (required by the extensions Umoxfo.vscode-w3cvalidation)

Linux software

brew

• openjdk (required by the extensions Umoxfo.vscode-w3cvalidation)

MacOS software

brew

• openjdk (required by the extensions Umoxfo.vscode-w3cvalidation)

Documentation

• HTML

• CSS

• Emmet

• Saas

• Less

VSCode-Anywhere

Environment

No environment.

Specific settings

No specific settings.