随着前端项目越来越庞大复杂，我们需要在项目中使用一些常用的配置。这些配置可以帮助我们保持代码风格的一致性，提高代码质量，加速开发效率。但是每个项目都需要使用这些配置，会让我们的工作变得复杂冗长。为了解决这个问题，我们可以使用 @ledge/configs 这个 npm 包来管理配置并加速开发。
是什么？
@ledge/configs 是一个前端项目配置约定管理工具。它提供了一组标准的配置项和一些可以覆盖这些配置项的规则，并且规定了这些配置项的命名和用途。你可以在你的项目中使用该 npm 包并按照规范来管理你的项目配置。这样我们不需要大费周折去创建或配置这些配置项，只需要在你的项目中引用这个 npm 包即可。
如何使用？
安装
使用 npm 或 yarn 来安装：
npm install @ledge/configs --save-dev yarn add @ledge/configs --dev
配置
@ledge/configs 提供了一些默认配置，同时还允许你嵌套覆盖这些配置。你需要在你的项目中创造一个配置文件来实现你的配置，该文件需要命名为 config.js。
该文件必须导出一个对象，该对象包含多个配置项。有以下几个针对各种文件类型的默认配置项：
- eslint
- prettier
- stylelint
- editorconfig
- babel
在项目根目录创建一个 config.js 文件：
-- -------------------- ---- -------
-------------- - -
------- -
-------- ----------------------------
--
--------- -
-------- ------------------------------
--
---------- -
-------- -------------------------------
--
------------- -
-------- --------------------------------
--
------ -
-------- ---------------------------
--
--上面的代码表示使用 @ledge/configs 提供的默认配置项覆盖自己的配置。
示例
在一个 Vue 项目中使用 @ledge/configs，只需要在项目的根目录下新建 config.js 文件。
-- -------------------- ---- -------
-------------- - -
------- -
-------- ------------------------------- -------------------------------
------ -
------------- -------------------- --- ------------ - ------- - ------
--
--
--------- -
-------- ------------------------------
--
--这里我们使用了 Vue 的官方 eslint 配置和与它兼容的 Prettier 配置 (对包含 Vue 语法的文件起作用)，并且开启了一些我们需要的规则。
总结
@ledge/configs 与其他工具和框架集成得非常好，并且通过规范化配置项的命名和用途，帮助我们在项目中提高代码的可读性和可维护性。它还提供了很多有用的扩展规则。在我们的项目中使用此 npm 包将会带给我们极大的好处。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb9d5b5cbfe1ea06118b7