正确配置ESLint与Prettier可实现代码质量与风格统一。ESLint检查逻辑错误，Prettier统一代码格式，通过安装eslint-config-prettier和eslint-plugin-prettier避免规则冲突，结合VSCode的保存自动格式化及lint-staged提交前校验，确保团队协作高效、代码规范一致。
在现代前端开发中，代码质量与风格统一至关重要。VSCode 作为主流编辑器，结合 ESLint 与 Prettier 能实现高效的代码检查与格式化。正确集成二者，不仅能提升协作效率，还能减少低级错误。
ESLint 与 Prettier 的角色分工
ESLint 主要负责代码质量检查，比如变量未使用、语法错误、潜在 bug 等。它通过规则集帮助团队遵循一致的编码规范。
Prettier 是代码格式化工具，专注于代码样式：缩进、引号、括号、换行等。它不关心逻辑问题，只确保代码外观统一。
两者功能互补，但默认规则可能冲突。例如 ESLint 要求单引号，而 Prettier 默认双引号。因此需要合理配置，避免互相干扰。
项目级配置：安装与依赖管理
在项目根目录初始化 npm 并安装必要依赖：
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettiereslint-config-prettier 关闭所有与 Prettier 冲突的 ESLint 规则。
eslint-plugin-prettier 将 Prettier 作为 ESLint 规则运行，格式错误会在 ESLint 中提示。
module.exports = { extends: [ 'eslint:recommended', 'plugin:prettier/recommended' // 启用 Prettier 推荐配置 ], rules: { // 可在此覆盖个别规则 } };添加 .prettierrc 定义格式化偏好：
{ "semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "es5" }VSCode 设置：自动保存时格式化
确保 VSCode 使用项目本地的 ESLint 和 Prettier，而非全局版本。安装以下扩展：
- ESLint（由 Microsoft 提供）
- Prettier - Code formatter
在 VSCode 的 settings.json 中添加：
{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.workingDirectories": ["./"] }这样在保存文件时，ESLint 会自动修复可修复的问题，Prettier 执行格式化。
若项目有多个工作区，eslint.workingDirectories 帮助 VSCode 正确定位 ESLint 配置。
常见问题与最佳实践
有时格式化未生效，可能是默认格式化器未指定。右键编辑器 → “格式化文档” → 选择 Prettier 并设为默认。
避免全局安装 Prettier 或 ESLint，使用项目本地依赖保证团队一致性。
提交前可用 lint-staged 结合 Husky 自动检查修改文件：
// package.json "lint-staged": { "*.{js,ts,jsx,tsx}": ["eslint --fix", "prettier --write"] }这样能防止不符合规范的代码进入仓库。
基本上就这些。配置一次，长期受益。关键是让工具协同工作，而不是对抗。
