Angular模板标记最佳验证方式及Angular 5模板语法检查工具咨询

嘿，针对你在Angular 5项目里遇到的模板标签不闭合、引号缺失这类问题，我整理了实用的解决方案：

• 开发时实时验证：Angular CLI本身在启动开发服务器（ng serve）或执行构建命令时，会自动检测模板中的语法错误——比如未闭合的标签、属性引号缺失这类问题，一旦发现会在终端和浏览器控制台抛出明确的错误提示，这是最基础也最常用的实时验证手段。
• 借助IDE/编辑器的内置能力：像VS Code、WebStorm这类主流编辑器，安装Angular相关插件（比如VS Code的Angular Language Service）后，能在你编写模板时实时高亮语法问题，甚至给出一键修复建议，不用等到构建阶段就能提前发现并解决问题。
• 生产构建严格校验：运行ng build --prod执行生产环境构建时，Angular会对模板做更严苛的编译检查，一些开发环境下可能被忽略的潜在问题会被彻底揪出来，因为生产构建会开启全量优化和严格的校验规则。

• ESLint + angular-eslint：虽然ESLint主打JS/TS代码检查，但angular-eslint扩展专门为Angular项目定制，其中包含了大量针对HTML模板的lint规则，覆盖标签闭合、属性引号规范、模板语法正确性等场景。你可以通过ng add @angular-eslint/schematics集成到项目中（注意要选择适配Angular 5的旧版本），然后在.eslintrc.json里配置模板相关规则。
• TSLint（适配旧版Angular的选择）：在ESLint成为主流前，TSLint是Angular项目的标配，它同样支持HTML模板的检查。你可以在tslint.json中启用template相关规则，比如强制标签闭合、规范引号使用等。虽然TSLint已经停止维护，但对于Angular 5这类旧项目来说，它依然是可用且适配性很好的工具。
• HTMLHint：这是一个专门针对HTML的lint工具，能单独配置来检查Angular模板中的基础HTML语法问题——比如强制标签闭合、属性必须加引号、禁止无效HTML属性等。你可以通过npm安装它，然后创建.htmlhintrc配置自定义规则，再通过脚本批量扫描项目里的所有模板文件。

内容的提问来源于stack exchange，提问作者mtanzania