配置@angular-eslint/template的indent规则出现TypeError报错如何解决

报错原因 #

通用ESLint规则indent仅适配JS/TS等脚本类文件的语法结构，无法识别Angular HTML模板的自定义AST结构，直接用于模板校验就会触发Cannot read property 'start' of undefined类型错误。

解决方案 #

使用@angular-eslint提供的模板专属缩进规则@angular-eslint/template/indent替代通用indent规则，修改你配置中*.html对应的overrides块即可：

{
  "files": [
    "*.html"
  ],
  "extends": [
    "plugin:@angular-eslint/template/recommended"
  ],
  "rules": {
    "@angular-eslint/template/indent": ["error", 2]
  }
}

该规则原生支持Angular模板的指令、插值表达式、嵌套标签等所有模板语法场景，可正常实现2空格缩进的校验需求。

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