Plataforma aktiboki erabiltzen dugu gure lanean soundQube kodearen kalitatea maila altuan mantentzeko. Idatzitako proiekturen bat integratzean VueJs+Typescript, arazoak sortu ziren. Hori dela eta, zehatzago esan nahi dizut nola lortu dugun horiek konpontzea.

Artikulu honetan, goian idatzi dudan bezala, SonarQube plataformari buruz hitz egingo dugu. Teoria apur bat - zer den oro har, lehen aldiz entzuten ari direnentzat:

soundQube (lehen Sonar) etengabeko ikuskapenerako eta kodearen kalitatea neurtzeko kode irekiko plataforma bat da.
Kodeen analisia eta akatsak hautematea onartzen ditu MISRA C, MISRA C++, MITRE/CWE eta CERT Secure Coding Standards programazio estandarren arauen arabera. OWASP Top 10 eta CWE/SANS Top 25 programazio akatsen zerrendetako akatsak ere antzeman ditzake.
Plataformak prest egindako hainbat tresna erabiltzen dituen arren, SonarQube-k emaitzak panel bakarrera murrizten ditu, exekuzioen historia mantenduz eta, horrela, garapenean zehar softwarearen kalitatearen aldaketen joera orokorra ikusteko aukera ematen du.

Xehetasun gehiago helbidean aurki daitezke webgune ofiziala

Programazio-lengoaia ugari onartzen dira. Goiko estekaren informazioa ikusita, 25 hizkuntza baino gehiago dira hauek. Hizkuntza zehatz bat onartzeko, dagokion plugina instalatu behar duzu. Komunitatearen bertsioak plugin bat dauka lan egiteko Javascript (typeсcript barne), wikiak kontrakoa dioen arren. Atzean Javascript plugin erantzunak SonarJS, Mekanografiarako SonarTS hurrenez hurren.

Bezero ofiziala estalduraren informazioa bidaltzeko erabiltzen da sonarqube-eskaner, hau da, hemengo ezarpenak erabiliz config-fitxategia, datu hauek zerbitzarira bidaltzen ditu soundQube gehiago sendotzeko eta batzeko.

For Javascript dago npm bilgarria. Beraz, has gaitezen urratsez urrats inplementazioa soundQube в ikuspegi-proiektua erabiliz Idazmena.

Zerbitzaria zabaltzeko soundQube aprobetxa dezagun Docker-idazteko.

sonar.yaml:

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

Abiarazi:

docker-compose -f sonar.yml up

Ordutik soundQube helbidean egongo da eskuragarri: http://localhost:9001 .

Oraindik ez dago proiekturik eta hori bidezkoa da. Egoera hau zuzenduko dugu. Proiektuaren adibide ofiziala hartu nuen VueJS+TS+Jest. Okertu dezagun geure aldera:

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

Lehenik eta behin bezeroa instalatu behar dugu soundQube, deitzen dena sonar-eskaneregiteko NPM bilgarri bat dago:

yarn add sonarqube-scanner

Eta berehala gehitu komandoa scripts horrekin lan egiteko.

package.json:

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

Ondoren, eskanerrak funtziona dezan, proiektuaren ezarpenak fitxategi berezi batean ezarri behar dituzu. Has gaitezen oinarrietatik.

sonar-proiektua.propietateak:

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 - helbidea Sonar'A;
• sonar.projectKey – zerbitzarian proiektuaren identifikatzaile bakarra Sonar'A;
• sonar.projectName – izena, edozein unetan alda daiteke, proiektua honela identifikatuta baitago projectKey;
• sonar.iturriak – iturriak dituen karpeta, normalean hau src, baina edozer izan daiteke. Karpeta hau erro-karpetarekiko ezartzen da, hau da, eskanerra abiarazten den karpetatik;
• sonar.probak – aurrekoarekin batera doan parametroa. Hau da probak dauden karpeta. Proiektu honetan, ez dago horrelako karpetarik, eta proba probatzen ari den osagaiaren ondoan dago karpetan 'test', beraz, oraingoz alde batera utziko dugu eta hurrengo parametroa erabiliko dugu;
• sonar.test.inklusioak – maskara erabiliz probak egiteko bidea, komaz bereizita zerrendatutako hainbat elementu egon daitezke;
• sonar.iturriaEncoding – iturburu-fitxategien kodeketa.

