如何自动重构并强制React组件字符串props无需括号传递？

一、用Prettier/ESLint批量修复并长期强制规范 #

1. Prettier 实现 #

Prettier 默认会自动移除静态字符串 props 的冗余大括号，比如将 <Component foo={"bar"} /> 格式化为 <Component foo="bar" />。

• 批量修复全项目：在项目根目录执行命令

  prettier --write .
  

• 长期强制规范：
  • 确保项目根目录有 .prettierrc 配置文件（无特殊需求可使用基础配置或留空）；
  • 配合 Husky + lint-staged 配置 pre-commit 钩子，每次提交代码前自动执行 Prettier 格式化，避免冗余括号再次出现。

2. ESLint 实现 #

借助 eslint-plugin-react 的规则精准控制：

• 安装依赖（未安装的话执行）：

  npm install eslint-plugin-react --save-dev
  

• 在 .eslintrc 或 .eslintrc.js 中添加规则：

  {
    "plugins": ["react"],
    "rules": {
      "react/jsx-curly-brace-presence": ["error", {
        "props": "never",
        "children": "never"
      }]
    }
  }
  

  该规则会强制字符串类型的 props 不使用大括号，且支持自动修复。
• 批量修复全项目：

  eslint --fix .
  

• 长期强制：将规则保留在 ESLint 配置中，配合 pre-commit 钩子，提交时自动检查并修复。

二、WebStorm 配置：自动识别字符串Props，避免冗余括号 #

调整 WebStorm 的 React JSX 配置即可解决自动补全加括号的问题：

1. 打开 File > Settings（Windows/Linux）或 WebStorm > Settings（Mac）；
2. 导航到 Languages & Frameworks > JavaScript > React JSX；
3. 找到 Add curly braces for attributes 选项，选择 Only for expressions；
4. 保存设置后，后续自动补全字符串类型的 props 时，就不会自动添加大括号了。

如果已存在冗余括号，可选中代码后按 Alt+Enter（Windows/Linux）或 Option+Enter（Mac），选择「Remove unnecessary curly braces」快速移除；也可以通过 Code > Code Cleanup 批量处理当前文件的这类问题。

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