使用SonarQube扫描JavaScript代码的完整示例

作者:纸飞机时间:2026-10-22 19:52:58浏览:220

本文详细介绍如何使用SonarQube和sonar-scanner对JavaScript代码进行质量扫描。通过搭建SonarQube服务、配置sonar-project.properties文件以及执行扫描命令,展示从环境准备到查看代码质量报告的全过程,帮助开发者快速掌握静态代码分析工具的使用。

SonarQube JavaScript代码扫描示例

利用SonarQube对JavaScript代码进行扫描以分析代码质量,最便捷的方式是直接采用SonarQube中默认的sonar-way JavaScript规则,并配合sonar-scanner工具执行扫描。本文将通过一个最简化的实例来演示这一过程。

事前准备

事前准备

SonarQube环境搭建

SonarQube

SonarQube支持通过Docker版本快速搭建,可参考Easypack整理的镜像文档。具体使用细节可参见相关链接,此处不再赘述:

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

环境假定

环境假定

本文示例中使用的SonarQube服务在本机可通过端口32003访问,其版本号为5.6.5。

sonar-scanner工具

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源码示例

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配置

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 JavaScript代码扫描示例

详细代码级别的扫描结果展示

SonarQube JavaScript代码扫描示例

总结

总结

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对本站的支持。如果你想了解更多相关内容请查看下面相关链接

作者最新文章