ESLint 9.0版本踩坑记录

在使用新版本的 ESLint 时，遇见问题一定要注意查阅官方文档。

node版本

首先检查 node 版本是否满足以下要求。

建议新项目使用 v21.1.0 版本以上的 node

使用以下命令安装和配置 ESLint：

sh 复制代码

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 配置文件。

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 是否能够正常使用：

js 复制代码

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 有没有生效：

sh 复制代码

npx eslint src/main.ts

控制台提示缺少分号的错误，说明 rules 配置生效

Extends

在 eslintrc 文件中，可以使用 extends 属性来配置预定义的 eslint 规则，用公开特定的规则省时省力的管理你的项目。

sh 复制代码

`"eslint:recommended"`：ESLint 推荐的规则
`"eslint:all"`：ESLint 附带的所有规则

recommended 和 all 规则配置位于 @eslint/js 包中，必须要先导入此包才能使用这些配置：

sh 复制代码

npm install @eslint/js --save-dev

js 复制代码

//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 是否能检测出来。

可以看见，`debugger` 语句已经飘红了

2、控制台再次执行 npx eslint src/main.ts

证明规则生效，项目完美支持 extends 配置

Vite 添加 ESLint 插件

在 vite 中引入 ESlint 插件，可以vite脚手架在执行的时候自动监测 Eslint 的错误，不用在控制台特地执行 npx eslint xxx 命令了。

sh 复制代码

npm install vite-plugin-eslint --save-dev

安装完毕后需要修改 vite 的配置文件：

js 复制代码

// 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 声明文件。

js 复制代码

  "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 代码:

sh 复制代码

npm install --save-dev eslint eslint-plugin-vue

配置 eslint.config.js

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 来解决

安装：

js 复制代码

npm add --dev @vue/eslint-config-typescript @rushstack/eslint-patch

使用：

js 复制代码

// 在 eslint.config.js 中引入即可
require("@rushstack/eslint-patch/modern-module-resolution")