Mir benotzen d'Plattform aktiv an eiser Aarbecht SonarQube Code Qualitéit op engem héijen Niveau ze erhalen. Beim Integratioun vun engem vun de Projete geschriwwe ginn VueJs+Typescript, Problemer opgestan. Dofir wëll ech Iech méi am Detail soen wéi mir et fäerdeg bruecht hunn se ze léisen.

An dësem Artikel wäerte mir schwätzen, wéi ech uewen geschriwwen hunn, iwwer d'SonarQube Plattform. Eng kleng Theorie - wat et am Allgemengen ass, fir déi, déi fir d'éischte Kéier doriwwer héieren:

SonarQube (fréier Sonar) ass eng Open Source Plattform fir kontinuéierlech Inspektioun a Code Qualitéitsmessung.
Ënnerstëtzt Code Analyse a Fehlererkennung no de Regele vun de MISRA C, MISRA C++, MITER/CWE a CERT Secure Coding Standards Programméierungsnormen. Et kann och Feeler aus den OWASP Top 10 an CWE / SANS Top 25 Programméierungsfehlerlëschten erkennen.
Trotz der Tatsaach datt d'Plattform verschidde fäerdeg Tools benotzt, reduzéiert SonarQube d'Resultater op een eenzegen Dashboard, hält eng Geschicht vu Runen an erlaabt Iech doduerch den allgemengen Trend vun Ännerungen an der Softwarequalitéit während der Entwécklung ze gesinn.

Méi Detailer fannt Dir op offizieller Websäit

Eng grouss Zuel vu Programméierungssprooche ginn ënnerstëtzt. No der Informatioun vum Link hei uewen beurteelen, sinn dëst méi wéi 25 Sproochen. Fir eng spezifesch Sprooch z'ënnerstëtzen, musst Dir de passenden Plugin installéieren. D'Communautéit Versioun enthält e Plugin fir mat ze schaffen Javascript (dorënner typesсript), obwuel d'Wiki de Géigendeel seet. Hannert Javascript Plugin Äntwerten SonarJS, fir Typescript Sonar TS respektéiert.

Den offiziellen Client gëtt benotzt fir Ofdeckungsinformatioun ze schécken sonarqube-scanner, déi, benotzt d'Astellunge vun config-Datei, schéckt dës Donnéeën op de Server SonarQube fir weider Konsolidéierung an Aggregatioun.

fir Javascript ass npm wrapper. Also, loosst eis Schrëtt fir Schrëtt Implementatioun ufänken SonarQube в Vue-Projet benotzt Schreifweis.

Fir e Server z'installéieren SonarQube loosst eis profitéieren docker-komponéieren.

sonar.yaml:

version: '1'
    services:
        simplesample-sonar:
            image: sonarqube:lts
            ports:
                - 9001:9000
                - 9092:9092
            network_mode: bridge

Start:

docker-compose -f sonar.yml up

Nodeems dës geschitt SonarQube wäert verfügbar sinn um - http://localhost:9001 .

Et sinn nach keng Projeten dran an dat ass fair. Mir korrigéieren dës Situatioun. Ech hunn déi offiziell Beispill Projet fir VueJS+TS+Jest. Loosst eis et op eis selwer béien:

git clone https://github.com/vuejs/vue-test-utils-typescript-example.git

Als éischt musse mir de Client installéieren SonarQube, déi genannt gëtt sonar-scanner, fir npm et gëtt e Wrapper:

yarn add sonarqube-scanner

A fügen direkt de Kommando un Skripte benotzen domat ze schaffen.

package.json:

{
 … 
   scripts: {
      ...
      "sonar": "sonar-scanner"
      ...
   },
 …
}

Als nächst, fir de Scanner ze schaffen, musst Dir d'Projet Astellungen an enger spezieller Datei setzen. Loosst d'mat de Grondlage ufänken.

sonar-project.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

