如何将 ESLint 中的缩进规则应用于样式化组件？答案

【问题标题】：How do I apply the indent rule in ESLint to styled components?如何将 ESLint 中的缩进规则应用于样式化组件？
【发布时间】：2021-07-08 15:47:35
【问题描述】：

（我是新手，所以请告诉我是否需要在我的问题中添加更多信息）

我正在尝试为缩进样式的组件添加一条规则，如下所示：

const link = styled.a`
    text-decoration: none;
    color: #000;
`;

我正在使用这条规则：

"indent": ["error", "tab"]

我认为该规则不适用于样式化组件，因为它使用模板文字，但后来我还看到您可以在规则中添加 "ignoredNodes": ["TemplateLiteral > *"]。这表明该规则应该与模板文字一起使用？但就我而言，它没有..

有没有人可以解决为什么我的缩进不适用于模板文字，或者对如何修复样式组件中的缩进的另一种解决方案提出建议？

我正在使用以下版本：

"styled-components": "^5.2.1",
"eslint": "^7.23.0"

更新： 我试图在没有 Prettier 的情况下解决这个问题。

【问题讨论】：

标签： reactjs configuration eslint indentation styled-components

【解决方案1】：

配置 "ignoredNodes": ["TemplateLiteral > *"] 不起作用，因为 TemplateLiteral 中的行（在您的示例中）不是抽象语法树的节点。您可以将您的代码 sn-p 粘贴到AST explorer 以确认。

据我所知，linter 与缩进字符串内容和模板文字内容无关。要缩进样式组件，您应该使用格式化程序，例如Prettier。 ESLint 可以通过 eslint-plugin-prettier 和 eslint-config-prettier 包使用 Prettier 格式化代码（但您仍然必须安装 prettier）。

为了缩进你的样式组件，安装上面的包，创建.prettierrc.json文件（规则与ESLint不冲突），添加ESLint规则"prettier/prettier": ["error", {}, { "usePrettierrc": true }]是一个好的开始。

【讨论】：

哦，好的，谢谢！不幸的是，我们不想使用 Prettier，并试图找到另一种方法来完成这项工作..