Vue3 + TS 解决 ESLint 与 Prettier 格式化冲突

一、核心思路

让 ESLint 专注代码质量检查 （如语法错误、未定义变量），Prettier 专注代码格式化（如缩进、引号），通过插件禁用 ESLint 中与 Prettier 冲突的格式规则，将 Prettier 规则集成到 ESLint 中，实现「保存自动格式化 + 规则统一」。

二、前置准备：安装依赖

项目根目录执行（适配 pnpm）：

javascript 复制代码

# 核心依赖：ESLint + Vue3+TS 解析器
pnpm install eslint vue-eslint-parser @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

# 解决冲突核心插件
pnpm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

三、步骤 1：配置 ESLint（扁平配置 eslint.config.ts）

适配 ESLint 新的扁平配置格式，解决 TS 类型警告问题：

TypeScript 复制代码

import eslint from '@eslint/js';
import prettierConfig from 'eslint-config-prettier';
import prettierPlugin from 'eslint-plugin-prettier';
import vueEslintParser from 'vue-eslint-parser';
import vue from 'eslint-plugin-vue';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  {
    // 作用范围：仅校验 vue/ts/js 文件，忽略无需检查的目录
    files: ['**/*.{vue,ts,js}'],
    ignores: ['node_modules/', 'dist/', '**/*.config.ts'],
    // 解析器配置：适配 Vue + TS
    languageOptions: {
      parser: vueEslintParser,
      parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 'latest',
        sourceType: 'module',
      },
      globals: {
        browser: true,
        node: true,
      },
    },
    // 注册插件
    plugins: {
      vue,
      '@typescript-eslint': tseslint.plugin,
      prettier: prettierPlugin,
    },
    // 核心规则：禁用冲突规则 + 集成 Prettier
    rules: {
      ...prettierConfig.rules, // 禁用所有与 Prettier 冲突的 ESLint 格式规则
      // 手动配置 Prettier 核心规则（规避 TS 类型警告）
      'prettier/prettier': [
        'error',
        {}, 
        { usePrettierrc: true } // 读取项目根目录的 Prettier 配置
      ],
      // 自定义项目规则（可选，根据需求调整）
      'vue/multi-word-component-names': 'off', // 关闭 Vue 组件名多单词限制
      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], // 未使用变量仅警告
      'arrow-body-style': 'off',
      'prefer-arrow-callback': 'off',
    },
  },
  // 继承官方推荐规则
  vue.configs['flat/essential'],
  ...tseslint.configs.recommended,
  eslint.configs.recommended,
);

四、步骤 2：配置 Prettier

1. 新建 .prettierrc.js（项目根目录）

定义统一格式化规则：

javascript 复制代码

module.exports = {
  printWidth: 120, // 单行代码最大长度
  tabWidth: 2, // 缩进 2 个空格（与编辑器一致）
  useTabs: false, // 不用制表符
  singleQuote: true, // 单引号
  semi: true, // 语句末尾加分号
  trailingComma: 'es5', // 尾逗号（ES5 规范）
  bracketSpacing: true, // 对象大括号间加空格（{ a: 1 } 而非 {a:1}）
  arrowParens: 'avoid', // 单参数箭头函数省略括号
  vueIndentScriptAndStyle: false, // 不缩进 Vue 文件的 script/style 标签
  endOfLine: 'lf' // 换行符 LF（统一系统差异）
};

五、步骤 3：配置 VS Code（settings.json）

1. 找到 settings.json

推荐：项目根目录新建 .vscode 文件夹 → 新建 settings.json（仅对当前项目生效）；
全局：VS Code 按下 Ctrl+,（Windows）/ Command+,（Mac）→ 右上角「打开设置（JSON）」。

2. 完整配置

TypeScript 复制代码

{
  "typescript.tsdk": "./node_modules/typescript/lib",
  "npm.packageManager": "pnpm",
  "editor.tabSize": 2,
  "editor.formatOnSave": true, // 保存自动格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 全局默认格式化器为 Prettier
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.fixAll.eslint": "explicit", // 保存自动修复 ESLint（含 Prettier）问题
    "source.fixAll.stylelint": "explicit"
  },
  // 关键：Vue 文件指定 ESLint 为格式化器（避免 Prettier 冲突）
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  // 确保 ESLint 校验 Vue/TS/JS 文件
  "eslint.validate": ["javascript", "typescript", "vue", "json"],
  "files.eol": "\n", // 换行符与 Prettier 一致
  // 以下为用户原有配置，保留即可
  "search.exclude": {
    "**/node_modules": true,
    "**/*.log": true,
    "**/*.log*": true,
    "**/bower_components": true,
    "**/dist": true,
    "**/elehukouben": true,
    "**/.git": true,
    "**/.gitignore": true,
    "**/.svn": true,
    "**/.DS_Store": true,
    "**/.idea": true,
    "**/.vscode": false,
    "**/yarn.lock": true,
    "**/tmp": true,
    "out": true,
    "dist": true,
    "node_modules": true,
    "CHANGELOG.md": true,
    "examples": true,
    "res": true,
    "screenshots": true,
    "yarn-error.log": true,
    "**/.yarn": true
  },
  "files.exclude": {
    "**/.cache": true,
    "**/.editorconfig": true,
    "**/.eslintcache": true,
    "**/bower_components": true,
    "**/.idea": true,
    "**/tmp": true,
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true
  },
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/.vscode/**": true,
    "**/node_modules/**": true,
    "**/tmp/**": true,
    "**/bower_components/**": true,
    "**/dist/**": true,
    "**/yarn.lock": true
  },
  "i18n-ally.localesPaths": ["src/lang/package"],
  "scss.lint.unknownAtRules": "ignore",
  "i18n-ally.keystyle": "nested"
}