• sonar.host.url - Adress Sonar'A;
• sonar.projectKey - eenzegaartege Projet Identifizéierer um Server Sonar'A;
• sonar.projectName - säin Numm, et kann zu all Moment geännert ginn, well de Projet identifizéiert gëtt duerch Projet Schlëssel;
• sonar.sources - Dossier mat Quellen, normalerweis dëst src, mee kann alles sinn. Dësen Dossier ass relativ zum Root-Ordner gesat, deen den Dossier ass, aus deem de Scanner gestart gëtt;
• sonar.tests - e Parameter deen an Tandem mat deem virdru geet. Dëst ass den Dossier wou d'Tester sinn. An dësem Projet gëtt et keen esou Dossier, an den Test läit nieft der Komponent déi am Dossier getest gëtt 'Test', also ignoréiere mir et fir de Moment a benotzen den nächste Parameter;
• sonar.test.Inklusiounen - Wee fir Tester mat enger Mask, et kann e puer Elementer opgezielt sinn, getrennt mat Kommaen;
• sonar.sourceEncoding - Kodéierung fir Quelldateien.

Fir den éischte Start vum Scanner ass alles prett, ausser déi Haaptvirdrun Aktioun: Start vum Testmotor selwer, sou datt et Informatioun iwwer d'Ofdeckung generéiere kann, déi de Scanner duerno benotzt.

Awer fir dëst ze maachen, musst Dir den Testmotor konfiguréieren fir dës Informatioun ze generéieren. An dësem Projet ass den Testmotor et ass. A seng Astellunge sinn an der entspriechender Sektioun vun der Datei Package.json.

Loosst eis dës Astellunge addéieren:

"collectCoverage": true,
"collectCoverageFrom": [
      "src/**/*",
      "!src/main.ts",
      "!src/App.vue",
      "!src/**/*.d.*",
      "!src/**/*__tests__*"
],

Dat ass, mir setzen de Fändel selwer fir de Besoin fir d'Ofdeckung an d'Quell ze berechnen (zesumme mat Ausnahmen) op Basis vun deem et geformt gëtt.

Loosst eis elo den Test lafen:

yarn test

Mir wäerten déi folgend gesinn:

De Grond ass datt et kee Code an der Komponent selwer ass. Loosst eis dat fixéieren.

HelloWorld.vue:

...
methods: {
    calc(n) {
      return n + 1;
    }
  },
mounted() {
  this.msg1 = this.msg + this.calc(1);
},
...

Dëst wäert genuch sinn fir d'Ofdeckung ze berechnen.

Nodeems mir den Test nei gestart hunn, wäerte mir sécher sinn:

Um Écran solle mir Informatiounen iwwert d'Ofdeckung gesinn, an engem Dossier gëtt am Projet Dossier erstallt duerginn mat Testofdeckungsinformatioun an engem universelle Format LCOV (LTP GCOV Extensioun).

Gcov ass e fräi verdeelt Utility fir Code Ofdeckung z'ënnersichen. Gcov generéiert déi exakt Zuel vun Ausféierunge fir all Ausso an engem Programm an erlaabt Iech Annotatiounen un de Quellcode ze addéieren. Gcov kënnt als Standard Utility als Deel vum GCC Package.
Lcov - grafesch Interface fir gcov. Et versammelt gcov Dateien fir verschidde Quelldateien a produzéiert eng Rei vun HTML Säiten mat Code an Ofdeckungsinformatioun. Säiten ginn och generéiert fir d'Navigatioun méi einfach ze maachen. Lcov ënnerstëtzt Ofdeckung vu Saiten, Funktiounen a Filialen.

Nodeems d'Tester ofgeschloss sinn, gëtt d'Ofdeckungsinformatioun lokaliséiert coverage/lcov.info.
Mir mussen soen Sonar'Wou kann ech et kréien? Dofir, loosst eis déi folgend Zeilen op seng Konfiguratiounsdatei addéieren. Mä et ass ee Punkt: Projete kënne méisproocheg sinn, dat heescht am Dossier src et gi Quellcoden fir verschidde Programméierungssproochen a Verbindung mat enger oder anerer, an am Tour gëtt d'Benotzung vun engem oder anere Plugin duerch seng Extensioun bestëmmt. An Ofdeckungsinformatioun kann op verschiddene Plazen fir verschidde Programméierungssprooche gespäichert ginn, sou datt all Sprooch seng eege Sektioun huet fir dëst opzestellen. Eise Projet benotzt Schreifweis, also brauche mir eng Astellungssektioun just dofir:

