angular – 如何在vs代码中启用HTML上的lint？

我正在使用visual studio代码开发angular2 app,我安装了以下扩展,

htmllint

和

htmlhint-ng2

我有如下组件模板,

@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在vs代码上没有显示任何错误？问题是什么？

解决方法

现在,你不能.

为了向VS Code添加额外的功能(即linting),你必须使用为它做的扩展,不幸的是,在这个回答的时候,没有任何htmllint VS Code扩展.

请注意,您共享的两个链接都是节点模块,而不是扩展.使用npm安装内容(即npm install htmllint)将无法使用VS Code.

您可以在VS Code,as describe in it docs中浏览和安装扩展,如下所示：

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).

如果找不到所需的扩展名,可以选择以下几种方法：

> Create the extension yourself
>更改为具有此类扩展名的编辑器：

>原子：linter-htmlhint plugin
> Sublime Text：SublimeLinter-contrib-htmllint package

>找到另一种继续使用编辑器的方法,而无需编写自己的扩展.

建议的替代方案：

>安装其中一个2节点模块. (即npm i htmlhint-ng2 -D)
>将其cli命令添加到package.json脚本：

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

>通过运行npm run lint：html来测试它
>安装npm-watch模块：npm i npm-watch -D
>将监视脚本和配置添加到package.json

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

>运行npm run watch