最近在給公司搞代碼質量管理，因為之前出了線上事故，以前都沒人關注的，代碼風格五花八門，尤其是前端代碼，因為最新的 TypeScript 是支持類型注釋的，而很多前端程序員使用 JS 時間比較長，一下子適應不過來，寫代碼時不做類型檢查、不做異常判斷，把 BUG 都拋給瀏覽器，這就導致項目可靠性差、安全度低、可維護性極差。因此借著這個機會，把祖傳代碼也規范一下。

搭建 sonarqube 云端掃描環境

sonarqube 新版本不再支持 MySQL 數據庫，需要使用 postgresql 數據庫，我們主要使用 bitnami 維護的鏡像，這些鏡像更新比較及時，而且長期維護，尤其是 sonarqube 和 Jenkins，下面我們就使用 docker 鏡像來按照 postgresql 和 sonarqube。

安裝postgresql數據庫

docker run -d --name postgresql --restart=always -p 5432:5432 -e ALLOW_EMPTY_PASSWORD=yes -e POSTGRESQL_USERNAME=bn_sonarqube -e POSTGRESQL_DATABASE=bitnami_sonarqube bitnami/postgresql:13

安裝sonarqube

docker run -d --name sonarqube -p 9000:9000 -e ALLOW_EMPTY_PASSWORD=yes -e 
SONARQUBE_DATABASE_HOST=192.168.10.213 -e SONARQUBE_DATABASE_PORT_NUMBER=5432 -e 
SONARQUBE_DATABASE_USER=bn_sonarqube -e 
SONARQUBE_DATABASE_NAME=bitnami_sonarqube bitnami/sonarqube:9

如果sonarqube啟動失敗，報錯信息中包含max_map_count，可以通過調整系統文件數來修改：

vi /etc/sysctl.conf

# 文件最后加上如下內容
vm.max_map_count = 262144

配置工程掃描

使用 bitnami 搭建的 sonarqube 默認賬號密碼：admin/bitnami，訪問 localhost:9000，登錄后創建新的工程

填寫工程名，并創建令牌，令牌名稱建議和工程名相同

生成的令牌ID一定要復制下來，不會再顯示第二次，如果沒記下就需要重新生成，切記

選擇掃描的語言和執行掃描的機器，然后記下生成的掃描命令，執行完掃描后這個頁面將自動變為結果頁面

下載配置 sonar-scanner

在上面的截圖中會有 sonar-scanner 掃描器訪問地址，打開以后，根據需求下載對應系統的文件

本來掃描器也是有 docker 鏡像可以用的，但是 sonar-scanner 非常簡單，基本無需依賴，下載后即可使用，所以我們也就不需要搞 docker 鏡像來使用了。我這里使用 Linux 系統下的版本。

執行以下命令配置好 sonar-scanner 的掃描環境：

tar -xvf sonar-scanner-4.6.2.2472-linux.tar

mv sonar-scanner-4.6.2.2472-linux /usr/local

ln -s /usr/local/sonar-scanner-4.6.2.2472-linux/bin/sonar-scanner /usr/bin/sonar-scanner

掃描倉庫代碼

配置好掃描器后，我們就可以使用 sonar-scanner 來掃描我們的指定庫代碼了

下載代碼

使用 git 命令將代碼下載到和 sonar-scanner 在同一臺機器上

cd /home/code

git clone git@gitee.com:small_bud_star/xxxxxx.git

執行掃描命令

進入到代碼目錄下，執行工程創建時提供給我們的掃描命令

sonar-scanner \
  -Dsonar.projectKey=databoard \
  -Dsonar.sources=. \
  -Dsonar.host.url=http://10.10.8.252:9000 \
  -Dsonar.login=60f6c402242a93ba5982a1f9f4084937aba9fd5e

執行結果如下

掃描命令中的參數解釋：

• projectKey: 我們創建項目時填的項目名稱
• sources：掃描的目錄，一般我們都是進入工程目錄下進行掃描，如果在非根目錄下執行掃描命令，還需要配合其他的參數才可以
• host.url：sonarqube 服務器地址
• login：創建項目時生成的令牌，但是也可以增加一個參數 password，通過用戶名和密碼進行掃描

在實際項目使用中，我們建議在項目根目錄創建 sonar-project.properties 文件來配置掃描參數，以上掃描命令配置如下：

sonar.host.url=http://10.10.8.252:9000
sonar.sources=.
sonar.projectKey=databoard 
sonar.login=60f6c402242a93ba5982a1f9f4084937aba9fd5e

然后進入項目根目錄，輸入sonar-scanner 就可以了

忽略規則配置

每一種開發語言都有很多掃描規則，因此誤報的可能性也很大，sonarqube 為我們提供了忽略規則的配置。打開項目規則配置：

