使用 ESLint `indent` 规则忽略模板文字中的缩进答案

【问题标题】：Ignore the indentation in a template literal, with the ESLint `indent` rule使用 ESLint `indent` 规则忽略模板文字中的缩进
【发布时间】：2019-02-10 04:24:42
【问题描述】：

indent 的 ESLint 规则允许您在使用 ignoredNodes 选项确定规则是否应用于该节点时指定忽略哪些节点。

我想用这条规则忽略以下代码：

const a = b
  ? `c${
      d
    }`
  : e

具体来说，带有d 的行和后续行被报告为多出两个空格。我想忽略规则中的那些行，但我无法确定应该应用的节点。

节点类型指定in this repo。我知道这个代码中使用的三元表达式是一个ConditionalExpression 节点，看起来template literal node 存在，但我无法让它工作。

我知道我可以使用eslint-disable-next-line、eslint-disable 等，但我不想使用这些，因为每次出现这种情况时我都必须使用它们。

【问题讨论】：

看看这个：stackoverflow.com/questions/27732209/…
@JaeWooWoo 我不想使用eslint-disable 等。
"indent": ["warn", 4, { "ignoredNodes": ["ConditionalExpression *"]] 为我工作

标签： javascript eslint ternary-operator lint template-literals

【解决方案1】：

通过简单地查看ast tree 和${foo}，我确认它确实是TemplateLiteral 节点。但是我碰巧也知道那里的解决方案：您还需要选择它的孩子。这可以通过TemplateLiteral > * 完成。您的解决方案不起作用的原因是因为ESLint 将将TemplateLiteral 排除在缩进规则之外，但只有小部分${ 和} 部分，而不是内容。

这可以像这样进入您的 ESLintrc 文件：

"indent": ["error", "tab", { "ignoredNodes": ["TemplateLiteral > *"] }]

很抱歉没有其他人能够更早地回答您的问题。

【讨论】：

我收到了来自 eslint 的使用此配置的警告，特别是因为它希望 ignoredNodes 是一个数组。以下为我修复了它：js "indent": [{ "ignoredNodes": ["TemplateLiteral > *"] }]
我没有收到那个警告。我现在已经解决了。
它会覆盖ignoredNodes 的扩展规则。我们可以扩展这个数组而不覆盖吗？
规则语法错误，它需要前 2 个参数 ("error", "tab")。现在它可以正常工作了

【解决方案2】：

要忽略模板文字中 ESLint 中的所有缩进和换行错误，包括函数调用或深度嵌套的 JS 语法，您可以使用 "ignoredNodes": ["TemplateLiteral *"]（不带 > 子选择器，以定位所有后代。）

  "rules": {
    "indent": ["error", 2, { "ignoredNodes": ["TemplateLiteral *"] }],
    "function-paren-newline": "off"
  }

您还必须指定您的正常缩进规则，例如"error", 2 用于强制 2 个空格或 "error", "tab" 用于制表符。

"function-paren-newline" 在我的模板文字中也给出了错误，我也想禁用它（因为我正在扩展显示错误的现有 ESLint 配置）。

【讨论】：