在多人协作的 Vue 项目中，代码风格不统一往往会导致可读性差、维护成本高、甚至隐藏语法错误。ESLint 负责代码质量校验（如语法错误、未定义变量），Prettier 专注于代码格式化（如缩进、换行、引号），两者结合能从 “质量 + 风格” 双重维度统一代码规范。本文将手把手教你在 Vue 项目中配置 ESLint 和 Prettier，解决两者冲突，实现团队代码风格的标准化。
一、核心概念：ESLint vs Prettier
很多开发者会混淆两者的作用，先明确边界：
| 工具 | 核心作用 | 典型规则示例 |
|---|---|---|
| ESLint | 代码质量校验 + 部分风格规则 | 禁止未定义变量、禁止 console |
| Prettier | 纯代码格式化（风格统一） | 单引号 / 双引号、缩进 2/4 空格 |
关键问题：ESLint 的部分风格规则（如缩进、引号）会和 Prettier 冲突，需通过插件屏蔽 ESLint 的风格规则，让 Prettier 专注格式化，ESLint 专注质量校验。
二、环境准备
本文以 Vue 3 + Vite 项目为例（Vue 2 + Webpack 同理），确保本地已安装：
- Node.js（14+）
- npm/yarn/pnpm（推荐 pnpm）
- 编辑器（VS Code，需安装 ESLint、Prettier 插件）
三、安装依赖
首先安装核心依赖，分为 “ESLint 核心”“Vue 适配”“Prettier 及冲突解决” 三类：
1. 安装基础依赖
# 使用pnpm（推荐） pnpm add -D eslint eslint-plugin-vue @vue/eslint-config-prettier prettier # 若用npm npm install -D eslint eslint-plugin-vue @vue/eslint-config-prettier prettier # 若用yarn yarn add -D eslint eslint-plugin-vue @vue/eslint-config-prettier prettier依赖说明：
eslint：ESLint 核心库eslint-plugin-vue：Vue 专用 ESLint 规则插件（支持 Vue 3/2）prettier：Prettier 核心库@vue/eslint-config-prettier：Vue 官方的 ESLint+Prettier 配置，自动禁用 ESLint 中与 Prettier 冲突的规则
2. 可选：TypeScript 项目额外依赖
若项目使用 TypeScript，需补充：
pnpm add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser四、核心配置文件
在项目根目录创建以下配置文件，实现规则统一。
1. ESLint 配置：.eslintrc.js
创建.eslintrc.js（优先用 js 格式，支持注释和动态配置）：
module.exports = { // 环境：指定代码运行的环境，预设全局变量 env: { browser: true, // 浏览器环境 es2021: true, // ES2021语法 node: true // Node环境（如配置文件） }, // 解析器：解析Vue/ES6+语法 parser: 'vue-eslint-parser', // 解析器选项 parserOptions: { ecmaVersion: 'latest', // 支持最新ES语法 sourceType: 'module', // ES模块 parser: '@typescript-eslint/parser', // TS项目需添加 ecmaFeatures: { jsx: true // 若用Vue+JSX需开启 } }, // 扩展配置：继承已有规则集 extends: [ 'plugin:vue/vue3-essential', // Vue 3基础规则（Vue 2用vue2-essential） 'eslint:recommended', // ESLint推荐规则 '@vue/eslint-config-prettier' // 禁用Prettier冲突的ESLint规则 ], // 自定义规则：优先级高于继承的规则 rules: { // 关闭console校验（开发环境可保留） 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 关闭debugger校验 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // Vue规则：关闭组件名多单词校验（适合小型项目） 'vue/multi-word-component-names': 'off', // 关闭未使用变量校验（开发环境可保留） 'no-unused-vars': 'warn', // 强制单引号 'quotes': ['error', 'single'], // 强制语句末尾加分号 'semi': ['error', 'always'] }, // 忽略校验的文件 ignorePatterns: ['node_modules/', 'dist/', '*.config.js'] };2. ESLint 忽略文件：.eslintignore
创建.eslintignore，指定无需校验的文件 / 目录：
# 依赖目录 node_modules/ # 打包目录 dist/ # 配置文件 vite.config.js vue.config.js # 静态资源 public/ # 临时文件 *.tmp3. Prettier 配置：.prettierrc.js
创建.prettierrc.js，定义格式化规则：
module.exports = { printWidth: 100, // 每行代码最大长度 tabWidth: 2, // 缩进空格数 useTabs: false, // 禁用tab缩进，用空格 singleQuote: true, // 强制单引号 semi: true, // 语句末尾加分号 trailingComma: 'es5', // 尾逗号（ES5规范） bracketSpacing: true, // 对象字面量括号间加空格（{ a: 1 }） arrowParens: 'avoid', // 箭头函数单个参数省略括号 vueIndentScriptAndStyle: false, // Vue文件script/style不缩进 endOfLine: 'lf' // 换行符（LF，兼容Linux/Mac） };4. Prettier 忽略文件：.prettierignore
创建.prettierignore，指定无需格式化的文件：
# 继承ESLint忽略规则（可选） .eslintignore # 额外忽略 node_modules/ dist/ public/ *.md五、VS Code 自动格式化配置
为了开发时实时格式化，需配置 VS Code 的settings.json（项目级：.vscode/settings.json）：
{ // 保存时自动格式化 "editor.formatOnSave": true, // 保存时自动修复ESLint错误 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // 设为所有文件的默认格式化工具 "editor.defaultFormatter": "esbenp.prettier-vscode", // Vue文件指定Prettier格式化 "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // JS/TS文件指定Prettier格式化 "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, // 禁用VS Code内置格式化（避免冲突） "prettier.disableLanguages": [], // ESLint校验的文件类型 "eslint.validate": ["vue", "javascript", "typescript"] }六、添加 npm 脚本
在package.json中添加脚本，方便手动校验 / 修复代码：
{ "scripts": { // 校验所有文件 "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx", // 自动修复可修复的ESLint错误 "lint:fix": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix", // 格式化所有文件 "prettier": "prettier --write \"**/*.{vue,js,ts,jsx,tsx,css,scss}\"" } }使用方式：
# 校验代码 pnpm lint # 自动修复ESLint错误 pnpm lint:fix # 格式化代码 pnpm prettier七、常见问题解决
1. ESLint 与 Prettier 规则冲突
现象：格式化后 ESLint 报错，或 ESLint 修复后格式混乱。解决：确保继承@vue/eslint-config-prettier，该配置会自动禁用 ESLint 中与 Prettier 冲突的规则（如缩进、引号、换行）。
2. Vue 模板校验不生效
解决：
- 确认安装
eslint-plugin-vue； - 解析器设置为
vue-eslint-parser； eslint.validate包含vue。
3. TypeScript 文件校验报错
解决：
- 安装
@typescript-eslint/parser和@typescript-eslint/eslint-plugin； parserOptions.parser指定为@typescript-eslint/parser；- 扩展
plugin:@typescript-eslint/recommended。
4. 保存时不自动格式化
解决：
- 确认 VS Code 安装了 ESLint 和 Prettier 插件；
- 检查
.vscode/settings.json配置是否正确； - 关闭其他格式化插件（如 Vetur，Vue 3 推荐用 Volar）。
八、团队协作最佳实践
- 提交前强制校验：使用
husky+lint-staged，在 git commit 前自动校验 / 格式化暂存区代码，避免不合规代码提交。 - 统一编辑器配置：将
.vscode/settings.json纳入版本库，确保团队成员编辑器配置一致。 - 规则渐进式优化：初期放宽规则（如关闭组件名多单词校验），团队适应后逐步收紧，避免过度约束降低开发效率。
- 文档说明：在项目 README 中说明代码规范和配置方式，新成员快速上手。
九、总结
通过 ESLint + Prettier 的组合配置，既能保证 Vue 项目的代码质量（避免语法错误、未定义变量等问题），又能统一团队代码风格（缩进、引号、换行等）。核心是明确两者的分工：ESLint 管 “质量”，Prettier 管 “格式”，通过@vue/eslint-config-prettier解决冲突，再结合 VS Code 自动格式化和提交前校验，实现代码规范的自动化落地。
这套配置适配 Vue 2/3、TypeScript/JavaScript 项目，可根据团队需求调整规则，最终达到 “写得随意，格式化后统一” 的效果，大幅降低多人协作的沟通成本，提升代码可维护性。
