React项目中Prettier的jsx-max-props-per-line配置不生效问题

首先得揪出你配置里的小问题：你把ESLint的规则写到了Prettier的配置文件里！react/jsx-max-props-per-line是eslint-plugin-react提供的规则，不是Prettier的配置项，所以你写在.prettierrc里完全不会生效，这就是为啥没效果的原因😅。

下面是一步步的修复方案：

1. 清理错误的Prettier配置 #

先打开你的.prettierrc，把那个错误的"react/jsx-max-props-per-line"配置删掉，Prettier根本不认识它，留着只会占地方。

2. 在ESLint配置中正确设置规则 #

打开你的ESLint配置文件（比如.eslintrc.js或者.eslintrc.json），在rules字段里添加这条规则：

rules: {
  // 其他已有的规则...
  "react/jsx-max-props-per-line": ["error", { maximum: 1, when: "multiline" }]
}

这条规则的意思是：只有当JSX属性已经是多行的时候，才要求每行只放一个属性；如果本来就是单行的，允许多个属性挤在一行——完美匹配你想要保持<Icon icon="arrow-left" width={15} height={18} />单行的需求。

3. 检查Prettier的关键配置 #

确保Prettier的配置不会强制把单行Props拆成多行：

• 确认singleAttributePerLine设置为false（这是默认值，除非你手动改过），这个选项会强制每个属性单独占一行，开了的话肯定会破坏你的单行格式。
• 调整printWidth到合适的值（默认是80），只要你的<Icon>那行代码长度小于这个值，Prettier就会保持单行。你那行字符数很少，默认的80完全够用，除非你把printWidth改得特别小。

4. 确保ESLint配置顺序正确 #

你的extends顺序是对的：["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"]——plugin:prettier/recommended必须放在最后，这样它能自动关闭所有和Prettier冲突的ESLint规则，避免格式打架。

5. 验证效果 #

运行下面的命令测试一下：

# 让ESLint检查并修复格式问题
npx eslint --fix your-component-file.jsx
# 让Prettier格式化文件
npx prettier --write your-component-file.jsx

之后你会发现你的<Icon>组件Props还是保持着单行的格式啦！

内容的提问来源于stack exchange，提问作者s-leg3ndz