在现代前端开发中，一个好的代码规范非常重要，它可以提升团队协作效率、代码可读性以及可维护性。而 eslint 就是一个很好的代码规范工具，它可以帮助我们规范代码风格并发现潜在的 bug。
虽然 eslint 很强大，但对于新手来说，配置一个属于自己团队的 eslint 配置文件可能需要一些时间与工作量。而 eslint-config-readable 就是一个十分优秀的 eslint 扩展，它内置了许多常见的代码规范设置，可帮助新手快速创建一个通用且可读性强的 eslint 配置文件。
eslint-config-readable 是什么？
eslint-config-readable 是一个基于 eslint 的代码规范配置扩展。它旨在通过提供可读性强且通用的 eslint 配置文件，降低新手配置 eslint 的难度，帮助开发者更加专注于业务开发。
与其他 eslint 扩展不同的是，eslint-config-readable 并不会对 eslint 做出任何改变，而是提供了一套较为完整的代码规范配置，包括一些较为复杂的规则设置，如对于 React 开发的规范设置等。
如何使用 eslint-config-readable？
使用 eslint-config-readable 使用非常简单，只需按以下步骤操作即可。
1. 安装 eslint 与 eslint-config-readable
打开终端，执行以下命令进行 eslint 和 eslint-config-readable 的安装。
# 使用 npm 进行安装 npm i eslint eslint-config-readable -D # 使用 yarn 进行安装 yarn add eslint eslint-config-readable -D
2. 配置 eslint
在项目根目录下创建 .eslintrc.js 文件，并将以下代码添加至文件中：
module.exports = {
extends: 'readable',
};其中 extends 字段指定了使用的 eslint 规范，这里设置为 readable 即使用了 eslint-config-readable 扩展。
3. 完成配置
此时，eslint 的配置已经完成。可以使用以下代码测试一下 eslint 是否工作正常：
const a = 1; console.log(a)
如果 eslint 配置成功，执行 eslint 检测时会出现以下提示信息：
$ npx eslint index.js Error: index.js 1:1 error Missing semicolon semi ✖ 1 problem (1 error, 0 warnings)
如何自定义 eslint-config-readable 配置？
如果默认的 eslint-config-readable 配置并不能满足项目需求，可以通过扩展配置文件来进行自定义设置。
首先，在项目根目录下新建 .eslintrc.js 文件，将以下代码添加至文件中：
module.exports = {
extends: 'readable',
rules: {
// 在这里添加自己的规则配置
},
};需要注意的是，扩展配置文件中的配置将会与 eslint-config-readable 的默认配置进行合并。因此，对于与 eslint-config-readable 相同的规则选项，扩展配置文件中的设置会覆盖默认设置。
总结
eslint-config-readable 是一个非常优秀的 eslint 扩展，它为我们提供了一个通用的、可读性强的 eslint 配置文件，可以极大简化配置 eslint 的难度，提高团队协作效率。同时，对于初学者，它还是一个了解 eslint 和代码规范的良好入门工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56714