在使用新版本的 ESLint 时，遇见问题一定要注意查阅官方文档。
node版本
首先检查 node 版本是否满足以下要求。
建议新项目使用 v21.1.0 版本以上的 node
使用以下命令安装和配置 ESLint：
npm init @eslint/config@latest
# or
yarn create @eslint/config@latest
# or
pnpm create @eslint/config@latest
我在创建项目时，使用了 v16.13.0 、v18.12.0 和 v22.3.0 版本的node，前两个都会在后续的配置中或多或少出一些问题，比如说配置 rules 、Extends 时都会出现依赖错误的问题。
注意，命令执行完毕后，控制台会提示：
此时建议大家在 package.json 文件中，添加上 "overrides": { "eslint": "^9.6.0" } ，
overrides用于覆盖package.json文件中的依赖项版本
eslint.config.js
上述步骤执行完毕后会生成 eslint.config.js 配置文件。
import globals from "globals";
import tseslint from "typescript-eslint";
export default [
{files: ["**/*.{js,mjs,cjs,ts}"]},
{languageOptions: { globals: globals.browser }},
...tseslint.configs.recommended,
js.configs.recommended,
];
简单测试一下 ESLint 是否能够正常使用：
import globals from "globals";
import tseslint from "typescript-eslint";
export default [
{
files: ["**/*.{js,mjs,cjs,ts}"],
rules: {
semi: 2, //`semi` 规则用于检查是否缺少分号
},
},
{languageOptions: { globals: globals.browser }},
...tseslint.configs.recommended,
js.configs.recommended,
];
可以使用项目中 main.ts 文件来测试 rules 有没有生效：
npx eslint src/main.ts
控制台提示缺少分号的错误，说明 rules 配置生效
Extends
在 eslintrc 文件中， 可以使用 extends 属性来配置预定义的 eslint 规则，用公开特定的规则省时省力的管理你的项目。
`"eslint:recommended"`：ESLint 推荐的规则
`"eslint:all"`：ESLint 附带的所有规则
recommended 和 all 规则配置位于 @eslint/js 包中，必须要先导入此包才能使用这些配置：
npm install @eslint/js --save-dev
//eslint.config.js
import globals from "globals";
import tseslint from "typescript-eslint";
import js from "@eslint/js"; // 导入@eslint/js
export default [
{
files: ["**/*.{js,mjs,cjs,ts}"],
rules: {
semi: 0, // 先关闭 semi,方便后面测试 recommended 规则有没有生效
},
},
{languageOptions: { globals: globals.browser }},
...tseslint.configs.recommended,
js.configs.recommended, // 使用 recommended 规则
];
测试 extends 是否生效
1、在 main.ts 中加一句 debugger , 看 recommended 是否能检测出来。
2、控制台再次执行 npx eslint src/main.ts
证明规则生效，项目完美支持 extends 配置
Vite 添加 ESLint 插件
在 vite 中引入 ESlint 插件，可以vite脚手架在执行的时候自动监测 Eslint 的错误，不用在控制台特地执行 npx eslint xxx 命令了。
npm install vite-plugin-eslint --save-dev
安装完毕后需要修改 vite 的配置文件：
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslint from 'vite-plugin-eslint'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),eslint()],
})
解决vite-plugin-eslint引入type类型报错的问题
报错原因可能是由于typescript变更导致依赖包package.json不匹配
可以参考这篇文章有效解决
Vite 项目中配置 vite-plugin-eslint 插件报错
思路是在 node_modules 中找到 vite-plugin-eslint 插件的 package.json 文件，将其中的 exports 字段修改为如下内容，让新版的 TypeScript 在使用 import 导入时能够找到 vite-plugin-eslint 插件中的 TS 声明文件。
"exports": {
".": {
"import": {
"types": "./dist/index.d.ts",
"default": "./dist/index.mjs"
},
"require": "./dist/index.js"
}
},
测试 vite-plugin-eslint 是否生效
1、调整 Eslint 配置文件
2、执行 npn run dev 启动项目
浏览器显示了和控制台一样的报错，此时 vite 就和Eslint 关联起来了
添加 Vue 官方的 ESLint 插件
官网地址：eslint.vuejs.org/user-guide/
这个插件允许我们使用 ESLint 检查文件和 <template> 以及文件中的 Vue 代码:
npm install --save-dev eslint eslint-plugin-vue
配置 eslint.config.js
import globals from "globals";
//import js from "@eslint/js"; 使用vue3官方支持的规则组后，就可以取消eslint的规则组了
import pluginVue from 'eslint-plugin-vue' // 新增
export default [
//js.configs.recommended,
...pluginVue.configs['flat/recommended'], // 新增
{languageOptions: { globals: {...globals.browser, ...globals.node} }},
{
files: ["**/*.{js,mjs,cjs,ts}"],
rules: {
semi:0,
},
},
];
所有的规则列表：eslint.vuejs.org/rules/
一些规则组：(规则越来越多)
- .configs["flat/essential"]
- .configs["flat/strongly-recommended"]
- .configs["flat/recommended"]
添加基于 Typescript 的特殊规则组
npm地址：www.npmjs.com/package/@vu…
由于 Eslin t目前还没法验证 Typescript 的语法，一些符号会报错，比如泛型的括号：
所以我们使用
@vue/eslint-config-typescript 来解决
安装：
npm add --dev @vue/eslint-config-typescript @rushstack/eslint-patch
使用：
// 在 eslint.config.js 中引入即可
require("@rushstack/eslint-patch/modern-module-resolution")
检测 @vue/eslint-config-typescript 是否生效
结束
到这里 Vue3 项目中的 Eslint 配置已完毕，在使用过程中发现问题时，一般在Eslint以及各种插件的官网都能查找到解决方案。
