Kasutame platvormi oma töös aktiivselt soundQube koodi kvaliteedi hoidmiseks kõrgel tasemel. Ühe sisse kirjutatud projekti integreerimisel VueJs + masinakiri, tekkisid probleemid. Seetõttu tahaksin teile üksikasjalikumalt rääkida, kuidas meil õnnestus need lahendada.

Selles artiklis räägime, nagu ma eespool kirjutasin, SonarQube'i platvormist. Väike teooria - mis see üldiselt on, neile, kes sellest esimest korda kuulevad:

soundQube (endine Sonar) on avatud lähtekoodiga platvorm pidevaks kontrollimiseks ja koodikvaliteedi mõõtmiseks.
Toetab koodianalüüsi ja vigade tuvastamist vastavalt programmeerimisstandardite MISRA C, MISRA C++, MITER/CWE ja CERT Secure Coding Standards reeglitele. Samuti suudab see tuvastada vigu OWASP Top 10 ja CWE/SANS Top 25 programmeerimisvigade loendist.
Vaatamata sellele, et platvorm kasutab erinevaid valmistööriistu, taandab SonarQube tulemused ühele armatuurlauale, säilitades käitamise ajalugu ja võimaldades seeläbi näha tarkvara kvaliteedi muutuste üldist trendi arenduse käigus.

Rohkem üksikasju leiate aadressilt ametlikul kodulehel

Toetatud on suur hulk programmeerimiskeeli. Ülaltoodud lingi teabe põhjal otsustades on need rohkem kui 25 keelt. Konkreetse keele toetamiseks peate installima vastava pistikprogrammi. Kogukonna versioon sisaldab töötamiseks pistikprogrammi Javascript (sealhulgas typeсript), kuigi wiki ütleb vastupidist. Taga Javascript plugina vastused SonarJS, masinakirja jaoks SonarTS võrra.

Ametlikku klienti kasutatakse leviteabe saatmiseks sonarqube-skanner, mis, kasutades seadeid alates config-fail, saadab need andmed serverisse soundQube edasiseks konsolideerimiseks ja liitmiseks.

eest Javascript on npm ümbris. Niisiis, alustame samm-sammult rakendamist soundQube в Vue- projekti kasutamine Masinakiri.

Serveri juurutamiseks soundQube kasutame ära docker-kompositsiooni.

sonar.yaml:

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

Käivitamine:

docker-compose -f sonar.yml up

Selle järel soundQube on saadaval aadressil: http://localhost:9001 .

Selles pole veel projekte ja see on aus. Me parandame selle olukorra. Võtsin ametliku näiteprojekti VueJS+TS+Jest. Painutame selle enda poole:

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

Kõigepealt peame installima kliendi soundQube, mida nimetatakse sonar-skannerjaoks npm seal on ümbris:

yarn add sonarqube-scanner

Ja lisage kohe käsk skripte sellega töötada.

package.json:

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

Järgmisena peate skanneri töötamiseks määrama projekti sätted spetsiaalses failis. Alustame põhitõdedest.

sonar-projekt.omadused:

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 - aadress Sonar"A;
• sonar.projectKey – unikaalne projekti identifikaator serveris Sonar"A;
• sonar.projectName – selle nime, seda saab igal ajal muuta, kuna projekti tuvastab projektivõti;
• sonar.sources – kaust allikatega, tavaliselt see src, kuid see võib olla ükskõik milline. See kaust on määratud juurkausta suhtes, mis on kaust, millest skanner käivitatakse;
• sonar.testid – parameeter, mis läheb samaaegselt eelmisega. See on kaust, kus testid asuvad. Selles projektis sellist kausta pole ja test asub testitava komponendi kõrval kaustas 'test', seega ignoreerime seda praegu ja kasutame järgmist parameetrit;
• sonar.test.inclusions – maski kasutavate testide tee, võib olla mitu komadega eraldatud elementi;
• sonar.sourceEncoding - lähtefailide kodeering.

