react项目中引入最新版本eslint

目的

1. 我们讲eslint引入项目，无非就是让我们在写代码的过程当中，可以给我们一些友好的提示，来检查我们代码的书写合理性，以及一些代码书写习惯的统一；
2. 最新版本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"
        }
    }
]

比较明显的改动

1. 默认不再支持，匹配模式的专用文件 .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
    }
];

2. --ext参数配置去掉，仅限 eslintrc 模式。9.x版本不再使用，我们eslint执行的范围，取决于我们配置的files范围
3. 不再支持在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'
    ]
  }
];

如果本期的内容有帮助到大家，记得给博主点个赞，让博主开心开心，你们的支持是我持续更新和保证文章质量的动力！