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: ['error', 2, { SwitchCase: 1 }],

我查看了indent文檔，但沒有看到任何與這種情況相匹配的內容。

---

編輯：我瀏覽了indent規則的所有選項，將它們全部設置為0 ，然后將它們一一設置為10 ，看看哪一個會影響我的表達。 看起來ObjectExpression是罪魁禍首，但該值通常很好。

似乎在處理模板文字多行占位符 object 聲明時存在一些問題。 我認為我唯一的辦法是將其添加到ignoreNodes 。

Answer 1

注意：有關最終版本，請參閱此答案的底部。 當我繼續檢查所有內容時，進一步調整了它。

一旦我進一步縮小范圍，我就能找到一些更好的谷歌結果並找到這個答案，這似乎與我的問題非常相似，但不完全是： 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 *'
  ]
]