配置VSCode集成ESLint与Prettier可实现代码风格统一和自动修复。1. ESLint负责代码质量，Prettier专注格式化；2. 安装eslint、prettier及相关插件；3. 配置.eslintrc.js启用prettier规则；4. 创建.prettierrc定义格式选项；5. VSCode安装对应插件并开启保存自动格式化；6. 注意避免插件冲突及环境差异问题。
在现代前端开发中，保持代码风格统一和减少低级错误是团队协作的关键。VSCode 集成 ESLint 与 Prettier 是目前最主流的代码检查与格式化方案之一。通过合理配置，可以实现保存文件时自动修复问题、统一编码规范，并提升开发效率。
ESLint 与 Prettier 的分工
ESLint 负责代码质量检查，比如变量未使用、语法错误、潜在 bug 等。它也可以处理部分代码风格问题（如引号、缩进），但更推荐将风格控制交给 Prettier。
Prettier 是一个“ opinionated ”代码格式化工具，专注于统一代码外观。它会强制重写代码结构（如换行、括号位置），确保所有人的输出一致。
两者结合使用时，应让 ESLint 接受 Prettier 的风格规则，避免冲突。可通过 eslint-config-prettier 关闭 ESLint 中与格式相关的规则。
项目级配置步骤
在项目根目录完成以下配置，确保团队成员共享相同规则：
- 安装依赖： npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
- 创建或更新
.eslintrc.js： module.exports = { extends: [ 'eslint:recommended', 'plugin:prettier/recommended' // 启用 Prettier 并关闭冲突规则 ], parserOptions: { ecmaVersion: 12 }, env: { browser: true, es2021: true } }; - 添加
.prettierrc定义格式规则： { "semi": true, "trailingComma": "es5", "singleQuote": true, "printWidth": 80, "tabWidth": 2 } - 可选：添加
.prettierignore忽略特定文件（如构建产物）
VSCode 编辑器设置
确保本地编辑器能正确触发自动格式化：
- 安装 VSCode 插件：ESLint 和 Prettier - Code formatter
- 在用户或工作区设置中启用保存时格式化： "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode"
- 若项目使用 ESLint 推荐配置，建议设置： "eslint.validate": ["javascript", "typescript", "vue"]
这样，在保存文件时，ESLint 会先标记问题，Prettier 再执行格式化，最终实现“边写边修”。
常见问题与注意事项
实际使用中可能会遇到规则冲突或格式化未生效的情况：
- 确认 Prettier 没有被其他插件覆盖，如 Beautify；禁用或卸载冲突插件
- 如果 ESLint 报错“Definition for rule 'xxx' was not found”，检查插件是否安装完整
- 团队项目建议统一 Node.js 和 npm 版本，防止因环境差异导致格式结果不同
- 某些框架（如 Vue）需额外安装对应插件，例如
eslint-plugin-vue
基本上就这些。只要配置一次，后续开发就能享受干净、一致的代码体验。不复杂但容易忽略细节。
