用于 Angular 应用的 SonarQube - Javascript

介绍

SonarQube是一个用于代码质量管理的开源平台，支持检查Java、JavaScript、Python等主流语言。SonarQube的目的是分析代码，并产生有关代码质量的信息，例如可读性、复杂性、可维护性等方面的问题。

在 Angular 应用中，我们可以使用SonarQube来监测代码的健康状况并快速发现潜在的缺陷和风险。本文主要介绍如何在Angular项目中安装和使用SonarQube来扫描JavaScript代码以提高代码质量。

安装

1. 首先在官网上下载SonarQube，链接；
2. 下载完成后解压缩到本地文件夹。
3. 接着下载SonarScanner for JavaScript，链接；
4. 下载完成后，新建文件夹sonarqube-scanner并在其中解压文件。
5. 最后，在系统中配置好SonarQube的环境变量，然后将sonarqube-scanner/bin的路径添加到系统的环境变量中。

完成以上步骤后就可以在Angular项目中使用SonarQube了。

使用

1. 首先，在项目的根目录下创建sonar-project.js文件。
2. 在sonar-project.js文件中添加以下代码：

const sonarqubeScanner = require('sonarqube-scanner');

sonarqubeScanner({
  serverUrl: 'http://localhost:9000',
  options: {
    'sonar.projectName': 'project name',
    'sonar.projectDescription': 'project description',
    'sonar.sources': './src',
    'sonar.tests': './src',
    'sonar.test.inclusions': '**/*.spec.ts',
    'sonar.javascript.lcov.reportPaths': 'coverage/lcov.info',
    'sonar.login': 'sonarqube_token'
  }
}, () => {});

这段代码中，我们指定了SonarQube的服务器地址、项目名、描述、源代码及测试文件所在目录、覆盖率报告的路径和该项目的SonarQube Token。

3. 保存好sonar-project.js文件后，我们可以在命令行中执行以下命令来执行代码扫描：

sonar-scanner -X

执行成功后会看到类似以下的输出：

INFO: Scanner configuration file: D:\sonarqube-scanner\bin\..\conf\sonar-scanner.properties
INFO: Project root configuration file: D:\projects\angular-sonarqube-demo\
INFO: SonarScanner 2.8
INFO: Java 1.8.0_191 Oracle Corporation (64-bit)
INFO: Windows 10 10.0 amd64
INFO: User cache: C:\Users\user\.sonar\cache
INFO: SonarQube server 7.9.2
INFO: Default locale: "en_US", source code encoding: "UTF-8"
INFO: Publish mode
INFO: Load global settings
INFO: Load global settings (done) | time=467ms
INFO: Server id: 5B6B5F4E-AXuvW5bOZ3BTZl1MCt5
INFO: User cache: C:\Users\user\.sonar\cache
INFO: Load plugins index
INFO: Load plugins index (done) | time=234ms
INFO: Process project properties
INFO: Execute project builders
INFO: Execute project builders (done) | time=20ms
INFO: Project key: test-sonar
INFO: Base dir: D:\projects\angular-sonarqube-demo
INFO: Working dir: D:\projects\angular-sonarqube-demo\.scannerwork
INFO: Load project settings for component key: 'test-sonar'
INFO: Load project settings for component key: 'test-sonar' (done) | time=188ms
INFO: Load quality profiles
INFO: Load quality profiles (done) | time=172ms
INFO: Detected Jenkins
INFO: Load active rules
INFO: Load active rules (done) | time=675ms
INFO: Indexing files...
INFO: Project configuration:
INFO:   Included sources: **/*.ts
INFO:   Included tests: **/*.spec.ts
INFO:   Excluded sources: 
INFO:   Excluded tests:
INFO: Indexing files of module 'src'...
INFO:   Base dir: D:\projects\angular-sonarqube-demo\src
INFO:   Source paths: main.ts, polyfills.ts, test.ts
INFO:   Test paths: 
...
INFO: ------------- Run sensors on module app
INFO: JavaScript/TypeScript frontend files are expected to be in standard locations under 'src'.
INFO: Sensor SonarJS Coverage [javascript]
INFO: Analysing [D:\projects\angular-sonarqube-demo\coverage\lcov.info]
INFO: Sensor SonarJS Coverage [javascript] (done) | time=32ms
INFO: Sensor JavaXmlSensor [java]
INFO: 50 source files to be analyzed
INFO: Sensor JavaXmlSensor [java] (done) | time=844ms
INFO: Sensor HTML [web]
INFO: Sensor HTML [web] (done) | time=50ms
INFO: Sensor XML Sensor [xml]
INFO: 50/50 source files have been analyzed
INFO: Sensor XML Sensor [xml] (done) | time=228ms
INFO: Sensor SonarTS [typescript]
INFO: 50 source files to be analyzed
INFO: 50/50 source files have been analyzed
INFO: Sensor SonarTS [typescript] (done) | time=7695ms
INFO: ------------- Run sensors on project
INFO: Sensor Zero Coverage Sensor
INFO: Sensor Zero Coverage Sensor (done) | time=93ms
INFO: CPD Executor 11 files had no CPD blocks
INFO: CPD Executor Calculating CPD for 39 files
INFO: CPD Executor CPD calculation finished (done) | time=551ms
INFO: Analysis report generated in 1670ms, dir size=5 MB
INFO: Analysis report compressed in 367ms, zip size=1 MB
INFO: Analysis report uploaded in 224ms
INFO: ANALYSIS SUCCESSFUL, you can browse http://localhost:9000/dashboard?id=test-sonar
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://localhost:9000/api/ce/task?id=AW_o7kRbjljkaWFyrAb8
INFO: Task total time: 38.705 s
INFO: ------------------------------------------------------------------------
INFO: EXECUTION SUCCESS
INFO: ------------------------------------------------------------------------
INFO: Total time: 1:00.645s
INFO: Final Memory: 50M/171M
INFO: ------------------------------------------------------------------------

4. 在浏览器中输入http://localhost:9000/，即可看到SonarQube的仪表板，用于查看和分析扫描结果。

结论

使用SonarQube来监测Angular项目的代码健康状况并快速发现潜在的缺陷和风险是一种很好的做法。通过上述步骤，我们可以将SonarQube和Angular项目集成在一起，从而实现应用程序在每个阶段中的代码质量监控。