Eskanerra lehen abiarazterako, dena prest dago, aurreko ekintza nagusia izan ezik: proba-motorra bera martxan jartzea, estaldurari buruzko informazioa sor dezan, eskanerrak gero erabiliko duena.

Baina horretarako, proba-motorra konfiguratu behar duzu informazio hori sortzeko. Proiektu honetan, proba-motorra da dago. Eta bere ezarpenak fitxategiari dagokion atalean daude paketea.json.

Gehi ditzagun ezarpen hauek:

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

Hau da, bandera bera ezarriko dugu estaldura kalkulatzeko eta iturria (salbuespenekin batera) oinarritzat hartuta eratuko den.

Orain egin dezagun proba:

yarn test

Honako hauek ikusiko ditugu:

Arrazoia osagaian bertan koderik ez dagoela da. Konpon dezagun hau.

HelloWorld.vue:

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

Hau nahikoa izango da estaldura kalkulatzeko.

Proba berrabiarazi ondoren, hau ziurtatuko dugu:

Pantailan estaldurari buruzko informazioa ikusi beharko genuke, eta proiektuaren karpetan karpeta bat sortuko da estaldura probaren estalduraren informazioarekin formatu unibertsalean LCOV (LTP GCOV luzapena).

Gcov kodearen estaldura aztertzeko libreki banatutako utilitate bat da. Gcov-ek programa bateko instrukzio bakoitzeko exekuzio kopuru zehatza sortzen du eta iturburu-kodean oharrak gehitzeko aukera ematen du. Gcov erabilgarritasun estandar gisa dator GCC paketearen zati gisa.
Lcov - gcov-erako interfaze grafikoa. Hainbat iturburu-fitxategietarako gcov fitxategiak biltzen ditu eta HTML orrialde multzo bat sortzen du kodea eta estaldura-informazioarekin. Orriak ere sortzen dira nabigazioa errazteko. Lcov-ek kate, funtzio eta adarren estaldura onartzen du.

Probak amaitu ondoren, estalduraren informazioa bertan kokatuko da estaldura/lcov.info.
Esan behar dugu Sonar«Nondik lor dezaket? Beraz, gehitu ditzagun lerro hauek bere konfigurazio fitxategian. Baina bada puntu bat: proiektuak eleaniztunak izan daitezke, hau da, karpetan src hainbat programazio-lengoaitarako iturburu-kodeak eta bata edo bestea duten afiliazioa daude, eta, aldi berean, plugin baten edo bestearen erabilera bere luzapenaren arabera zehazten da. Eta estalduraren informazioa toki ezberdinetan gorde daiteke programazio-lengoaia desberdinetarako, beraz, hizkuntza bakoitzak bere atala du hau konfiguratzeko. Gure proiektuak erabiltzen ditu Idazmena, beraz, ezarpenen atal bat behar dugu horretarako soilik:

sonar-proiektua.propietateak:

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

Dena prest dago eskanerra lehen abian jartzeko. Kontuan izan nahi dut proiektua dela Sonar'e automatikoki sortzen da proiektu jakin baterako eskanerra exekutatzen duzun lehen aldian. Ondorengo aldietan, informazioa pilatuko da, proiektuaren parametroek denboran zehar izandako aldaketen dinamika ikusteko.

Beraz, erabil dezagun lehenago sortutako komandoa paketea.json:

yarn run sonar 

Oharra: parametroa ere erabil dezakezu -X erregistro zehatzagoa lortzeko.

Eskanerra lehen aldiz abiarazi bazen, eskanerraren beraren bitarra deskargatuko da lehenik. Horren ostean, zerbitzaria eskaneatzen hasten da Sonar'a instalatutako pluginetarako, horrela onartzen den hizkuntza kalkulatuz. Bere funtzionamendurako beste hainbat parametro ere kargatzen dira: kalitate-profilak, arau aktiboak, metrika-biltegia, zerbitzari-arauak.

Oharra: Artikulu honen esparruan ez gara zehatz-mehatz azalduko, baina iturri ofizialekin harremanetan jar zaitezke beti.

Ondoren, karpetaren azterketa hasten da src iturburu-fitxategien erabilgarritasunerako onartzen diren hizkuntza guztientzat (espresuki zehaztuta ez badago) hizkuntza bateragarrientzat, ondorengo indexazioarekin.

Ondoren, beste hainbat analisi datoz, artikulu honetan zentratzen ez ditugunak (adibidez, linting, kodearen bikoizketa detektatzea, etab.).

