正确配置VSCode中Prettier与ESLint协同工作可提升代码一致性，需安装eslint、prettier及相关插件，通过.eslintrc.js集成规则，设置settings.json实现保存时自动格式化与修复。
在VSCode中使用Prettier和ESLint进行自动化代码格式化，可以大幅提升团队协作效率和代码一致性。关键在于正确配置两者协同工作，避免规则冲突，并设置保存时自动格式化。
安装必要的扩展和依赖
先确保在项目中安装Prettier和ESLint作为开发依赖：
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier同时，在VSCode中安装以下扩展：
- Prettier - Code formatter
- ESLint
配置ESLint与Prettier协同工作
创建或更新项目根目录下的 .eslintrc.js 文件，启用Prettier插件并关闭与之冲突的ESLint规则：
module.exports = {extends: [
'eslint:recommended',
'plugin:prettier/recommended'
],
env: {
node: true,
es2021: true
}
};
这样配置后，ESLint会把格式化任务交给Prettier处理，只专注于代码质量检查。
设置VSCode保存时自动格式化
在VSCode的设置中（settings.json），添加以下配置：
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
这个配置的作用是：
- 指定Prettier为默认格式化工具
- 保存文件时自动格式化代码
- 保存时自动修复ESLint可修复的问题
可选：添加.prettierrc配置文件
如果需要自定义格式化风格，可在项目根目录添加 .prettierrc 文件：
{"semi": false,
"singleQuote": true,
"trailingComma": "es5"
}
这样团队成员都能遵循统一的代码风格，无需手动调整。
基本上就这些。配置完成后，每次保存代码，VSCode会自动用Prettier格式化，并通过ESLint检查代码质量，实现无缝的开发体验。
