在 React+Webpack 项目中使用 ESLint 进行代码规范检查
前言
随着前端技术的不断升级，现代化前端开发已经离不开模块化、自动化、组件化的开发方式，而随着项目规模和开发人员数量的不断增加，代码的规范性和风格的统一性也变得越发重要。因此，ESLint 就成了绝佳的工具，它可以让我们规范代码风格，保证代码的可读性、可维护性和可扩展性，今天我们就来详细学习如何在 React+Webpack 项目中使用 ESLint 进行代码规范检查。
技术原理
- ESLint 简介
ESLint 是一个语法检查工具，它是基于 ECMAScript/JavaScript 代码的抽象语法树来进行检查的，能够帮我们检测代码是否符合规范，同时也可以集成到我们的编辑器中，提供实时校验、纠错等功能。
- React+Webpack 项目简介
React 是一套声明式编程、组件化开发的 JavaScript 库，它使得我们能够轻松构建可复用的 UI 组件，实现视图的高效渲染。Webpack 是一个强大的模块打包器，它将所有所需资源打包成静态文件，实现模块化开发，同时也支持多种模块化代码的处理方式。
- ESLint 在 React+Webpack 项目中的应用
在 React+Webpack 项目中使用 ESLint 进行代码规范检查，可以帮我们发现代码中不符合规范的部分，使我们更加规范的编写代码，提高代码质量。具体应用步骤如下：
（1）安装 ESLint
在项目根目录下运行以下命令安装 ESLint：
npm install eslint eslint-loader eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react-hooks -D
注释：ESLint 需要的插件有 eslint、eslint-loader、eslint-plugin-react、eslint-plugin-import、eslint-plugin-jsx-a11y、eslint-plugin-react-hooks。
（2）配置 .eslintrc
在项目根目录下创建 .eslintrc 配置文件，用于指定代码检查规则。
-- -------------------- ---- -------
-
--------- ---------------
---------- -----------
------ -
---------- ----
--
---------- -
-------------
--
-------- -
----------------------------- --------
------------------------------ ------
-
-注释：
- parser：指定解析器，这里使用的是 babel-eslint；
- extends：指定使用的规则集，这里使用的是 airbnb 的规则集；
- env：指定环境，这里指定了浏览器环境；
- plugins：指定需要使用的插件，这里使用了 react-hooks 插件；
- rules：指定具体的规则，这里指定了 react-hooks 的两个规则。
（3）配置 Webpack
在 webpack.config.js 中添加如下代码：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------------
-------- ---------------
---- -
------- ----------------
-------- -
---- -----
--
--
--
-- ---
--
--
-- ---
--注释：
- test：指定需要处理的文件，这里指定了 js 和 jsx 文件；
- exclude：需要排除的文件，这里排除了 node_modules；
- use：使用的 loader 和配置，这里使用的是 eslint-loader，并开启了 fix 选项，可以自动修复一些错误。
（4）运行检查
添加完 ESLint 相关的配置后，就可以运行检查了，在项目根目录下执行以下命令：
npm run lint
如果代码中存在不符合规范的部分，就会输出如下提示：
示例代码
代码 GitHub 地址：https://github.com/TimCook0801/react-webpack-eslint-demo
下面是示例代码的具体实现：
（1）创建项目
在命令行下执行以下命令创建项目：
mkdir react-webpack-eslint-demo cd react-webpack-eslint-demo npm init -y
（2）安装依赖
在项目根目录下执行以下命令安装所需依赖：
npm install webpack webpack-cli webpack-dev-server --save-dev npm install react react-dom --save npm install babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev npm install eslint eslint-loader eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react-hooks -D
其中，webpack 相关的依赖用于打包和启动服务，react 相关的依赖用于 React 应用的开发，babel 相关的依赖用于将 JSX 转成 JS，eslint 相关的依赖用于代码规范检查。
（3）配置 Webpack
在项目根目录下创建 webpack.config.js 文件，添加如下代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----- --------------
------ ----------------------- ------ -------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
----------- ------- --------
--
------- -
------ -
-
----- --------------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
--
--
--
-
----- ---------
---- ---------------- --------------
--
--
--
---------- -
------------ -------------------- --------
--------- -----
----- -----
--
--其中：
- mode：指定开发环境；
- entry：指定入口文件；
- output：指定打包后的文件名和存储位置；
- resolve：配置文件扩展名；
- module.rules：指定处理规则，包括将 JSX 转成 JS 和处理 CSS 文件；
- devServer：Webpack DevServer 配置项。
（4）创建文件
在 src 目录下创建 App.jsx 文件（React 组件）、index.jsx 文件（入口文件）和 index.html 文件（HTML 模板），如下：
App.jsx
-- -------------------- ---- -------
------ ----- ---- --------
----- --- - -- -- -
-----
--------- -----------
------
--
------ ------- ----index.jsx
import React from 'react';
import ReactDom from 'react-dom';
import App from './App';
ReactDom.render(<App />, document.getElementById('root'));index.html
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----- ---------------------------- ----------------- --
------------ ------- ------ ------------
-------
------
---- ----------------
------- ---------------------------
-------
-------（5）配置 ESLint
在项目根目录下创建 .eslintrc 文件，添加如下内容：
-- -------------------- ---- -------
-
--------- ---------------
---------- -----------
------ -
---------- ----
--
---------- -
-------------
--
-------- -
----------------------------- --------
------------------------------ ------
-
-注释：
- parser：使用 babel-eslint 解析器；
- extends：使用 airbnb 规则；
- env：指定浏览器环境；
- plugins：使用 react-hooks 插件；
- rules：使用 react-hooks 规则。
在 webpack.config.js 中添加如下代码：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------------
-------- ---------------
---- -
------- ----------------
-------- -
---- -----
--
--
--
-
----- ---------
---- ---------------- --------------
--
--
--
-- ---
--（6）运行项目
在命令行下执行以下命令运行项目：
npm run start
在项目运行成功后，我们来试着写一段不符合 ESLint 规范的代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- --- - -- -- -
-----
--------
--------- -----------
---------
------
--
------ ------- ----从这段代码中我们可以看到，header 标签中的 h1 标签没有被合理地缩进，这样的代码不符合代码规范。接下来，运行 ESLint 检查：
npm run lint
这时，我们就会发现错误提示，如下图所示：
此时，我们可以使用 ESLint 自带的修复工具，运行以下命令：
npm run lint -- --fix
这就能将不符合代码规范的部分修复掉，如下图所示：
这样，代码就能通过检查了。
总结
本文介绍了在 React+Webpack 项目中使用 ESLint 进行代码规范检查的方法和步骤，同时还给出了具体的示例代码，希望对大家有所帮助。在实际开发中，我们应该严格遵守代码规范，提高代码质量，保证项目的可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6468c072968c7c53b08eb9fb