Skänneri esmakordseks käivitamiseks on kõik valmis, välja arvatud peamine eelnev toiming: testmootori enda käivitamine, et see saaks genereerida teavet leviala kohta, mida skanner seejärel kasutab.

Kuid selleks peate selle teabe genereerimiseks konfigureerima testmootori. Selles projektis on katsemootor on. Ja selle seaded on faili vastavas jaotises pakett.json.

Lisame järgmised seaded:

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

See tähendab, et paneme lipu enda peale katvuse arvutamise vajaduse ja allika (koos eranditega), mille alusel see moodustatakse.

Nüüd käivitame testi:

yarn test

Näeme järgmist:

Põhjus on selles, et komponendis endas puudub kood. Teeme selle korda.

HelloWorld.vue:

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

Sellest piisab katvuse arvutamiseks.

Pärast testi taaskäivitamist veendume selles:

Ekraanil peaksime nägema teavet leviala kohta ja projekti kausta luuakse kaust katmine testide katvuse teabega universaalses vormingus LCOV (LTP GCOV laiendus).

Gcov on vabalt levitatav utiliit koodi leviala uurimiseks. Gcov genereerib programmi iga lause jaoks täpse täitmiste arvu ja võimaldab teil lisada lähtekoodile märkusi. Gcov on GCC paketi osana standardutiliit.
Lcov - gcovi graafiline liides. See koondab gcov-failid mitme lähtefaili jaoks ja loob HTML-lehtede komplekti koos koodi ja leviala teabega. Samuti luuakse lehti navigeerimise hõlbustamiseks. Lcov toetab stringide, funktsioonide ja harude katmist.

Pärast testide lõpetamist asub leviala teave coverage/lcov.info.
Peame ütlema Sonar'Kust ma selle saan? Seetõttu lisame selle konfiguratsioonifaili järgmised read. Kuid on üks punkt: projektid võivad olla mitmekeelsed, see tähendab kaustas src on olemas mitme programmeerimiskeele lähtekoodid ja seotus ühe või teisega ning omakorda määrab ühe või teise pistikprogrammi kasutamise selle laiendus. Ja levialast teavet saab erinevate programmeerimiskeelte jaoks salvestada erinevatesse kohtadesse, nii et igal keelel on selle seadistamiseks oma jaotis. Meie projekt kasutab Masinakiri, seega vajame seadete jaotist just selle jaoks:

sonar-projekt.omadused:

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

Kõik on skanneri esmaseks käivitamiseks valmis. Tahaksin märkida, et projekt on Sonar'e luuakse automaatselt, kui käivitate antud projekti skanneri esimest korda. Järgnevatel aegadel kogutakse teavet, et näha projekti parameetrite muutuste dünaamikat ajas.

Niisiis, kasutame varem loodud käsku pakett.json:

yarn run sonar 

Märkus: võite kasutada ka parameetrit -X täpsemaks logimiseks.

Kui skanner käivitati esimest korda, laaditakse kõigepealt alla skanneri enda binaarfail. Pärast seda käivitub see ja hakkab serverit skannima Sonar'a installitud pistikprogrammide jaoks, arvutades seeläbi toetatud keele. Laaditakse ka mitmesuguseid muid selle töö parameetreid: kvaliteediprofiilid, aktiivsed reeglid, mõõdikute hoidla, serverireeglid.

Märkus: Selle artikli raames me nendel üksikasjalikult ei peatu, kuid võite alati ühendust võtta ametlike allikatega.

Järgmisena algab kaustade analüüs src lähtefailide kättesaadavuse kohta kõigis toetatud keeltes (kui konkreetne pole selgesõnaliselt määratud) koos nende hilisema indekseerimisega.

Järgmiseks tulevad mitmesugused muud analüüsid, millele me selles artiklis ei keskendu (nt linting, koodi dubleerimise tuvastamine jne).

