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

在前端开发中，代码的规范性是十分重要的，不仅能增加代码的可维护性，还能减少代码出错的机率。而 eslint 作为一个静态代码分析工具，可以很好地帮助我们规范化我们的代码，并及时发现代码潜在的问题。本文主要介绍 @transferwise/eslint-config 这个 npm 包的用法。

安装

使用 npm 安装：

npm install --save-dev @transferwise/eslint-config

安装好后，需要在项目中使用。这里我们以 React 项目为例，先安装 eslint 和 eslint-plugin-react：

npm install --save-dev eslint eslint-plugin-react

在项目根目录下 .eslintrc.js 文件中添加以下配置：

-- -------------------- ---- -------
-------------- - -
  -------- ------------------
  -------- ----------
  ------ -
    -- ------
  --
  --------- -
    ------ -
      -------- --------
    -
  -
-

其中，extends: ["@transferwise"] 表示继承于 @transferwise/eslint-config 的规则集。在 rules 中可以添加自定义规则。settings 中可以配置项目中使用的 React 版本。

配置

@transferwise/eslint-config 在规范代码的同时，也考虑了团队协作的情况，对代码规范进行了多方面的综合考虑。例如，让代码保持一致性，避免团队成员之间开发风格的不同。

下面，我们简单介绍一些该规则集中的常见配置：

tabs or spaces

该配置项是用来约束制表符/tab 和空格/space 的使用。默认情况下，该配置项的取值为 2，代表使用 2 个空格进行缩进。配置项的取值可以为数字，也可以为 "tab" 或 "space"。例如：

"indent": ["error", 2]     // 使用 2 个空格进行缩进
"indent": ["error", "tab"] // 使用 tab 进行缩进

import/order

该配置项用来规范项目中的 import 语句。具体包括以下几个配置：

import/no-named-as-default: 禁止将默认导出用作命名空间，以避免意外使用未导出的内容。
import/first: import 语句应该在其他语句之前，以提高代码可读性。
import/exports-last: 确保导出始终在文件的最后。
import/order: 按一些规则对导入项进行排序（例如，将 react 组件和其它模块分开）。

jsx-a11y

该配置项是用来规范 React 中 accessibility 的配置。特别是针对于盲人访问网站等特殊群体进行支持，以及使得网站符合 Web Content Accessibility Guidelines（Web 内容可访问性准则）。包括以下几个配置：

jsx-a11y/alt-text: 要求 <img>、<area> 和 <input> 具有 alt 属性。
jsx-a11y/click-events-have-key-events: 需要鼠标事件（onClick）与键盘事件（onKeyDown）同时存在。
jsx-a11y/label-has-for: label 标签必须存在或者使用 htmlFor 属性与 id 匹配。
jsx-a11y/media-has-caption: 有规定的媒体（比如 <video> 和 <audio> 标签）必须包含说明文字、描述文字，除非这些媒体文件不包含音频内容。

以上只是几个常见的配置，更多规则配置请查看官方文档。

总结

通过 @transferwise/eslint-config 包的使用，我们可以很方便地保证项目代码的规范性，并减少团队成员之间的不协调之类的情况。同时，我们也可以根据项目的实际情况进行拓展、修改规则。通过 eslint 生成的警告，我们还能够及时发现出现的问题并及时修复，提高代码的可靠性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5eff1337403f2923b035bc1a