react项目中引入最新版本eslint

目的

我们讲eslint引入项目，无非就是让我们在写代码的过程当中，可以给我们一些友好的提示，来检查我们代码的书写合理性，以及一些代码书写习惯的统一；
最新版本9.x以上的eslint适配我们的项目

安装

# 通过eslint官方提供的脚手架安装
npm init @eslint/config
# 根据项目实际情况，选择出现的问候语

使用

上面命令跑完之后，你的项目根目录会多一个eslint.config.mjs文件这是我们本地的配置
生成的默认代码如下，

这个时候我们的项目文件已经支持了eslint检查，大家可以去看看（如果是ts文件的话，你会看到使用any类型的地方给出了eslint报错提示）

import globals from "globals"
import pluginJs from "@eslint/js"
import tseslint from "typescript-eslint"
import pluginReact from "eslint-plugin-react"export default [{ files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },{ languageOptions: { globals: globals.browser } },pluginJs.configs.recommended,...tseslint.configs.recommended,pluginReact.configs.flat.recommended,
];

eslint默认的配置，说几个对于我们来说比较隐形的配置

[// 默认给我们忽略了这些文件{ignores: ["**/node_modules/",".git/"]},{files: ["**/*.js", "**/*.mjs"]},// 默认配置了.cjs按照commonjs格式进行检测{files: ["**/*.cjs"],languageOptions: {sourceType: "commonjs",ecmaVersion: "latest"}}
]

比较明显的改动

默认不再支持，匹配模式的专用文件 .eslintignore。仅支持配置文件中配置的ignores和运行命令时添加的--ignore-pattern
- 如果依然想支持，需要按照一下方式进行配置

// eslint.config.js
import { includeIgnoreFile } from "@eslint/compat";
import path from "node:path";
import { fileURLToPath } from "node:url";const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const gitignorePath = path.resolve(__dirname, ".gitignore");export default [includeIgnoreFile(gitignorePath),{// your overrides}
];

--ext参数配置去掉，仅限 eslintrc 模式。9.x版本不再使用，我们eslint执行的范围，取决于我们配置的files范围
不再支持在package.json中进行配置eslint的相关配置了, 如之前的eslintConfig

新版本的命令配置

package.json文件

lint命令，已经不在需要手动配置–ext指定检查文件的格式和对应目录，迁移到了配置文件eslint.config.mjs中
- 也就是上述默认生成的文件中，files这个配置
fix:lint, 依然可以用–fix参数

{..."scripts": {"lint": "eslint . --color","fix:lint": "eslint . --fix"},...
}

写在最后

本期最后，博主直接配上我自己项目的eslint.config.mjs配置， 以下添加的rules都是当eslint提示之后才会发现，不需要一个一个去熟悉，完全没必要的哈

import globals from "globals";
import pluginJs from "@eslint/js";
import tsEslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";export default [{files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],},{ languageOptions: { globals: globals.browser } },pluginJs.configs.recommended,...tsEslint.configs.recommended,pluginReact.configs.flat.recommended,{rules: {/** 可以出现any类型 */"@typescript-eslint/no-explicit-any": "off",/** 需要分号 */semi: ["error", "always"],/** 可以使用require */'@typescript-eslint/no-require-imports': 'off',/** 可以用ts-ignore */'@typescript-eslint/ban-ts-comment': 'off',/*** 不检查以下划线开头的 未使用的变量 * 包含了参数变量，解构变量，catch中的参数变量*/'@typescript-eslint/no-unused-vars': ["error", { "argsIgnorePattern": "^_", "caughtErrorsIgnorePattern": "^_", "destructuredArrayIgnorePattern": "^_"  }]}},{ignores: ['config/','build/','public/','scripts/','mock/','.vscode/','src/utils/XMLToJson.js','**/*.test.js']}
];