明确工具分工：ESLint负责代码质量检查，Prettier负责格式化，通过eslint-config-prettier避免冲突，VSCode中设置默认格式化程序为Prettier并启用保存时自动修复，配合.eslintrc、.prettierrc等配置文件实现统一风格，支持TypeScript、Vue、React等框架的扩展插件，确保项目代码一致性与高效协作。
在现代前端与全栈开发中，代码质量与风格统一至关重要。VSCode 作为主流编辑器，通过整合代码检查与格式化工具，能大幅提升开发效率与协作体验。关键在于合理配置 ESLint、Prettier 等工具的职责边界与执行顺序，避免冲突并实现保存即修复。
明确工具分工：ESLint 负责检查，Prettier 负责格式化
整合的第一步是厘清各工具的角色：
- ESLint：专注于代码质量（如未定义变量、潜在错误）和部分代码风格（如引号、缩进），可通过规则配置进行控制
- Prettier：专一于代码格式化，提供开箱即用的美观排版，忽略代码逻辑，确保团队风格一致
常见误区是让两者同时处理格式问题导致冲突。解决方案是使用 eslint-config-prettier 禁用所有与 Prettier 冲突的 ESLint 规则，让 ESLint 只关注质量问题。
VSCode 插件配置：设置默认格式化工具
在 VSCode 中安装 ESLint 和 Prettier - Code formatter 插件后，需在项目级或用户级 settings.json 中指定默认格式化程序：
"editor.defaultFormatter": "esbenp.prettier-vscode"同时启用保存时自动格式化与文件类型关联：
- "editor.formatOnSave": true
- "editor.formatOnPaste": false
- "editor.formatOnType": true
- "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
这样在保存文件时，ESLint 会先修复可自动处理的问题，再由 Prettier 执行最终格式化。
项目级配置文件协同工作
确保项目根目录下有完整的配置文件链：
- .eslintrc.js 或 .eslintrc.json：启用 prettier 插件并继承 eslint-config-prettier
- .prettierrc：定义 Prettier 格式化选项，如单引号、尾逗号等
- .prettierignore：排除不需要格式化的文件，如构建产物
例如，在 .eslintrc 中添加 extends: ["eslint:recommended", "plugin:prettier/recommended"] 可一键集成推荐配置。
处理多语言与框架的扩展支持
对于 TypeScript、Vue 或 React 项目，需额外安装对应插件：
- TypeScript：eslint-plugin-typescript、@typescript-eslint/parser
- Vue：eslint-plugin-vue，配合 Vetur 或 Vue Language Features 使用
- React：eslint-plugin-react，启用 jsx 支持
确保 parser 配置正确指向 @typescript-eslint/parser 等解析器，以便 ESLint 能理解非标准语法。
基本上就这些。只要工具分工清晰、VSCode 设置得当、配置文件完整，就能实现无缝的代码检查与格式化流程，减少人工干预，提升代码一致性。
