Vue项目中ESLint(代码质量检查)与Prettier(代码格式化)配合配置指南

pnpm create vue@latest

cd 项目目录
pnpm install
# 补装缺失的依赖（如 eslint-plugin-prettier，一般会缺失此依赖）
pnpm add -D eslint-plugin-prettier

"devDependencies": {
  "@eslint/js": "^9.37.0",        // ESLint 基础规则
  "@vue/eslint-config-prettier": "^10.2.0", // Vue 专用：解决 ESLint 与 Prettier 冲突
  "eslint": "^9.37.0",            // ESLint 核心工具
  "eslint-plugin-prettier": "^5.5.4", // 关键：将 Prettier 规则转为 ESLint 可识别错误
  "eslint-plugin-vue": "~10.5.0", // Vue 专用 ESLint 插件
  "prettier": "3.6.2",            // Prettier 核心工具
  "vite": "^7.1.11"               // 项目构建工具（创建时自带）
}

"scripts": {
  "lint": "eslint . --fix --cache", // 手动执行 ESLint 修复（格式+质量问题）
  "format": "prettier --write src/"  // 手动执行 Prettier 格式化（备用）
}

import { defineConfig, globalIgnores } from 'eslint/config'
import globals from 'globals'
import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting' // 禁用 ESLint 与 Prettier 冲突的规则
import prettier from 'eslint-plugin-prettier' // 引入 Prettier 插件（将 Prettier 规则转为 ESLint 错误）

export default defineConfig([
  // 1. 指定需要检查的文件类型
  {
    name: 'app/files-to-lint',
    files: ['**/*.{js,mjs,jsx,vue}'], // 检查 JS、Vue 文件
  },

  // 2. 忽略无需检查的目录（如构建产物、测试报告）
  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),

  // 3. 语言环境配置（浏览器全局变量）
  {
    languageOptions: {
      globals: {
        ...globals.browser, // 允许使用 window、document 等浏览器全局变量
      },
    },
  },

  // 4. 基础规则：ESLint 官方推荐规则（通用 JS 质量检查）
  js.configs.recommended,

  // 5. Vue 基础规则：Vue 官方推荐的核心规则（如模板语法校验）
  ...pluginVue.configs['flat/essential'],

  // 6. 关键：整合 Prettier 规则（将 Prettier 格式问题转为 ESLint 错误，支持 --fix 修复）
  {
    plugins: { prettier }, // 启用 Prettier 插件
    rules: {
      'prettier/prettier': 'error', // 把 Prettier 格式问题标记为 ESLint 错误
    },
  },

  // 7. 关键：解决 ESLint 与 Prettier 规则冲突（如缩进、引号规则冲突）
  skipFormatting,

  // 8. 自定义 Vue 规则（示例：允许单单词组件名，如 index.vue）
  {
    rules: {
      'vue/multi-word-component-names': 'off', // 关闭“组件名必须多单词”检查
      // 可添加其他 ESLint 规则，如禁止使用 var：'no-var': 'error'
    }
  }
])

{
  "$schema": "https://json.schemastore.org/prettierrc", // 引入 Prettier 规则 schema（语法提示）
  "semi": false, // 语句末尾不加分号
  "singleQuote": true, // 使用单引号代替双引号
  "printWidth": 100, // 每行代码最大宽度（超过自动换行）
  "tabWidth": 2, // 缩进为 2 个空格
  "trailingComma": "none", // 对象/数组末尾不添加逗号
  "arrowParens": "avoid" // 箭头函数参数只有一个时，省略括号（如 (a) => {} → a => {}）
}

{
  // ---------------------- 原有非冲突配置（保留）----------------------
  "Codegeex.Privacy": true,
  "explorer.confirmDelete": false,
  "workbench.iconTheme": "vscode-icons",
  "editor.fontSize": 17,
  "editor.tabSize": 2,
  "editor.formatOnPaste": true,
  "github.copilot.enable": { "*": false },
  "editor.minimap.enabled": false,
  // ... 其他原有配置（如 LeetCode、DrawIO 相关）保留不变

  // ---------------------- ESLint 与 Prettier 核心配置 ----------------------
  // 1. 全局默认格式化器设为 ESLint（确保所有文件用 ESLint 格式化）
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  // 2. 单独指定 Vue/JS 文件的格式化器（优先级高于全局，避免工具冲突）
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  // 3. 保存时：触发 ESLint 自动修复（格式问题+代码质量问题）
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 4. 保存时：触发 ESLint 格式化器的完整逻辑（补充修复细节，与上一条互补）
  "editor.formatOnSave": true,
  // 5. 禁用 Prettier 插件的自动功能（双重保险，避免与 ESLint 冲突）
  "prettier.enable": false
}