sonar-project.properties:

sonar.typescript.coveragePlugin=lcov
sonar.typescript.lcov.reportPaths=coverage/lcov.info

Alles ass prett fir den éischte Start vum Scanner. Ech géif gären notéieren, datt de Projet ass Sonar'e gëtt automatesch erstallt déi éischte Kéier wann Dir de Scanner fir e bestëmmte Projet leeft. A spéider Zäiten gëtt d'Informatioun gesammelt fir d'Dynamik vun den Ännerungen an de Projetparameter iwwer Zäit ze gesinn.

Also, loosst eis de Kommando benotzen, dee virdru erstallt gouf Package.json:

yarn run sonar 

Opgepasst: Dir kënnt och de Parameter benotzen -X fir méi detailléiert Logged.

Wann de Scanner fir d'éischte Kéier lancéiert gouf, da gëtt de Binär vum Scanner selwer als éischt erofgelueden. Duerno fänkt et un a fänkt de Server ze scannen Sonar'a fir installéiert Plugins, doduerch berechent ënnerstëtzt Sprooch. Verschidde aner Parameteren fir seng Operatioun sinn och gelueden: Qualitéitsprofile, aktiv Regelen, Metriken Repository, Serverregelen.

Opgepasst: Mir wäerten se net am Detail am Kader vun dësem Artikel ophalen, awer Dir kënnt ëmmer offiziell Quellen kontaktéieren.

Als nächst fänkt d'Dossieranalyse un src fir d'Disponibilitéit vu Quelldateien fir all (wann eng spezifesch net explizit spezifizéiert ass) ënnerstëtzt Sprooch, mat hirer spéiderer Indexéierung.

Als nächst kommen verschidden aner Analysen, op déi mir net an dësem Artikel konzentréieren (zum Beispill, Linting, Detektioun vu Codeduplikatioun, asw.).

Um Enn vun der Aarbecht vum Scanner gëtt all gesammelt Informatioun aggregéiert, archivéiert an op de Server geschéckt.

Duerno kënne mir scho gesinn wat an der Webinterface geschitt ass:

Wéi mir kënne gesinn, huet eppes geschafft, a weist souguer eng Aart Ofdeckung, awer et passt net bei eis et ass-bericht.

Loosst eis et erausfannen. Loosst eis de Projet méi detailléiert kucken, klickt op den Ofdeckungswäert, a "falen duerch" an en detailléierte Dateiebericht:

Hei gesi mer, nieft dem Haapt, iwwerpréiften Dossier HelloWorld.vue, et gëtt och e Fichier main.ts, wat d'ganz Bild vun der Ofdeckung verwinnt. Awer wéi kommt mir et aus der Berechnung vun der Ofdeckung ausgeschloss. Jo, alles ass richteg, awer et war um Niveau et ass, mä de Scanner huet et indexéiert, sou datt et a seng Berechnunge koum.

Loosst eis dëst fixéieren:

sonar-project.properties:

...
sonar.exclusions=src/main.ts
...

Ech wéilt eng Erklärung maachen: Nieft den Ordner, déi an dësem Parameter spezifizéiert sinn, ginn och all Ordner, déi am Parameter opgezielt sinn, derbäigesat sonar.test.Inklusiounen.

Nodeems de Scanner gestart gouf, gesi mir déi richteg Informatioun:

