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 ），您必须使用为其制作的扩展程序，不幸的是，到此答案时，没有任何{{1} VS代码扩展。

请注意，您共享的两个链接都是节点模块，而不是扩展。使用htmllint安装内容（即npm）将无法使用VS Code。

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

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

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

Create the extension yourself
更改为具有此类扩展程序的编辑器：
- Atom：linter-htmlhint plugin
- Sublime Text：SublimeLinter-contrib-htmllint package
找到另一种继续使用编辑器的方法，而无需编写自己的扩展名。

建议的替代方案：

安装其中一个2节点模块。（即npm install htmllint）
将其cli命令添加到npm i htmlhint-ng2 -D脚本：
```
package.json
```
运行"scripts": { "lint:html": "htmlhint-ng2 src/**/*.html" }
安装npm-watch模块：npm run lint:html
将监视脚本和配置添加到npm i npm-watch -D
```
package.json
```
运行"watch": { "lint:html": "src/**/*.html" }, "scripts": { "lint:html": "htmlhint-ng2 src/**/*.html" "watch": "npm-watch" }

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

1 个答案: