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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180425G16NO300?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券