在前端开发中，我们常常会使用 ESLint 来保证代码的质量与一致性。而使用一个好的 ESLint 配置可以让我们的代码更加规范并减少一些常见的错误。本文介绍的 npm 包 eslint-config-raulistandard-jsx，是一种符合 React 开发实践的 ESLint 配置。
安装和使用
要使用 eslint-config-raulistandard-jsx，需要先安装它以及它所依赖的一些包。在终端中输入以下命令：
npm install --save-dev eslint babel-eslint eslint-plugin-react eslint-config-raulistandard-jsx
接下来，在你的项目中添加一个名为 .eslintrc 的文件，并将其中的内容设置为：
{
"extends": "raulistandard-jsx",
"rules": {
// 你可以在这里添加自定义规则
}
}这样，你就使用成功了 eslint-config-raulistandard-jsx。接下来，我们来逐步了解它的一些配置以及常见的规则。
eslint-config-raulistandard-jsx 的配置
在 ESLint 中，配置通常由多个可重载的配置组成，每个配置组件只实现一小部分规则。
eslint: 此配置组件提供 ESLint 核心规则（就像 eslint:recommended），它是 eslint-config-raulistandard-jsx 中其他配置的基础。在 .eslintrc 文件中设置 extends 属性时，它应该位于第一位。
eslint-plugin-react: 一个用于处理 React 代码的插件，它添加了多个针对 React 相关规则的指令。
babel-eslint: 可以解析一些与 ESLint 内置解析器不兼容的 JavaScript 语法并将其转换为 AST 建构。在 eslint-config-standard 中也使用了这个解析器。
eslint-config-standard: ESLint 规则的扩展，遵循定义的最佳规范。
eslint-config-prettier: 禁止与 Prettier 冲突的规则。
常见的规则
考虑到 React 开发中常见的一些问题，eslint-config-raulistandard-jsx 针对一些常见规则进行了设置：
"react/jsx-curly-brace-presence": [ "error", { "props": "never", "children": "never" } ]： Props 或 Children 部分中不要使用可省略的大括号。
"react/jsx-closing-tag-location": "error"：当 JSX 标签很长时，应该在关闭标签的新行上进行格式化，以便读者们更好地看到。
"react/jsx-filename-extension": "off"：关闭文件名必须以 .jsx 结尾的检查。
"react/jsx-indent": [ "error", 2 ]：设置每行缩进 2 个空格。
"react/jsx-indent-props": [ "error", 2 ]：设置 props 段缩进 2 个空格。
这些常见规则只是 eslint-config-raulistandard-jsx 的冰山一角，我们可以根据项目的实际情况添加一些自定义规则。
结语
eslint-config-raulistandard-jsx 是一个帮助我们遵循 React 开发实践规范的 ESLint 配置。通过安装和配置它，我们可以更好地避免一些常见的问题，并提高开发效率和代码质量。当然，在实际使用中，我们可以根据自己的实际情况，适当的引入一些自定义规则，来满足我们的具体需求。
示例代码：（可以使用我们实际的项目代码进行测试）
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
----- ---------- ------- --------------- -
------ --------- - -
------ -----------------
------ ----------------
--
------ ------------ - -
------ ------
------ --
--
-------- -
------ -
----
--------
---------------- -----------------
-------------------
--
-
---------------------
------
--
-
-
------ ------- -----------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055da581e8991b448db5fc