答案：使用vscode配合Prettier可实现代码自动格式化。安装Prettier插件并配置为默认格式化工具，设置保存时自动格式化；在项目根目录添加.prettierrc定义规则，结合.eslint-config-prettier避免与ESLint冲突，通过husky和lint-staged在提交前自动格式化，提升团队协作效率。
使用 VSCode 配合 Prettier 实现代码自动格式化，是前端开发中非常实用的组合。Prettier 能统一团队编码风格，减少因空格、引号、换行等细节引发的代码争议。
安装与配置 Prettier
Prettier 是一个支持多种语言的代码格式化工具，集成在 VSCode 中后可以实现保存即格式化。
- 打开 VSCode 插件市场，搜索 Prettier – Code formatter 并安装
- 确保项目根目录有配置文件（如 .prettierrc）或在 package.json 中定义规则
- 推荐同时安装 ESLint 插件，配合使用避免冲突
设置默认格式化工具
为了让 VSCode 在保存时自动调用 Prettier，需要将其设为默认格式化程序。
- 右键编辑器任意位置，选择“格式化文档”时，点击“配置默认格式化程序”
- 选择 Prettier
- 在 settings.json 中添加以下配置，实现保存自动格式化：
“editor.formatOnSave”: true,
“editor.defaultFormatter”: “esbenp.prettier-vscode”
项目级配置建议
团队协作时，建议在项目中提供统一的 Prettier 配置，避免个人设置差异。
- 创建 .prettierrc 文件定义格式规则，例如：
{
“semi”: false,
“singleQuote”: true,
“trailingComma”: “es5”
}
- 添加 .prettierignore 忽略不需要格式化的文件，如 build/、node_modules/
- 结合 husky 和 lint-staged，在提交代码前自动格式化变更文件
常见问题处理
实际使用中可能会遇到格式化未生效或与 ESLint 冲突的情况。
- 检查文件类型是否被 Prettier 支持（如 .JS、.ts、.json、.vue 等）
- 若与 ESLint 冲突，可使用 eslint-config-prettier 关闭 ESLint 中与 Prettier 冲突的规则
- 确认 VSCode 设置中没有其他格式化插件覆盖 Prettier
基本上就这些。合理配置后，Prettier 能大幅减少代码风格争议，提升开发效率。