使用Sonarqube扫描Javascript代码

使用sonarqube对javascript代码进行扫描,分析代码质量,最简单的方式莫过于使用缺省的sonar-way中的javascript的规则,使用sonar-scanner进行扫描,这篇文章通过最简单的例子,来进行说明。

事前准备

Sonarqube

Sonarqube可以使用docker版本快速搭建,可以参看一下Easypack整理的镜像,具体使用可以参看如下链接,这里不再赘述:

https://hub.docker.com/r/liumiaocn/sonarqube/

环境假定

本文使用到的sonarqube为本机32003可以访问到的服务。版本为5.6.5

sonar-scanner

sonar-scanner详细信息如下:

liumiaocn:sonar liumiao$ sonar-scanner -v
INFO: Scanner configuration file: /Users/liumiao/Desktop/sonar/sonar-scanner-3.2.0.1227-macosx/conf/sonar-scanner.properties
INFO: Project root configuration file: /Users/liumiao/sonar/sonar-project.properties
INFO: SonarQube Scanner 3.2.0.1227
INFO: Java 1.8.0_121 Oracle Corporation (64-bit)
INFO: Mac OS X 10.14 x86_64
liumiaocn:sonar liumiao$ 

项目目录构成

项目文件与目录构成信息如下:

liumiaocn:sonar liumiao$ tree
.
├── sonar-project.properties
└── src
    └── Person.js

1 directory, 2 files
liumiaocn:sonar liumiao$

JavaScript源码

使用如下Person.js的JavaScript源码,详细信息如下

liumiaocn:sonar liumiao$ cat src/Person.js 
var Person = function(first, last, middle) {
    this.first = first;
    this.middle = middle;
    this.last = last;
};

Person.prototype = {

    whoAreYou : function() {
        return this.first + (this.middle ? ' ' + this.middle: '') + ' ' + this.last;
    }

};

var a = NaN;

if (a === NaN) {  // Noncompliant; always false
  console.log("a is not a number");  // this is dead code
}
if (a !== NaN) { // Noncompliant; always true
  console.log("a is not NaN"); // this statement is not necessarily true
}

for (var i = 0; i < strings.length; i--) {
  console.log("dead code")
}

if (str == null && str.length == 0) {
  console.log("String is empty");
}
liumiaocn:sonar liumiao$

sonar-project.properties设定文件

项目设定文件信息详细如下:

liumiaocn:sonar liumiao$ cat sonar-project.properties 
sonar.projectKey=javascript-prj
sonar.projectName=JavaScript Demo Project
sonar.projectVersion=1.0
sonar.sources=src
sonar.host.url=http://127.0.0.1:32003
sonar.login=admin
sonar.password=admin
liumiaocn:sonar liumiao$

执行sonar-scanner

