React项目中Prettier保存时不自动格式化（补全分号）求助

预期效果 #

在React项目中，保存文件时自动应用Prettier代码格式化工具，例如自动添加分号。

问题描述 #

VSCode输出显示Prettier已运行，但保存文件时并未自动添加分号。

环境依赖 #

• prettier: ^1.18.2
• VSCode: 1.73.1 (Universal)
• Mac OS

已尝试操作 #

• 选择Prettier为默认格式化工具
• 开启保存及粘贴时自动格式化
• 启用Prettier插件
• 设置resolveGlobalModules为false

当前.prettierrc配置：

{
    "useTabs": false,
    "singleQuote": true,
    "trailingComma": "all",
    "printWidth": 80,
    "arrowParens": "avoid",
    "bracketSpacing": true,
    "quoteProps": "as-needed",
    "semi": true,
    "tabWidth": 2,
    "jsxBracketSameLine": false,
    "jsxSingleQuote": false
}

解决方案 #

1. 绑定React文件到Prettier格式化 #

确保.jsx/.tsx文件默认使用Prettier格式化。打开VSCode的settings.json，添加以下配置：

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

2. 解决版本冲突 #

项目本地Prettier版本（1.18.2）可能和VSCode插件依赖版本不兼容，执行以下步骤：

• 删除项目根目录的node_modules、package-lock.json（或yarn.lock）
• 重新执行npm install/yarn install
• 重启VSCode后测试保存格式化

3. 排查ESLint干扰 #

如果项目使用ESLint，检查是否存在禁用分号的规则（如no-semi）。若有冲突，安装eslint-config-prettier来禁用ESLint与Prettier冲突的规则：

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

然后在.eslintrc中添加：

{
    "extends": ["prettier"]
}

4. 验证Prettier配置有效性 #

在项目根目录执行命令行手动格式化，确认配置是否生效：

npx prettier --write src/测试文件.jsx

• 若命令行能成功添加分号：说明VSCode插件配置有问题，继续下一步
• 若命令行无效果：检查.prettierrc是否在项目根目录，或是否存在其他层级的Prettier配置文件（如prettier.config.js）覆盖当前设置

5. 重置Prettier插件配置 #

尝试重置插件配置解决异常：

• 禁用Prettier插件，重启VSCode后重新启用
• 或在VSCode设置中搜索Prettier: Reset Configuration，重置插件默认配置

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