ESLint

Question

如何让 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' 的规则：

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

我查看了 indent 文档，但没有看到任何似乎符合这种情况的内容。

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

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

Answer 1

注意：请参阅此答案的底部以获得最终版本。当我继续检查所有内容时进一步调整它。

进一步缩小范围后，我找到了一些更好的 Google 结果并找到了这个看起来与我的问题非常相似但又不完全相同的答案：

AST 模式不适用于我的具体情况（至少第一个）。在用 AST 资源管理器戳它之后，我最终采用了这些模式：

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 *'
  ]
]

ESLint - 帮助识别缩进子规则

ESLint - Help identifying indent sub-rule

javascript

static-analysis