Pärast skanneri töö lõppu kogu kogutud teave koondatakse, arhiveeritakse ja saadetakse serverisse.

Pärast seda näeme juba veebiliideses, mis juhtus:

Nagu näeme, miski toimis ja näitab isegi mingit katvust, kuid see ei ühti meie omaga on-aruanne.

Selgitame välja. Vaatame projekti üksikasjalikumalt, klõpsake katvuse väärtust ja "kukkume läbi" üksikasjalikku failiaruannet:

Siin näeme lisaks põhitoimikule, mida uuriti HelloWorld.vue, on ka fail main.ts, mis rikub kogu katvuse pildi. Aga kuidas me selle katte arvestamisest välja jätsime. Jah, kõik on õige, kuid see oli tasemel on, kuid skanner indekseeris selle, nii et see sattus oma arvutustesse.

Parandame selle:

sonar-projekt.omadused:

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

Täpsustaksin: lisaks selles parameetris määratud kaustadele lisatakse ka kõik parameetris loetletud kaustad sonar.test.inclusions.

Pärast skanneri käivitamist näeme õiget teavet:

Vaatame järgmist punkti - Kvaliteetsed profiilid. Eespool rääkisin toetusest Sonarmitmes keeles korraga. See on täpselt see, mida me näeme. Kuid me teame, et meie projekt on sisse kirjutatud TS, miks siis skannerit tarbetute manipulatsioonide ja kontrollidega koormata. Analüüsi keele määrame, lisades konfiguratsioonifaili veel ühe parameetri Sonar'A:

sonar-projekt.omadused:

...
sonar.language=ts
...

Käivitame skanneri uuesti ja vaatame tulemust:

Katvus oli täiesti kadunud.

Kui vaatame skanneri logi, näeme järgmist rida:

See tähendab, et meie projektifaile lihtsalt ei indekseeritud.

Olukord on järgmine: ametlikult toetatud VueJs on pistikprogrammis SonarJSkes vastutab Javascript.

Kuid see tugi pole pistikprogrammis SonarTS eest TS, mille kohta avati veajälgijas ametlik pilet Sonar'A:

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

Siin on mõned vastused ühelt SonarQube'i arendaja esindajalt, mis kinnitavad seda fakti.

Aga kõik toimis meie jaoks, vastutate. Jah, see on nii, proovime seda natuke "häkkima".
Kui on toetus .vue- failid Sonar„Oh, siis proovime talle öelda, et ta peaks neid nendeks Masinakiri.

Lisame parameetri:

sonar-projekt.omadused:

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

Käivitame skanneri:

Ja voila, kõik on tagasi normaalseks ja ainult ühe profiiliga Masinakiri. See tähendab, et meil õnnestus probleem lahendada VueJs+TS eest soundQube.

Proovime minna kaugemale ja parandada veidi leviteavet.

Mida oleme seni teinud:

• projektile lisatud Sonar-skanner;
• üles seada on levialast teavet genereerida;
• konfigureeritud Sonar-skanner;
• lahendas tugiprobleemi .vue-failid + Masinakiri.

Lisaks testi katvusele on koodi kvaliteedi jaoks ka muid huvitavaid kasulikke kriteeriume, näiteks koodi dubleerimine ja projekti ridade arv (mis on seotud koodi keerukusega seotud koefitsientide arvutamisega).

Praeguses rakenduses töötamiseks mõeldud pistikprogrammi TS (SonarTS) ei tööta CPD (kopeerimiskleebi detektor) ja koodiridade loendamine .vue- failid.

Koodi dubleerimise sünteetilise olukorra loomiseks dubleerige lihtsalt komponendifail teise nimega ja lisage see ka koodi main.ts näiv funktsioon ja dubleerige see teise nimega. Dubleerimise kontrollimiseks nagu on .vueja sisse .ts - failid.

main.ts:

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

Selleks peate konfiguratsioonirea ajutiselt kommenteerima:

