本文主要介绍如何在 React-Create-App 2 中集成 ESLint 和 Prettier。ESLint 是一款常用的 JavaScript 静态代码检查工具，可以帮助开发者在编码过程中发现潜在的问题，提高代码的规范性和可读性。而 Prettier 则是一款代码格式化工具，可以自动对代码进行排版和格式化，减少开发者在排版方面的工作。
安装依赖
在开始集成 ESLint 和 Prettier 之前，首先需要安装相关的依赖。在终端中执行以下命令：
npm i eslint prettier eslint-config-prettier eslint-plugin-prettier husky lint-staged -D
其中，eslint 是 ESLint 的核心依赖包，prettier 则是 Prettier 的核心依赖包。eslint-config-prettier 和 eslint-plugin-prettier 分别是 ESLint 配置文件和插件，用于集成 Prettier。husky 和 lint-staged 则是用于实现提交代码时自动进行代码检查的工具。
配置文件
.eslintrc.js
在项目根目录下新建一个 .eslintrc.js 文件，并对其进行如下配置：
-- -------------------- ---- -------
-------------- - -
---- -
-------- -----
---- ----
--
-------- ---------------------- --------------------------- -------------------------------
-------- -
-------- -----------
------------------ ----------
--
-------------- -
------------- -
---- ----
--
------------ -----
----------- --------
--
-------- --------- ------------
------ -
-------------------- --------
------------------- -----
-
--该文件主要配置了以下内容：
env：指定代码运行的环境；extends：继承了三个配置，eslint:recommended为 ESLint 建议配置、plugin:react/recommended为 React 建议配置、plugin:prettier/recommended基于建议的配置 —— 它禁止了 ESLint 中与 Prettier 相冲突的配置，整合了 Prettier 提供的配置；globals：声明全局变量；parserOptions：解析器选项，其中ecmaFeatures设置了支持 JSX 语法；plugins：指定使用的插件，在这里是 React 和 Prettier；rules：配置检测规则，prettier/prettier规则使用了 Prettier 的配置，禁用了react/prop-types的规则。
.prettierrc.js
在项目根目录下新建一个 .prettierrc.js 文件，并对其进行如下配置：
-- -------------------- ---- ------- -------------- - - -- ---- --- -- ----------- ---- -- ------------ -------- ------ -- -- - ----- --------- -- -- ------- ----- ----- -- ----- ------------ ----- -- --- --- -------- ----------- ------------ -- --- ------------- --------------- ------ -- ------- -------------- ------ -- ----------- --------------- ----- -- --- ----------- ------------------- ------ -- -------------------- ------------ --------- -- ------------------ ----------- -- --------- --------- -- --------- --------- -------------- ------ -- ------------ --------- ------------- ------ -- --------- ---------- ---------- --
.editorconfig
在项目根目录下新建一个 .editorconfig 文件，并对其进行如下配置：
-- -------------------- ---- ------- ---- - ---- --- ------- - ----- ------------ - ----- ----------- - - ------------------------ - ---- ----------- - -- -------------------- - ---- ------ ------------------------ - -----
该文件主要用于统一代码格式化，包括编码、缩进、行尾空格、换行符以及文件结尾是否需要新行。
.huskyrc.js
在项目根目录下新建一个 .huskyrc.js 文件，并对其进行如下配置：
module.exports = {
hooks: {
'pre-commit': 'lint-staged'
}
};该文件用于配置约定的 Git Hook，这里只配置了提交时自动检查代码。
.lintstagedrc.js
在项目根目录下新建一个 .lintstagedrc.js 文件，并对其进行如下配置：
module.exports = {
'*.{js,jsx}': ['prettier --write', 'eslint --fix', 'git add']
};该文件用于配置 Git Hooks 在 pre-commit 前执行的操作，这里主要是使用 Prettier 和 ESLint 自动修复代码，并将修复后的代码提交到暂存区。
集成测试
在完成上述配置后，可以进行一个简单的集成测试，方式为在 App.js 文件中加入如下代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --- ------- --------- -
-------- -
----- ---- - --------
------ ----------- -------------
-
-
------ ------- ----保存并提交代码，可以看到 ESLint 和 Prettier 能够正确地检查和格式化代码。
总结
以上就是在 React-Create-App 2 中集成 ESLint 和 Prettier 的详细步骤，通过这样的配置可以大大提高代码的规范性和可读性，减少排版方面的工作量。希望本文能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6468657c968c7c53b089eee6