ESlint 是一个广泛使用的 JavaScript 代码检查工具。它可以帮助开发者遵循编码规范，减少错误、提高代码质量，从而节省调试时间。在开发 React 项目时，正确配置 ESlint 是非常重要的步骤，本文将为您介绍如何正确配置 ESlint 以提高代码质量。
为什么开发 React 项目时需要使用 ESlint
React 项目要求代码具有一定的规范性，以便不同开发人员在协作时更容易理解对方的代码。此外，React 特有的语法和组件的使用方式也需要在代码规范中进行限制。ESlint 可以快速检查代码的符合和不符合规范的部分，并根据我们的配置文件（.eslintrc）进行相应处理。
ESlint 配置
安装 ESlint
在命令行中输入以下代码安装 ESlint：
npm install eslint --save-dev
创建 .eslintrc 文件
在项目的根目录中，使用以下代码创建名为 .eslintrc 的配置文件：
npx eslint --init
执行以上命令后，会进入一个命令行菜单，你可以根据自己的项目类型，选择合适的配置选项。按照配置进行选择即可完成基础配置设置。一般常用的主要选项为：
- Use a popular style guide：选择一个常用的风格指南，如 Airbnb、Standard 等。 - JavaScript modules：选择使用哪种 JavaScript 模块，如 CommonJS、ES6 Modules 等。 - Browser or Node.js：选择代码运行环境，如浏览器或 Node.js。
配置 ESlint 规则
完成配置文件的创建后，我们需要根据自己的项目需求来修改并添加 ESlint 的规则以满足我们的需求。在 .eslintrc 文件中，我们可以像下面这样添加规则，例如针对 react 组件书写规范：
-- -------------------- ---- -------
-
---------- -
---------------------
--------------------------
--
---------- -
-------
--
-------- -
-----------
------------------ -
--------
-
-------- -
-----------------
------------
---------
-----------------
-
-
-
-
-在上面这个例子中，我们加载了 React 插件并使用了 "plugin:react/recommended" 规则，它以推荐的方式定义了许多 React 的规则，可以帮助我们避免一些常见的错误。
配置 ESlint 解析器
为了让 ESlint 完全理解 React 代码，我们需要配置解析器，并且让 eslint-plugin-react 在代码中知道我们使用了哪些 React 特有的语法和组件。
在 .eslintrc 文件中，我们可以像下面一样配置解析器：
{
"settings": {
"react": {
"version": "detect"
}
}
}经过上面的配置以后，我们的 ESlint 配置就完成了。
让 ESlint 跟随你的编辑器或 IDE
如果开发者能够直接在编辑器或 IDE 中，实时获取 ESlint 提供的检查结果，就能更快地做出修正，而不需要手动执行检查命令，浪费时间。
让 ESlint 跟随你的编辑器或 IDE，可以帮助你更快地查找代码中的错误。以下是一些流行的编辑器或 IDE 中的 ESlint 插件：
- VS Code：eslint 插件
- IntelliJ IDEA: ESLint 插件
- Atom：linter-eslint 插件
- Sublime Text：SublimeLinter-eslint 插件
总结
ESlint 是必须安装和配置的重要工具，可以帮助您编写更优化、高质量的代码。在 React 项目中，使用 ESlint 更是有益。配置 ESlint 并愉快地编写代码吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465f6be968c7c53b06a223d