npm 包 eslint-config-link 使用教程-JavaScript中文网-JavaScript教程资源分享门户

如果你是一个前端开发人员，那么你一定知道 ESLint——一种用于代码检查和错误检测的 JavaScript 工具。利用 ESLint 能够有效地确保代码质量和减少错误，然而，为了使其更有效，您可能需要使用一些配置。

这就是为什么有一些像 eslint-config-link 这样的包存在。这个 npm 包是由 Link 前端团队创建的，目的是为了使开发工作更加高效，同时提高代码质量。该配置包偏向于单页面应用程序，对于 React 和 Vue 框架都有支持。

在本篇文章中，我们将介绍如何在项目中使用 eslint-config-link，并深入了解它的创建方式以及基本约定。

安装 eslint-config-link

首先，您需要先在项目中安装 eslint 和 eslint-config-link。

在终端中输入以下代码：

npm install eslint eslint-config-link --save-dev

或者，您也可以使用 Yarn，像这样：

yarn add eslint eslint-config-link --dev

接下来，为了加载 eslint-config-link，您需要在您的 .eslintrc 文件中添加以下内容：

{
  "extends": ["eslint-config-link"]
}

这样就可以开始使用 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，您可以使用以下语法：

// eslint-disable-next-line
your code

使用此声明将会暂时关闭本行代码的语法检查。

自动修复

在项目中的 package.json 文件中使用以下代码可以对错误的部分自动修复：

{
  "scripts": {
    "lint": "eslint --fix \"src/**/*.js\""
  }
}

在 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