山维空间

标签： eslint-plugin-sonarjs

  • 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 加到我所有个人项目中。