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

【问题标题】：Microsoft VS Code and Angular 2 tags in HTML linterHTML linter 中的 Microsoft VS Code 和 Angular 2 标签
【发布时间】：2017-02-18 03:18:06
【问题描述】：

我刚开始在 VSCode 中使用 Angular 2。以 Angular.io“英雄之旅”为例，内置 HTML linter 无法识别 HTML 标记中的 Angular 2 指令，例如 *ng-if 或 (click)，如您在此屏幕截图中所见：

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

【问题讨论】：

这些错误显然来自我拥有的 HTMLHint 插件。我删除了它，错误消失了。我必须找到它有一个 HTML linter for Code 可以理解 Angular 2 标签。

标签： javascript html angularjs visual-studio-code

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

"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 模板并停止抛出警告。

【讨论】：

我已经有了这些，但这些都没有帮助解决这个问题。查看接受的答案。