pnpm create vue@latest

cd 項(xiàng)目目錄
pnpm install
# 補(bǔ)裝缺失的依賴（如 eslint-plugin-prettier，一般會(huì)缺失此依賴）
pnpm add -D eslint-plugin-prettier

"devDependencies": {
  "@eslint/js": "^9.37.0",        // ESLint 基礎(chǔ)規(guī)則
  "@vue/eslint-config-prettier": "^10.2.0", // Vue 專用：解決 ESLint 與 Prettier 沖突
  "eslint": "^9.37.0",            // ESLint 核心工具
  "eslint-plugin-prettier": "^5.5.4", // 關(guān)鍵：將 Prettier 規(guī)則轉(zhuǎn)為 ESLint 可識(shí)別錯(cuò)誤
  "eslint-plugin-vue": "~10.5.0", // Vue 專用 ESLint 插件
  "prettier": "3.6.2",            // Prettier 核心工具
  "vite": "^7.1.11"               // 項(xiàng)目構(gòu)建工具（創(chuàng)建時(shí)自帶）
}

"scripts": {
  "lint": "eslint . --fix --cache", // 手動(dòng)執(zhí)行 ESLint 修復(fù)（格式+質(zhì)量問(wèn)題）
  "format": "prettier --write src/"  // 手動(dòng)執(zhí)行 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 沖突的規(guī)則
import prettier from 'eslint-plugin-prettier' // 引入 Prettier 插件（將 Prettier 規(guī)則轉(zhuǎn)為 ESLint 錯(cuò)誤）

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

  // 2. 忽略無(wú)需檢查的目錄（如構(gòu)建產(chǎn)物、測(cè)試報(bào)告）
  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),

  // 3. 語(yǔ)言環(huán)境配置（瀏覽器全局變量）
  {
    languageOptions: {
      globals: {
        ...globals.browser, // 允許使用 window、document 等瀏覽器全局變量
      },
    },
  },

  // 4. 基礎(chǔ)規(guī)則：ESLint 官方推薦規(guī)則（通用 JS 質(zhì)量檢查）
  js.configs.recommended,

  // 5. Vue 基礎(chǔ)規(guī)則：Vue 官方推薦的核心規(guī)則（如模板語(yǔ)法校驗(yàn)）
  ...pluginVue.configs['flat/essential'],

  // 6. 關(guān)鍵：整合 Prettier 規(guī)則（將 Prettier 格式問(wèn)題轉(zhuǎn)為 ESLint 錯(cuò)誤，支持 --fix 修復(fù)）
  {
    plugins: { prettier }, // 啟用 Prettier 插件
    rules: {
      'prettier/prettier': 'error', // 把 Prettier 格式問(wèn)題標(biāo)記為 ESLint 錯(cuò)誤
    },
  },

  // 7. 關(guān)鍵：解決 ESLint 與 Prettier 規(guī)則沖突（如縮進(jìn)、引號(hào)規(guī)則沖突）
  skipFormatting,

  // 8. 自定義 Vue 規(guī)則（示例：允許單單詞組件名，如 index.vue）
  {
    rules: {
      'vue/multi-word-component-names': 'off', // 關(guān)閉“組件名必須多單詞”檢查
      // 可添加其他 ESLint 規(guī)則，如禁止使用 var：'no-var': 'error'
    }
  }
])

{
  "$schema": "https://json.schemastore.org/prettierrc", // 引入 Prettier 規(guī)則 schema（語(yǔ)法提示）
  "semi": false, // 語(yǔ)句末尾不加分號(hào)
  "singleQuote": true, // 使用單引號(hào)代替雙引號(hào)
  "printWidth": 100, // 每行代碼最大寬度（超過(guò)自動(dòng)換行）
  "tabWidth": 2, // 縮進(jìn)為 2 個(gè)空格
  "trailingComma": "none", // 對(duì)象/數(shù)組末尾不添加逗號(hào)
  "arrowParens": "avoid" // 箭頭函數(shù)參數(shù)只有一個(gè)時(shí)，省略括號(hào)（如 (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 相關(guān)）保留不變

  // ---------------------- ESLint 與 Prettier 核心配置 ----------------------
  // 1. 全局默認(rèn)格式化器設(shè)為 ESLint（確保所有文件用 ESLint 格式化）
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  // 2. 單獨(dú)指定 Vue/JS 文件的格式化器（優(yōu)先級(jí)高于全局，避免工具沖突）
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  // 3. 保存時(shí)：觸發(fā) ESLint 自動(dòng)修復(fù)（格式問(wèn)題+代碼質(zhì)量問(wèn)題）
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 4. 保存時(shí)：觸發(fā) ESLint 格式化器的完整邏輯（補(bǔ)充修復(fù)細(xì)節(jié)，與上一條互補(bǔ)）
  "editor.formatOnSave": true,
  // 5. 禁用 Prettier 插件的自動(dòng)功能（雙重保險(xiǎn)，避免與 ESLint 沖突）
  "prettier.enable": false
}