npm run eject后的create-react-app项目自定义eslint配置方式

前言：

当我们需要对create-react-app项目的配置进行高度修改的时候，我们需要npm run eject，把配置文件都暴露出来。

这时候如果我们想要在项目中配置自定义eslint，可以参照以下步骤进行。

一、首先检查是否安装了 eslint和babel-eslint

查看package.json文件，一般npm run eject之后都会看到已经安装了。

如果尚未安装，则需要安装。

全局安装：
npm install eslint babel-eslint -g

当前项目安装（推荐）：
npm install eslint babel-eslint -D

二、创建配置文件.eslintrc.js

建议使用npx命令安装，而不是直接在项目中创建文件。因为使用命令安装还能根据提示一步一步选择选项并安装相关依赖。

npx是执行Node软件包的工具，它从 npm5.2版本开始，就与npm捆绑在一起。
npx的作用如下：

1. 默认情况下，首先检查路径中是否存在要执行的包（即在项目中）；
2. 如果存在，它将执行；
3. 若不存在，意味着尚未安装该软件包，npx将安装其最新版本，然后执行它；

创建配置文件.eslintrc.js的命令：
npx eslint --init
选好上面的配置项之后，紧接着会询问你安装这些插件（可能会存在版本差异，只需把他提示的依赖给安装好就行）：
（如果默认安装不成功，建议使用cnpm安装，安装在devDependencies中）

cnpm install -D eslint-plugin-react@^7.21.5 eslint-config-airbnb@latest eslint@^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react-hooks@^4

注意：因为我们重新安装的插件在devDependencies中，可能dependencies中会有重复的插件，可以删掉dependencies中对应的依赖件。
可以把node_modules包整体删掉再装，或者是运行命令逐个删掉。

上面我安装的是Airbnb编码风格（这个的规范比较流行），Airbnb编码风格规范资料参考：点击这里

三、修改.eslintrc.js配置

eslint详细配置解析参考： 点击这里

我们需要对.eslintrc.js进行配置，最终如下：

module.exports = {
   
    env: {
   
        browser: true,
        es6: true,
        commonjs: true, // +
        node: true, // +
    },
    parser: 'babel-eslint', // +
    extends: [
        'plugin:react/recommended',
        'airbnb',
    ],
    globals: {
   
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly',
    },
    parserOptio