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 中与规则不符的代码有红色的下划波浪线），不会在控制台和浏览器中出现相关提示。
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-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 项目更改），暴露项目的配置文件，然后根据项目需要进行自定义配置（注意：这是单向操作，一旦执行无法撤销，只能重建项目）：
$ npm run eject
执行该命令后，项目根目录会生成两个文件夹，分别为 config 和 scripts，同时 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 格式化代码）即可：
需要修复错误
成功修复错误
网友评论