Utilizemu attivamente a piattaforma in u nostru travagliu soundQube per mantene a qualità di codice à un altu livellu. Quandu integra unu di i prughjetti scritti in VueJs+Typescript, i prublemi sò ghjunti. Per quessa, vogliu dì à voi in più detail cumu avemu riisciutu à risolve.
In questu articulu parleremu, cum'è aghju scrittu sopra, di a piattaforma SonarQube. Un pocu di teoria - ciò chì hè in generale, per quelli chì anu intesu parlà per a prima volta:
soundQube (anzianu Sonar) hè una piattaforma open source per l'ispezione cuntinua è a misurazione di a qualità di codice.
Supporta l'analisi di codice è a rilevazione d'errore secondu e regule di i standard di prugrammazione MISRA C, MISRA C++, MITRE/CWE è CERT Secure Coding Standards. Puderà ancu ricunnosce l'errori da a lista di errori di prugrammazione OWASP Top 10 è CWE / SANS Top 25.
Malgradu u fattu chì a piattaforma usa diversi strumenti pronti, SonarQube riduce i risultati à un dashboard unicu, mantenendu una storia di corse è cusì permette di vede a tendenza generale di cambiamenti in a qualità di u software durante u sviluppu.
Più dettagli ponu esse truvati à
Un gran numaru di linguaggi di prugrammazione sò supportati. A ghjudicà da l'infurmazioni da u ligame sopra, sò più di 25 lingue. Per sustene una lingua specifica, duvete installà u plugin appropritatu. A versione di a cumunità include un plugin per travaglià ssel (inclusi typeсript), anche se a wiki dice u cuntrariu. Daretu ssel risposte plugin SonarJS, per Typescript SonarTS rispettivament.
U cliente ufficiale hè utilizatu per mandà infurmazione di copertura sonarqube-scanner, chì, utilizendu i paràmetri da cunfigurazione-file, manda sta dati à u servitore soundQube per più cunsulidazione è aggregazione.
di ssel hè . Dunque, cuminciamu a implementazione passu per passu soundQube в Vue- usu di prughjettu Dattiloscrittu.
Per implementà u servitore soundQube andemu à prufittà docker-compose.
sonar.yaml:
version: '1'
services:
simplesample-sonar:
image: sonarqube:lts
ports:
- 9001:9000
- 9092:9092
network_mode: bridgeLanciamentu:
docker-compose -f sonar.yml upDopu questu soundQube serà dispunibule à: .
Ùn ci sò micca prughjetti in questu è hè ghjustu. Correggeremu sta situazione. Aghju pigliatu u prughjettu di esempiu ufficiale per VueJS+TS+Jest. Pieghemu versu noi stessi:
git clone https://github.com/vuejs/vue-test-utils-typescript-example.gitPrima avemu bisognu di stallà u cliente soundQube, chì si chjama sonar-scannerper npm ci hè un involucro:
yarn add sonarqube-scannerÈ aghjunghje immediatamente u cumandamentu à scrittura per travaglià cun ellu.
package.json:
{
…
scripts: {
...
"sonar": "sonar-scanner"
...
},
…
}Dopu, per u scanner per travaglià, avete bisognu di stabilisce i paràmetri di u prugettu in un schedariu speciale. Cuminciamu cù i principii.
sonar-prughjettu.proprietà:
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- sonar.host.url - indirizzu Sonar'A;
- sonar.projectKey - identificatore unicu di prughjettu nantu à u servitore Sonar'A;
- sonar.projectName - u so nome, pò esse cambiatu in ogni mumentu, postu chì u prugettu hè identificatu da ProjectKey;
- sonar.fonti - cartulare cù fonti, di solitu questu src, ma pò esse qualcosa. Stu cartulare hè stabilitu relative à u cartulare radicali, chì hè u cartulare da quale u scanner hè lanciatu;
- sonar.teste - un paràmetru chì và in tandem cù u precedente. Questu hè u cartulare induve si trovanu i testi. In stu prughjettu, ùn ci hè micca un tali cartulare, è a prova hè situata accantu à u cumpunente chì hè pruvatu in u cartulare 'francese test', cusì l'ignoreremu per avà è aduprà u prossimu paràmetru;
- sonar.test.inclusioni - percorsu per e teste cù una maschera, pò esse parechji elementi listati separati da virgule;
- sonar.sourceEncoding - codificazione per i fugliali fonte.
Per u primu lanciamentu di u scanner, tuttu hè prontu, eccettu per l'azzione principale precedente: lanciazione di u mutore di teste stessu, per pudè generà infurmazione nantu à a cobertura, chì u scanner hà da utilizà dopu.
Ma per fà questu, avete bisognu di cunfigurà u mutore di teste per generà sta informazione. In stu prughjettu, u mutore di prova hè Puddu. E i so paràmetri sò in a sezione currispundente di u schedariu package.json.
Aghjunghjemu sti paràmetri:
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*",
"!src/main.ts",
"!src/App.vue",
"!src/**/*.d.*",
"!src/**/*__tests__*"
],Questu hè, avemu stabilitu a bandiera stessu per a necessità di calculà a cobertura è a fonte (cù l'eccezzioni) nantu à a basa di quale serà furmatu.
Avà eseguisce a prova:
yarn testVideremu i seguenti:
U mutivu hè chì ùn ci hè micca codice in u cumpunente stessu. Fixemu questu.
HelloWorld.vue:
...
methods: {
calc(n) {
return n + 1;
}
},
mounted() {
this.msg1 = this.msg + this.calc(1);
},
...Questu serà abbastanza per calculà a cobertura.
Dopu avè riavviatu a prova, avemu da esse sicuru di questu:
Nantu à u screnu duvemu vede infurmazione nantu à a cobertura, è un cartulare serà creatu in u cartulare di u prugettu teamă cù infurmazione di copertura di teste in un formatu universale LCOV (estensione LTP GCOV).
Gcov hè una utilità distribuita liberamente per esaminà a copertura di codice. Gcov genera u numeru esatta di esecuzioni per ogni dichjarazione in un prugramma è permette di aghjunghje annotazioni à u codice fonte. Gcov vene cum'è una utilità standard cum'è parte di u pacchettu GCC.
Lcov - interfaccia grafica per gcov. Assembla i fugliali gcov per i fugliali di fonti multipli è pruduce un inseme di pagine HTML cù codice è informazioni di copertura. E pagine sò ancu generate per fà a navigazione più faciule. Lcov supporta a copertura di corde, funzioni è rami.
Dopu chì e teste sò finite, l'infurmazioni di copertura seranu situate in coverage/lcov.info.
Avemu bisognu di dì Sonar'Da induve possu piglià? Dunque, aghjustemu e seguenti linee à u so schedariu di cunfigurazione. Ma ci hè un puntu: i prughjetti ponu esse multilingue, vale à dì in u cartulare src Ci sò codici fonte per parechje lingue di prugrammazione è affiliazione cù unu o un altru, è in turnu, l'usu di unu o un altru plugin hè determinatu da a so estensione. È l'infurmazione di a cobertura pò esse guardata in diversi posti per diverse lingue di prugrammazione, cusì ogni lingua hà a so propria sezione per stallà questu. U nostru prughjettu usa Dattiloscrittu, cusì avemu bisognu di una sezione di paràmetri solu per questu:
sonar-prughjettu.proprietà:
sonar.typescript.coveragePlugin=lcov
sonar.typescript.lcov.reportPaths=coverage/lcov.infoTuttu hè prontu per u primu lanciu di u scanner. Vogliu nutà chì u prugettu hè Sonar'e hè creatu automaticamente a prima volta chì eseguite u scanner per un prughjettu datu. In i tempi successivi, l'infurmazioni seranu accumulate per vede a dinamica di i cambiamenti in i paràmetri di u prugettu cù u tempu.
Allora, usemu u cumandamentu creatu prima package.json:
yarn run sonar Nutate bè: pudete puru aduprà u paràmetru -X per una registrazione più dettagliata.
Se u scanner hè stata lanciata per a prima volta, allora u binariu di u scanner stessu serà scaricatu prima. Dopu quì, principia è scanning u servitore Sonar'a per i plugins installati, calculendu cusì a lingua supportata. Diversi altri parametri per u so funziunamentu sò ancu caricati: profili di qualità, regule attive, repository di metriche, regule di u servitore.
Nutate bè: Ùn avemu micca aspittà nantu à elli in dettagliu in u quadru di stu articulu, ma pudete sempre cuntattà fonti ufficiali.
Dopu, l'analisi di u cartulare principia src per a dispunibilità di i fugliali fonte per tutti (se un specificu ùn hè micca esplicitamente specificatu) lingua supportata, cù a so indexazione successiva.
Dopu venenu diverse altre analisi, chì ùn avemu micca focu annantu à questu articulu (per esempiu, cum'è linting, rilevazione di duplicazione di codice, etc.).
À a fine di u travagliu di u scanner, tutte l'infurmazioni raccolte sò aggregate, archiviate è mandate à u servitore.
Dopu questu, pudemu digià vede ciò chì hè accadutu in l'interfaccia web:
Comu pudemu vede, qualcosa hà travagliatu, è ancu mostra un tipu di copertura, ma ùn currisponde micca à a nostra Puddu- rapportu.
Scupritemu. Fighjemu u prugettu in più detail, cliccate nant'à u valore di a cobertura, è "fall through" in un rapportu di schedariu detallatu:
Quì vedemu, in più di u schedariu principale, esaminatu HelloWorld.vue, ci hè ancu un schedariu principali.ts, chì spoils u ritrattu tutale di a cobertura. Ma cumu escludemu da u calculu di a cobertura. Iè, tuttu hè currettu, ma era à u livellu Puddu, ma u scanner hà indexatu, cusì hà finitu in i so calculi.
Fixemu questu:
sonar-prughjettu.proprietà:
...
sonar.exclusions=src/main.ts
...Vogliu fà una chjarificazione: in più di i cartulare chì sò specificati in stu paràmetru, tutti i cartulare listati in u paràmetru sò ancu aghjuntu. sonar.test.inclusioni.
Dopu avè lanciatu u scanner, vedemu l'infurmazione curretta:
Fighjemu u prossimu puntu - Profili di qualità. Aghju parlatu sopra di u sustegnu Sonar'om parechje lingue à u stessu tempu. Questu hè esattamente ciò chì vedemu. Ma sapemu chì u nostru prughjettu hè scrittu TS, Allora perchè strain u scanner cù manipulazioni è cuntrolli innecessarii. Puderemu a lingua per l'analisi aghjunghjendu un paràmetru più à u schedariu di cunfigurazione Sonar'A:
sonar-prughjettu.proprietà:
...
sonar.language=ts
...Eseguimu u scanner di novu è vede u risultatu:
A cobertura era cumplettamente andata.
Se guardemu u logu di u scanner, pudemu vede a seguente linea:
Vale à dì, i nostri schedarii di prughjettu simpricimenti ùn sò micca stati indexati.
A situazione hè a siguenti: supportatu ufficialmente VueJs hè in u plugin SonarJSquale hè rispunsevuli di ssel.
Ma stu supportu ùn hè micca in u plugin SonarTS di TS, circa chì un bigliettu ufficiale hè statu apertu in u bug tracker Sonar'A:
Eccu alcuni risposti da unu di i rapprisentanti di i sviluppatori SonarQube, cunfirmendu stu fattu.
Ma tuttu hà travagliatu per noi, ughjetti. Iè hè, pruvemu un pocu "pirate".
S'ellu ci hè sustegnu .vue- i schedari Sonar'Oh, allora pruvemu di dì à ellu di cunsiderà cum'è Dattiloscrittu.
Aghjunghjite un paràmetru:
sonar-prughjettu.proprietà:
...
sonar.typescript.file.suffixes=.ts,.tsx,.vue
...Lancemu u scanner:
È, voilà, tuttu hè tornatu à u normale, è cù un prufilu solu per Dattiloscrittu. Questu hè, avemu riisciutu à risolve u prublema in supportu VueJs + TS di soundQube.
Pruvemu di andà più in là è migliurà un pocu l'infurmazioni di copertura.
Ciò chì avemu fattu finu à avà:
- aghjuntu à u prugettu Sonar-scanner;
- istituisci Puddu per generà infurmazione di copertura;
- cunfigurata Sonar-scanner;
- risolviu u prublema di sustegnu .vue-fichi + Dattiloscrittu.
In più di a cobertura di teste, ci sò altri criteri utili interessanti per a qualità di u codice, per esempiu, a duplicazione di codice è u numeru di linee (involucrate in u calculu di coefficienti in relazione à a cumplessità di u codice) di u prugettu.
In l'implementazione attuale di u plugin per travaglià cù TS (SonarTS) ùn funziona micca CPD (Detector di copia incolla) è cuntà e linee di codice .vue- i schedari.
Per creà una situazione sintetica di duplicazione di codice, simpricimenti duplicà u schedariu di cumpunenti cù un nome diversu è aghjunghje ancu à u codice. principali.ts una funzione dummy è duplicà cù un nome diversu. Per verificà a duplicazione cum'è in .vue, è in .ts - i schedari.
main.ts:
...
function name(params:string): void {
console.log(params);
}
...Per fà questu, avete bisognu di cummentà temporaneamente a linea di cunfigurazione:
sonar-prughjettu.proprietà:
...
sonar.exclusions=src/main.ts
...Riavvia u scanner cù a prova:
yarn test && yarn run sonarDi sicuru, a nostra cobertura cascarà, ma avà ùn ci interessa micca.
In quantu à duplicate linee di codice, vedemu:
Per verificà avemu aduprà CPD- utilità - jscpd:
npx jscpd src
Per e linee di codice:
Forsi questu serà risoltu in e versioni di plugin futuri SonarJS (TS). Vogliu nutà chì si cumincianu à pocu à pocu à unisce sti dui plugins in unu SonarJS, chì pensu chì hè currettu.
Avà vulia cunsiderà l'opzione di migliurà l'infurmazioni di cobertura.
Finu à avà pudemu vede a cobertura di teste in termini percentuali per tuttu u prughjettu, è per i schedari in particulare. Ma hè pussibule espansione stu indicatore cù infurmazioni nantu à a quantità unità-teste per u prugettu, è ancu in u cuntestu di i schedari.
Ci hè una biblioteca chì pò Puddu-cunvertisce u rapportu in furmatu per Sonar'A:
dati di test generici - .
Stallà sta biblioteca in u nostru prughjettu:
yarn add jest-sonar-reporterÈ aghjunghje à a cunfigurazione Puddu:
package.json:
…
"testResultsProcessor": "jest-sonar-reporter"
…Avà eseguisce a prova:
yarn testDopu chì un schedariu serà creatu in a radica di u prugettu test-report.xml.
Adupremu in a cunfigurazione Sonar'A:
sonar-prughjettu.proprietà:
…
sonar.testExecutionReportPaths=test-report.xml
…È ripigliate u scanner:
yarn run sonarVidemu ciò chì hè cambiatu in l'interfaccia Sonar'A:
È nunda hà cambiatu. U fattu hè chì Sonar ùn cunsiderà micca i schedari discrittu in u rapportu Jest cum'è schedari unità- testi. Per correggerà sta situazione, usemu u paràmetru di cunfigurazione Sonar sonar.teste, in quale avemu da indicà esplicitamente i cartulare cù testi (avemu solu unu per avà):
sonar-prughjettu.proprietà:
…
sonar.tests=src/components/__tests__
…Riavvia u scanner:
yarn run sonarVidemu ciò chì hè cambiatu in l'interfaccia:
Avà avemu vistu u numeru di i nostri unità-teste è, avè fallutu clicchendu in l'internu, pudemu vede a distribuzione di stu numeru trà i schedarii di u prugettu:
cunchiusioni
Dunque, avemu vistu un strumentu per l'analisi cuntinuu soundQube. Avemu integratu cun successu in questu un prughjettu scrittu in VueJs + TS. Risolti alcuni prublemi di cumpatibilità. Avemu aumentatu u cuntenutu di l'infurmazioni di l'indicatore di copertura di teste. In questu articulu avemu esaminatu solu unu di i criterii di qualità di codice (forsi unu di i principali), ma soundQube supporta altri criteri di qualità, cumpresi i testi di sicurezza. Ma micca tutte queste caratteristiche sò cumplettamente dispunibili cumunità- versioni. Una di e funzioni interessanti è utili hè l'integrazione soundQube cù diversi sistemi di gestione di repository di codice, cum'è GitLab è BitBucket. Per prevene unisce pull (merge) dumanda'a à a branche principale di u repositoriu quandu a cobertura hè degradata. Ma questu hè una storia per un articulu completamente diversu.
PS: Tuttu ciò chì descrive in l'articulu in forma di codice hè dispunibule in .
Solu l'utilizatori registrati ponu participà à l'indagine. , per piacè.
Aduprate a piattaforma SonarQube:
-
26,3%Iè 5
-
15,8%No 3
-
15,8%Aghju intesu parlà di sta piattaforma è vogliu aduprà3
-
10,5%Aghju intesu parlà di sta piattaforma è ùn vogliu micca aduprà2
-
0,0%Aghju utilizatu una piattaforma diversa0
-
31,6%Prima volta chì aghju intesu parlà di ella6
19 utilizatori anu vutatu. 3 utilizatori si sò astenuti.
Source: www.habr.com