简介
eslint-config-uber-jsx 是一个由 Uber 开发的用于 React 项目的 ESLint 配置包。它基于 eslint-config-airbnb 和 eslint-plugin-react，提供了一套针对 React 项目的代码检查规则和配置。
在本文中，我们将介绍如何安装和使用 eslint-config-uber-jsx 来提高 React 项目的代码质量。
安装
使用 npm 安装 eslint-config-uber-jsx：
npm install --save-dev eslint-config-uber-jsx
同时也需要安装以下依赖：
npm install --save-dev eslint babel-eslint eslint-plugin-import eslint-plugin-jest eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
配置
在项目根目录下创建一个名为 .eslintrc.json 的文件，并添加以下内容：
{
"extends": ["uber-jsx"]
}这里我们使用 eslint 的 extends 属性引用了 eslint-config-uber-jsx，从而继承了其中定义的规则和配置。
如果你想自定义配置或者禁用某些规则，可以在 .eslintrc.json 文件中进行修改。例如：
{
"extends": ["uber-jsx"],
"rules": {
"react/jsx-indent": ["error", 2],
"react/prop-types": "off"
}
}这里我们将 react/jsx-indent 规则的缩进设置为 2 个空格，并禁用了 react/prop-types 规则。
使用
当你完成安装和配置后，就可以使用 eslint 来检查你的代码。例如，在项目根目录下执行以下命令：
npx eslint src/**/*.js
这里我们使用 npx 命令来运行 eslint，检查 src 目录下所有的 .js 文件。
如果你想在编辑器中实时检查代码，可以在编辑器中安装 eslint 插件，并在编辑器中打开 ESLint 检查功能。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------- ---- -- -
------ -
-----
------ -------
------
--
-
--------------------- - -
----- ---------------------------
--
------ ------- ------------在上面的示例代码中，我们定义了一个名为 MyComponent 的组件，它接收一个 name 属性，并渲染出一个包含 Hello, {name}! 文字的 div 元素。
注意到我们在组件定义后添加了 MyComponent.propTypes 对象，其中定义了 name 属性的类型为字符串，且必须存在。这是由 eslint-plugin-react 中的规则要求的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/52104