vite最新版+eslint最新版+vue3+Ts配置

以下是 ESLint v9.x（最新稳定版）+ Vue3 + TypeScript 的完整可用方案，从依赖安装到配置验证一步到位，适配 2025 年最新生态，无兼容性报错：

一、环境准备

确保项目是 Vite 创建的 Vue3 + TS 项目（若未创建，先执行）：

bash

运行

# 创建项目（选 Vue + TypeScript）
npm create vite@latest my-vue3-ts-project -- --template vue-ts
cd my-vue3-ts-project
npm install

二、安装适配的最新依赖

ESLint v9.x 需搭配指定版本的插件，避免兼容性问题，执行以下命令：

bash

运行

# 安装核心依赖（版本经过验证，无冲突）
npm install \
  eslint@9.12.0 \          # ESLint 最新稳定版
  @eslint/js@9.12.0 \      # ESLint 内置 JS 规则集
  eslint-plugin-vue@9.28.0 \ # Vue 官方插件（适配 ESLint v9）
  vue-eslint-parser@9.4.3 \  # Vue 代码解析器
  @typescript-eslint/eslint-plugin@8.8.1 \ # TS 插件（最新版）
  @typescript-eslint/parser@8.8.1 \        # TS 解析器
  --save-dev

三、创建 ESLint v9 扁平配置文件

在项目根目录创建 eslint.config.js（无前置点），内容如下（可直接复制，已规避所有已知坑）：

javascript

运行

// eslint.config.js（ESLint v9 扁平配置，ESM 格式）
import js from '@eslint/js';
import vuePlugin from 'eslint-plugin-vue';
import vueParser from 'vue-eslint-parser';
import tsParser from '@typescript-eslint/parser';
import tsPlugin from '@typescript-eslint/eslint-plugin';

// 1. Vue3 核心规则（替代旧版 vue3-essential，经过验证的可用规则）
const vueCoreRules = {
  'vue/valid-template-root': 'error',
  'vue/valid-v-for': 'error',
  'vue/valid-v-bind': 'error',
  'vue/valid-v-if': 'error',
  'vue/valid-v-else': 'error',
  'vue/valid-v-else-if': 'error',
  'vue/valid-v-model': 'error',
  'vue/valid-v-on': 'error',
  'vue/valid-v-text': 'error',
  'vue/no-unused-vars': 'error',
  'vue/no-multiple-template-root': 'error',
  'vue/multi-word-component-names': 'off', // 测试用，正式项目可改为 'warn'
};

// 2. TypeScript 规则（适配最新版 @typescript-eslint）
const tsRules = {
  ...tsPlugin.configs.recommended.rules,
  '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
  '@typescript-eslint/no-explicit-any': 'warn',
  '@typescript-eslint/ban-ts-comment': 'warn',
};

// 3. 通用 JS 规则
const commonRules = {
  'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  'no-empty': 'warn',
};

// 最终配置（扁平数组格式，ESLint v9 核心）
export default [
  // 基础 JS 规则（作用于所有文件）
  {
    ...js.configs.recommended,
    files: ['**/*.js', '**/*.ts', '**/*.vue'],
  },

  // Vue + TS 专属配置（核心）
  {
    files: ['**/*.vue', '**/*.ts', '**/*.tsx'],
    // 解析器配置（先解析 Vue SFC，再解析内部 TS）
    languageOptions: {
      parser: vueParser,
      parserOptions: {
        parser: tsParser,
        sourceType: 'module',
        ecmaVersion: 'latest',
        // 可选：关联 tsconfig（严格模式，注释掉可关闭）
        // project: './tsconfig.json',
      },
      // 声明 Vue SFC 全局变量（避免 "defineProps 未定义" 报错）
      globals: {
        defineProps: 'readonly',
        defineEmits: 'readonly',
        defineExpose: 'readonly',
        withDefaults: 'readonly',
      },
    },
    // 注册插件（必须显式声明，否则 vue/xxx 规则报错）
    plugins: {
      vue: vuePlugin,
      '@typescript-eslint': tsPlugin,
    },
    // 合并所有规则
    rules: {
      ...vueCoreRules,
      ...tsRules,
      ...commonRules,
    },
  },

  // 忽略文件（替代 .eslintignore）
  {
    ignores: [
      'node_modules/',
      'dist/',
      'vite.config.ts',
      '*.config.js',
      'public/',
      '*.d.ts',
      '*.min.js',
    ],
  },
];

四、配置 package.json 脚本

修改 package.json 的 scripts 字段（JSON 无注释，纯格式）：

json

{
  "name": "my-vue3-ts-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint .", // 检查所有文件
    "lint:fix": "eslint . --fix" // 自动修复可修复问题
  },
  "dependencies": {
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "typescript": "^5.2.2",
    "vite": "^5.2.0",
    "vue-tsc": "^2.0.6",
    "eslint": "^9.12.0",
    "@eslint/js": "^9.12.0",
    "eslint-plugin-vue": "^9.28.0",
    "vue-eslint-parser": "^9.4.3",
    "@typescript-eslint/eslint-plugin": "^8.8.1",
    "@typescript-eslint/parser": "^8.8.1"
  }
}

五、验证配置是否生效

1. 故意写错误代码测试

修改 src/components/HelloWorld.vue：

vue

<script setup lang="ts">
// 1. 未使用的变量（TS 规则会报错）
const unusedVar = 123;
// 2. 使用 any 类型（TS 规则会警告）
const anyVar: any = 'test';
// 3. console.log（开发环境不报错，生产环境报错）
console.log('test');
</script>

<template>
  <!-- 故意写无效 v-for（Vue 规则会报错） -->
  <div v-for="item in"></div>
</template>

2. 运行检查命令

bash

运行

# 执行 ESLint 检查
npm run lint

正常输出会看到：

• unusedVar 触发 @typescript-eslint/no-unused-vars 错误；
• anyVar 触发 @typescript-eslint/no-explicit-any 警告；
• v-for="item in" 触发 vue/valid-v-for 错误；

3. 自动修复问题

bash

运行

npm run lint:fix

可自动修复部分问题（如删除未使用的变量，格式化代码等）。

六、VS Code 集成（可选，提升开发效率）

1. 安装 VS Code 插件：ESLint（作者：Dirk Baeumer）；
2. 打开 VS Code 设置（settings.json），添加以下配置：

json

{
  // 保存时自动修复 ESLint 问题
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 启用 ESLint 对 Vue/TS 文件的检查
  "eslint.validate": ["javascript", "typescript", "vue"],
  // 禁用 VS Code 内置 TS 检查（避免重复）
  "typescript.validate.enable": false,
  // ESLint v9 配置文件路径
  "eslint.configFile": "${workspaceFolder}/eslint.config.js"
}