本文以Vue項目為例，介紹了如何配置Sonarqube檢測工具環(huán)境

GitHub倉庫

環(huán)境配置

確認(rèn)環(huán)境依賴

https://docs.sonarqube.org/latest/requirements/requirements/

sonarqube運行依賴Java環(huán)境

推薦Java 11

Sonarqube支持連接數(shù)據(jù)庫輸出檢測結(jié)果，但目前涉及的功能中并未使用到數(shù)據(jù)庫

安裝本體

1. 下載

   https://www.sonarqube.org/downloads/

   版本：本教程使用Community Edition 9.6，8.9.x LTS版本也可

2. 初始化

   1. 運行sonar

      以windows環(huán)境為例，啟動文件在以下目錄

      

      出現(xiàn)以下語句即為啟動成功

      

   2. 啟動成功后，訪問以下host：

      http://localhost:9000/
      

   3. 登陸，用戶創(chuàng)建

      首次登陸，默認(rèn)用戶是admin，密碼是admin

      

      首次登錄后，會要求更改密碼，與初始密碼不能一致

      進入界面即可

下載sonar-scanner

1. 下載

   https://docs.sonarqube.org/latest/analysis/scan/sonarscanner/

   

2. 配置環(huán)境變量

   1. 添加系統(tǒng)變量SONAR_RUNNER_HOME

      

   2. 添加path變量

      

   3. Check一下：

      在CMD中，運行：

      sonar-scanner -v
      

      

安裝插件

sonar插件的安裝方法是將<插件名稱>.jar文件放在以下目錄：

<你的sonar根目錄>\extensions\plugins

然后重新啟動sonar

附：官方插件列表https://docs.sonarqube.org/latest/instance-administration/plugin-version-matrix/

中文包

官網(wǎng)：https://github.com/xuhuisheng/sonar-l10n-zh/releases

下載jar文件后放在插件目錄即可

PDF生成插件

最新版本：https://gitee.com/zzulj/sonar-pdf-plugin/releases/tag/v4.0.0

下載jar文件后放在插件目錄即可

注：官網(wǎng)說明中最新支持到8.9.1，但是實際上9.6版本也可以正常使用

運行測試

創(chuàng)建項目

在創(chuàng)建項目中，選擇Mannual，輸入自定義的項目名稱和key

在這一步完成后，該項目就已經(jīng)創(chuàng)建成功

創(chuàng)建測試配置文件

打開要測試項目的根目錄

在要測試的目錄下，創(chuàng)建sonar的配置文件sonar-project.properties

#sonarqube服務(wù)器地址，默認(rèn)為9000
sonar.host.url=http://localhost:9000
#sonarqube用戶名
sonar.login=<替換為你的用戶名>
#sonarqube密碼
sonar.password=<替換為你設(shè)置的密碼>
#項目唯一標(biāo)識（不能出現(xiàn)重復(fù)）
sonar.projectKey=<替換為你項目的key>
#項目名稱
sonar.projectName=<替換為你的項目名稱>
#源代碼目錄
sonar.sources=<你的源碼目錄>
# 用逗號分割來指定多個目錄
# sonar.sources=src, tests
# 測試代碼目錄
sonar.tests = <你的測試代碼目錄>
#語言
sonar.language=js
# sonar.language=javascript
#源代碼文件編碼
sonar.sourceEncoding=UTF-8

# 更多參數(shù)：https://docs.sonarqube.org/latest/analysis/analysis-parameters/

請注意內(nèi)容的替換

更多配置參數(shù)：https://docs.sonarqube.org/latest/analysis/analysis-parameters/

運行scanner

在根目錄下運行：

sonar-scanner

等待掃描完畢，打開9000就可以查看掃描結(jié)果

報告生成

在已經(jīng)進行測試的項目中，選擇More下的Download Pdf Report即可

報告樣本見leafletDemo.pdf

sonar規(guī)則

sonar為項目特制規(guī)則集

參考資料：https://sqa.stackexchange.com/questions/24734/how-to-deactivate-a-rule-in-sonarqube/36023#36023

