Platforma aktyviai naudojame savo darbe „SonarQube“ išlaikyti aukštą kodo kokybę. Integruojant vieną iš parašytų projektų VueJs+Mašinraštis, iškilo problemų. Todėl norėčiau papasakoti plačiau, kaip mums pavyko jas išspręsti.

Šiame straipsnyje kalbėsime, kaip rašiau aukščiau, apie SonarQube platformą. Šiek tiek teorijos – kas tai apskritai, tiems, kurie apie tai girdi pirmą kartą:

„SonarQube“ (buvęs "Sonar) yra atvirojo kodo platforma, skirta nuolatiniam tikrinimui ir kodo kokybės matavimui.
Palaiko kodo analizę ir klaidų aptikimą pagal MISRA C, MISRA C++, MITER/CWE ir CERT Secure Coding Standards programavimo standartų taisykles. Jis taip pat gali atpažinti klaidas iš OWASP Top 10 ir CWE/SANS Top 25 programavimo klaidų sąrašų.
Nepaisant to, kad platforma naudoja įvairius paruoštus įrankius, „SonarQube“ sumažina rezultatus iki vieno prietaisų skydelio, išsaugodama paleidimų istoriją ir taip leisdama matyti bendrą programinės įrangos kokybės pokyčių kūrimo metu tendenciją.

Daugiau informacijos rasite adresu oficiali svetainė

Palaikoma daug programavimo kalbų. Sprendžiant iš informacijos iš aukščiau esančios nuorodos, tai daugiau nei 25 kalbos. Norėdami palaikyti konkrečią kalbą, turite įdiegti atitinkamą papildinį. Bendruomenės versijoje yra įskiepis, skirtas darbui Javascript (įskaitant typeсript), nors wiki sako priešingai. Už nugaros Javascript įskiepio atsakymai SonarJS, skirtas mašinraščiui SonarTS atitinkamai.

Oficialus klientas naudojamas aprėpties informacijai siųsti sonarqube skaitytuvas, kuri, naudojant nustatymus iš config-failas, siunčia šiuos duomenis į serverį „SonarQube“ tolesniam konsolidavimui ir agregavimui.

Už Javascript yra npm įvynioklis. Taigi, pradėkime žingsnis po žingsnio įgyvendinimą „SonarQube“ в Vue- projekto naudojimas Mašinraštis.

Norėdami įdiegti serverį „SonarQube“ pasinaudokime dockerio rašymas.

sonaras.yaml:

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

Paleisti:

docker-compose -f sonar.yml up

Po to „SonarQube“ bus galima rasti adresu: http://localhost:9001 .

Jame dar nėra projektų ir tai yra teisinga. Mes ištaisysime šią situaciją. Aš paėmiau oficialų pavyzdinį projektą VueJS+TS+Jest. Palenkime jį į save:

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

Pirmiausia turime įdiegti klientą „SonarQube“, kuris vadinamas sonaras-skenerisuž npm yra įpakavimas:

yarn add sonarqube-scanner

Ir nedelsdami pridėkite komandą prie scenarijai dirbti su juo.

package.json:

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

Tada, kad skaitytuvas veiktų, turite nustatyti projekto nustatymus specialiame faile. Pradėkime nuo pagrindų.

sonaras-projektas.ypatybės:

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 - adresas "Sonar„A;
• sonaras.projectKey – unikalus projekto identifikatorius serveryje "Sonar„A;
• sonaras.projectName – jo pavadinimą, jį galima bet kada pakeisti, nes projektą identifikuoja projekto raktas;
• sonaras.šaltiniai – aplankas su šaltiniais, dažniausiai tai src, bet gali būti bet kas. Šis aplankas nustatomas pagal šakninį aplanką, kuris yra aplankas, iš kurio paleidžiamas skaitytuvas;
• sonaras.testai – parametras, kuris eina kartu su ankstesniu. Tai yra aplankas, kuriame yra testai. Šiame projekte tokio aplanko nėra, o testas yra šalia testuojamo komponento aplanke „testas“, todėl kol kas nepaisysime jo ir naudosime kitą parametrą;
• sonar.test.inclusions – kelias testams naudojant kaukę, gali būti keli elementai, atskirti kableliais;
• sonaras.sourceEncoding – šaltinio failų kodavimas.

Pirmajam skaitytuvo paleidimui viskas yra paruošta, išskyrus pagrindinį ankstesnį veiksmą: paleidžiamas pats bandomasis variklis, kad jis galėtų generuoti informaciją apie aprėptį, kurią skaitytuvas vėliau naudos.

Tačiau norėdami tai padaryti, turite sukonfigūruoti bandomąjį variklį, kad ši informacija būtų generuojama. Šiame projekte bandomasis variklis yra yra. Ir jo nustatymai yra atitinkamoje failo dalyje paketas.json.

Pridėkime šiuos nustatymus:

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

Tai yra, mes nustatome pačią vėliavą, kad būtų galima apskaičiuoti aprėptį ir šaltinį (kartu su išimtimis), kurio pagrindu ji bus suformuota.

Dabar paleiskite testą:

yarn test

Pamatysime šiuos dalykus:

Priežastis ta, kad pačiame komponente nėra kodo. Pataisykime tai.

HelloWorld.vue:

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

To pakaks aprėpčiai apskaičiuoti.

Iš naujo paleidę testą įsitikinsime, kad:

Ekrane turėtume matyti informaciją apie aprėptį, o projekto aplanke bus sukurtas aplankas apimtis su bandymo aprėpties informacija universaliu formatu LCOV (LTP GCOV plėtinys).

Gcov yra laisvai platinama programa, skirta patikrinti kodo aprėptį. Gcov sugeneruoja tikslų kiekvieno programos teiginio vykdymų skaičių ir leidžia pridėti komentarų prie šaltinio kodo. „Gcov“ yra standartinė programa kaip GCC paketo dalis.
Lcov - grafinė sąsaja, skirta gcov. Jis surenka gcov failus keliems šaltinio failams ir sukuria HTML puslapių rinkinį su kodu ir aprėpties informacija. Taip pat sukuriami puslapiai, kad būtų lengviau naršyti. Lcov palaiko eilučių, funkcijų ir šakų aprėptį.

Kai bandymai bus baigti, informacija apie aprėptį bus pateikta coverage/lcov.info.
Turime pasakyti "Sonar'Iš kur aš galiu jį gauti? Todėl į jo konfigūracijos failą įtraukime šias eilutes. Tačiau yra vienas dalykas: projektai gali būti daugiakalbiai, tai yra, aplanke src yra kelių programavimo kalbų šaltinio kodai ir ryšys su viena ar kita, o savo ruožtu konkretaus papildinio naudojimą lemia jo plėtinys. Aprėpties informacija gali būti saugoma skirtingose ​​​​vietose skirtingoms programavimo kalboms, todėl kiekviena kalba turi savo skyrių, skirtą tai nustatyti. Mūsų projektas naudoja Mašinraštis, todėl mums reikia tik jam skirtos nustatymų skilties:

sonaras-projektas.ypatybės:

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

Viskas paruošta pirmajam skaitytuvo paleidimui. Norėčiau pažymėti, kad projektas yra "Sonar„e“ sukuriamas automatiškai, kai pirmą kartą paleidžiate tam tikro projekto skaitytuvą. Vėlesniais laikais informacija bus kaupiama, kad būtų galima pamatyti projekto parametrų pokyčių dinamiką laikui bėgant.

Taigi, naudokime anksčiau sukurtą komandą paketas.json:

yarn run sonar 

Pastaba: taip pat galite naudoti parametrą -X detalesniam registravimui.

Jei skaitytuvas buvo paleistas pirmą kartą, tada pirmiausia bus atsiųstas paties skaitytuvo dvejetainis failas. Po to jis pradedamas ir pradedamas nuskaityti serverį "Sonar'a įdiegtiems papildiniams, taip apskaičiuojant palaikomą kalbą. Taip pat įkeliami įvairūs kiti jo veikimo parametrai: kokybės profiliai, aktyvios taisyklės, metrikos saugykla, serverio taisyklės.

Pastaba: Šiame straipsnyje mes jų nenagrinėsime išsamiai, tačiau visada galite susisiekti su oficialiais šaltiniais.

Tada prasideda aplanko analizė src už šaltinio failų prieinamumą visoms palaikomoms kalboms (jei konkreti nėra aiškiai nurodyta) su vėlesniu jų indeksavimu.

Toliau pateikiamos įvairios kitos analizės, į kurias šiame straipsnyje mes nekreipiame dėmesio (pavyzdžiui, pūkavimas, kodo dubliavimo aptikimas ir kt.).

Pačioje skaitytuvo darbo pabaigoje visa surinkta informacija yra sujungiama, archyvuojama ir siunčiama į serverį.

Po to jau matome, kas atsitiko žiniatinklio sąsajoje:

Kaip matome, kažkas veikė ir netgi rodo kažkokį aprėptį, bet tai neatitinka mūsų yra- ataskaita.

Išsiaiškinkime. Pažvelkime į projektą išsamiau, spustelėkite aprėpties vertę ir „pateksime“ į išsamią failo ataskaitą:

Čia matome, be pagrindinės, išnagrinėtos bylos HelloWorld.vue, taip pat yra failas pagrindinis.ts, kuris sugadina visą aprėpties vaizdą. Bet kodėl mes jį neįtraukėme į aprėpties skaičiavimą. Taip, viskas teisinga, bet tai buvo lygyje yra, tačiau skaitytuvas jį indeksavo, todėl jis atsidūrė jo skaičiavimuose.

Pataisykime tai:

sonaras-projektas.ypatybės:

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

Norėčiau patikslinti: be aplankų, kurie yra nurodyti šiame parametre, taip pat pridedami visi parametre nurodyti aplankai sonar.test.inclusions.

Paleidę skaitytuvą matome teisingą informaciją:

Pažvelkime į kitą tašką - Kokybiški profiliai. Aukščiau kalbėjau apie paramą "Sonar'om keliomis kalbomis vienu metu. Būtent tai ir matome. Bet mes žinome, kad mūsų projektas yra parašytas TS, tad kam apkrauti skaitytuvą nereikalingomis manipuliacijomis ir tikrinimais. Analizės kalbą nustatysime pridėdami dar vieną parametrą į konfigūracijos failą "Sonar'A:

sonaras-projektas.ypatybės:

...
sonar.language=ts
...

Paleiskite skaitytuvą dar kartą ir pamatysime rezultatą:

Aprėptis visiškai išnyko.

Jei pažvelgsime į skaitytuvo žurnalą, pamatysime šią eilutę:

Tai yra, mūsų projekto failai tiesiog nebuvo indeksuoti.

Situacija tokia: oficialiai palaikoma VueJs yra papildinyje SonarJSkas atsakingas už Javascript.

Tačiau šio palaikymo papildinyje nėra SonarTS už TS, apie kurį klaidų seklyje buvo atidarytas oficialus bilietas "Sonar'A:

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

Štai keletas vieno iš „SonarQube“ kūrėjų atstovų atsakymų, patvirtinančių šį faktą.

Bet mums viskas pavyko, tu prieštarauji. Taip, pabandykime šiek tiek "nulaužti".
Jei yra palaikymas .vue- failai "Sonar„O, tada pabandykime pasakyti jam, kad laikytų juos tokiais Mašinraštis.

Pridėkime parametrą:

sonaras-projektas.ypatybės:

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

Paleiskite skaitytuvą:

Ir, voila, viskas grįžo į įprastas vėžes ir tik su vienu profiliu Mašinraštis. Tai yra, mums pavyko išspręsti palaikymo problemą VueJs+TS už „SonarQube“.

Pabandykime eiti toliau ir šiek tiek patobulinti aprėpties informaciją.

Ką mes padarėme iki šiol:

• įtraukta į projektą "Sonar- skaitytuvas;
• nustatyti yra generuoti aprėpties informaciją;
• sukonfigūruotas "Sonar- skaitytuvas;
• išsprendė palaikymo problemą .vue-failai + Mašinraštis.

Be testo aprėpties, yra ir kitų įdomių naudingų kodo kokybės kriterijų, pavyzdžiui, kodo dubliavimas ir projekto eilučių skaičius (susijęs su koeficientų, susijusių su kodo sudėtingumu), skaičius.

Esant dabartiniam darbui skirto papildinio įgyvendinimui TS (SonarTS) neveiks CPD (kopijavimo įklijavimo detektorius) ir kodo eilučių skaičiavimas .vue- failai.

Norėdami sukurti sintetinę kodo dubliavimo situaciją, tiesiog nukopijuokite komponento failą kitu pavadinimu ir pridėkite jį prie kodo pagrindinis.ts fiktyvią funkciją ir pakartokite ją kitu pavadinimu. Norėdami patikrinti, ar nėra dubliavimo, kaip nurodyta .vueir in .ts - failai.

main.ts:

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

Norėdami tai padaryti, turite laikinai pakomentuoti konfigūracijos eilutę:

sonaras-projektas.ypatybės:

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

Iš naujo paleiskime skaitytuvą kartu su testavimu:

yarn test && yarn run sonar

Žinoma, mūsų aprėptis sumažės, bet dabar tai mūsų nedomina.

Kalbant apie kodo eilučių dubliavimą, pamatysime:

Norėdami patikrinti, naudosime SPD-naudingumas - jscpd:

npx jscpd src

Dėl kodo eilučių:

Galbūt tai bus išspręsta būsimose papildinių versijose SonarJS(TS). Norėčiau pastebėti, kad jie palaipsniui pradeda sujungti šiuos du papildinius į vieną SonarJS, kas, mano nuomone, yra teisinga.

Dabar norėjau apsvarstyti galimybę pagerinti aprėpties informaciją.

Kol kas galime matyti viso projekto, o ypač failų, testavimo aprėptį procentais. Tačiau šį rodiklį galima išplėsti informacija apie kiekį vienetas-projekto testai, taip pat failų kontekste.

Yra biblioteka, kuri gali yra- konvertuoti ataskaitą į formatą "Sonar'A:
bendrieji bandymo duomenys - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Įdiegkime šią biblioteką savo projekte:

yarn add jest-sonar-reporter

Ir pridėkite jį prie konfigūracijos yra:

package.json:

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

Dabar paleiskite testą:

yarn test

Po to projekto šaknyje bus sukurtas failas test-report.xml.

Naudokime jį konfigūracijoje "Sonar'A:

sonaras-projektas.ypatybės:

…
sonar.testExecutionReportPaths=test-report.xml
…

Ir iš naujo paleiskite skaitytuvą:

yarn run sonar

Pažiūrėkime, kas pasikeitė sąsajoje "Sonar'A:

Ir niekas nepasikeitė. Faktas yra tas, kad „Sonar“ nelaiko „Jest“ ataskaitoje aprašytų failų failais vienetas- bandymai. Norėdami ištaisyti šią situaciją, naudojame konfigūracijos parametrą "Sonar sonaras.testai, kuriame aiškiai nurodysime aplankus su testais (kol kas turime tik vieną):

sonaras-projektas.ypatybės:

…
sonar.tests=src/components/__tests__
…

Paleiskite skaitytuvą iš naujo:

yarn run sonar

Pažiūrėkime, kas pasikeitė sąsajoje:

Dabar pamatėme savo skaičių vienetas-testus ir nepavykus spustelėjus viduje matome šio skaičiaus pasiskirstymą tarp projekto failų:

išvada

Taigi, mes pažvelgėme į nuolatinės analizės įrankį „SonarQube“. Sėkmingai integravome į jį parašytą projektą VueJs+TS. Ištaisytos kai kurios suderinamumo problemos. Padidinome testo aprėpties rodiklio informacinį turinį. Šiame straipsnyje mes išnagrinėjome tik vieną iš kodo kokybės kriterijų (galbūt vieną iš pagrindinių), bet „SonarQube“ palaiko kitus kokybės kriterijus, įskaitant saugos bandymus. Tačiau ne visos šios funkcijos yra visiškai prieinamos bendruomenė- versijos. Viena iš įdomių ir naudingų funkcijų yra integracija „SonarQube“ su įvairiomis kodų saugyklų valdymo sistemomis, tokiomis kaip GitLab ir BitBucket. Apsaugoti sujungimo traukimo (sujungimo) užklausa„a į pagrindinę saugyklos šaką, kai aprėptis pablogėja. Bet tai yra visiškai kitokio straipsnio istorija.

PS: Viskas, kas aprašyta straipsnyje kodo forma, yra prieinama mano šakutė.

Apklausoje gali dalyvauti tik registruoti vartotojai. Prisijungti, Prašau.

Ar naudojate „SonarQube“ platformą:

• 26,3%Taip 5

• 15,8%Nr.3

• 15,8%Girdėjau apie šią platformą ir noriu ja naudotis3

• 10,5%Aš girdėjau apie šią platformą ir nenoriu naudoti2

• 0,0%Aš naudoju kitą platformą0

• 31,6%Pirmą kartą apie ją girdžiu 6

Balsavo 19 vartotojų. 3 vartotojai susilaikė.

Šaltinis: www.habr.com