如何在 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 Code扩展。

请注意，您共享的两个链接都是节点模块，而不是扩展。 与安装的东西npm （即npm install htmllint ）不会让它与VS代码工作。

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

单击VS Code侧面的活动栏中的Extensions图标或View：Extensions命令（⇧⌘X），打开Extensions视图。

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

• 自己创建扩展
• 更改为具有此类扩展名的编辑器：
  • 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

Answer 2

现在有一个官方的 HTMLHint VS Code 扩展（它取代了由 Microsoft 构建的已弃用的扩展）。

https://marketplace.visualstudio.com/items?itemName=HTMLHint.vscode-htmlhint

可以将规则配置为与 HTML 中的 Angular 组件一起使用。