如何用ESLint检测并修复JSX中不必要的属性花括号？

完全可以实现，借助ESLint的react/jsx-curly-brace-presence规则就能自动检测并修复这类问题。

• 第一步：确保依赖安装
  如果你还没安装ESLint和React插件，执行以下命令：

  npm install eslint eslint-plugin-react --save-dev
  # 或者用yarn
  yarn add eslint eslint-plugin-react --dev
  

• 第二步：配置ESLint规则
  在项目的ESLint配置文件（比如.eslintrc.js）中添加规则：

  module.exports = {
    plugins: ['react'],
    rules: {
      'react/jsx-curly-brace-presence': ['error', {
        props: 'never', // 强制属性中字符串字面量不使用花括号
        children: 'never' // 可选：如果要处理子元素的不必要花括号，可添加该配置
      }]
    }
  };
  

  其中props: 'never'就是专门针对属性的配置，会自动把<HStack mt={"xl"} />这类写法修正为<HStack mt="xl" />。

• 第三步：运行自动修复
  执行修复命令，指定要处理的文件路径：

  npx eslint --fix src/**/*.jsx
  

  这条命令会自动扫描并修复所有符合规则的JSX属性花括号问题。

另外，这个规则还有其他可选配置：

• props: "consistent"：要求属性要么都用花括号，要么都不用，保持一致性
• props: "always"：强制所有属性都使用花括号（和需求相反，按需选择）

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