分类
js

SonarQube + SonarJS 体验笔记

试用了一下 SonarSource 开发的代码质量静态分析工具,记录一些过程和体验。

SonarQube

SonarQube 是 SonarSource 开发的代码质量静态分析工具,有四个不同的收费级别,分别是:

  1. 社区版(免费)
  2. 开发者版(个人版)
  3. 企业版
  4. 数据中心版

很自然我会选择社区版来体验。社区版支持 15 种语言,包括我们前端要用到的 CSS、HTML、JS、TS,以及衍生出来的 React、Vue。基本上就够我们用了。社区版支持自主部署,后面三个付费版基本上对主要功能(代码质量静态分析)没有变化,只是增加语言类型、代码行数和并发,属于企业级需求,可以说对商业相当友好,起步完全免费。

安装和使用

官方提供安装文档:Install the Server | SonarQube Docs

安装后,可以使用 SonarScanner 对代码仓库进行扫描,并将结果上传到 SonarCube 实例上,以供查看。

分析结果很全面,包含可靠性、安全性、可维护性、覆盖率、重复性、复杂度等等。用他们自己的话说,SonarJS “可能”是最好的静态分析工具,此言非虚。

SonarJS

从 SonarQube 的安装文档可以看出,一套完整 Qube 产品由三个部分组成:

  1. 数据库,用来存储数据
  2. Web 服务器,用来提供我们查阅的界面
  3. 各种 scanner,用来扫描项目

SonarJS 就是其中之一,可以单独使用。不过我没仔细研究。

eslint-plugin-sonarjs

我们还可以把 sonarjs 整合到现有开发流程当中,通过添加 eslint-plugin-sonarjs 插件。

(小小吐个槽,作为质量管理工具,eslint-plugin-sonarjs 上来就往我的项目中添加了 33 个威胁,其中 11 个中等威胁, 22 个高等威胁……)

使用方式比较简单:

  1. npm i eslint-plugin-sonarjs -D 安装插件
  2. 修改配置文件,添加 { plugins: ['sonarjs'] },以及规则集 { extends: ['plugin:sonarjs/recommended'] } 即可
  3. 如果需要启动全部规则,则需要使用 @typescript-eslint/parser。具体的还是看官方文档吧。

不过这个 eslint 插件里的规则似乎并不够多,粗粗一数也就 30 左右,远远少于 SonarJS 号称 240+的规则,可能还是受限于 ESLint 本身吧。可能的话还是要通过 scanner 来做检查。

总结

作为一款免费工具,SonarQube 很是给了我一些惊喜。我准备自己搭一个服务器端,然后把 eslint-plugin-sonarjs 加到我所有个人项目中。