前言
在前端开发中，代码规范是非常重要的一环。为了让代码更加规范、易于维护，我们可以使用静态代码分析工具 eslint。eslint 工具的优势在于可扩展性强，支持多种不同的配置，因此能够满足不同的项目需求。
在市面上常用的 eslint 配置包有 eslint-config-standard、eslint-config-airbnb 等。本文将介绍另一款优秀的 eslint 配置包——eslint-config-kankan。
简介
eslint-config-kankan 是一个遵循 kankan 前端团队代码规范的 eslint 配置包。通过使用该包，我们可以方便地使用团队的代码规范进行开发。
如何使用
安装
在使用 eslint-config-kankan 之前，我们需要先安装一些依赖，包括 eslint、babel-eslint、eslint-plugin-import 和 eslint-plugin-react。
npm install eslint babel-eslint eslint-plugin-import eslint-plugin-react --save-dev npm install eslint-config-kankan --save-dev
配置
在安装完依赖之后，我们需要配置 .eslintrc.js 文件。具体配置如下：
-- -------------------- ---- -------
-------------- - -
-------- -----------
-------------- - -- ----- --------------
------------- -
---- -----
--
--
---- -
-------- -----
----- -----
---- -----
--
------ -
-- ----------------
--
--例子
接下来我们将介绍一个例子，来展示 eslint-config-kankan 的具体使用方法。假设我们有一个 index.js 文件：
const foo = {};
foo.bar = 'hello';
if (foo.baz) {
console.log(foo.baz);
}根据 eslint-config-kankan 的规范，在该文件中会有两个错误：
semi一行结尾必须加分号no-unused-vars不允许声明变量但未使用
通过配置 eslint 的 .eslintrc.js 文件，我们可以让 eslint 自动检测这两个错误。
-- -------------------- ---- -------
-------------- - -
-------- -----------
-------------- -
------------ -----
----------- ---------
------------- -
---- -----
--
--
---- -
-------- -----
----- -----
---- -----
--
------ -
------------- --
--
--在命令行运行 eslint index.js 后，输出结果如下：
index.js 2:1 error Missing semicolon semi 4:6 error 'foo.baz' is not defined no-undef 5:1 error 'console' is not defined no-console ✖ 3 problems (3 errors, 0 warnings)
由上可见，eslint 成功检测到了我们的错误。
结论
使用 eslint-config-kankan 可以让我们更加方便地使用和遵守团队的代码规范，避免了一些低级错误，提高了代码的可维护性。虽然在使用过程中可能需要根据具体需求进行一些配置修改，然而 eslint 可扩展性的好处仍然是显著的。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557a781e8991b448d4ac7