使用 SonarQube 檢測 Angular 專案程式碼

前言

最近在找程式碼檢測工具，看到了SonarQube可以幫助檢測程式碼，立刻來試試看。

SonarQube是一個可以幫助程式碼品質檢查的工具，可以嘗試找出程式碼中的 bug、vulnerabilities與code smell等問題，對程式開發有著很大的幫助。

安裝SonarQube

brew install sonarqube

啟動SonarQube

sonar console

掃描專案

可以透過 localhost:9000開啟sonar qube 服務

sonar console

可以透過登入來開始對專案作掃描，預設帳號密碼為 admin/ admin：

點選 Analyze New Project

接著會引導如何開始一個專案分析，首先是必須先建立一個 token：

接著點選Generate後，會接續引導至下一步

因為我要掃描的專案為 Angular專案，是使用 typescript作為開發語言，故語言選擇 others

選擇完成後點選Done，右邊會出現額外的訊息：

掃描前還需要額外安裝 Sonar Scanner，可以點右邊的連結，按照指示安裝：

下載後為一個壓縮檔，可以解壓縮至任何目錄

開啟目錄找到 conf資料夾，接著開啟 sonar-scanner.properties設定檔，將註解移除：

#Configure here general information about the environment, such as SonarQube server connection details for example
#No information about specific project should appear here

#----- Default SonarQube server
sonar.host.url=http://localhost:9000

#----- Default source code encoding
sonar.sourceEncoding=UTF-8

接著切換至要掃描的目錄，開啟 terminal 並複製網頁上的語法：

sonar-scanner \
  -Dsonar.projectKey=AngularProject \
  -Dsonar.sources=. \
  -Dsonar.host.url=http://localhost:9000 \
  -Dsonar.login=650615ead2240f1a17b2bce882e71f880afa78fe

-Dsonar.projectKey：所設定之Project Key

-Dsonar.sources：要掃描專案之目錄， . 表示當下目錄

-Dsonar.host.url：Sonar Qube Server Url

-Dsonar.login：在Web上產生之Token

需要留意的一點是，這邊的語法預設是已經將 sonar-scanner 加入 path中，如果沒有加入 path，則需要調整語法：

./path-to-sonar-scanner/sonar-scanner \
  -Dsonar.projectKey=AngularProject \
  -Dsonar.sources=. \
  -Dsonar.host.url=http://localhost:9000 \
  -Dsonar.login=650615ead2240f1a17b2bce882e71f880afa78fe