如果你是前端开发工程师，你肯定知道 ESLint 这个工具。它是一款 JavaScript 代码检查工具，可以用来规范自己的代码风格，保证代码的质量。在使用 ESLint 进行代码检查的时候，一个好的 ESLint 配置文件非常重要。而 @the-/eslint-config-standard-jsx 就是一款优秀的 ESLint 配置文件。
@the-/eslint-config-standard-jsx 概述
@the-/eslint-config-standard-jsx 是一个基于 eslint-config-airbnb 和 eslint-config-prettier 的预设配置文件，用于 JavaScript 与 JSX 代码规范校验。它不仅覆盖了 JavaScript 和 JSX 的常规 Code Style 配置，还增加了对 React Hooks 命名和 Destructuring 等规则的检测。此外，@the-/eslint-config-standard-jsx 还集成了 Prettier 代码格式化工具，以确保代码风格一致，易于维护。
@the-/eslint-config-standard-jsx 安装
在开始使用 @the-/eslint-config-standard-jsx 之前，需要先安装所需的依赖。
npm i -D eslint @the-/eslint-config-standard-jsx
需要注意的是，你还需要安装 ESLint 的插件：eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-jsx-a11y, eslint-plugin-import, eslint-plugin-prettier, eslint-config-prettier。
npm i -D eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-prettier eslint-config-prettier
@the-/eslint-config-standard-jsx 使用
安装依赖之后，修改项目根目录下的 .eslintrc.js 文件。将 extends 属性设置为 @the-/eslint-config-standard-jsx 即可。
module.exports = {
extends: ['@the-/eslint-config-standard-jsx'],
};@the-/eslint-config-standard-jsx 配置项
@the-/eslint-config-standard-jsx 将 eslint-config-airbnb 和 eslint-config-prettier 的最优配置结合起来，保持了两者最佳特性的合并。以下是 @the-/eslint-config-standard-jsx 可以配置的一些属性。
react
react/jsx-props-no-spreading: 禁止展开属性。false为默认值。react/jsx-handler-names: 强制事件处理程序的命名传统。false为默认值。react/jsx-one-expression-per-line: 强制 JSX 标记中每个表达式的一行。false为默认值。react/prop-types: 验证默认属性。false为默认值。
react-hooks
react-hooks/rules-of-hooks: 禁止在代码中使用 React Hooks 检测错误。error为默认值。react-hooks/exhaustive-deps: 当某个 Hook 需要传递参数使其相应时，如果其中一个参数发生变化，必须把所有参数都写进去，不然会警告。
jsx-a11y
jsx-a11y/label-has-for:label标签应该为每一个表单元素增加一个“包裹的列表”（有点类似于“id 和 for”），一个使用了必填的方案。error为默认值。jsx-a11y/click-events-have-key-events: 如果仅仅在onClick中处理一些列事件，它通常不支持键盘，因此无法通过键盘使用。error为默认值。jsx-a11y/no-static-element-interactions: 对于事件不需要通过键盘使用的不可交互的组件（非 a 标签，button 标签、select 标签等）给出禁止信号。error为默认值。
import
import/extensions: 禁止没有扩展名的 JavaScript 文件。false为默认值。import/no-extraneous-dependencies: 禁止导入未在 package.json 的 dependencies 或 peerDependencies 列表中指定的模块。false为默认值。
prettier
prettier/prettier: 用 prettier 格式化代码。error为默认值。
详细的配置项，请参阅 eslint-config-standard-jsx 的 GitHub 页面。
示例代码
以下代码是一个基于 React 开发的组件，安装与配置 @the-/eslint-config-standard-jsx 之后，开发过程中会通过 ESLint 对代码风格进行检查。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
----- --------- - -
----- -----------------
---- -----------------
-------- -----------------
--
----- ------------ - -
----- ----- -----
---- ---
-------- ----------
--
-------- ------------ ----- ---- ------- -- -
------ -
-----
---------------
---
---- ------ -------- ---------
----
------
--
-
-------------------- - ----------
----------------------- - -------------
------ ------- -----------
总结
使用好的 ESLint 配置文件可以帮助我们规范代码风格，保证代码的质量。@the-/eslint-config-standard-jsx 是一款功能强大的 ESLint 配置文件，它集成了 eslint-config-airbnb 和 eslint-config-prettier 的优点，可以帮助我们更好的编写代码。通过学习本文，你已经掌握了如何安装和使用 @the-/eslint-config-standard-jsx，希望能对你在前端开发中提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/191077