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

Answer 1

现在，你不能。

为了向 VS Code 添加额外的功能（即 linting），您必须使用为它制作的扩展，不幸的是，到此答案时，没有任何 htmllint VS代码扩展。

请注意，您共享的两个链接都是节点模块而不是扩展。使用npm（即npm install htmllint）安装某些东西不会使其与VS Code一起使用。

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

通过单击 VS Code 侧面活动栏中的扩展图标或查看：扩展命令 (⇧⌘X) 来打开扩展视图。

如果找不到所需的扩展程序，您有几个选择：

• Create the extension yourself
• 更改为具有此类扩展名的编辑器：
  • 原子：linter-htmlhint plugin
  • 崇高文本：SublimeLinter-contrib-htmllint package
• 找到一种替代方法来继续使用编辑器，而无需编写自己的扩展程序。

---

建议的替代方案：

1. 安装 2 个节点模块之一。 （即npm i htmlhint-ng2 -D）

2. 将其 cli 命令添加到 package.json 脚本：

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

3. 通过运行npm run lint:html 对其进行测试
4. 安装npm-watch模块：npm i npm-watch -D

5. 将监视脚本和配置添加到package.json

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

6. 运行npm run watch