如何在|如何在 Create React App 中使用 ESLint 和 Prettier 如何在CreateReactApp中使用ESLin

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-prettier 和 eslint-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-prettier 和 eslint-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 中与规则不符的代码有红色的下划波浪线），不会在控制台和浏览器中出现相关提示。

如何在|如何在 Create React App 中使用 ESLint 和 Prettier

文章图片
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 忽略

【如何在|如何在 Create React App 中使用 ESLint 和 Prettier】一个环境文件只包含环境变量的“键=值”对，例如将项目端口号改为 8080：

PORT=8080

ESLint 和 Prettier 应当在开发模式下有效，故应创建 .env.development 文件（.env 文件也可以）：

EXTEND_ESLINT=true

3.1.2 方法二：Ant Design 官方给出的解决方案使用 react-app-rewired 和 customize-cra。react-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 属性，将start、build 和 test 的 react-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 项目更改），暴露项目的配置文件，然后根据项目需要进行自定义配置（注意：这是单向操作，一旦执行无法撤销，只能重建项目）：