介绍
Create React App 是一个非常流行的 React 应用程序脚手架，它可以帮助我们快速创建 React 应用程序。它使用 Webpack 和 Babel 来构建应用程序，并提供了许多现代化的功能，如热模块替换、代码分割和代码优化。
在开发 React 应用程序时，我们需要确保代码质量和一致性。这就是为什么我们需要使用工具来帮助我们检查和格式化我们的代码。在本文中，我们将介绍如何在 Create React App 项目中使用 ESLint 和 Prettier。
ESLint
ESLint 是一个 JavaScript 代码检查工具，它可以帮助我们找到代码中的常见错误和潜在问题。它可以检查代码风格、语法错误、变量和函数使用、代码复杂度等方面。
安装
在 Create React App 项目中使用 ESLint 非常简单。我们可以使用以下命令来安装 ESLint：
npm install eslint --save-dev
配置
安装 ESLint 后，我们需要为项目配置一个 .eslintrc 文件。我们可以使用以下命令来初始化一个 .eslintrc 文件：
npx eslint --init
在初始化过程中，我们需要回答一些问题，例如：
- 我们要使用哪种风格指南？
- 我们要使用哪种解析器？
- 我们要使用哪些插件？
当初始化完成后，我们将获得一个 .eslintrc 文件，其中包含我们的配置选项。
使用
在配置好 ESLint 后，我们可以使用以下命令来运行它：
npx eslint .
这将检查项目中的所有 JavaScript 文件并输出任何错误或警告。
集成
我们可以将 ESLint 集成到我们的编辑器中，以便在编写代码时自动检查错误和警告。大多数编辑器都有一个 ESLint 插件，可以在编辑器中安装和配置它。
Prettier
Prettier 是一个 JavaScript 代码格式化工具，它可以帮助我们自动格式化我们的代码。它可以自动缩进、添加分号、移除不必要的空格等。
安装
在 Create React App 项目中使用 Prettier 非常简单。我们可以使用以下命令来安装 Prettier：
npm install prettier --save-dev
配置
安装 Prettier 后，我们需要为项目配置一个 .prettierrc 文件。我们可以使用以下命令来初始化一个 .prettierrc 文件：
npx prettier --write .
这将自动格式化我们项目中的所有 JavaScript 文件，并创建一个 .prettierrc 文件，其中包含我们的配置选项。
使用
在配置好 Prettier 后，我们可以使用以下命令来运行它：
npx prettier --write .
这将自动格式化我们项目中的所有 JavaScript 文件。
集成
我们可以将 Prettier 集成到我们的编辑器中，以便在编写代码时自动格式化我们的代码。大多数编辑器都有一个 Prettier 插件，可以在编辑器中安装和配置它。
集成 ESLint 和 Prettier
我们可以将 ESLint 和 Prettier 集成到我们的项目中，以便在编写代码时自动检查错误和警告，并自动格式化我们的代码。
安装
我们需要安装以下依赖项：
npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev
配置
我们需要为项目配置一个 .eslintrc 文件。在 .eslintrc 文件中，我们需要添加以下配置：
{
"extends": ["react-app", "plugin:prettier/recommended"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error", {}, { "usePrettierrc": true }]
}
}在这个配置中，我们使用了 eslint-config-prettier 和 eslint-plugin-prettier 插件，它们可以帮助我们将 ESLint 和 Prettier 集成在一起。
我们还需要创建一个 .prettierrc 文件来配置 Prettier。在 .prettierrc 文件中，我们可以添加我们的 Prettier 配置选项。
使用
在配置好 ESLint 和 Prettier 后，我们可以使用以下命令来运行它们：
npx eslint --fix .
这将自动检查我们的代码并修复任何错误和警告。它还将自动格式化我们的代码。
集成
我们可以将 ESLint 和 Prettier 集成到我们的编辑器中，以便在编写代码时自动检查错误和警告，并自动格式化我们的代码。大多数编辑器都有一个 ESLint 和 Prettier 插件，可以在编辑器中安装和配置它。
示例代码
在下面的示例代码中，我们将展示如何在 Create React App 项目中使用 ESLint 和 Prettier。
安装依赖项
npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev
初始化 ESLint 配置文件
npx eslint --init
初始化 Prettier 配置文件并格式化代码
npx prettier --write .
添加 .eslintrc 文件
{
"extends": ["react-app", "plugin:prettier/recommended"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error", {}, { "usePrettierrc": true }]
}
}添加 .prettierrc 文件
-- -------------------- ---- ------- - ------------- --- ----------- -- ---------- ------ ------- ----- -------------- ----- ------------- ------------ ----------------- ------ ---------------- ------ ----------------- ----- --------------------- ------ -------------- --------- ---------------- ------ --------------- ------ ------------ ---------- -
运行 ESLint 和 Prettier
npx eslint --fix .
结论
在本文中，我们介绍了如何在 Create React App 项目中使用 ESLint 和 Prettier。我们学习了如何安装、配置和使用它们，并展示了如何将它们集成到我们的编辑器中。我们还提供了示例代码，以帮助您开始使用这些工具。使用 ESLint 和 Prettier 可以帮助我们提高代码质量和一致性，从而提高我们的生产力和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673397ea0bc820c582433eb4