如何验证 angular HTML 模板

Question

我尝试在我的 angular HTML 模板中编写大部分有效的多语言 (X)HTML 5。它们看起来像这样：

<div class="some-class">
  <input type="checkbox" data-ng-model="variable" />
  <foo-directive data-ng-if="variable"></foo-directive>
</div>

有时我忘记正确关闭标签，这会破坏某些浏览器。所以我想在我的工具链中包含一个验证器。

问题是：我不知道可以处理这种情况的验证器。 XML 验证器通常需要 DTD，HTML 验证器会抱怨代码中使用的 angular 指令。

也许 validator 是个错误的词，我真的想要一个 linter。我想让它做的唯一真实的事情是检查每个开始标签是否都有匹配的结束标签。其他一切都是奖金。

你知道这样的验证器吗？

注意：我主要搜索可以与我的自动化测试集成的命令行工具。但是网络服务也可能有帮助。

Answer 1

因为 htmlhint is an option, you can use it as described here 来自命令行（当然你必须先 npm install 它并确保你的 PATH 包含 node_modules/.bin）：

htmlhint test.html

测试特定选项：

htmlhint -r tag-pair,attr-no-duplication test.html

或者如果选项在配置文件中：

htmlhint -c config-file test.html

我将以下选项与 Angular 一起使用：

Answer 2

html-angular-validate 项目是我使用的项目，我认为它非常适合这个项目。它使用 W3C HTML 验证服务，它基本上只是忽略有关知道 angular 东西的错误（比如以 ng-* 开头的属性通常是无效的 HTML)

您将必须对其进行配置以了解您的自定义元素和属性指令，如果您总是添加新元素，这可能会有点麻烦...但是一旦完成此操作，它就会运行良好并通过发现简单的拼写错误和常见错误多次拯救了我的团队！

How to validate angular HTML templates