美文网首页react
如何在 Create React App 中使用 ESLint

如何在 Create React App 中使用 ESLint

作者: 丿记忆灬永殇丨 | 来源:发表于2020-03-22 19:21 被阅读0次

    1. 创建 React 应用

    在 WebStorm 中 使用 Create React App 来创建 React 应用,Create React App 版本为 3.4.1:

    创建React 应用

    使用 Create React App 创建的 React 应用,默认安装了 ESLint 依赖,package.json 文件中的 eslintConfig 属性只提供了用于发现常见错误的最小规则集

    {
      "eslintConfig": {
        "extends": "react-app"
      }
    }
    

    2. 安装与配置 Prettier

    ESLint 关注代码质量,Prettier 关注代码风格。

    2.1 安装 Prettier 依赖

    根据 Prettier 官方建议,Prettier 版本升级后可能会有风格变化,故应当锁定 Prettier 的版本号:

    $ npm install prettier --save-dev --save-exact
    
    + prettier@2.0.1
    

    2.2 Prettier 与 ESLint 相集成

    Prettier 与 ESLint 相集成,需要安装 eslint-config-prettiereslint-plugin-prettier 依赖。eslint-config-prettier 禁用与 Prettier 冲突的规则,eslint-plugin-prettier 使用 Prettier 的规则:

    $ npm install eslint-config-prettier eslint-plugin-prettier --save-dev
    
    + eslint-config-prettier@6.10.0
    + eslint-plugin-prettier@3.1.2
    

    eslint-plugin-prettier 其提供了一个推荐配置,只需一步即可同时配置 eslint-plugin-prettiereslint-config-prettier推荐配置的作用

    • 启用 eslint-plugin-prettier
    • 设置 prettier/prettier 规则为 "error"
    • 扩展 eslint-config-prettier 配置。

    2.3 使用推荐配置的两种方法

    2.3.1 方法一:修改 package.json 文件

    修改 package.json 文件中的 eslintConfig 属性:

    {
      "eslintConfig": {
        "extends": [
          "react-app",
          "plugin:prettier/recommended"
        ]
      }
    }
    

    2.3.2 方法二:创建 .eslintrc.* 文件

    在项目根目录(与 package.json 文件同级)创建 .eslintrc.* 文件。ESLint 的配置文件,可以是 .eslintrc.js.eslintrc.cjs.eslintrc.yaml.eslintrc.yml.eslintrc.json.eslintrc(已弃用)或者 package.json(第一种方法),优先级依次递减,层叠配置使用离要检测的文件最近的 .eslintrc 文件作为最高优先级,然后才是父目录里的配置文件,以此类推。Prettier 官方的示例配置使用 .eslintrc.json

    {
      "extends": ["react-app", "plugin:prettier/recommended"]
    }
    

    3. 扩展 ESLint 配置

    一些编辑器或者 IDE 都提供了 ESLint 或 Prettier 的插件,可以实时在编辑器或 IDE 中显示与规则不符的代码。例如,WebStorm 已经内置了 ESLint 和 Prettier 插件。上面使用了 Prettier 的推荐配置,即自定义 ESLint 配置,然而只会影响编辑器和 IDE 是否和如何检测与规则不符的代码(比如在 WebStorm 中与规则不符的代码有红色的下划波浪线),不会在控制台和浏览器中出现相关提示。

    WebStorm ESLint

    3.1 扩展 ESLint 配置的三种方法

    3.1.1 方法一:Create React App 官方给出的解决方案

    在项目根目录(与 package.json 文件同级)创建 .env 文件,添加 EXTEND_ESLINT 环境变量,并设置其值为 true 即可。

    若想指定模式,即在开发模式还是生产模式抑或是二者都生效,不同的模式下的不同的文件的优先级依次递减:

    • npm start.env.development.local.env.development.env.local.env
    • npm run build.env.production.local.env.production.env.local.env
    • npm test.env.test.local.env.test.env.env.local 无效)

    在项目根目录中创建下列文件来指定环境变量:

    .env                # 在所有的环境中被载入
    .env.local          # 在所有的环境中被载入,但会被 Git 忽略
    .env.[mode]         # 只在指定的模式中被载入
    .env.[mode].local   # 只在指定的模式中被载入,但会被 Git 忽略
    

    一个环境文件只包含环境变量的“键=值”对,例如将项目端口号改为 8080

    PORT=8080
    

    ESLint 和 Prettier 应当在开发模式下有效,故应创建 .env.development 文件(.env 文件也可以):

    EXTEND_ESLINT=true
    

    3.1.2 方法二:Ant Design 官方给出的解决方案

    使用 react-app-rewiredcustomize-crareact-app-rewired 是一个对 Create React App 进行自定义配置的社区解决方案,customize-cra 依赖于 react-app-rewired 且支持对 Create React App 2.X 和 3.X 自定义配置:

    $ npm install react-app-rewired customize-cra --save-dev
    
    + customize-cra@0.9.1
    + react-app-rewired@2.1.5
    

    修改 package.json 文件中的 scripts 属性,将startbuildtestreact-scripts 修改为 react-app-rewired注意不要替换 eject 部分,react-app-rewired 中没有针对 eject 的配置替换,若执行了 eject 命令会让 react-app-rewired 失去作用):

    {
      "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
        "eject": "react-scripts eject"
      }
    }
    

    在项目根目录(与 package.json 文件同级)创建 config-overrides.js 文件:

    const { override, useEslintRc } = require("customize-cra");
    
    module.exports = override(useEslintRc());
    

    3.1.3 方法三:使用 npm run eject 命令

    Create React App 对 Webpack 和 Babel 等工具进行了预配置和隐藏,使得开发者关注于业务代码开发。使用 npm run eject 命令(项目默认使用了 Git,需要先 Commit 项目更改),暴露项目的配置文件,然后根据项目需要进行自定义配置(注意:这是单向操作,一旦执行无法撤销,只能重建项目):

    $ npm run eject
    

    执行该命令后,项目根目录会生成两个文件夹,分别为 configscripts,同时 package.json 文件中的 scripts 属性发生了变化,eject 命令消失,即该命令是单向命令,只能执行一次:

    {
      "scripts": {
        "start": "node scripts/start.js",
        "build": "node scripts/build.js",
        "test": "node scripts/test.js"
      }
    }
    

    4. 在 WebStorm 中的使用方法

    经过上述配置后,ESLint 和 Prettier 生效,会在控制台和浏览器中出现相关错误提示:

    控制台报错 浏览器报错

    在 WebStorm 中使用 Alt + Enter(修复 ESLint 问题)或者 Alt + Shift + Ctrl + P(使用 Prettier 格式化代码)即可:

    需要修复错误 成功修复错误

    相关文章

      网友评论

        本文标题:如何在 Create React App 中使用 ESLint

        本文链接:https://www.haomeiwen.com/subject/xujmyhtx.html