How to enable lint on HTML in vs code?

Question

I am developing angular2 app with visual studio code, I have installed the following extensions,

htmllint

and

htmlhint-ng2

I have the component template as follows,

@Component({
    selector: 'userprofile',
    template: `
            <div class="profilecontainer">  
                <div class="row"> 
                   <img [src]="profile.profilePic" />

                <div   class="row">
                    <h2>{{profile.firstName}} {{profile.lastName}} </h2>
                    <a target="_blank" href="{{profile.detailUrl}}"> View profile</a>
                    <a target="-blank" href="{{profile.editUrl}}">Edit profile</a>
                </div>
           </div>`
})

Hml lint does not show any errors on vs code? what is the issue?

Maybe it sees it as a string, rather that an actual html fragment — Alex Tartan, Jan 24 '17 at 13:13
Have you tried to use html files as template and lint them? It might be trying to lint a ts file, that's incompatible. — alexndreazevedo, Oct 24 '17 at 09:17

score 5 · Accepted Answer · answered Oct 24 '17 at 09:59

Right now, you can't.

In order to add extra features (i.e. linting) to VS Code you must use an extension made for it and unfortunately, by the time of this answer, there isn't any htmllint VS Code extension.

Please note that both links you shared are node modules and not extensions. Installing something with with npm (i.e. npm install htmllint) will not make it work with VS Code.

You can browse and install extensions from within VS Code, as describe in it docs, like this:

Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or the View: Extensions command (⇧⌘X).

If you can't find the extension you need, you have a few options:

Create the extension yourself
Change to an Editor that has such extension:
- Atom: linter-htmlhint plugin
- Sublime Text: SublimeLinter-contrib-htmllint package
Find an alternative way to keep using the editor without having to write your own extension.

Suggested Alternative:

Install one of the 2 node modules. (i.e. npm i htmlhint-ng2 -D)

Add its cli command to a package.json script:

"scripts": {
  "lint:html": "htmlhint-ng2 src/**/*.html"
}

Test it by running npm run lint:html
Install the npm-watch module: npm i npm-watch -D

Add the watch script and config to package.json

"watch": {
  "lint:html": "src/**/*.html"
},
"scripts": {
  "lint:html": "htmlhint-ng2 src/**/*.html"
  "watch": "npm-watch"
}

Run npm run watch

score 3 · Answer 2 · answered Sep 16 '22 at 02:14

There is now an official HTMLHint VS Code extension (which replaces the deprecated one built by Microsoft).

https://marketplace.visualstudio.com/items?itemName=HTMLHint.vscode-htmlhint

The rules can be configured to work with Angular components in HTML.

How to enable lint on HTML in vs code?

2 Answers2