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

Question

如何修复这个重复错误？

我想写下面的格式。

const Hoge = styled.div`
  ...

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

但是这种格式有重复错误。

​

​

错误: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",

缩进的静音设置就在下面。

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

Answer 1

首先，eslint的indent规则工作正常，参见这里。如果您想继续使用样式化的组件并坚持indent的linter配置，最简单的解决方案可能不是内联编写插值函数，而是将其赋值给一个变量。

例如：

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:
}

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

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