在前端开发项目中，代码质量一直是重中之重。为了统一团队代码风格，提高代码可读性和可维护性，我们通常会使用代码检查工具，其中一个非常流行的工具就是 ESLint。而要配置 ESLint 的规则，通常需要用到一些扩展包，其中一个比较常用的是 eslint-config-managesocial-base。
简介
eslint-config-managesocial-base 是一个 Managesocial 团队封装的 eslint 配置扩展包，其中包含了 Managesocial 团队通用的代码规范，如代码缩进、变量命名、代码注释等等。
安装
在项目根目录下，使用 npm 进行安装：
npm install eslint eslint-config-managesocial-base --save-dev
使用
在项目根目录下，新建一个 .eslintrc.yml 文件，并进行如下配置：
extends: managesocial-base rules: # 在这里添加或修改规则
修改 package.json 文件，添加如下脚本：
{
"scripts": {
"lint": "eslint --ext .js,.vue,.ts src/"
}
}现在，我们就可以使用 npm run lint 进行代码检测了。
示例代码
以 Vue.js 项目为例，假设我们有如下的代码：
-- -------------------- ---- -------
----------
-----
------ ----- -------
-- ----------------- ------- ------
------- ---------------------- -----------
------
-----------
--------
------ ------- -
------ -
------ -
------ ------- --------
-------- ---
--
--
-------- -
--------- -
------------- ---------
--
--
--
---------如果我们运行 npm run lint，会看到如下输出：
ERROR: Unexpected tab character at 3:2 vue/html-indent ERROR: Expected indentation of 2 spaces but found 4 vue/script-indent WARNING: Missing return type on function @typescript-eslint/explicit-module-boundary-types
这就是 eslint 检测我们代码时发现的问题：
- 第一行代码缩进使用了 TAB 键，而不是四个空格；
<script>标签的代码缩进为四个空格，与 ESLint 配置不符；onClick方法缺少返回类型注释。
如果我们对这些问题进行修复，会得到如下代码：
-- -------------------- ---- -------
----------
-----
------ ----- -------
-- ----------------- ------- ------
------- ---------------------- -----------
------
-----------
--------
------ ------- -
------- - ------ ------- -------- ------ - -
------ -
------ ------- --------
-------- ---
--
--
-------- -
---------- ---- -
------------- ---------
--
--
--
---------现在运行 npm run lint，将不会有任何输出，说明我们的代码符合了 Managesocial 团队的代码规范。
总结
通过本文，我们学习了使用 eslint-config-managesocial-base 配置 ESLint，使我们可以使用 Managesocial 团队的代码规范对项目进行规范化管理。通过良好的代码规范，可以提高团队合作效率，减少代码维护成本，是开发人员必须具备的基本技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d2f81e8991b448daec9