liumiaocn:sonar liumiao$ pwd
/Users/liumiao/sonar
liumiaocn:sonar liumiao$ ls
sonar-project.properties src
liumiaocn:sonar liumiao$ sonar-scanner
INFO: Scanner configuration file: /Users/liumiao/Desktop/sonar/sonar-scanner-3.2.0.1227-macosx/conf/sonar-scanner.properties
INFO: Project root configuration file: /Users/liumiao/sonar/sonar-project.properties
INFO: SonarQube Scanner 3.2.0.1227
INFO: Java 1.8.0_121 Oracle Corporation (64-bit)
INFO: Mac OS X 10.14 x86_64
INFO: User cache: /Users/liumiao/.sonar/cache
INFO: SonarQube server 5.6.5
INFO: Default locale: "en_US", source code encoding: "UTF-8" (analysis is platform dependent)
INFO: Load global repositories
INFO: Load global repositories (done) | time=129ms
INFO: User cache: /Users/liumiao/.sonar/cache
INFO: Load plugins index
INFO: Load plugins index (done) | time=3ms
INFO: Process project properties
INFO: Load project repositories
INFO: Load project repositories (done) | time=126ms
INFO: Load quality profiles
INFO: Load quality profiles (done) | time=41ms
INFO: Load active rules
INFO: Load active rules (done) | time=609ms
WARN: SCM provider autodetection failed. No SCM provider claims to support this project. Please use sonar.scm.provider to define SCM of your project.
INFO: Publish mode
INFO: -------------  Scan JavaScript Demo Project
INFO: Load server rules
INFO: Load server rules (done) | time=73ms
INFO: Base dir: /Users/liumiao/sonar
INFO: Working dir: /Users/liumiao/sonar/.scannerwork
INFO: Source paths: src
INFO: Source encoding: UTF-8, default locale: en_US
INFO: Index files
INFO: 1 files indexed
INFO: Quality profile for js: Sonar way
INFO: JaCoCoSensor: JaCoCo report not found : /Users/liumiao/sonar/target/jacoco.exec
INFO: JaCoCoItSensor: JaCoCo IT report not found: /Users/liumiao/sonar/target/jacoco-it.exec
INFO: Sensor Lines Sensor
INFO: Sensor Lines Sensor (done) | time=11ms
INFO: Sensor JavaScriptSquidSensor
INFO: 1 source files to be analyzed
INFO: Sensor JavaScriptSquidSensor (done) | time=200ms
INFO: 1/1 source files have been analyzed
INFO: Sensor SCM Sensor
INFO: No SCM system was detected. You can use the 'sonar.scm.provider' property to explicitly specify it.
INFO: Sensor SCM Sensor (done) | time=0ms
INFO: Sensor org.sonar.plugins.javascript.lcov.UTCoverageSensor
INFO: Sensor org.sonar.plugins.javascript.lcov.UTCoverageSensor (done) | time=0ms
INFO: Sensor org.sonar.plugins.javascript.lcov.ITCoverageSensor
INFO: Sensor org.sonar.plugins.javascript.lcov.ITCoverageSensor (done) | time=0ms
INFO: Sensor Zero Coverage Sensor
INFO: Sensor Zero Coverage Sensor (done) | time=7ms
INFO: Sensor Code Colorizer Sensor
INFO: Sensor Code Colorizer Sensor (done) | time=0ms
INFO: Sensor CPD Block Indexer
INFO: DefaultCpdBlockIndexer is used for js
INFO: Sensor CPD Block Indexer (done) | time=20ms
INFO: Calculating CPD for 1 files
INFO: CPD calculation finished
INFO: Analysis report generated in 53ms, dir size=13 KB
INFO: Analysis reports compressed in 17ms, zip size=6 KB
INFO: Analysis report uploaded in 29ms
INFO: ANALYSIS SUCCESSFUL, you can browse http://127.0.0.1:32003/dashboard/index/javascript-prj
INFO: Note that you will be able to access the updated dashboard once the server has processed the submitted analysis report
INFO: More about the report processing at http://127.0.0.1:32003/api/ce/task?id=AWcNw2JuTV5bsL-6UV7v
INFO: ------------------------------------------------------------------------
INFO: EXECUTION SUCCESS
INFO: ------------------------------------------------------------------------
INFO: Total time: 3.719s
INFO: Final Memory: 19M/278M
INFO: ------------------------------------------------------------------------
liumiaocn:sonar liumiao$ 

确认结果

代码扫描整体结果
在这里插入图片描述

详细代码级别的扫描结果展示
在这里插入图片描述

### 使用SonarQube扫描项目以检测代码的注释覆盖率 #### 配置环境 为了确保SonarQube能够正常工作并准确报告注释覆盖率,需确认安装了适当版本的Java Development Kit (JDK)[^1]。对于SonarQube 9.8及以上版本,建议使用JDK 11或更高版本。 #### 安装与配置SonarScanner 要使SonarQube能识别项目的注释情况,通常需要通过SonarScanner来提交待测代码SonarQube服务器进行分析。可以通过Maven、Gradle插件或是独立下载SonarScanner CLI工具来进行设置[^2]。 #### 设置Vue.js前端项目中的`sonar-project.properties` 针对基于Vue框架构建的应用程序,在根目录下创建名为`sonar-project.properties`的文件,并加入如下配置项: ```properties # 必填参数:定义项目键名 sonar.projectKey=my_vue_app_key # 可选参数:指定项目名称,默认同key相同 sonar.projectName=My Vue Application # 必填参数:指明源码路径;多个路径间用逗号分隔 sonar.sources=src/ # 启用JavaScript规则集 sonar.javascript.lcov.reportPaths=coverage/lcov.info # 对于Vue单文件组件的支持 sonar.web.typescript.enabled=true sonar.vue.enableJsx=true ``` 上述配置允许SonarQube理解Vue特有的`.vue`文件结构以及其中嵌入的语言特性。 #### 运行测试获取覆盖数据 在执行实际的静态分析之前,应该先运行单元测试套件收集必要的覆盖率统计数据。这一步骤产生的LCOV信息会被用来增强最终的质量评估结果。对于采用Karma作为测试驱动器的情况,可以添加相应的 reporter 插件生成兼容格式的结果文件。 #### 发起SonarQube扫描请求 一旦准备就绪,就可以利用命令行发起一次完整的扫描操作: ```bash sonar-scanner ``` 此指令将会触发一系列动作,包括但不限于上传源代码至远程服务端实例、启动背景作业处理任务直至完成整个流程。期间可能会经历短暂延迟直到所有步骤都顺利结束。 #### 查看结果 当一切完毕之后,打开浏览器访问部署有SonarQube的服务地址(通常是http://localhost:9000),登录后导航到对应应用页面即可浏览详细的统计图表和违规事项列表。特别关注“Reliability Rating”下的“Comment Lines Density”,该指标反映了当前工程内有效注解的比例水平。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值