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?

Answer 1

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:

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

2. Add its cli command to a package.json script:

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

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

5. Add the watch script and config to package.json

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

6. Run npm run watch