试用了一下 SonarSource 开发的代码质量静态分析工具，记录一些过程和体验。
SonarQube
SonarQube 是 SonarSource 开发的代码质量静态分析工具，有四个不同的收费级别，分别是：
- 社区版（免费）
- 开发者版（个人版）
- 企业版
- 数据中心版
很自然我会选择社区版来体验。社区版支持 15 种语言，包括我们前端要用到的 CSS、HTML、JS、TS，以及衍生出来的 React、Vue。基本上就够我们用了。社区版支持自主部署，后面三个付费版基本上对主要功能（代码质量静态分析）没有变化，只是增加语言类型、代码行数和并发，属于企业级需求，可以说对商业相当友好，起步完全免费。
安装和使用
官方提供安装文档：Install the Server | SonarQube Docs。
安装后，可以使用 SonarScanner 对代码仓库进行扫描，并将结果上传到 SonarCube 实例上，以供查看。
分析结果很全面，包含可靠性、安全性、可维护性、覆盖率、重复性、复杂度等等。用他们自己的话说，SonarJS “可能”是最好的静态分析工具，此言非虚。
SonarJS
从 SonarQube 的安装文档可以看出，一套完整 Qube 产品由三个部分组成：
- 数据库，用来存储数据
- Web 服务器，用来提供我们查阅的界面
- 各种 scanner，用来扫描项目
SonarJS 就是其中之一，可以单独使用。不过我没仔细研究。
eslint-plugin-sonarjs
我们还可以把 sonarjs 整合到现有开发流程当中，通过添加 eslint-plugin-sonarjs 插件。
（小小吐个槽，作为质量管理工具，eslint-plugin-sonarjs 上来就往我的项目中添加了 33 个威胁，其中 11 个中等威胁， 22 个高等威胁……）
使用方式比较简单：
npm i eslint-plugin-sonarjs -D安装插件- 修改配置文件，添加
{ plugins: ['sonarjs'] }，以及规则集{ extends: ['plugin:sonarjs/recommended'] }即可 - 如果需要启动全部规则，则需要使用
@typescript-eslint/parser。具体的还是看官方文档吧。
不过这个 eslint 插件里的规则似乎并不够多，粗粗一数也就 30 左右，远远少于 SonarJS 号称 240+的规则，可能还是受限于 ESLint 本身吧。可能的话还是要通过 scanner 来做检查。
总结
作为一款免费工具，SonarQube 很是给了我一些惊喜。我准备自己搭一个服务器端，然后把 eslint-plugin-sonarjs 加到我所有个人项目中。
发表回复