How to include lint in HTML in vs code?

Question

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

htmllint

and

htmlhint-ng2

I have a 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 not showing errors on vs code? what is the problem?

Answer 1

You cannot right now.

To add additional features (e.g. linting) to VS code, you must use the extension made for it, and unfortunately, by the time of this answer there is no htmllint VS Code extension.

Note that both of the links you specify are node modules, not extensions. Installing something using npm (i.e. npm install htmllint ) will not make it work with VS code.

You can view and install extensions from VS code, as docs described in it , for example:

Raise the Extensions view by clicking the Extensions icon in the Activity panel on the side of the VS code or the View: Extensions (⇧⌘X) command.

If you cannot find the extension you need, you have several options:

• Create the extension yourself
• Change to an editor with this extension:
  • Atom: linter-htmlhint plugin
  • Sublime Text: SublimeLinter-contrib-htmllint Package
• Find an alternative way to use the editor without having to write your own extension.

---

Recommended Alternative :

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

• Add the cli command in the package.json script:

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

• Check it out by running npm run lint:html
• Install the npm-watch module: npm i npm-watch -D

• Add clock 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