如何验证角度 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 是一个选项，您可以按照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 中使用以下选项：

• tag-pair：确保标签正确关闭
• attr-no-duplication: 元素中没有重复的属性

Answer 2

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

我通过 gulp 使用 gulp-html-angular-validate 运行它

您必须对其进行配置以了解您的自定义元素和属性指令，如果您总是添加新的指令，这可能会变得有点痛苦......但是一旦您这样做了，它就可以很好地工作并且具有通过发现简单的拼写错误和常见错误多次拯救了我的团队！