如何配置ESLint/Prettier移除React JSX className多余空格？

问题场景 #

在WebStorm开发React+Tailwind项目时，需要自动移除JSX className字符串中类名间的多余空格（比如text-3xl font-bold underline里的多空格），试过eslint-plugin-tailwindcss和prettier-plugin-tailwindcss没效果，而Vue项目的class属性能正常清理，推测是className与class的属性差异导致。

有效解决方法 #

方法1：用prettier-plugin-jsx-classnames插件 #

这个Prettier插件专门处理JSX的className格式化，包括合并多空格：

1. 安装插件：

npm install --save-dev prettier-plugin-jsx-classnames

2. 在项目根目录的.prettierrc中配置：

{
  "plugins": ["prettier-plugin-jsx-classnames"]
}

3. 触发Prettier格式化（WebStorm快捷键Ctrl+Alt+L），就能自动把className里的多空格合并成单个。

方法2：ESLint自定义规则修复 #

如果习惯用ESLint，可添加规则处理：
在.eslintrc.cjs的rules字段中补充：

rules: {
  "react/react-in-jsx-scope": "off",
  // 匹配字符串中的多空格并报错修复
  "no-multi-spaces": ["error", {
    "ignoreEOLComments": true,
    "exceptions": {
      "Literal": true
    }
  }]
}

要是上述规则不够精准，还可以借助eslint-plugin-regexp编写自定义正则规则，专门针对className属性值里的连续空格做替换。

方法3：WebStorm内置格式化配置 #

依赖IDE能力的话，直接在WebStorm中设置：

1. 打开Settings → Editor → Code Style → JavaScript → JSX
2. 进入Attributes标签页，开启Trim trailing spaces in attribute values
3. 也可以创建自定义正则替换宏，用/\s+/g匹配连续空格并替换为单个，绑定快捷键快速修复。

为什么Vue项目能生效？ #

prettier-plugin-tailwindcss对Vue的class属性有专门处理逻辑，但在React的className属性上，该插件已移除了多空格清理功能，因此需要借助其他工具实现。

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