sonar-projekt.omadused:

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

Taaskäivitame skanneri koos testimisega:

yarn test && yarn run sonar

Muidugi meie leviala langeb, aga praegu see meid ei huvita.

Koodiridade dubleerimise osas näeme:

Kontrollimiseks kasutame CPD- kasulikkus - jscpd:

npx jscpd src

Koodiridade jaoks:

Võib-olla lahendatakse see tulevaste pistikprogrammide versioonides SonarJS(TS). Tahaksin märkida, et nad hakkavad järk-järgult neid kahte pistikprogrammi üheks liitma SonarJS, mis on minu arvates õige.

Nüüd tahtsin kaaluda võimalust parandada levialast teavet.

Siiani näeme testi katvust protsentides kogu projekti ja eriti failide kohta. Kuid seda indikaatorit on võimalik koguse teabega laiendada üksus-testid projekti jaoks, samuti failide kontekstis.

Seal on raamatukogu, mis saab on- teisendada aruanne vormingusse Sonar'A:
üldised testiandmed - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Installime selle teegi oma projekti:

yarn add jest-sonar-reporter

Ja lisage see konfiguratsiooni on:

package.json:

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

Nüüd käivitame testi:

yarn test

Pärast seda luuakse projekti juurfaili fail test-report.xml.

Kasutame seda konfiguratsioonis Sonar'A:

sonar-projekt.omadused:

…
sonar.testExecutionReportPaths=test-report.xml
…

Ja taaskäivitage skanner:

yarn run sonar

Vaatame, mis on liideses muutunud Sonar'A:

Ja midagi pole muutunud. Fakt on see, et Sonar ei pea Jesti aruandes kirjeldatud faile failidena üksus- testid. Selle olukorra parandamiseks kasutame konfiguratsiooniparameetrit Sonar sonar.testid, milles näitame selgesõnaliselt välja testidega kaustad (meil on praegu ainult üks):

sonar-projekt.omadused:

…
sonar.tests=src/components/__tests__
…

Taaskäivitame skanneri:

yarn run sonar

Vaatame, mis on liideses muutunud:

Nüüd oleme näinud oma numbrit üksus-testid ja kui see ei õnnestunud, näeme selle numbri jaotust projektifailide vahel:

Järeldus

Niisiis, vaatasime pideva analüüsi tööriista soundQube. Integreerisime sellesse edukalt sisse kirjutatud projekti VueJs+TS. Lahendatud on mõned ühilduvusprobleemid. Suurendasime testi katvuse indikaatori infosisu. Selles artiklis uurisime ainult ühte koodi kvaliteedikriteeriumidest (võib-olla üht peamist), kuid soundQube toetab muid kvaliteedikriteeriume, sealhulgas ohutustestimist. Kuid mitte kõik need funktsioonid pole täielikult saadaval kogukond- versioonid. Üks huvitavaid ja kasulikke funktsioone on integreerimine soundQube erinevate koodihoidlate haldussüsteemidega, nagu GitLab ja BitBucket. Ennetama ühendamise tõmbe (ühendamise) taotlus'a hoidla põhiharusse, kui leviala on halvenenud. Kuid see on lugu täiesti erineva artikli jaoks.

PS: Kõik artiklis kirjeldatud koodi kujul on saadaval minu kahvel.

Küsitluses saavad osaleda ainult registreerunud kasutajad. Logi sissepalun.

Kas kasutate SonarQube'i platvormi:

• 26,3%jah 5

• 15,8%Ei 3

• 15,8%Kuulsin sellest platvormist ja tahan seda kasutada3

• 10,5%Olen sellest platvormist kuulnud ja ei taha seda kasutada2

• 0,0%Ma kasutan teist platvormi0

• 31,6%Esimest korda kuulen temast 6

19 kasutajat hääletas. 3 kasutajat jäi erapooletuks.

Allikas: www.habr.com