前端基础之《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、9.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

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