使用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$ 

確認結果

程式碼掃描整體結果

詳細程式碼級別的掃描結果展示