正确配置 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 检查代码质量，实现无缝的开发体验。