Loosst eis den nächste Punkt kucken - Qualitéit Profiler. Ech hunn uewen iwwer Ënnerstëtzung geschwat Sonarvun e puer Sproochen zur selwechter Zäit. Dëst ass genau wat mir gesinn. Awer mir wëssen datt eise Projet ageschriwwen ass TS, Also firwat de Scanner mat onnéidege Manipulatiounen a Kontrollen belaaschten. Mir setzen d'Sprooch fir d'Analyse duerch e méi Parameter an d'Konfiguratiounsdatei bäizefügen Sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

Loosst eis de Scanner nach eng Kéier lafen a kuckt d'Resultat:

D'Ofdeckung war komplett fort.

Wa mir de Scanner Log kucken, kënne mir déi folgend Linn gesinn:

Dat heescht, eis Projetdateien goufen einfach net indexéiert.

D'Situatioun ass wéi follegt: offiziell ënnerstëtzt VueJs ass am Plugin SonarJSdéi responsabel ass fir Javascript.

Awer dës Ënnerstëtzung ass net am Plugin Sonar TS fir TS, iwwer deen en offiziellen Ticket am Bug Tracker opgemaach gouf Sonar'A:

1. https://jira.sonarsource.com/browse/MMF-1441
2. https://github.com/SonarSource/SonarJS/issues/1281

Hei sinn e puer Äntwerten vun engem vun de Vertrieder vun de SonarQube Entwéckler, déi dës Tatsaach bestätegt.

Awer alles huet fir eis geschafft, Dir Objet. Jo et ass, loosst eis et e bësse probéieren "hack".
Wann et Ënnerstëtzung gëtt .vue- Dateien Sonar'Oh, da loosst eis probéieren him ze soen datt se se als Schreifweis.

Loosst eis e Parameter derbäi:

sonar-project.properties:

...
sonar.typescript.file.suffixes=.ts,.tsx,.vue
...

Loosst eis de Scanner starten:

An, voila, alles ass erëm normal, a mat engem Profil nëmmen fir Schreifweis. Dat ass, mir hunn et fäerdeg bruecht de Problem an der Ënnerstëtzung ze léisen VueJs+TS fir SonarQube.

Loosst eis probéieren méi wäit ze goen an d'Ofdeckungsinformatioun e bëssen ze verbesseren.

Wat mir bis elo gemaach hunn:

• op de Projet bäigefüügt Sonar- Scanner;
• ageriicht et ass Ofdeckungsinformatioun ze generéieren;
• konfiguréiert Sonar- Scanner;
• geléist der Ënnerstëtzung Problem .vue-Dateien + Schreifweis.

Nieft Tester Ofdeckung, ginn et aner interessant nëtzlech Critèrë fir Code Qualitéit, Zum Beispill, Code Duplikatioun an d'Zuel vun Linnen (involvéiert an der Berechnung vun Koeffizienten Zesummenhang mat Code Komplexitéit) vum Projet.

An der aktueller Ëmsetzung vum Plugin fir mat ze schaffen TS (Sonar TS) wäert net schaffen CPD (Copy Paste Detector) a zielen Zeilen vum Code .vue- Dateien.

Fir eng synthetesch Situatioun vu Code Duplikatioun ze kreéieren, duplizéiert einfach d'Komponentdatei mat engem aneren Numm an füügt se och an de Code bäi. main.ts eng Dummy Funktioun an duplizéieren se mat engem aneren Numm. Fir Duplikatioun ze kontrolléieren wéi an .vue, a .ts - Dateien.

main.ts:

...
function name(params:string): void {
  console.log(params);
}
...

Fir dëst ze maachen, musst Dir d'Konfiguratiounslinn temporär kommentéieren:

sonar-project.properties:

...
sonar.exclusions=src/main.ts
...

Loosst eis de Scanner nei starten zesumme mam Test:

yarn test && yarn run sonar

Natierlech wäert eis Ofdeckung falen, awer elo interesséiert eis dat net.

Am Sënn vun duplizéiert Zeilen vum Code, wäerte mir gesinn:

Ze kontrolléieren wäerte mir benotzen CPD-Utility - jscpd:

npx jscpd src

Fir Zeilen vum Code:

