如何在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

现在，你不能。

\n\n

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

\n\n

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

\n\n

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

\n\n

\n

单击 VS Code 一侧活动栏中的“扩展”图标或“视图：扩展”命令 (\xe2\x87\xa7\xe2\x8c\x98X) 调出“扩展”视图。

\n

\n\n

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

\n\n

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

\n\n\n\n

建议的替代方案：

\n\n

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

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

   \n\n

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

\n
3. 通过运行测试一下npm run lint:html
\n
4. 安装npm-watch模块：npm i npm-watch -D
\n

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

   \n\n

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

\n
6. 跑步npm run watch
\n

\n

Answer 2

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

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

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