如何在 vs 代码中对 HTML 启用 lint？

Question

我正在使用 visual studio 代码开发 angular2 应用程序，我安装了以下扩展，

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 code 上显示任何错误？有什么问题？

Answer 1

现在，你不能。

为了向 VS Code 添加额外的功能（即 linting），您必须使用为其制作的扩展，不幸的是，在回答这个问题时，还没有任何 htmllint VS 代码扩展。

请注意，您共享的两个链接都是节点模块而不是扩展。使用 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 文本：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

如何在 vs 代码中对 HTML 启用 lint？

How to enable lint on HTML in vs code?

angular

visual-studio-code

htmllint