Vläicht gëtt dëst an zukünfteg Plugin Versiounen geléist SonarJS(TS). Ech géif gären notéieren datt se graduell ufänken dës zwee Plugins an een ze fusionéieren SonarJS, wat ech mengen richteg ass.

Elo wollt ech d'Optioun betruechten d'Ofdeckungsinformatioun ze verbesseren.

Bis elo kënne mir Testofdeckung a Prozentsaz fir de ganze Projet gesinn, a besonnesch fir Dateien. Awer et ass méiglech dës Indikator mat Informatioun iwwer d'Quantitéit auszebauen Apparat-Tester fir de Projet, wéi och am Kontext vun Dateien.

Et gëtt eng Bibliothéik déi kann et ass-konvertéieren de Rapport an Format fir Sonar'A:
generesch Testdaten - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Loosst eis dës Bibliothéik an eisem Projet installéieren:

yarn add jest-sonar-reporter

A füügt et un d'Konfiguratioun et ass:

package.json:

…
"testResultsProcessor": "jest-sonar-reporter"
…

Loosst eis elo den Test lafen:

yarn test

Duerno gëtt eng Datei an der Root vum Projet erstallt test-report.xml.

Loosst eis et an der Konfiguratioun benotzen Sonar'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

A restart de Scanner:

yarn run sonar

Loosst eis kucken wat am Interface geännert huet Sonar'A:

An näischt huet geännert. D'Tatsaach ass datt Sonar d'Dateien, déi am Jest-Rapport beschriwwe sinn, net als Dateien ugesinn Apparat-Tester. Fir dës Situatioun ze korrigéieren, benotze mir de Konfiguratiounsparameter Sonar sonar.tests, an deem mir d'Ordner mat Tester explizit uginn (mir hunn elo nëmmen een):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Loosst eis de Scanner nei starten:

yarn run sonar

Loosst eis kucken wat am Interface geännert huet:

Elo hu mir d'Zuel vun eise gesinn Apparat-Tester an, nodeems mir gescheitert hunn andeems Dir dobannen klickt, kënne mir d'Verdeelung vun dëser Nummer ënner de Projetsdateien gesinn:

Konklusioun

Also hu mir e Tool fir kontinuéierlech Analyse gekuckt SonarQube. Mir hunn erfollegräich e Projet geschriwwen an et integréiert VueJs+TS. E puer Kompatibilitéitsprobleemer fixéiert. Mir hunn den Informatiounsinhalt vum Testdeckungsindikator erhéicht. An dësem Artikel iwwerpréift mir nëmmen ee vun de Code Qualitéit Critèren (vläicht ee vun den Haapt), mä SonarQube ënnerstëtzt aner Qualitéit Critèren, dorënner Sécherheet Testen. Awer net all dës Funktiounen si voll verfügbar an Communautéit- Versiounen. Ee vun den interessanten an nëtzlechen Features ass Integratioun SonarQube mat verschiddene Code Repository Management Systemer, wéi GitLab a BitBucket. Ze verhënneren merge pull (fusionéieren) Ufro'a an d'Haaptzweig vum Repository wann d'Ofdeckung degradéiert ass. Awer dëst ass eng Geschicht fir e ganz aneren Artikel.

PS: Alles wat am Artikel a Form vu Code beschriwwe gëtt ass verfügbar an meng Gabel.

Nëmme registréiert Benotzer kënnen un der Ëmfro deelhuelen. Umellen, wann ech glift.

Benotzt Dir d'SonarQube Plattform:

• 26,3%jo5

• 15,8%Nee3

• 15,8%Ech hunn iwwer dës Plattform héieren a wëll3 benotzen

• 10,5%Ech hunn iwwer dës Plattform héieren a wëll net 2 benotzen

• 0,0%Ech benotzen eng aner Plattform0

• 31,6%Éischt Kéier hunn ech iwwer hir héieren6

19 Benotzer hunn gestëmmt. 3 Benotzer hu sech enthalen.

Source: will.com