提问人：tobib 提问时间：1/26/2015 最后编辑：GitaarLABtobib 更新时间：6/14/2021 访问量：18605
如何验证 angular HTML 模板
How to validate angular HTML templates
问：
我尝试在我的 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 指令。
也许验证者是错误的词，我真的想要一个 linter。我唯一真正希望它做的是检查每个开始标签是否都有一个匹配的结束标签。其他一切都是奖励。
你知道这样的验证者吗？
注意：我主要搜索可以与自动化测试集成的命令行工具。但 Web 服务也可能有所帮助。
答：
12赞
Nikos Paraskevopoulos
1/26/2015
#1
由于 htmlhint 是一个选项，因此您可以从命令行中按照此处所述使用它（当然，您必须首先使用它并确保您的 contains ）：npm installPATHnode_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：元素中没有重复的属性
评论
0赞
jrharshath
5/25/2016
如何忽略自定义指令和属性？htmllint
0赞
Nikos Paraskevopoulos
5/25/2016
它不关心自定义属性/元素，至少在其首页的在线验证器中是这样。
0赞
jrharshath
5/25/2016
没错，我后来注意到了同样的事情
-2赞
Chris Barr
3/2/2018
#2
html-angular-validate 项目是我使用的，我认为它非常适合此。它使用 W3C HTML 验证服务，它基本上只是忽略有关已知 angular 内容的错误（例如以通常无效的 HTML 开头的属性）ng-*
我使用 gulp-html-angular-validate 通过 gulp 运行它
您必须对其进行配置以了解您的自定义元素和属性指令，如果您总是添加新的指令，这可能会变得有点痛苦......但是，一旦您这样做了，它就会运行良好，并且通过查找简单的错别字和常见错误多次为我的团队节省了时间！
评论
tag-pairattr-no-duplication