Prettier在React.js中无法自动换行及添加括号的问题求助

• 检查Prettier核心配置
  在项目根目录新建或修改.prettierrc/prettier.config.js，确保包含以下规则：

  {
    "printWidth": 80, // 超过指定宽度自动换行，可按需调整
    "jsxBracketSameLine": false, // 强制JSX闭合括号不跟在同一行
    "tabWidth": 2, // 缩进宽度设为2空格
    "trailingComma": "es5"
  }
  

  没有配置文件的话直接新建，Prettier会自动识别读取。

• 处理ESLint与Prettier的冲突
  同时安装ESLint时，大概率是ESLint规则覆盖了Prettier的格式化逻辑，按以下步骤修复：

  1. 安装协调依赖：

     npm install eslint-config-prettier eslint-plugin-prettier --save-dev
     

  2. 修改ESLint配置文件（.eslintrc/.eslintrc.js），加入Prettier相关配置：

     {
       "extends": [
         // 保留你原本使用的ESLint配置，比如"react-app"等
         "prettier" // 禁用所有和Prettier冲突的ESLint规则
       ],
       "plugins": ["prettier"],
       "rules": {
         "prettier/prettier": "error" // 把Prettier规则作为ESLint错误提示
       }
     }
     

• 检查编辑器自动格式化设置
  以VS Code为例：

  • 开启editor.formatOnSave，确保保存时自动触发格式化
  • 把Prettier设为JS/JSX文件的默认格式化工具：点击右下角的格式化工具选项，选择Prettier - Code formatter
  • 确认没有其他格式化工具（比如ESLint自带的格式化）抢占触发权，可在设置里搜索formatOnSave，只保留Prettier的相关配置。

• 验证配置是否生效
  手动运行Prettier命令测试：

  npx prettier --write 你的文件路径.js
  

  如果手动运行能得到期望格式，说明是编辑器自动触发的问题；如果手动也不行，检查配置文件有没有语法错误，或者代码里有没有加/* prettier-ignore */这类忽略注释。

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