为了提高前端代码的质量和效率，我们常常使用 eslint 工具来检查和修复代码中的错误和风格问题。而 eslint-config-handsome 是一个开源的 npm 包，它是基于 eslint 的一套代码规范配置，可以帮助我们更好地控制代码质量和规范。
安装
我们可以通过 npm 安装 eslint-config-handsome，步骤如下：
--- ------- ---------------------- ----------
安装之后，我们需要在 .eslintrc.js 文件中添加如下配置：
- ---------- ------------------------ -
这样，我们就可以使用美观的代码规范了。
配置
通过配置样式表、认知级别以及开启/关闭选项等，可以自定义 eslint-config-handsome 的配置。
样式表
我们可以通过修改样式表来自定义 eslint-config-handsome 的代码规范配置。只需在 .eslintrc.js 中设置 "extends" 属性，指定 eslint-config-handsome 的路径，然后在 .eslintrc.js 中添加覆盖已有规则或添加新规则的内容。
举个例子：
- ---------- -------------------------- ------------------------------ -
这个例子中，我们在 "extends" 中使用了数组而不是字符串，因为除了 eslint-config-handsome 外，它还指定了我们自定义的规则文件的路径。
在 custom-rules/.eslintrc.js 文件中，可以定义自定义配置。举个例子，我们可以禁用掉 eslint-config-handsome 中的某些规则：
-
-------- -
--------- ------
------------- -----
-
-认知级别
根据个人喜好和团队要求，我们可能需要设置不同的认知级别。eslint-config-handsome 支持 easy、medium 和 hard 三种不同的认知级别。默认情况下，它使用了 medium 级别。
我们可以在 .eslintrc.js 中设置 "rulesDirectory" 属性来指定规则的目录和认知级别。默认情况下，rulesDirectory 是 'eslint-config-handsome'。
举个例子：
- ---------- ------------------------- ----------------- ------------------------------------- -
这个例子中，我们指定了认知级别为 hard。
开启/关闭选项
我们可以通过在 .eslintrc.js 文件中手动打开或关闭选项，来修改 eslint-config-handsome 的配置。举个例子，我们可以关闭 no-plusplus 规则：
-
-------- -
-------------- -----
-
-示例代码
我们可以使用 eslint-config-handsome 来规范我们的代码，举一个简单的示例：
-- ------------ - ---------- ------------------------ -
警告：在 ESLint 5.3.0 发布前，框架诸如 React 和 Vue 的编译将会关闭 no-unused-vars 等等规则。如果有这样的问题，请升级 ESLint。
总之，eslint-config-handsome 是一个功能强大的 npm 包，它可以帮助我们轻松地规范和优化前端代码。我们可以根据我们的实际情况对其进行适当地配置，来获得最佳的效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/71946