ESLint - 帮助识别缩进子规则答案

【问题标题】：ESLint - Help identifying indent sub-ruleESLint - 帮助识别缩进子规则
【发布时间】：2020-08-15 05:26:43
【问题描述】：

我怎样才能让 ESLint indent 喜欢这个代码：

const a = `
  <li
    style=${styleMap({
      color: '#F00',      // bad line
      background: '#0F0'  // bad line
    })}                   // bad line
  >Something</li>
`;

它不喜欢我标记为bad line 的行的缩进。这就是它要我做的：

const a = `
  <li
    style=${styleMap({
  color: '#F00',
  background: '#0F0'
})}
  >
    <span>Something</span>
  </li>
`;

这看起来很荒谬。

这是我目前关于“缩进”的规则：

indent: ['error', 2, { SwitchCase: 1 }],

我查看了indent 文档，但没有看到任何与这种情况相匹配的内容。

编辑：我查看了indent 规则的所有选项，将它们全部设置为0，然后逐一设置它们为10，看看哪一个会影响我的表情。看起来ObjectExpression 是罪魁祸首，但这个值通常很好。

在处理模板文字多行占位符对象声明时似乎存在一些问题。我认为我唯一的办法是将其添加到ignoreNodes。

【问题讨论】：

在${之后和相应的右大括号之前添加换行符怎么样？
@AndreNuechter 即使这样做，它也会抱怨${ 和关闭} 行之间的所有内容都太远了。想让我把它们推回去，所以styleMap( 与const 对齐。
我刚刚在我的 IDE 中尝试了 sn-p，但没有收到任何疯狂的格式化建议（我使用几乎相同的 eslint 规则）。有没有可能更漂亮或更漂亮？
不。我直接在原始 JS 上从命令行运行eslint。唯一的另一件事是我从 google 配置集继承，但我不认为 ESLint 对单个规则进行部分继承，所以我认为这不应该发挥作用。

标签： javascript eslint static-analysis

【解决方案1】：

注意：请参阅此答案的底部以获取最终版本。当我继续对所有内容进行 linting 时，进一步对其进行了调整。

一旦我进一步缩小范围，我就能找到一些更好的谷歌结果，并发现这个答案似乎与我的问题非常相似，但不完全是：Ignore the indentation in a template literal, with the ESLint `indent` rule

AST 模式不适用于我的具体情况（至少是第一个）。在用 AST explorer 戳它之后，我最终选择了这些模式：

indent: ['error', 2, { 
  ignoredNodes: [
    'TemplateLiteral > CallExpression > ObjectExpression',
    'TemplateLiteral *'
  ]
]

第一个涵盖了我的问题中的确切情况。第二个涵盖了类似的场景：

const a = `
  <li
    style=${someFunc(
      'arg1',
      'arg2'
    })}      
  >Something</li>
`;

似乎这最终是 ESLint 必须以某种方式解决的问题，因为单独的 ObjectExpression 检查在模板文字占位符中会变得非常混乱。

编辑：

我将第二个表达式从TemplateLiteral > CallExpression 更改为TemplateLiteral > *，因为我发现了另外两个稍微不同的场景还没有被捕捉到。我希望更具体一些，但我不想确定 80 种不同的场景。

编辑 2：

改为将TemplateLiteral > * 更改为TemplateLiteral *，因为发现更多嵌套且未被> * 捕获的内容。

现在，模式只是一个：

indent: ['error', 2, { 
  ignoredNodes: [
    'TemplateLiteral *'
  ]
]

【讨论】：

它还缺少一个额外的} :)