說明：

• sonar為每一種語言預(yù)定義了檢查規(guī)則集(即Quality Profile)
• 在為項目運行檢查的時候，sonar-scanner為當(dāng)前項目綁定默認(rèn)的Quality Profile
• 因此如果需要手動編輯生效和不生效的規(guī)則，需要自主新建一個Quality Profile，并設(shè)置為當(dāng)前項目的默認(rèn)Quality Profile

操作流程：

1. 新建自定義Quality Profile

   打開Quality Profiles標(biāo)簽，選擇要自定義Profile的語言

   點擊Copy，復(fù)制一份默認(rèn)規(guī)則 (默認(rèn)規(guī)則不可編輯

   為新規(guī)則集起一個好聽的名字

   

2. 編輯自定義的規(guī)則集

   進入新規(guī)則集編輯的入口可以有多個，可以這么進入：

   

   

   也可以這么進入(使用rules標(biāo)簽的篩選面板)：

   

   點擊右側(cè)的Activate/Disactivate就可以指定生效或者不生效的規(guī)則

3. 將新規(guī)則集指定為項目的默認(rèn)規(guī)則集

   在項目頁面，打開項目設(shè)置的下拉框

   

   更換默認(rèn)規(guī)則

   

   在項目下，重新運行sonar-scanner，新規(guī)則即可生效

sonar編輯規(guī)則

首先，要編輯規(guī)則，需要確保目前用戶具有權(quán)限

在administration-security-global permission中，確認(rèn)兩個權(quán)限被勾選

sonar對預(yù)定義規(guī)則的編輯自由度較為有限，僅支持以下編輯：

• 為規(guī)則擴充描述

  

• 為規(guī)則編輯tag標(biāo)簽

  

  附：預(yù)定義規(guī)則標(biāo)簽?zāi)夸?/p>

  https://docs.sonarqube.org/latest/user-guide/built-in-rule-tags/

sonar新建自定義規(guī)則

簡單情況

簡單情況下，sonar只支持從已有模板中派生規(guī)則，自由度較差

目前sonar支持自定義規(guī)則的模板有：(JS、TS、HTML、XML

基于這些模板通常只能實現(xiàn)一些簡單的錯誤檢查，如對符合某正則表達式的注釋的檢查

案例：見demo

通過插件獲取規(guī)則

使用一些規(guī)則插件，可以獲取更多規(guī)則

官方給的插件列表中主要針對Java，為前端相關(guān)的規(guī)則插件基本不存在

在此僅提供獲取更多規(guī)則的一條思路

自主編寫代碼規(guī)則

請見：https://docs.sonarqube.org/latest/extend/adding-coding-rules/

及：https://docs.sonarqube.org/latest/analysis/generic-issue/

(研究中

附1：為VSCode配置sonar環(huán)境

安裝sonarlint插件

在VSCode插件頁搜索Sonarlint即可

為vscode連接sonarqube

見https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode#connected-mode

附2：sonar對Vue文件的支持

關(guān)于Sonar對Vue的支持，官方并沒有進行詳細(xì)的說明，僅在介紹頁提到了支持

因此為了測試Sonar檢查對Vue的支持，進行了以下實驗：

• vue文件html部分

  

  檢測成功

• vue文件script部分

  

  檢測成功

• vue文件style部分

  

  檢測成功

因此說明sonar對vue文件三個部分均可以正常檢測

附3：sonar規(guī)則不起效的原因

在demo的初步掃描中，switch嵌套的問題似乎并沒有被檢查出來

可能原因：

• 錯誤的檢查是逐步的，需要改正現(xiàn)有錯誤以后才能進一步發(fā)現(xiàn)其他錯誤 ×

• 相關(guān)的rule沒有activate √

  默認(rèn)情況下，switch嵌套的檢查未被activate

  

• 重新運行后，錯誤被檢查出來了
  文章來源地址http://www.zghlxwxcb.cn/news/detail-670142.html

到了這里，關(guān)于【Sonar】使用SonarQube檢測Vue項目代碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！