MIC前端代码检测工具介绍

代码质量问题！一个老生常谈的话题。在过去的两年中，我们的前端工程师一直在用Sonar做代码检测，这个开源工具应用面很广，JAVAer比较熟悉，很多团队用其搭建代码质量管理平台。我们也通过它提供的JavaScript，CSS校验插件来进行代码质量管理，及开发版本的Code Review。但是我们知道前端技术栈更新较快，ES规范不间断的更新，开发框架每年都有新技术诞生，且语法灵活。而Sonar的插件更新非常缓慢，并且针对Vue, React, SASS都没有很全面的校验规范。目前已经无法胜任我们的需求，为此我们决定重新搭建代码检测平台! 这也是本文要介绍的工具：miclint

1

什么是miclint

简单来说就是eslint, stylelint, jscpd三个工具的集合，所以我们需要先简单知道这三个工具的用途。

eslint: 是一个开源的、可配置、可扩展的JavaScript代码审查工具

stylelint: 是一个针对CSS / SCSS / LESS的代码审查工具。基于JavaScript，所以比起Ruby开发的scss-lint速度更快

jscpd: 检测代码重复率，其重复率判定依据为一定长度标识符的MD5值是否相同，支持文件格式广泛，如java、oc、js、jsx、vue、ts、less等

jsinspect： 检测代码重复率，判定依据为抽象语法树，可以检测出结构类似的代码块，支持js和jsx格式的文件

2

miclint能做什么

miclint是基于命令行式工具，通过交互式命令帮助开发者在项目中搭建代码检测平台。并提供以下：

简易可视化项目配置

针对MIC业务特点定制化

提供全局的代码规范准则（NPM包单独管理）

邮件通知服务

生成代码报告进行Code Review

3

miclint结构图

4

安装&命令

NPM:

https://www.npmjs.com/package/focus-mic-lint

全局安装:

npm i focus-mic-lint -g

本地安装:

cd 项目路径

npm i focus-mic-lint -D

常用命令:

> miclint -V

0.0.8

> miclint -h

Usage:

miclint [options] [command]

Options:

-V, --version output the version number

-h, --help output usage information

Commands:

init 初始化miclint工具

report 用来生成命令行报告，后期会生成html文件，方便review

run [options] 运行miclint代码检查程序，并生成命令行报告(-e:邮件方式发送)

email 生成HTML报告，并发送给所有开发者

5

使用步骤

1

在项目根目录中初始化工具，并根据提示完成配置

2

运行 “npm i”安装相关依赖

3

运行 “miclint run” 开始生成代码检测报告

4

配合安装编辑器插件（eslint, stylelint, jscpd）可以开发中实时提示（以vscode为例）

6

MIC全局代码规则

为了防止全局变量的滥用，我们针对MIC公用组件做了全局处理，但是仍然建议在之后的业务开发中，禁止全局组件的滥用和覆盖。

目前FE团队制定的前端代码规则列表清单，已经放置在如下两个NPM包中，具体代码在UED Git中可找到，后期可根据实际使用情况，不断更新和完善代码规则。

eslint-config

https://www.npmjs.com/package/eslint-config-micued

stylelint-config

https://www.npmjs.com/package/stylelint-config-micued

7

参考文献

更多资料

1

eslint: https://eslint.org/

2

stylelint: https://stylelint.io/

3

jscpd: https://github.com/kucherenko/jscpd