如何验证角度HTML模板

Question

我尝试在我的角度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验证器会抱怨代码中使用的角度指令。

也许验证者是错误的词，我真的想要一个短信。我想要它做的唯一真实的事情是检查每个开始标记是否具有匹配的结束标记。其他一切都是奖金。

你知道这样的验证器吗？

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

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验证服务，它基本上只是忽略了有关已知角度内容的错误（例如以ng-*开头的属性，通常是无效的HTML）

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

您必须对其进行配置才能了解您的自定义元素和属性指令，如果您总是添加新元素指令，这些指令可能会变得有点像......一旦您完成此操作，它就能很好地工作并且保存了我的团队很多时候通过找到简单的拼写错误和常见错误！