忽略配置包括以下類型

• 排除指定目錄：sonar.exclusions

排除public 下的所有文件及其子目錄下的文件

• 包含指定目錄：sonar.inclusions

只掃描src目錄下的文件

• 不需要檢測重復代碼的文件：sonar.cpd.exclusions

不檢查src/assets目錄下的所有文件重復度

• 包含指定規則的文件不參與掃描：sonar.issue.ignore.allfile

文件中包含 sonarqube disable 字符串的文件不參與掃描，這樣我們就可以對一些特殊文件進行排除，字符串由我們自己定義

• 指定的代碼塊不參與掃描：sonar.issue.ignore.block

從包含@layer的行到包含@endlayer的行之間的所有代碼不進行掃描，對于一些誤檢或者我們不想改變的代碼，可以自定義兩個標記把他們包含起來，這樣這些代碼就不會參與掃描了

• 在指定文件中不檢查某些規則：sonar.issue.ignore.multicriteria

項目目錄下的所有ts文件不執行squid:S1195掃描規則

• 在指定文件中只檢查某些規則：sonar.issue.enforce.multicriteria

在login/index.js文件中只檢查javascript:S1195規則，不檢查其他規則

以上配置是在sonarqube服務器上，我們更推薦另外一種方式，即在項目目錄下 sonar-project.properties文件中進行配置，配置如下：

sonar.host.url=http://10.10.8.252:9000
sonar.sources=.
sonar.projectKey=databoard 
sonar.login=60f6c402242a93ba5982a1f9f4084937aba9fd5e
sonar.exclusions=public/**/*
sonar.issue.ignore.multicriteria=e1,e2
sonar.issue.ignore.multicriteria.e1.ruleKey=Web:ImgWithoutAltCheck
sonar.issue.ignore.multicriteria.e1.resourceKey=**/*
sonar.issue.ignore.multicriteria.e2.ruleKey=Web:BoldAndItalicTagsCheck
sonar.issue.ignore.multicriteria.e2.resourceKey=**/*

sonar.issue.ignore.block=e1,e2
sonar.issue.ignore.block.e1.beginBlockRegexp=@layer
sonar.issue.ignore.block.e1.endBlockRegexp=@layer
sonar.issue.ignore.block.e2.beginBlockRegexp=:deep
sonar.issue.ignore.block.e2.endBlockRegexp=:deep

VSCode配置 sonarlint 掃描

上面安裝配置好了Sonarqube以后，我們還可以安裝sonarlint插件進行編程支持，這個插件的作用是在我們開發代碼的過程中實時的顯示當前編輯代碼的異常情況，在插件中配置sonarqube服務器的作用是可以使用sonarqube服務器中的規則進行代碼檢查，并不是使用云端sonarqube進行代碼檢查。

安裝 jre 運行環境

• 下載 JDK

java 11 以后沒有單獨的jre安裝包，需要安裝jdk，然后通過命令生成

https://www.oracle.com/java/technologies/downloads/

• 安裝 JDK

• 生成 Jre 目錄

進入JDK安裝目錄C:\Program Files\Java\jdk-17.0.2，執行以下命令

bin\jlink.exe --module-path jmods --add-modules java.desktop --output jre

生成的 Jre 目錄在 C:\Program Files\Java\jdk-17.0.2\jre

安裝 sonarlint 并配置

在應用商店中搜索 SonarLint

安裝完后點擊設置按鈕，進入擴展設置

選擇在settings.json 中編輯

將以下信息配置在文件最下面：

"sonarlint.connectedMode.connections.sonarqube": [
    {
      "serverUrl": "http://10.10.8.252:9000",
      "token": "60f6c402242a93ba5982a1f9f4084937aba9fd5e"
    }
  ],
  "sonarlint.connectedMode.project": {
    "projectKey": "databoard" 
  },
  "sonarlint.ls.javaHome": "C:\\Program Files\\Java\\jdk-17.0.2\\jre",
  "sonarlint.ls.vmargs": "-Xmx1024m",
  "sonarlint.pathToNodeExecutable": "E:\\Program\\nodejs\\node.exe"

• serverUrl：sonarqube 的服務器地址
• token：上面使用的令牌
• projectKey：工程名
• sonarlint.ls.javaHome：jre的目錄
• sonarlint.ls.vmargs：內存使用配置
• sonarlint.pathToNodeExecutable：node可執行文件路徑配置

在我們的開發過程當中，推薦大家使用各種代碼檢查工具，對代碼質量進行管理，這樣可以幫我們避免很多低級的或者不合理的異常，尤其是對于經常出錯的同學，這是一個養成良好代碼書寫習慣的很好方式。