在前端开发中，代码的规范性是十分重要的，不仅能增加代码的可维护性，还能减少代码出错的机率。而 eslint 作为一个静态代码分析工具，可以很好地帮助我们规范化我们的代码，并及时发现代码潜在的问题。本文主要介绍 @transferwise/eslint-config 这个 npm 包的用法。
安装
使用 npm 安装：
--- ------- ---------- ---------------------------
安装好后，需要在项目中使用。这里我们以 React 项目为例，先安装 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"。例如：
--------- --------- -- -- -- - ------- --------- --------- ------ -- -- --- ----
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