如果你是一个前端开发人员，那么你一定知道 ESLint——一种用于代码检查和错误检测的 JavaScript 工具。利用 ESLint 能够有效地确保代码质量和减少错误，然而，为了使其更有效，您可能需要使用一些配置。
这就是为什么有一些像 eslint-config-link 这样的包存在。这个 npm 包是由 Link 前端团队创建的，目的是为了使开发工作更加高效，同时提高代码质量。该配置包偏向于单页面应用程序，对于 React 和 Vue 框架都有支持。
在本篇文章中，我们将介绍如何在项目中使用 eslint-config-link，并深入了解它的创建方式以及基本约定。
安装 eslint-config-link
首先，您需要先在项目中安装 eslint 和 eslint-config-link。
在终端中输入以下代码：
--- ------- ------ ------------------ ----------
或者，您也可以使用 Yarn，像这样：
---- --- ------ ------------------ -----
接下来，为了加载 eslint-config-link，您需要在您的 .eslintrc 文件中添加以下内容：
- ---------- ---------------------- -
这样就可以开始使用 eslint-config-link 了！
ESLint Rules
ESLint 的 rules 有很多的设定， eslint-config-link 把常用的 rules 集合在一起，并加入了一些 Link 团队自己约定的 rules。那么用 eslint-config-link，都有哪些制定好的 rules 呢？下面是一些常见的 rules 。更完整的文档可以在官方文档中找到。
react / jsx
- react/react-in-jsx-scope —— 确保在 JSX 中使用的变量是通过 React 引入的
- react/jsx-uses-react —— 确保 JSX 标记使用 react 模块
- react/jsx-no-useless-fragment —— 确保不使用无用的 Fragment
- react/jsx-max-depth —— 指定标记嵌套的最大深度
- react/jsx-props-no-spreading —— 禁止 JSX 属性使用扩展运算符
- react-hooks/rules-of-hooks —— Enforce Rules of Hooks，即要求使用 React Hook 函数的规则
js
- no-shadow —— 禁止一个变量与外部作用域中的变量重名
- import/no-unresolved —— 只处理正确解析的路径的 import，路径不能未经显式地解析为现有文件，文件夹或模块(请注意，这是一条非常常见的规则，但是 eslint-config-link 的定义有所不同）
- import/named —— Enforces names exist at the end of named imports
jsx-a11y
- jsx-a11y/label-has-associated-control —— 根据 HTMLFor 属性和相关联的表单控件来关联表单控件和表单标签
- jsx-a11y/no-noninteractive-element-interactions —— 不允许非交互元素具有交互事件监听器（例如 onClick）
- jsx-a11y/no-noninteractive-tabindex —— 不允许添加无意义的 tabindex
引用
- no-unused-vars —— 禁止声明未使用的变量
需要注意的事项
覆盖设置
如果需要在您的项目中覆盖某些规则，您可以在您的项目中覆盖 .eslintrc 中的 extends 属性：
-
---------- -
--------------------
--
-------- -
--------------------------- ------
------------- -----
-
-禁用 lint
如果需要临时禁用 eslint，您可以使用以下语法：
-- ------------------------ ---- ----
使用此声明将会暂时关闭本行代码的语法检查。
自动修复
在项目中的 package.json 文件中使用以下代码可以对错误的部分自动修复：
-
---------- -
------- ------- ----- ----------------
-
-在 IDE 中启用 ESLint
如果您使用的是常用的 IDE，如 VS Code 或 Sublime Text，您可以安装 eslint 插件以获得更好的使用体验。
在 VS Code 中，只需安装 ESLint 插件，然后按照其安装说明进行操作即可。
总结
在本文中，我们已经详细了解了 eslint-config-link 这款 npm 包的使用方法和一些基本规则以及重要注意项。使用 eslint-config-link，你不仅可以保证代码的质量，同时也能掌握其他开发者的约定，也可以输出符合团队习惯的代码。使用这个工具是非常简单的，无论您是使用 React、Vue、Angular 等等，它都可以使你的项目变得更健壮、更可靠。
使用这些 tips 和 tricks，相信您就能轻松地将 eslint-config-link 集成到您的项目中，并受益于 ESLint 的语法检查和代码约定。祝你编码愉快！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600579cf81e8991b448eb38a