一、核心依赖包（分基础和 Vue/TS 适配）
在 Vue3 + TS 项目中，ESLint 核心依赖分为基础包和适配 Vue/TS 的插件包，以下是完整的依赖列表及作用：
| 包名 | 作用 |
|---|---|
eslint | ESLint 核心库，提供代码检查的基础能力 |
@typescript-eslint/eslint-plugin | 为 TypeScript 提供 ESLint 规则的插件 |
@typescript-eslint/parser | ESLint 的 TypeScript 解析器，让 ESLint 能识别 TS 语法 |
eslint-plugin-vue | 专为 Vue 设计的 ESLint 插件，提供 Vue 代码的检查规则（支持 Vue3） |
vue-eslint-parser | 解析 Vue SFC（单文件组件）的解析器，让 ESLint 能识别 Vue 模板和脚本 |
@vue/eslint-config-typescript | Vue 官方提供的 TS 适配配置，简化 Vue+TS 的 ESLint 配置 |
eslint-config-prettier（可选） | 禁用 ESLint 中与 Prettier 冲突的规则（如果同时用 Prettier） |
二、安装命令
1. 基础安装（仅 ESLint + Vue3 + TS）
bash
运行
# npm 安装
npm install eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-vue vue-eslint-parser @vue/eslint-config-typescript --save-dev
# yarn 安装
yarn add eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-vue vue-eslint-parser @vue/eslint-config-typescript -D
# pnpm 安装（推荐，速度更快）
pnpm add eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-vue vue-eslint-parser @vue/eslint-config-typescript -D
三、核心配置（.eslintrc.js）
安装完成后，需要在项目根目录创建 .eslintrc.js 文件，配置适配 Vue3 + TS 的规则：
javascript
运行
module.exports = {
// 环境：指定代码运行的环境，启用对应环境的全局变量
env: {
browser: true, // 浏览器环境
es2021: true, // ES2021 语法
node: true // Node.js 环境
},
// 扩展配置：继承已有的规则集，减少重复配置
extends: [
'eslint:recommended', // ESLint 官方推荐规则
'plugin:vue/vue3-essential', // Vue3 核心规则（必选）
'plugin:@typescript-eslint/recommended', // TS 推荐规则
'@vue/eslint-config-typescript', // Vue+TS 适配配置
'eslint-config-prettier' // 禁用与 Prettier 冲突的规则（如果装了 Prettier）
],
// 解析器：指定解析代码的解析器
parser: 'vue-eslint-parser', // 解析 Vue SFC
// 解析器选项：传给解析器的配置
parserOptions: {
ecmaVersion: 'latest', // 支持最新 ES 版本
parser: '@typescript-eslint/parser', // 解析 TS 代码的子解析器
sourceType: 'module' // 模块化代码（ES Module）
},
// 插件：启用安装的 ESLint 插件
plugins: [
'vue', // Vue 插件
'@typescript-eslint' // TS 插件
],
// 自定义规则：覆盖或新增规则，优先级最高
rules: {
// 示例：关闭 TS 的 "any 类型禁止" 规则（根据项目需求调整）
'@typescript-eslint/no-explicit-any': 'off',
// 关闭 Vue 的 "组件名多单词" 规则（小型项目可临时关闭）
'vue/multi-word-component-names': 'off'
}
}
四、补充配置（可选）
- 忽略文件（.eslintignore） ：指定 ESLint 不检查的文件 / 目录
plaintext
node_modules/
dist/
*.d.ts
五、自动化修复
1.安装插件
2.添加自动配置项
添加
"editor.codeActionsOnSave":{
"source.fixAll.eslint": "explicit"
},
