如何解决VS Code中format on save及React项目Prettier失效问题？

• 检查VS Code核心设置
  打开设置（Ctrl+,/Cmd+,），搜索format on save，确保Editor: Format On Save已勾选；再搜索default formatter，将Editor: Default Formatter设置为esbenp.prettier-vscode。
  若项目根目录有.vscode/settings.json，直接添加以下配置锁定规则：

  {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
  

• 匹配Prettier本地依赖与插件版本
  React项目必须安装本地Prettier依赖，全局依赖易出现兼容问题，执行命令安装：

  npm install --save-dev prettier
  # 或使用yarn
  yarn add --dev prettier
  

  确保VS Code的Prettier插件版本与本地依赖版本差异不要过大（避免插件为3.x但本地依赖为1.x这类跨大版本情况）。

• 排查配置冲突
  检查项目根目录的.prettierrc（或.prettierrc.json等）配置文件，确保无语法错误，示例基础配置：

  {
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5"
  }
  

  若项目使用ESLint，需安装eslint-config-prettier和eslint-plugin-prettier消除冲突，并在.eslintrc中添加：

  {
    "extends": ["plugin:prettier/recommended"]
  }
  

• 重置插件状态
  禁用所有其他格式化类插件（如Beautify、ESLint自动格式化功能），仅保留Prettier插件测试是否生效；若仍失效，卸载Prettier插件后重启VS Code再重新安装。

• 确认文件关联规则
  确保React的.jsx/.tsx文件被Prettier识别，在VS Code设置中搜索files.associations，确认配置：

  {
    "*.jsx": "javascriptreact",
    "*.tsx": "typescriptreact"
  }
  

  也可在settings.json中直接指定文件类型的格式化工具：

  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
  

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