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

csj502025-11-04 12:37

接上篇......

十五、ESLint集成

1、安装eslint插件

bash 复制代码

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

2、只需要开发环境集成

修改serve.js：

javascript 复制代码

// 只有开发环境才需要用到配置
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以后要运行向导生成配置文件

bash 复制代码

cnpm init @eslint/config

需要安装的依赖包：

bash 复制代码

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文件：

javascript 复制代码

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,
]);