在styled-components中使用props时出现ESLint缩进错误，如何解决？

针对你遇到的ESLint: Expected indentation of 4 spaces but found 6.(indent)错误，根源是ESLint默认缩进规则无法正确识别styled-components模板字符串中函数插值的语法，以下是几种可行的修复方案：

1. 安装并配置eslint-plugin-styled-components（推荐） #

这个插件专门为styled-components优化ESLint规则，能自动处理模板内的缩进、语法校验等问题：

• 安装依赖：

  npm install eslint-plugin-styled-components --save-dev
  # 或用yarn/pnpm
  yarn add eslint-plugin-styled-components --dev
  pnpm add eslint-plugin-styled-components -D
  

• 修改.eslintrc.js配置：

  module.exports = {
    // 原有配置...
    plugins: [...(your existing plugins), 'styled-components'],
    extends: [
      ...(your existing extends),
      'plugin:styled-components/recommended'
    ]
  };
  

如果是TypeScript项目，确保同时继承了@typescript-eslint的推荐配置，插件会自动适配TS语法。

2. 调整ESLint的indent规则（无需额外插件） #

通过修改indent规则的ignoredNodes选项，让ESLint忽略styled-components模板字符串内的缩进检查：

module.exports = {
  rules: {
    'indent': [
      'error',
      4,
      {
        // 忽略模板字符串内的所有节点缩进检查
        ignoredNodes: ['TemplateLiteral > *'],
        // 保留其他需要的缩进配置，比如SwitchCase
        SwitchCase: 1
      }
    ]
  }
};

如果不想完全忽略模板内的缩进，也可以更精准地只忽略箭头函数的缩进：

ignoredNodes: ['TemplateLiteral > ExpressionStatement > ArrowFunctionExpression']

3. 手动调整缩进（临时 workaround） #

如果你只是临时修复当前代码的错误，可以把箭头函数所在行的缩进改成4个空格，比如：

const InputField = styled.input`
  padding: 8px;
  border: 1px solid #ccc;
  &:focus {
    border-color: ${props => props.theme.colors.primary};
  }
`;

但这种方法无法从根源解决问题，后续写类似代码时还会重复报错。

内容的提问来源于stack exchange，提问作者yjlee