最近在給公司搞代碼質(zhì)量管理，因?yàn)橹俺隽司€上事故，以前都沒人關(guān)注的，代碼風(fēng)格五花八門，尤其是前端代碼，因?yàn)樽钚碌?TypeScript 是支持類型注釋的，而很多前端程序員使用 JS 時(shí)間比較長，一下子適應(yīng)不過來，寫代碼時(shí)不做類型檢查、不做異常判斷，把 BUG 都拋給瀏覽器，這就導(dǎo)致項(xiàng)目可靠性差、安全度低、可維護(hù)性極差。因此借著這個(gè)機(jī)會，把祖?zhèn)鞔a也規(guī)范一下。

搭建 sonarqube 云端掃描環(huán)境

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

安裝postgresql數(shù)據(jù)庫

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啟動(dòng)失敗，報(bào)錯(cuò)信息中包含max_map_count，可以通過調(diào)整系統(tǒng)文件數(shù)來修改：

vi /etc/sysctl.conf

# 文件最后加上如下內(nèi)容
vm.max_map_count = 262144

配置工程掃描

使用 bitnami 搭建的 sonarqube 默認(rèn)賬號密碼：admin/bitnami，訪問 localhost:9000，登錄后創(chuàng)建新的工程

填寫工程名，并創(chuàng)建令牌，令牌名稱建議和工程名相同

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

選擇掃描的語言和執(zhí)行掃描的機(jī)器，然后記下生成的掃描命令，執(zhí)行完掃描后這個(gè)頁面將自動(dòng)變?yōu)榻Y(jié)果頁面

下載配置 sonar-scanner

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

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

執(zhí)行以下命令配置好 sonar-scanner 的掃描環(huán)境：

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 在同一臺機(jī)器上

cd /home/code

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

執(zhí)行掃描命令

進(jìn)入到代碼目錄下，執(zhí)行工程創(chuàng)建時(shí)提供給我們的掃描命令

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

執(zhí)行結(jié)果如下

掃描命令中的參數(shù)解釋：

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

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

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

然后進(jìn)入項(xiàng)目根目錄，輸入sonar-scanner 就可以了

忽略規(guī)則配置

每一種開發(fā)語言都有很多掃描規(guī)則，因此誤報(bào)的可能性也很大，sonarqube 為我們提供了忽略規(guī)則的配置。打開項(xiàng)目規(guī)則配置：

忽略配置包括以下類型

• 排除指定目錄：sonar.exclusions

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

• 包含指定目錄：sonar.inclusions

只掃描src目錄下的文件

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

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

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

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

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

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

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

項(xiàng)目目錄下的所有ts文件不執(zhí)行squid:S1195掃描規(guī)則

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

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

以上配置是在sonarqube服務(wù)器上，我們更推薦另外一種方式，即在項(xiàng)目目錄下 sonar-project.properties文件中進(jìn)行配置，配置如下：

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插件進(jìn)行編程支持，這個(gè)插件的作用是在我們開發(fā)代碼的過程中實(shí)時(shí)的顯示當(dāng)前編輯代碼的異常情況，在插件中配置sonarqube服務(wù)器的作用是可以使用sonarqube服務(wù)器中的規(guī)則進(jìn)行代碼檢查，并不是使用云端sonarqube進(jìn)行代碼檢查。

安裝 jre 運(yùn)行環(huán)境

• 下載 JDK

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

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

• 安裝 JDK

• 生成 Jre 目錄

進(jìn)入JDK安裝目錄C:\Program Files\Java\jdk-17.0.2，執(zhí)行以下命令

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

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

安裝 sonarlint 并配置

在應(yīng)用商店中搜索 SonarLint

安裝完后點(diǎn)擊設(shè)置按鈕，進(jìn)入擴(kuò)展設(shè)置

選擇在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 的服務(wù)器地址
• token：上面使用的令牌
• projectKey：工程名
• sonarlint.ls.javaHome：jre的目錄
• sonarlint.ls.vmargs：內(nèi)存使用配置
• sonarlint.pathToNodeExecutable：node可執(zhí)行文件路徑配置

在我們的開發(fā)過程當(dāng)中，推薦大家使用各種代碼檢查工具，對代碼質(zhì)量進(jìn)行管理，這樣可以幫我們避免很多低級的或者不合理的異常，尤其是對于經(jīng)常出錯(cuò)的同學(xué)，這是一個(gè)養(yǎng)成良好代碼書寫習(xí)慣的很好方式。