为了方便管理公司的代码质量,让代码质量扫描跟持续集成结合到一起是重要的一步. 目前公司比较年轻,但是在短短的一年多时间里,也有好几百个前端项目.
这么多的前端项目,我们如何保证代码质量就成了一个很重要的事情.
代码项目太多,codereview是必要的.但是人肉codereview不能保证效率. 因为个人水平的差距,与公司规范的熟悉程度.不能保证所有项目的规范一致性. 还有一些潜在的bug也有可能会被漏掉.
我们公司是基于Gitlab CI/CD,所以以下说明是基于Gitlab的方式.但是思路的运用是相通的,有需要的人可以借鉴思路.
修改.gitlab-ci.yml
为了方便每一个项目接入,我们对配置做了很小的改动. 并且每一个项目的配置的修改都是一样的,就是为了方便无脑的复制粘贴.
我们还做了一个cli工具,里面包含代码扫描的一切功能.安装在runner的机器上.
image: node:11.10.0
stages:
- codereview # 添加一个codereview的stage
codereview:
stage: codereview
script:
- cli codereview # cli工具触发codereview
tags:
- fe #runner的tag,根据自己的情况自行修改
cli 触发代码扫描做什么?
执行SonarQube扫描
关于SonarQube的安装,网上有很多教程请自行搜索.
- 在执行runner的机器上安装
sonar-scanner
npm i sonar-scanner -g
- 利用自研的cli工具,在项目根目录生成sonar 扫描的配置文件.
// 获取gitlab 注入ci的环境变量
const {
CI_PROJECT_NAME,
CI_PROJECT_ID,
} = process.env;
// 基于gitlab的项目id生成一个sonar的projectKey
const projectBuffer = Buffer.from('sonar' + CI_PROJECT_ID);
const projectKey = projectBuffer.toString('hex');
// 检测代码目录
// 一般来说 src都是前端项目业务代码的目录
//因为公司的nodejs项目是基于egg框架的,也有可能是app
const existsSrc = fs.existsSync(`${process.cwd()}/src/`);
// sonar配置文件模板
const sonarProject = `
sonar.projectKey=${projectKey}
sonar.projectName=${CI_PROJECT_NAME}
sonar.projectVersion=1.0
sonar.sources=${existsSrc ? 'src' : 'app'}
sonar.binaries=bin
sonar.host.url=http://xxx.你部署sonar的服务地址.com
sonar.login=admin
sonar.password=admin
sonar.sourceEncoding=UTF-8
`;
// 生成一个路径
const sPath = path.resolve(process.cwd(), 'sonar-project.properties');
// 写入sonar的配置
fs.writeFileSync(sPath, sonarProject);
// 执行sonar的代码扫描,并且上传代码质量报告
shelljs.exec('sonar-scanner');
执行jscpd分析代码重复率
尽管sonar已经提供了代码重复率的报告,但是并不是很容易看懂,到底代码哪里重复. 我们使用jscpd来分析项目的重复率.并且输出友好的报告.
- 安装jscpd
npm install jscpd -g
- 利用自研的cli工具,触发jscpd扫描项目
// 检测代码目录
// 一般来说 src都是前端项目业务代码的目录
//因为公司的nodejs项目是基于egg框架的,也有可能是app
const existsSrc = fs.existsSync(`${process.cwd()}/src/`);
// 最后会在根目录输出两个东西
// 一个是页面报告
// 一个是json数据
// 怎么用,就看你自己了
if (existsSrc) {
shelljs.exec('jscpd -r html ./src/');
shelljs.exec('jscpd -r json ./src/');
} else {
shelljs.exec('jscpd -r html ./app/');
shelljs.exec('jscpd -r json ./app/');
}
最后将页面报告部署到静态服务器,拿到页面地址后用企业聊天工具推送到指定的人跟群就好了.
尾巴
我这里只提供大概的思路,这两个工具还有很多玩法,这里就不过多介绍了.有兴趣的朋友可以自行搜索.
今天就到这里
