angular - 如何在 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），您必须使用为其制作的扩展，不幸的是，到此答案时，还没有任何htmllintVS Code 扩展。

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

您可以从 VS Code 中浏览和安装扩展，如 docs 中所述，如下所示：

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

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

• 自己创建扩展
• 更改为具有此类扩展名的编辑器：
  • Atom：linter-htmlhint 插件
  • Sublime Text：SublimeLinter-contrib-htmllint 包
• 找到一种替代方法来继续使用编辑器，而无需编写自己的扩展。

---

建议的替代方案：

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