← 返回首页

把 JS/TS 项目接入 Sonarqube

Sonarqube 的 Java 文档很多，JS/TS 这边要自己摸索。

发布 2019年3月07日 标签 #javascript #tooling #qa

~/posts/sonarqube-javascript $ cat post.md

/ 语言 EN / 中文
/ 主题 / /

缘起

Sonarqube 的文档对 Java 友好，对其它语言就一般。如果团队以 Java 为主，你大概率会被这件事坑——某天上面让你把 JS 项目也接进去算 Code Smell，你会发现网上能找到的资料和文档都不是太够用。这篇假设你已经知道 Sonarqube 是什么、用来做什么，结合一些网上的基础博客，帮你把 JS / TS 项目挂到 Sonarqube 上。

背景

  • 在 Java 之外的语言上，Sonarqube 不能自己跑测试。需要你在本地把测试跑一遍，再把覆盖率文件和源码一起上传。
  • Docker 基础版本镜像虽然主要服务一种语言，但里面也带了多种语言的配置。其它语言的支持比不上 Java，但有总比没有强。
  • Sonarqube 只认一种测试覆盖率文件——lcov.info。这个格式不算常见，下面会说怎么生成。
  • 上传构建包不需要密码，本地和 CI 都不用——只要 Sonarqube 的地址。也是一个把它放在内网的理由。

流程

服务器配好之后开始配置项目。JS 的配置略繁琐，用第三方小包来跑能省事。说实话这些第三方包做的事和你自己写脚本调 sonar-scanner 差不多，但 Java 那套控制台应用可以从 maven 里拿版本号、依赖、测试结果之类的信息，JS 这边需要单独配——这意味着你要维护两份版本文件，不合理。

有人会说：“我从 package.json 自己读版本号不就行了吗？“——这种事其实就是和包做的一样的活，重复造轮子。

用一个现成的：

yarn add --dev sonarqube-scanner

用法：

import * as Sonar from "sonarqube-scanner";

Sonar({
    options: {
        // ...
    },
    serverUrl: "https://sonarqube.dev.something.com/",
}, () => done());

下面只说 options 里需要填什么。

项目的基础信息（title、description、version 等等）package.json 里都有，但有一些不符合 Java 的命名习惯需要覆盖。比如项目名——JS 包受 npm 影响倾向 @org/project 的形式，里面的特殊字符 Sonarqube 不接受，要改成 org-project 的形式：

options: {
    ...other,
    "sonar.projectKey": "org-project",
}

接下来配源文件和覆盖率：Sonarqube 不区分测试文件和源文件，也不会帮你跑测试。需要上传的是 src 下所有源码 + coverage/lcov.info。lcov 文件很容易生成，无论是 nyc、jest 还是 istanbul，都自带生成对应格式的方式，不用额外装包。

options: {
    ...other,
    "sonar.inclusions": "src/**,coverage/lcov.info",
    "sonar.javascript.lcov.reportPaths": "coverage/lcov.info",
    "sonar.typescript.lcov.reportPaths": "coverage/lcov.info",
}

理论上只用 inclusions 就够了，但同时声明 exclusions 能让配置看起来更清楚（和 tsconfig.json 里一样）：

options: {
    ...other,
    "sonar.exclusions": "node_modules/**,dist/**,.cache/**,infrastructure/**",
}

这样就可以跑了。

← 返回首页