ESLint与Prettier集成配置终极指南：2024前端代码规范最佳实践
在Vue项目中，你是否经历过这样的场景：ESLint和Prettier都已就位，但保存代码时，ESLint的错误未能自动修正，或是Prettier格式化后的代码反而触发了ESLint规则？这通常是两者未能正确集成，甚至规则相互冲突的直接表现。
本质上，ESLint负责代码质量与逻辑错误检测，例如识别未使用的变量；而Prettier则专精于代码风格的统一，如缩进与换行。当两者独立运作时，冲突难以避免。要构建“ESLint质检，Prettier排版”的高效工作流，以下四种经过实战检验的配置策略值得你尝试。
一、安装必要依赖并启用插件协同
当前最受推崇的方案是让ESLint作为执行入口来调用Prettier。这依赖于两个核心npm包：eslint-plugin-prettier将Prettier规则转化为ESLint规则；eslint-config-prettier则用于关闭ESLint中所有与Prettier功能重叠的格式化规则，彻底避免规则裁决冲突。
首先，在项目根目录执行安装：pnpm add -D eslint-plugin-prettier eslint-config-prettier prettier。
随后，修改你的ESLint配置文件（通常是eslint.config.js或.eslintrc.cjs）。关键操作是在extends配置数组的末尾，加入"plugin:prettier/recommended"。这个顺序至关重要，它能确保冲突的格式规则被有效覆盖。
最后，验证配置，确保plugins中已包含"prettier"，并在rules中明确启用："prettier/prettier": "error"。至此，Prettier的格式化问题将以ESLint错误的形式报告，并纳入自动修复流程。
二、使用独立Prettier配置文件 + ESLint禁用格式规则
若你倾向于更清晰的职责分离，本方案是理想选择：让Prettier全权负责代码风格，ESLint则专注于逻辑与质量检查，实现“美观”与“正确”的分工。
第一步，在项目根目录创建独立的Prettier配置文件，例如.prettierrc.json，并定义你的代码风格规则。示例：{"semi": false, "singleQuote": true, "tabWidth": 2, "printWidth": 100}。
第二步，配置ESLint，使其忽略所有格式化相关规则。最便捷的方式是在ESLint配置的extends数组中引入"eslint-config-prettier"。这个包已预设了关闭所有可能冲突的格式规则。
请注意一个关键细节："eslint-config-prettier"必须置于extends数组的末尾，以确保它能成功覆盖其他配置（如eslint:recommended或@vue/eslint-config-prettier）中内嵌的格式规则。
三、VS Code工作区级settings.json强制接管
当项目级配置因故未生效，或团队成员编辑器设置不统一时，直接在VS Code的工作区设置中进行强制绑定，能获得即时、一致的效果。
首先，在项目根目录创建.vscode/settings.json文件。此配置仅作用于当前项目。
随后，写入以下配置：
1. 为Vue文件指定Prettier为默认格式化工具：{"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}}
2. 启用保存时自动格式化：{"editor.formatOnSa ve": true}
3. 启用保存时自动修复ESLint问题：{"editor.codeActionsOnSa ve": {"source.fixAll.eslint": true}}
4. 为避免Prettier在无配置文件时意外执行，可增加：{"prettier.requireConfig": true}
完成设置后，每次保存文件，VS Code将先触发ESLint修复代码质量问题，再调用Prettier进行风格格式化，流程无缝衔接。
四、利用husky + lint-staged实现提交前校验
前述方法依赖于本地开发环境。为确保提交至代码仓库的每一行代码均符合规范，可在Git提交环节增设一道自动化关卡。利用Git Hooks，结合husky和lint-staged，是达成此目标的黄金组合。
首先，安装开发依赖：pnpm add -D husky lint-staged。
接着，初始化husky：npx husky install。为保障团队新成员克隆项目后能自动安装，建议在package.json的scripts中添加："prepare": "husky install"。
然后，创建pre-commit钩子，它将在执行git commit命令前触发：npx husky add .husky/pre-commit "npx lint-staged"。
最后，配置lint-staged，定义对暂存区（即待提交）文件执行的操作。在package.json中添加：
"lint-staged": {"*.{js,vue,ts}": ["eslint --fix", "prettier --write"]}
配置生效后，当你尝试提交代码，lint-staged会自动对本次提交涉及的Vue、JS等文件，依次执行ESLint修复和Prettier格式化。全部检查通过后，提交方可完成，从而在团队协作中为代码质量建立一道坚固的防线。