如何配置typescript-eslint规则忽略lit-html中html函数的缩进校验

问题原因 #

你之前配置的"TemplateLiteral > *"仅匹配普通模板字面量的子节点，而lit-html的html调用属于**带标签的模板字面量（TaggedTemplateExpression）**AST节点类型，原有规则匹配不到对应节点，因此不生效。

解决方案 #

方案1：调整ignoredNodes匹配规则

直接修改@typescript-eslint/indent规则的忽略节点配置，匹配所有标签为html的带标签模板表达式的全部子节点：

"@typescript-eslint/indent": [
  "error",
  2,
  {
    "ignoredNodes": [
      "TaggedTemplateExpression[tag.name=\"html\"] *"
    ]
  }
]

上述配置的ignoredNodes是ESLint indent规则的原生参数，支持传入ESQuery选择器匹配AST节点，匹配到的节点的缩进不会被规则校验。

方案2：使用lit专属ESLint插件

如果需要保留模板内部的合理校验而不是完全忽略缩进，可使用适配lit的专用ESLint插件，该插件原生支持lit-html的模板语法，会自动处理模板内部的缩进规则，不会和全局缩进规则冲突：

• 安装依赖：

npm install eslint-plugin-lit --save-dev

• 调整ESLint配置：

{
  "plugins": ["lit"],
  "rules": {
    "@typescript-eslint/indent": ["error", 2],
    "lit/indent": ["error", 2]
  }
}

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