Eskanerraren lanaren amaieran, bildutako informazio guztia batu, artxibatu eta zerbitzarira bidaltzen da.

Honen ondoren, dagoeneko ikusi dezakegu zer gertatu den web interfazean:

Ikusten dugunez, zerbaitek funtzionatu zuen, eta nolabaiteko estaldura ere erakusten du, baina ez dator bat gurearekin dago-txostena.

Asma dezagun. Ikus dezagun proiektua zehatzago, egin klik estaldura-balioan eta "erortu" fitxategi-txosten zehatz batean:

Hemen ikusten dugu, fitxategi nagusiaz gain, aztertua KaixoWorld.vue, fitxategi bat ere badago nagusiak.ts, estalduraren argazki osoa hondatzen duena. Baina nola baztertu dugu estalduraren kalkulutik. Bai, dena zuzena da, baina mailan zegoen dago, baina eskanerrak indexatu zuen, beraz, bere kalkuluetan amaitu zuen.

Konpon dezagun hau:

sonar-proiektua.propietateak:

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

Azalpen bat egin nahi dut: parametro honetan zehazten diren karpetez gain, parametroan zerrendatutako karpeta guztiak ere gehitzen dira. sonar.test.inklusioak.

Eskanerra abiarazi ondoren, informazio zuzena ikusiko dugu:

Ikus dezagun hurrengo puntua - Kalitate-profilak. Goian hitz egin dut laguntzari buruz Sonarhainbat hizkuntzatan aldi berean. Hauxe da ikusten ari garena. Baina badakigu gure proiektua idatzita dagoela TS, beraz, zergatik iragazi eskanerra alferrikako manipulazio eta egiaztapenekin. Analisirako hizkuntza ezarriko dugu konfigurazio fitxategiari parametro bat gehiago gehituz Sonar'A:

sonar-proiektua.propietateak:

...
sonar.language=ts
...

Exekutatu dezagun berriro eskanerra eta ikus dezagun emaitza:

Estaldura erabat desagertu zen.

Eskanerraren erregistroari erreparatzen badiogu, lerro hau ikus dezakegu:

Hau da, gure proiektu-fitxategiak besterik gabe ez ziren indexatu.

Egoera hau da: ofizialki onartzen da VueJs pluginean dago SonarJSnor den ardura Javascript.

Baina laguntza hau ez dago pluginean SonarTS egiteko TS, horri buruz txartel ofizial bat ireki zen akatsen jarraitzailean Sonar'A:

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

Hona hemen SonarQubeko garatzaileen ordezkarietako baten erantzun batzuk, datu hori baieztatzen dutenak.

Baina denak funtzionatu zuen guretzat, oposizioa duzu. Bai da, proba dezagun pixka bat "hackeatu".
Laguntza badago .ikusi-fitxategiak Sonar«Ene, orduan saia gaitezen esaten haiek bezala har ditzala Idazmena.

Gehitu dezagun parametro bat:

sonar-proiektua.propietateak:

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

Abiarazi dezagun eskanerra:

Eta, listo, dena normaltasunera itzuli da, eta profil bakarrarekin soilik Idazmena. Hau da, euskarrian arazoa konpontzea lortu dugu VueJs+TS egiteko soundQube.

Saia gaitezen harago joaten eta estalduraren informazioa pixka bat hobetzen.

Orain arte egin duguna:

• proiektuari gehituta Sonar-eskanerra;
• ezarri dago estaldura-informazioa sortzeko;
• konfiguratuta Sonar-eskanerra;
• laguntza arazoa konpondu zuen .ikusi-fitxategiak + Idazmena.

Proba-estalduraz gain, kode-kalitaterako beste irizpide erabilgarri interesgarri batzuk daude, adibidez, kodearen bikoizketa eta proiektuaren lerro kopurua (kode-konplexutasunari lotutako koefizienteen kalkuluan parte hartzen dutenak).

Lan egiteko pluginaren egungo inplementazioan TS (SonarTS) ez du funtzionatuko CPD (Copy Paste Detector) eta kode lerroak zenbatzea .ikusi-fitxategiak.

Kode bikoizketaren egoera sintetikoa sortzeko, osagai fitxategia beste izen batekin bikoiztu eta kodeari gehitu. nagusiak.ts dummy funtzio bat eta bikoiztu beste izen batekin. atalean bezala bikoiztuta dagoen egiaztatzeko .ikusi, eta .ts -fitxategiak.

nagusiak:

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

