我們在工作中積極使用該平台 聲納 保持高水準的代碼品質。 當整合編寫的項目之一時 VueJs+Typescript，問題出現了。 因此，我想更詳細地告訴您我們是如何解決這些問題的。
正如我上面所寫，在本文中我們將討論 SonarQube 平台。 一些理論——對於那些第一次聽到它的人來說，它通常是什麼：
聲納 （以前的 聲納）是一個用於持續檢查和程式碼品質測量的開源平台。
支援根據 MISRA C、MISRA C++、MITRE/CWE 和 CERT 安全編碼標準程式設計標準的規則進行程式碼分析和錯誤偵測。 它還可以識別 OWASP Top 10 和 CWE/SANS Top 25 程式錯誤清單中的錯誤。
儘管該平台使用各種現成的工具，SonarQube 將結果簡化為單一儀表板，保留運行歷史記錄，從而使您能夠看到開發過程中軟體品質變化的整體趨勢。
更多詳細資訊請參見
支援大量程式語言。 從上面連結的資訊來看，這些語言超過 25 種。 要支援特定語言，您必須安裝適當的外掛程式。 社群版本包含一個用於使用的插件 使用Javascript （包括 typesсript），儘管 wiki 的說法相反。 在後面 使用Javascript 插件答案 聲納JS, 對於打字稿 聲納TS 分別
官方客戶端用於發送覆蓋訊息 聲納掃描儀，其中，使用來自的設置 配置-file，將此資料傳送至伺服器 聲納 以便進一步整合和聚合。
為 使用Javascript 有 。 那麼，讓我們開始逐步實施 聲納 в Vue公司-專案使用 打字稿.
部署伺服器 聲納 讓我們利用 泊塢窗，撰寫.
聲納.yaml:
version: '1'
services:
simplesample-sonar:
image: sonarqube:lts
ports:
- 9001:9000
- 9092:9092
network_mode: bridge發射：
docker-compose -f sonar.yml up此後 聲納 將於： .
目前還沒有項目，這是公平的。 我們將糾正這種情況。 我拿了官方的範例項目 VueJS+TS+Jest。 讓我們把它轉向我們自己：
git clone https://github.com/vuejs/vue-test-utils-typescript-example.git首先我們要安裝客戶端 聲納， 這就是所謂的 聲納掃描儀為 NPM 有一個包裝器：
yarn add sonarqube-scanner並立即將命令添加到 腳本 與它一起工作。
包.json：
{
…
scripts: {
...
"sonar": "sonar-scanner"
...
},
…
}接下來，為了使掃描器工作，您需要在一個特殊文件中設定項目設定。 讓我們從基礎開始。
聲納專案.properties:
sonar.host.url=http://localhost:9001
sonar.projectKey=test-project-vuejs-ts
sonar.projectName=Test Application (VueJS+TS)
sonar.sources=src
# sonar.tests=
sonar.test.inclusions=src/**/*tests*/**
sonar.sourceEncoding=UTF-8- 聲納主機.url - 地址 聲納'A;
- 聲納.projectKey – 伺服器上唯一的項目識別符 聲納'A;
- 聲納.項目名稱 – 它的名稱，可以隨時更改，因為該項目是由 專案金鑰;
- 聲納源 – 包含來源的資料夾，通常是這個 SRC，但可以是任何東西。 該資料夾是相對於根資料夾設定的，根資料夾是啟動掃描器的資料夾；
- 聲納測試 – 與前一個參數同時使用的參數。 這是測試所在的資料夾。 在這個專案中，沒有這樣的資料夾，測試位於資料夾中正在測試的元件旁邊test'，所以我們暫時忽略它並使用下一個參數；
- 聲納.測試.包含 – 使用遮罩測試的路徑，可能會列出多個以逗號分隔的元素；
- 聲納.sourceEncoding – 原始檔的編碼。
對於首次啟動掃描儀，一切都已準備就緒，除了前面的主要操作：啟動測試引擎本身，以便它可以生成有關掃描儀隨後將使用的覆蓋範圍的信息。
但要做到這一點，您需要配置測試引擎來產生此資訊。 在這個專案中，測試引擎是 有。 它的設定在文件的相應部分 的package.json.
讓我們添加這些設定：
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*",
"!src/main.ts",
"!src/App.vue",
"!src/**/*.d.*",
"!src/**/*__tests__*"
],也就是說，我們根據需要計算覆蓋範圍和形成覆蓋範圍的來源（以及例外情況）來設定標誌本身。
現在讓我們執行測試：
yarn test我們將看到以下內容：
原因是組件本身沒有程式碼。 讓我們解決這個問題。
你好世界.vue：
...
methods: {
calc(n) {
return n + 1;
}
},
mounted() {
this.msg1 = this.msg + this.calc(1);
},
...這足以計算覆蓋範圍。
重新啟動測試後，我們將確保：
在螢幕上我們應該看到有關覆蓋範圍的信息，並且將在專案資料夾中建立一個資料夾 覆蓋 具有通用格式的測試覆蓋率信息 LCOV（LTP GCOV 擴充）.
冠狀病毒 是一個免費分發的實用程序，用於檢查代碼覆蓋率。 Gcov 為程式中的每個語句產生準確的執行次數，並允許您在原始程式碼中新增註解。 Gcov 作為 GCC 套件的一部分作為標準實用程式。
左冠狀病毒 - gcov 的圖形介面。 它為多個原始文件組裝 gcov 文件，並產生一組包含程式碼和覆蓋率資訊的 HTML 頁面。 還產生頁面以使導航更容易。 Lcov 支援字串、函數和分支的覆蓋。
測試完成後，覆蓋範圍資訊將位於 報告/lcov.info.
我們需要說 聲納'我可以從哪裡得到它？ 因此，我們將以下幾行新增到其設定檔中。 但有一點：項目可以是多語言的，也就是在資料夾中 SRC 有多種程式語言的原始程式碼以及其中一種或另一種的從屬關係，反過來，一種或另一種插件的使用取決於其擴展名。 對於不同的程式語言，覆蓋資訊可以儲存在不同的位置，因此每種語言都有自己的部分用於設定。 我們的專案使用 打字稿，所以我們需要一個專門的設定部分：
聲納專案.properties:
sonar.typescript.coveragePlugin=lcov
sonar.typescript.lcov.reportPaths=coverage/lcov.info一切準備就緒，等待掃描器的首次啟動。 我想指出的是，該項目是 聲納'e 是在您第一次為給定專案執行掃描程式時自動建立的。 在隨後的時間裡，資訊將被積累，以便了解專案參數隨時間變化的動態。
因此，讓我們使用之前創建的命令 的package.json:
yarn run sonar 注： 您也可以使用參數 -X 以獲得更詳細的日誌記錄。
如果掃描器是第一次啟動，那麼將首先下載掃描器本身的二進位。 之後它啟動並開始掃描伺服器 聲納'a 用於安裝的插件，從而計算支援的語言。 還加載其操作的各種其他參數： 品質設定檔、活動規則、指標儲存庫、伺服器規則.
注： 我們不會在本文的框架內詳細討論它們，但您可以隨時聯繫官方消息來源。
接下來開始資料夾分析 SRC 了解所有（如果未明確指定特定一種）受支援語言的來源檔案及其後續索引的可用性。
接下來是各種其他分析，我們在本文中不重點討論這些分析（例如，linting、程式碼重複檢測等）。
在掃描器工作的最後，所有收集到的資訊都會被匯總、存檔並發送到伺服器。
之後，我們已經可以看到 Web 介面中發生了什麼：
正如我們所看到的，有些東西起作用了，甚至顯示了某種覆蓋範圍，但它與我們的不符 有-報告。
讓我們弄清楚一下。 讓我們更詳細地查看該項目，點擊覆蓋率值，然後「穿透」進入詳細的文件報告：
在這裡我們看到，除了主文件之外，還檢查了文件 HelloWorld.vue，還有一個文件 主要.ts，這破壞了報道的全貌。 但為什麼我們將其排除在覆蓋範圍的計算之外呢？ 是的，一切都是正確的，但這是在水平上 有，但掃描器對其進行了索引，因此它最終出現在計算中。
讓我們解決這個問題：
聲納專案.properties:
...
sonar.exclusions=src/main.ts
...我想澄清一下：除了該參數中指定的資料夾外，還會添加該參數中列出的所有資料夾 聲納.測試.包含.
啟動掃描器後，我們看到正確的訊息：
讓我們看下一點—— 品質概況。 我上面談到了支持 聲納同時使用多種語言。 這正是我們所看到的。 但我們知道我們的專案是用 TS，那麼為什麼要對掃描器進行不必要的操作和檢查呢？ 我們將透過在設定檔中新增一個參數來設定分析語言 聲納'A：
聲納專案.properties:
...
sonar.language=ts
...讓我們再次運行掃描器並查看結果：
覆蓋範圍完全消失了。
如果我們查看掃描器日誌，我們可以看到以下行：
也就是說，我們的專案文件根本沒有索引。
情況如下：官方支持 VueJs 是在插件裡的 聲納JS誰負責 使用Javascript.
但這個支援不在插件中 聲納TS 為 TS，在 bug 追蹤器中為此開出了正式票證 聲納'A：
以下是 SonarQube 開發人員代表之一的一些回答，證實了這一事實。
但你反對，一切對我們有用。 是的，我們來試試一下 "駭客".
如果有支援的話 .vue- 文件 聲納'哦，那麼讓我們試著告訴他將它們視為 打字稿.
讓我們新增一個參數：
聲納專案.properties:
...
sonar.typescript.file.suffixes=.ts,.tsx,.vue
...讓我們啟動掃描器：
而且，瞧，一切都恢復正常了，而且只有一個配置文件 打字稿。 也就是說，我們設法解決了支援中的問題 VueJs+TS 為 聲納.
讓我們嘗試更進一步並稍微改進覆蓋資訊。
到目前為止我們做了什麼：
- 新增到專案中 聲納-掃描器;
- 設定 有 產生覆蓋資訊；
- 配置好的 聲納-掃描器;
- 解決了支援問題 .vue-文件+ 打字稿.
除了測試覆蓋率之外，還有其他有趣的有用的程式碼品質標準，例如項目的程式碼重複和行數（涉及與程式碼複雜性相關的係數的計算）。
在目前使用的插件實作中 TS (聲納TS） 不管用 CPD（複製貼上偵測器） 並計算程式碼行數 .vue- 文件。
要建立程式碼重複的綜合情況，只需使用不同的名稱複製元件檔案並將其新增至程式碼中 主要.ts 一個虛擬函數並用不同的名稱複製它。 檢查重複項，如下圖所示 .vue所以 .ts - 文件。
主要.ts：
...
function name(params:string): void {
console.log(params);
}
...為此，您需要暫時註解掉配置行：
聲納專案.properties:
...
sonar.exclusions=src/main.ts
...讓我們重新啟動掃描器並進行測試：
yarn test && yarn run sonar當然，我們的覆蓋範圍會下降，但現在我們對此不感興趣。
就複製程式碼行而言，我們將看到：
為了檢查我們將使用 CPD-公用事業 - jscpd:
npx jscpd src
對於程式碼行：
也許這個問題會在未來的插件版本中得到解決 聲納JS(TS)。 我想指出的是，他們正在逐漸開始將這兩個插件合併為一個 聲納JS，我認為這是正確的。
現在我想考慮改進覆蓋資訊的選項。
到目前為止，我們可以看到整個專案（尤其是檔案）的測試覆蓋率百分比。 但可以用有關數量的信息來擴展該指標 單位- 專案以及文件上下文中的測試。
有圖書館可以 有- 將報告轉換為以下格式 聲納'A：
通用測試數據 - .
讓我們在我們的專案中安裝這個庫：
yarn add jest-sonar-reporter並將其添加到配置中 有:
包.json：
…
"testResultsProcessor": "jest-sonar-reporter"
…現在讓我們執行測試：
yarn test之後將在專案的根目錄中建立一個文件 測試報告.xml.
讓我們在配置中使用它 聲納'A：
聲納專案.properties:
…
sonar.testExecutionReportPaths=test-report.xml
…並重新啟動掃描器：
yarn run sonar我們來看看介面有什麼變化 聲納'A：
一切都沒有改變。 事實是 Sonar 並不將 Jest 報告中描述的文件視為文件 單位-測試。 為了修正這種情況，我們使用配置參數 聲納 聲納測試，其中我們將明確指出包含測試的資料夾（目前我們只有一個）：
聲納專案.properties:
…
sonar.tests=src/components/__tests__
…讓我們重新啟動掃描器：
yarn run sonar我們來看看介面發生了什麼變化：
現在我們已經看到了我們的數量 單位-測試，如果單擊內部失敗，我們可以看到該數字在專案文件中的分佈：
結論
因此，我們研究了一種連續分析工具 聲納。 我們成功地將一個編寫的項目整合到其中 VueJs+TS。 修復了一些相容性問題。 我們增加了測試覆蓋率指標的資訊內容。 在本文中，我們僅檢查了其中一項程式碼品質標準（也許是主要標準之一），但是 聲納 支援其他品質標準，包括安全測試。 但並非所有這些功能都完全可用 -版本。 有趣且有用的功能之一是集成 聲納 使用各種程式碼儲存庫管理系統，例如 GitLab 和 BitBucket。 阻止 合併拉取（合併）請求當覆蓋範圍降低時，'a 到儲存庫的主分支。 但這是一篇完全不同的文章的故事。
注： 文章中以程式碼形式描述的所有內容都可以在 .
只有註冊用戶才能參與調查。 ， 請。
您是否使用SonarQube平台：
-
企業排放佔全球 26,3%是5
-
企業排放佔全球 15,8%3號
-
企業排放佔全球 15,8%我聽說過這個平台並想使用3
-
企業排放佔全球 10,5%我聽過這個平台，但不想使用2
-
企業排放佔全球 0,0%我正在使用不同的平台0
-
企業排放佔全球 31,6%第一次聽到她6
19 位用戶投票。 3 名用戶棄權。
來源： www.habr.com