前言
作为前端开发者，代码风格的统一非常重要，而 ESLint 是一款非常好用的代码规范工具。在这篇文章中，我们将介绍如何使用 npm 包 eslint-config-dxcli 来定义我们的 ESLint 规则。
什么是 eslint-config-dxcli？
eslint-config-dxcli 是一个基于 eslint 的规则包，属于 dxcli 团队的一个开源的 npm 包，主要针对于前端代码开发的规范进行了定义，并且包含了许多常用的插件和配置，使得我们只需要进行简单的配置就能达到标准化的代码风格。
安装
在使用 eslint-config-dxcli 前，需要先安装 eslint，可以使用以下命令行进行安装：
npm i eslint -D
接着，安装 eslint-config-dxcli：
npm i eslint-config-dxcli -D
配置
安装好 eslint 和 eslint-config-dxcli 后，我们需要针对不同的项目进行不同的配置。eslint 配置文件的命名必须是 .eslintrc.js，同时也必须满足 CommonJS 模块导出的规范。
我们在项目根目录下新建 .eslintrc.js 文件，其内容如下：
module.exports = {
extends: 'eslint-config-dxcli',
rules: {
// 这里放你自己的规则配置
}
}这里使用了 extends 属性将 eslint 配置继承自 eslint-cofnig-dxcli，这样就可以使用了 eslint-config-dxcli 提供的规则。
规则
下面是 eslint-config-dxcli 预先定义好的规则：
-- -------------------- ---- -------
-------------- - -
-------- -
---------------------
---------------------------
---------------------------------
----------------------------------------
------------------------------
------------------------------
--
-------- --------------- ----------------------
---- -
-------- -----
---- -----
--
-------- -
---- -----
--
------ -
-- --
------- --------- -- - ----------- - ---
-- --
------- --------- --------- - ------------ ---- ---
-- --
----- --------- ---------
-- ------------
--------------- --------- ---------
-- ------
-------------------------- --------- --------------
-- ------
------------------ --------- --------
-- --- --
---------------------- --------
-- --- ----- ----- --------
--------------------- ------
-- --- -------------------- --- --------
--------------------------------- ------
-- --------
--------------------------------------------------- ------
-- --- -------
------------------------------------- ------
-- ----
------------------------------------------- --------- ----------
-- ------
------------------------------- --------- - ----------- ------- ---
-- -------
---------------------------------------------------- ------
--
-如果上述的规则不能满足你们的需求，你可以在 rules 属性中继续自定义你的规则。
示例代码
我们编写一段代码，使用 eslint 来验证其规范性：
-- -------------------- ---- -------
----- --- - --- -- -- -
--------------
------ - - -
-
----- --- - -
----- ---- -
------------- -
---------- - -
------ --
-
-
------------------- -
---------------
------ --
--
-
-上述代码中，缺少了变量声明的类型，缺少了分号，缩进也不规范。为了验证我们的配置是否生效，我们提前修改以下文件：
package.json
+ "eslintConfig": {
+ "extends": "eslint-config-dxcli"
+ },通过上述修改，我们就将 eslintConfig 指向了 eslint-config-dxcli，启用了 eslint-config-dxcli 中定义的规则。
运行以下命令：
eslint .
输出以下内容：
1:7 error Missing return type on function @typescript-eslint/explicit-function-return-type ✖ 1 problem (1 error, 0 warnings)
可以看到，ESLint 标记了我们缺少函数的类型声明。errMsg
我们稍微调整下代码：
-- -------------------- ---- -------
----- --- - --- ------- -- -------- ------ -- -
--------------
------ - - -
-
----- --- - --
----- ---- -
----- - -
------ --
-
------------------- -
---------------
------ --
--
-
-在我们为函数参数添加类型声明以及加入缺失的分号后，再次运行 eslint 命令，就不会有任何输出，说明我们的配置已经生效了。
结论
eslt-config-dxcli 是一个非常实用的 eslint 配置包，提供了许多前端项目开发中的基础规则以及插件，使我们能够快速地规范开发流程。同时，我们也可以通过自己的定义对现有的规则进行适当的修改和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/eslint-config-dxcli