Horretarako, konfigurazio-lerroa aldi baterako komentatu behar duzu:

sonar-proiektua.propietateak:

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

Berrabiarazi dezagun eskanerra probarekin batera:

yarn test && yarn run sonar

Noski, gure estaldura jaitsi egingo da, baina orain ez zaigu hori interesatzen.

Kode lerroak bikoizteari dagokionez, ikusiko dugu:

Erabiliko dugu egiaztatzeko CPD-erabilgarritasuna- jscpd:

npx jscpd src

Kode lerroetarako:

Agian hau ebatziko da hurrengo pluginen bertsioetan SonarJS(TS). Kontuan izan nahiko nuke pixkanaka bi plugin hauek bakarrean batzen hasten ari direla SonarJS, zuzena iruditzen zait.

Orain estalduraren informazioa hobetzeko aukera aztertu nahi nuen.

Orain arte probaren estaldura ehunekotan ikus dezakegu, proiektu osorako eta bereziki fitxategietarako. Baina posible da adierazle hau kantitateari buruzko informazioarekin zabaltzea unitate-proiektuaren probak, baita fitxategien testuinguruan ere.

Ahal duen liburutegi bat dago dago-Txostena formatuan bihurtzea Sonar'A:
probaren datu generikoak - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Instala dezagun liburutegi hau gure proiektuan:

yarn add jest-sonar-reporter

Eta gehitu konfigurazioari dago:

package.json:

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

Orain egin dezagun proba:

yarn test

Horren ondoren, fitxategi bat sortuko da proiektuaren erroan test-report.xml.

Erabili dezagun konfigurazioan Sonar'A:

sonar-proiektua.propietateak:

…
sonar.testExecutionReportPaths=test-report.xml
…

Eta berrabiarazi eskanerra:

yarn run sonar

Ikus dezagun zer aldatu den interfazean Sonar'A:

Eta ez da ezer aldatu. Kontua da Sonar-ek ez dituela Jest txostenean deskribatutako fitxategiak artxibotzat hartzen unitate-probak. Egoera hori zuzentzeko, konfigurazio-parametroa erabiltzen dugu Sonar sonar.probak, zeinetan esplizituki adieraziko ditugu probak dituzten karpetak (bakarrik daukagu ​​oraingoz):

sonar-proiektua.propietateak:

…
sonar.tests=src/components/__tests__
…

Berrabiarazi dezagun eskanerra:

yarn run sonar

Ikus dezagun zer aldatu den interfazean:

Orain ikusi dugu gure kopurua unitate-probak eta, barruan klik eginez huts egin ondoren, zenbaki honen banaketa ikus dezakegu proiektuaren fitxategien artean:

Ondorioa

Beraz, etengabeko analisirako tresna bat aztertu dugu soundQube. Bertan idatzitako proiektu bat arrakastaz integratu dugu VueJs+TS. Bateragarritasun arazo batzuk konpondu dira. Testen estaldura adierazlearen informazio edukia handitu dugu. Artikulu honetan, kodearen kalitatearen irizpideetako bat bakarrik aztertu dugu (beharbada nagusietako bat), baina soundQube beste kalitate-irizpide batzuk onartzen ditu, segurtasun-probak barne. Baina ezaugarri hauek guztiak ez daude guztiz eskuragarri komunitate-bertsioak. Ezaugarri interesgarri eta erabilgarrietako bat integrazioa da soundQube kode biltegiaren kudeaketa sistema ezberdinekin, GitLab eta BitBucket adibidez. Saihesteko batu tira (bateratu) eskaera'a biltegiaren adar nagusira estaldura hondatzen denean. Baina hau guztiz bestelako artikulu baterako istorio bat da.

PS: Artikuluan deskribatutako guztia kode moduan eskuragarri dago nire sardexka.

Erregistratutako erabiltzaileek soilik parte hartu dezakete inkestan. Hasi saioa, mesedez.

SonarQube plataforma erabiltzen al duzu:

• 26,3%Bai5

• 15,8%3. zenbakia

• 15,8%Plataforma honen berri izan dut eta erabili nahi dut3

• 10,5%Plataforma honen berri izan dut eta ez dut erabili nahi2

• 0,0%Beste plataforma bat erabiltzen ari naiz0

• 31,6%Haren berri entzuten dudan lehen aldia6

19 erabiltzailek eman dute botoa. 3 erabiltzaile abstenitu ziren.

Iturria: www.habr.com