HTML linter 中的 Microsoft VS Code 和 Angular 2 标签

Question

我刚开始在 VSCode 中使用 Angular 2。 以 Angular.io "Tour of Heroes" 为例，内置 HTML linter 无法识别 HTML 标签中的 Angular 2 指令，例如*ng-if或(click) ，如您在此屏幕中所见射击：

是否有一些我遗漏的设置或扩展？ 这是 Angular 2 应用程序中的有效 HTML 代码，我不希望出现很多错误——但我想使用 linter，以防我在其他地方出现实际错误。

Answer 1

您可以在 HTMLHint 扩展中的属性列表中添加例外：

"htmlhint.options": {
    "attr-lowercase": ["*ngIf", "*ngFor"]
}

attr-lowercase 规则可以是 true、false 或要忽略的属性名称数组。

Answer 2

只需将此片段添加到您的设置文件（工作区中的 .vscode\\settings.json 或通过 File>Preferences>Settings 编辑）：

"htmlhint.options": {
    "tagname-lowercase": true,
    "attr-value-double-quotes": true,
    "attr-no-duplication": true,
    "tag-pair": true,
    "spec-char-escape": true,
    "id-unique": true,
    "src-not-empty": true,
    "title-require": true
}

有了这个，HTMLHint 插件将正确解析 Angular 模板并停止抛出警告。