介绍
在前端开发过程中，我们经常使用 ESLint 来对我们的代码进行语法检查和风格统一，以提高代码的可读性和可维护性。而对于 React 项目，我们可以使用 eslint-plugin-react-app 进行配置和扩展，以更好地支持 React 相关的语法和规范。
这篇文章将带领大家学习如何使用 eslint-plugin-react-app 来优化我们的 React 项目代码。
安装
首先，我们需要在项目中安装 eslint-plugin-react-app 包。可以通过以下命令来安装：
npm install eslint-plugin-react-app --save-dev # 或者使用 yarn 安装 yarn add eslint-plugin-react-app --dev
配置
安装完成后，我们需要在项目的 .eslintrc 文件中进行配置，以启用 eslint-plugin-react-app。
{
"extends": "react-app",
"rules": {
// 可以在此处配置自定义规则
}
}如上所示，我们使用 extends: 'react-app' 来继承 react-app 的默认配置，并在 rules 中可以配置自定义的规则。
其中，react-app 默认包含了以下配置：
plugin:react/recommended: 包含了 react 相关的规则和检查prettier/@typescript-eslint: 使用 prettier 来格式化代码（如果项目中已有 prettier，则可以直接使用 prettier）
在这里，我们看一下配置文件 package.json 中规定的默认 extends 设置：
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}可以看到，react-app 实际上包含了 plugin:react/recommended 和 plugin:jest/recommended ，这样我们在 eslintrc 中使用 react-app 就可以同时使用 react 和 jest 相关的规则和插件，以提高我们的代码质量和开发效率。
使用
在配置完成后，就可以使用 eslint-plugin-react-app 来规范我们的项目代码了。
首先，我们可以在命令行中运行以下命令进行代码检查：
npx eslint src/ # 或者使用 yarn yarn eslint src/
这样，eslint 将会对 src 目录下的所有代码进行检查。如果检查出了错误或警告，则会在命令行中输出提示信息。
除此之外，我们也可以使用 ESLint 的 VSCode 插件来进行实时的代码检查和提示。安装后，在 VSCode 中打开项目，就可以看到代码中出现的问题和警告，以方便我们进行修改和修复。
总结
通过本文，我们学习了如何使用 npm 包 eslint-plugin-react-app 进行 React 项目代码检查和规范，并以示例代码的形式进行了详细的解释和说明。同时，我们也掌握了一些常用的 eslint 配置和命令行使用方法，以提高我们的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eef2c1eefcef77a054b7555