核心目标：

• 统一风格： 自动格式化代码（缩进、空格、引号、分号等）。
• 质量检查： 检测潜在错误、不良实践和不符合约定的代码。
• 跨编辑器/IDE 一致性： 基础文件格式设置在不同编辑器中保持一致。

工具分工：

1. EditorConfig: 负责定义最基础的文件格式规范，如缩进方式（空格/Tab）、缩进大小、字符编码、行尾序列等。它通过项目根目录下的 .editorconfig 文件生效，被大多数主流编辑器和 IDE 原生支持。
2. Prettier: 是一个固执己见的代码格式化工具。它专注于代码的外观（格式），根据预定义的规则（或少量自定义规则）自动重写代码，确保整个项目中的代码格式完全一致（缩进、空格、行宽、引号、对象大括号等）。
3. ESLint: 是一个高度可配置的 JavaScript（和 JSX/TS/Vue）代码质量检查工具。它不仅能检查代码格式（这部分常与 Prettier 配合），更重要的是检查代码中的潜在错误、不良实践、未使用的变量、可能的逻辑错误等，并能强制代码风格约定（如命名规范）。

如何协同工作？

理想情况下，三者分工协作：

1. EditorConfig 设定基础文件格式（如 indent_style = space, indent_size = 2）。
2. Prettier 读取 EditorConfig 的部分设置（如缩进大小），并应用其强大的格式化规则，将代码格式化成统一的风格。
3. ESLint 负责静态分析代码质量，报告错误和警告。我们可以配置 ESLint 的规则，使其专注于代码质量检查，而将格式化相关的规则交给 Prettier 处理，避免冲突。

在 Vue 项目中的具体实施步骤：

1. 安装依赖

在你的 Vue 项目根目录下运行以下命令（假设使用 npm 或 yarn）：

# 安装 ESLint 及其相关插件 (Vue 支持、Prettier 集成、Airbnb 基础规则等)
npm install --save-dev eslint eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier @vue/eslint-config-prettier

# 安装 Prettier
npm install --save-dev prettier

# 安装 EditorConfig 支持 (通常编辑器自带，无需额外 npm 包，但需要配置文件)
# 只需要创建 .editorconfig 文件

2. 配置 EditorConfig (.editorconfig)

在项目根目录创建 .editorconfig 文件：

# 根配置文件
root = true

[*]
charset = utf-8
end_of_line = lf # 统一使用 LF 换行符
insert_final_newline = true # 文件末尾保留一个空行
trim_trailing_whitespace = true # 自动删除行尾空格

[*.{js,jsx,vue}]
indent_style = space
indent_size = 2 # Vue 社区常用 2 空格缩进

[*.{json,css,scss,html}]
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false # Markdown 行尾空格有时有意义

3. 配置 Prettier (.prettierrc 或 package.json)

在项目根目录创建 .prettierrc 文件（或使用 package.json 中的 "prettier" 字段）：

{
  "semi": false, // 不加分号
  "singleQuote": true, // 使用单引号
  "tabWidth": 2, // 缩进宽度 2 空格 (与 EditorConfig 一致)
  "trailingComma": "es5", // 对象、数组等尾部逗号
  "printWidth": 100, // 换行宽度
  "arrowParens": "avoid", // 箭头函数单个参数省略括号
  "endOfLine": "auto" // 自动检测换行符 (由 EditorConfig 保证是 lf)
}

4. 配置 ESLint (.eslintrc.js / .eslintrc.cjs)

在项目根目录创建 .eslintrc.js 文件（根据你的项目模块类型，也可能是 .eslintrc.cjs）：

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    // Vue 3 官方推荐规则 (essential, strongly-recommended, vue3-recommended 等按需选择)
    'plugin:vue/vue3-recommended',
    // 集成 Prettier 规则 (解决 ESLint 格式规则与 Prettier 冲突)
    '@vue/eslint-config-prettier',
    // 可以添加其他基础规则集，如 'eslint:recommended'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    'vue',
    'prettier', // 启用 Prettier 插件
  ],
  rules: {
    // 核心规则：启用并配置 ESLint 的质量检查规则
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 生产环境禁用 console
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 生产环境禁用 debugger
    'vue/component-name-in-template-casing': ['error', 'PascalCase'], // 模板中组件名 PascalCase

    // Prettier 规则：将 Prettier 的格式化问题报告为 ESLint 错误
    'prettier/prettier': 'error',

    // 可以在此处覆盖或添加其他 ESLint 规则
    // 'vue/max-attributes-per-line': 'off' // 如果需要关闭 Vue 的特定规则
  },
}

关键配置解释：

• extends: 继承现有配置。plugin:vue/vue3-recommended 提供 Vue 3 的最佳实践规则。@vue/eslint-config-prettier 内部包含了 eslint-config-prettier，它会关闭所有与 Prettier 冲突的 ESLint 格式化规则。
• plugins: 启用 'prettier' 插件 (eslint-plugin-prettier)。
• rules: 在 'prettier/prettier' 规则中设置 'error'，这样 Prettier 检测到的格式问题就会以 ESLint 错误的形式报告。同时，你可以在此配置其他代码质量规则。

5. 集成到开发流程

• 编辑器/IDE 插件：
  • 安装 ESLint 插件（如 VS Code 的 ESLint）。
  • 安装 Prettier 插件（如 VS Code 的 Prettier - Code formatter）。
  • 确保你的编辑器支持 EditorConfig（大多数现代编辑器默认支持）。
  • 配置编辑器在保存文件时自动运行 Prettier 格式化并实时显示 ESLint 错误/警告。
• Git 提交前检查 (可选但推荐)： 使用 lint-staged 和 husky 在提交代码前自动对暂存区的文件运行 ESLint 和 Prettier。
  1. 安装：

     npm install --save-dev lint-staged husky
     

  2. 在 package.json 中配置：

     "lint-staged": {
       "*.{js,jsx,vue}": [
         "eslint --fix", // 尝试自动修复 ESLint 问题
         "prettier --write" // 用 Prettier 格式化
       ]
     }
     

  3. 初始化 husky 并添加钩子：

     npx husky install
     npx husky add .husky/pre-commit "npx lint-staged"
     

6. 运行检查

• 手动检查整个项目：

  npx eslint . --ext .js,.vue # 检查所有 js 和 vue 文件
  npx prettier --check . # 检查所有文件是否符合 Prettier 格式 (不修改)
  

• 自动修复 ESLint 可修复问题并格式化：

  npx eslint . --ext .js,.vue --fix # ESLint 尝试修复
  npx prettier --write . # Prettier 格式化所有文件
  

总结：

通过结合 ESLint（代码质量检查）、Prettier（自动格式化）和 EditorConfig（基础文件格式），你可以为 Vue 项目建立一个强大的、自动化的代码风格和质量管控体系。这带来了显著的好处：

• 高度一致的代码风格： 消除团队成员间的风格差异。
• 减少代码审查负担： 自动化处理格式问题，让审查聚焦于逻辑和设计。
• 提高代码质量： 捕获潜在错误和不良实践。
• 提升开发效率： 自动格式化节省时间。
• 无缝协作： 无论使用何种编辑器，基础格式和最终输出风格保持一致。

请根据项目的具体需求调整 ESLint 规则 (.eslintrc.js 中的 rules) 和 Prettier 配置 (.prettierrc)，找到最适合团队的规范。