如何修复嵌套样式组件中的缩进 eslint 错误？

Posted 2023-02-21

【中文标题】如何修复嵌套样式组件中的缩进 eslint 错误？

【英文标题】：how to fix indent eslint error in nested styled-components?

【发布时间】：2018-08-19 08:13:00

【问题描述】：

如何解决这个 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 ],

【参考方案1】：

首先，eslint 的indent 规则工作正常，见here。如果您想继续使用 styled-components 并遵守 indent 的 linter 配置，最简单的解决方案可能是不内联编写插值函数，而是将其分配给变量。

例如：

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


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

【讨论】：

我什至没有想到将它分成一个函数，但即使没有 eslint borking，它也确实让整个事情变得更干净

【参考方案2】：

我想指出这需要修复一些 if/case 以正确处理成功/错误情况，否则你最终会得到 ​​p>

.class 
  color:

所以我建议这种方法，幸运的是它本身解决了 eslint 问题。

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