如何修復嵌套樣式組件中的縮進 eslint 錯誤？

Question

如何解決這個 eslint 錯誤？

我想寫下面的格式。

const Hoge = styled.div`
  ...

  .class {
    color: ${props =>
      props.a !== 'aaaaaa' &&
      props.b !== 'bbbbbb' &&
      '#ccc'};
  }
`

但是這種格式有 eslint 錯誤。

錯誤：[eslint] 預期縮進 4 個空格，但找到 6 個。（縮進）

我想知道解決這個問題。

我正在使用以下版本。

"styled-components": "^3.1.6",
"eslint": "^4.17.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-prettier": "^2.6.0",
"prettier": "^1.10.2",
"prettier-eslint": "^8.8.1",

縮進的 eslint 設置就在下面。

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

Answer 1

首先，eslint 的indent規則工作正常，見這里。 如果您想繼續使用 styled-components 並堅持您的 linter 配置以進行indent ，最簡單的解決方案可能是不編寫內聯插值函數，而是將其分配給一個變量。

例如：

const getColorForClass = ({ a, b }) => {
  return a !== 'aaaaaa' && b !== 'bbbbbb' && '#ccc'
}

const Hoge = styled.div`
  .class {
    color: ${getColorForClass};
  }
`

Answer 2

通過向 eslint 配置添加異常，我可以忽略相關塊，以便自動修復不會破壞標識。 您仍然必須手動管理它，但至少它保留了您編寫的內容

在.eslintrc.js ：

const styledComponentArrowFn =
  'TaggedTemplateExpression > TemplateLiteral > ArrowFunctionExpression';

const ignoredNodes = [
  styledComponentArrowFn,
  `${styledComponentArrowFn} > BlockStatement`,
];

module.exports = {
  rules: {
    'indent': ['error', 2, {
      ignoredNodes,
    }],
  }
}

參考： https ://eslint.org/docs/rules/indent#ignorednodes

Answer 3

我想指出這需要修復一些 if/case 以正確處理成功/錯誤情況，否則你最終會得到

.class {
  color:
}

所以我建議這種方法，幸運的是它本身解決了 eslint 問題。

.class {
  ${props =>
    props.a !== 'aaaaaa' &&
    props.b !== 'bbbbbb' && 'color: #ccc'
  };
}