前端基础之《React（7）—webpack简介-ESLint集成》

接上篇......

十五、ESLint集成

1、安装eslint插件

cnpm i eslint-webpack-plugin -D
cnpm i eslint -D

2、只需要开发环境集成
修改serve.js：

// 只有开发环境才需要用到配置
const path = require('path')
const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = {
    mode: 'development',
    devtool: 'inline-source-map',

    // 本地服务配置
    devServer: {
        port: 8000
    },

    module: {
        rules: [
            {
                test: /\.(css|scss)$/i,
                use: ['style-loader', 'css-loader', 'sass-loader'], // 从右向左执行
                exclude: /node_modules/
            }
        ]
    },

    plugins: [
        // 集成eslint代码检测
        new ESLintPlugin({
            eslintPath: 'eslint', // 指定使用什么进行代码检测
            extensions: ['js', 'jsx', 'ts', 'tsx'], // 对哪些模块进行检测
            context: path.resolve(__dirname, '../src'), // 检测的目录
            exclude: ['node_modules'], // 对哪些模块进行排除
            fix: false // 关闭自动修复
        })
    ]
}

3、eslint9.0以后要运行向导生成配置文件

cnpm init @eslint/config

需要安装的依赖包：

cnpm i eslint -D
cnpm i @eslint/js -D
cnpm i globals -D
cnpm i typescript-eslint -D
cnpm i eslint-plugin-react -D
cnpm i typescript -D

生成的eslint.config.mjs文件：

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import { defineConfig } from "eslint/config";

export default defineConfig([
  { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], plugins: { js }, extends: ["js/recommended"], languageOptions: { globals: globals.browser } },
  tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
]);

4、此时编译会报错'React' is not defined
因为我们用插件把React放入全局变量，但是eslint不知道在运行环境有这个变量，所以需要在配置文件中定义

修改点：

languageOptions: {

      globals: {

        ...globals.browser,

        React: 'readonly'

      }

    }

5、require、module.exports、__dirname会有红线
告诉eslint，引入全局变量

修改点：
languageOptions: { 
  globals: {
    ...globals.browser, // 浏览器全局变量
    ...globals.node, // Node.js 全局变量
    React: 'readonly'
  }
} 

6、修改后的eslint.config.mjs

import js from "@eslint/js";
import globals from "globals";
// import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import { defineConfig } from "eslint/config";

export default defineConfig([
  { 
    files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], 
    plugins: { js }, 
    extends: ["js/recommended"], 
    languageOptions: { 
      globals: {
        ...globals.browser, // 浏览器全局变量
        ...globals.node, // Node.js 全局变量
        React: 'readonly'
      }
    } 
  },
  // tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
]);

注释掉tseslint，是因为会提示A `require()` style import is forbidden

7、其他配置
（1）设置ES的版本

ecmaVersion: 2021

（2）代码具有模块作用域

sourceType: "module"

（3）开启对JSX检测

parserOptions: {
	ecmaFeatures: {
		jsx: true,
	},
},

（4）分号规则

rules: {
  semi: ["error", "always"]
}

8、eslint三种错误级别
2-error
1-warn
0-off

9、解决eslint报错的四种方法
（1）找到eslint配置文件，修改rules
（2）使用eslint注释，临时忽略检测
（3）在项目根目录添加一个Ignore Files
（4）老老实实找到报错的地方，把代码改成规范的写法