持续集成 - 代码质量扫描

查看更多文章: https://alili.tech

为了方便管理公司的代码质量,让代码质量扫描跟持续集成结合到一起是重要的一步.
目前公司比较年轻,但是在短短的一年时间里,也有了接近300个前端项目.

这么多的前端项目,我们如何保证代码质量就成了一个很重要的事情.

代码项目太多,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的安装,网上有很多教程请自行搜索.

1. 在执行runner的机器上安装 sonar-scanner

npm i sonar-scanner -g

2. 利用自研的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来分析项目的重复率.并且输出友好的报告.

1. 安装jscpd

npm install jscpd -g

2. 利用自研的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/');
    }

最后将页面报告部署到静态服务器,拿到页面地址后用企业聊天工具推送到指定的人跟群就好了.

尾巴

我这里只提供大概的思路,这两个工具还有很多玩法,这里就不过多介绍了.有兴趣的朋友可以自行搜索.

今天就到这里

---

公众号“ Alili丶前端大爆炸”，关注后提供海量学习资料