VueJS + TS purojekiti yekubatanidza neSonarQube

Isu tinoshingaira kushandisa chikuva mubasa redu soundQube kuchengetedza kodhi yemhando yepamusoro. Kana uchibatanidza imwe yemapurojekiti akanyorwa mukati VueJs+Typescript, matambudziko akamuka. Naizvozvo, ndinoda kukuudza zvakadzama kuti takakwanisa sei kuzvigadzirisa.

VueJS + TS purojekiti yekubatanidza neSonarQube

Muchikamu chino tichataura, sezvandanyora pamusoro, nezve SonarQube chikuva. Dzidziso shoma - kuti chii chiri kazhinji, kune avo vari kunzwa nezvazvo kekutanga:

soundQube (kare Sonar) inzvimbo yakavhurika sosi yekuenderera mberi yekuongorora uye kodhi yemhando kuyerwa.
Inotsigira kuongororwa kwekodhi uye kuona kukanganisa maererano nemitemo yeMISRA C, MISRA C ++, MITER/CWE uye CERT Yakachengeteka Coding Standards programming standards. Inogona zvakare kuona zvikanganiso kubva kuOWASP Pamusoro 10 uye CWE/SANS Yepamusoro makumi maviri neshanu ekuronga zvikanganiso zvinyorwa.
Kunyangwe ichokwadi chekuti chikuva chinoshandisa maturusi akasiyana-siyana akagadzirwa, SonarQube inoderedza mibairo kune imwechete dashibhodhi, ichichengeta nhoroondo yekumhanya uye nekudaro ichikubvumidza iwe kuti uone maitiro akajairwa ekuchinja kwemhando yesoftware panguva yekuvandudza.

Mamwe mashoko anogona kuwanikwa pa website yepamutemo

Nhamba huru yemitauro yepurogiramu inotsigirwa. Tichitarisa neruzivo kubva pa link iri pamusoro, iyi inopfuura mitauro 25. Kuti utsigire mumwe mutauro, unofanirwa kuisa iyo plugin yakakodzera. Iyo nharaunda vhezheni inosanganisira plugin yekushanda nayo JavaScript (kusanganisira typeсript), kunyangwe iyo wiki inotaura zvakapesana. Kumashure JavaScript plugin mhinduro SonarJS, yeTypescript SonarTS maererano.

Mutengi wepamutemo anoshandiswa kutumira ruzivo rwekuvhara sonarqube-scanner, izvo, uchishandisa marongero kubva config-file, inotumira iyi data kune server soundQube kuitira kuwedzera kusimbisa uye kuunganidza.

nokuti JavaScript pane npm kuputira. Saka, ngatitange nhanho-ne-nhanho kuita soundQube Π² Vue-kushandisa chirongwa TypeScript.

Kutumira server soundQube ngatitore mukana docker-compose.

sonar.yaml:

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

Launch:

docker-compose -f sonar.yml up

Pashure pacho soundQube ichawanikwa pa: http://localhost:9001 .

VueJS + TS purojekiti yekubatanidza neSonarQube
Iko hakuna mapurojekiti mairi parizvino uye izvo zvakanaka. Tichagadzirisa mamiriro ezvinhu aya. Ndakatora iyo yepamutemo muenzaniso chirongwa che VueJS+TS+Jest. Ngatizvikotamira kune isu pachedu:

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

Kutanga tinoda kuisa mutengi soundQube, iyo inonzi sonar-scannernokuti npm pane wrapper:

yarn add sonarqube-scanner

Uye pakarepo wedzera murairo kune scripts kushanda nayo.

package.json:

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

Tevere, kuti scanner ishande, unofanirwa kuseta zvirongwa zveprojekiti mune yakakosha faira. Ngatitangei nezvinokosha.

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 - kero Sonar'A;
  • sonar.projectKey - yakasarudzika purojekiti identifier pane server Sonar'A;
  • sonar.projectName - zita rayo, rinogona kuchinjwa chero nguva, sezvo purojekiti ichizivikanwa na projectKey;
  • sonar.source - folda ine masosi, kazhinji izvi Src, asi inogona kuva chero chinhu. Iyi folda yakaiswa maererano nemudzi folda, inova iyo folda kubva painotangwa scanner;
  • sonar.tes - parameter inoenda tandem neyakapfuura. Iri ndiro folda uko bvunzo dziripo. Muchirongwa ichi, hapana dhairekitori rakadaro, uye bvunzo iri padivi pechikamu chiri pasi pekuyedzwa mufolda 'bvunzo', saka isu tichazvifuratira izvozvi uye toshandisa iyo inotevera parameter;
  • sonar.test.inclusions - nzira yebvunzo uchishandisa mask, panogona kunge paine akati wandei zvinhu zvakanyorwa zvakaparadzaniswa nemakoma;
  • sonar.sourceEncoding - encoding yemasource mafaira.

Pakuvhurwa kwekutanga kwe scanner, zvese zvakagadzirira, kunze kwechiito chikuru chapfuura: kutanga injini yekuyedza pachayo, kuitira kuti igone kuburitsa ruzivo nezvekuvhara, iyo scanner inozoshandisa.

Asi kuti uite izvi, unofanirwa kugadzirisa injini yekuedza kuti ibudise ruzivo urwu. Muchirongwa ichi, injini yekuedza iri Jest. Uye marongero ayo ari muchikamu chinoenderana chefaira package.json.

Ngatiwedzerei izvi zvigadziriso:

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

Ndiko kuti, isu tinoisa mureza pachawo nekuda kwechido chekuverenga kuvharwa uye kunobva (pamwe chete nekusarudzika) pahwaro hwacho huchaumbwa.

Zvino ngatimhanye bvunzo:

yarn test

Tichaona zvinotevera:

VueJS + TS purojekiti yekubatanidza neSonarQube

Chikonzero ndechekuti hapana kodhi muchikamu pachayo. Ngatigadzirise izvi.

HelloWorld.vue:

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

Izvi zvichava zvakakwana kuverenga kufukidza.

Mushure mekutangazve bvunzo, isu tichava nechokwadi cheizvi:

VueJS + TS purojekiti yekubatanidza neSonarQube

Pa-screen tinofanira kuona ruzivo pamusoro pekuvhara, uye faira ichagadzirwa mufaira yeprojekti kugoverwa neruzivo rwekuvhara bvunzo mufomati yepasirese LCOV (LTP GCOV yekuwedzera).

Gcov chinhu chakagoverwa zvakasununguka chekuongorora kodhi yekuvhara. Gcov inogadzira iyo chaiyo nhamba yekuuraya kune yega yega chirevo muchirongwa uye inobvumidza iwe kuti uwedzere zvirevo kune kodhi kodhi. Gcov inouya seyakajairwa utility sechikamu cheGCC package.
Lcov - graphical interface yegcov. Iyo inounganidza gcov mafaera kune akawanda sosi mafaera uye inogadzira seti yemapeji eHTML ane kodhi uye yekuvhara ruzivo. Mapeji anogadzirwawo kuita kuti kufamba kuve nyore. Lcov inotsigira kufukidzwa kwetambo, mabasa, uye matavi.

Mushure mekunge bvunzo dzapera, ruzivo rwekuvhara ruchawanikwa mukati coverage/lcov.info.
Tinofanira kutaura Sonar'Ndingaiwanepi? Naizvozvo, ngatiwedzerei mitsara inotevera kune yayo yekumisikidza faira. Asi pane imwe pfungwa: mapurojekiti anogona kuva emitauro yakawanda, kureva, mune folda Src kune masource codes emitauro yakati wandei yekuronga uye kubatana neimwe kana imwe, uyezve, kushandiswa kweimwe kana imwe plugin kunotemwa nekuwedzera kwayo. Uye ruzivo rwekuvhara runogona kuchengetwa munzvimbo dzakasiyana dzemitauro yakasiyana-siyana, saka mutauro wega wega une chikamu chayo chekugadzirisa izvi. Yedu purojekiti inoshandisa TypeScript, saka tinoda chikamu chezvigadziriso chete:

sonar-project.properties:

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

Zvese zvakagadzirira kuvhurwa kwekutanga kwe scanner. Ndinoda kuziva kuti chirongwa chacho Sonar'e inogadzirwa otomatiki kekutanga paunotanga scanner yepurojekiti yakapihwa. Munguva dzinotevera, ruzivo ruchaunganidzwa kuitira kuti uone kushanduka kweshanduko mumaparamita epurojekiti nekufamba kwenguva.

Saka, ngatishandisei murairo wakagadzirwa kare mukati package.json:

yarn run sonar 

Cherechedza: iwe unogona zvakare kushandisa parameter -X kuti uwane mamwe mashoko akadzama.

Kana iyo scanner yakatangwa kekutanga, ipapo bhinary ye scanner pachayo ichatanga kutorwa. Pashure pacho inotanga uye inotanga kuongorora server Sonar'a yemapulagi akaiswa, nekudaro kuverenga mutauro unotsigirwa. Zvimwe zvakasiyana-siyana zvekushanda kwayo zvakatakurwa zvakare: emhando profiles, anoshanda mitemo, metrics repository, server mitemo.

VueJS + TS purojekiti yekubatanidza neSonarQube

VueJS + TS purojekiti yekubatanidza neSonarQube

Cherechedza: Hatisi kuzogara pazviri zvakadzama mukati mechimiro chechinyorwa ichi, asi iwe unogona kugara uchibata zviri pamutemo masosi.

Tevere, kuongorora folda kunotanga Src kuti kuvepo kwemafaira ekutanga kune vese (kana iwo chaiwo asina kunyatsotsanangurwa) mutauro unotsigirwa, uine iwo anozotevera indexing.

VueJS + TS purojekiti yekubatanidza neSonarQube

Tevere kunouya kumwe kwakasiyana ongororo, iyo yatisingatarise pairi muchinyorwa chino (semuenzaniso, senge linding, kuona kudzokororwa kwekodhi, nezvimwewo).

Pakupera kwebasa re scanner, ruzivo rwese rwakaunganidzwa runounganidzwa, rwunochengetwa uye rwunotumirwa kune server.

Mushure meizvi, isu tinogona kutoona zvakaitika muwebhu interface:

VueJS + TS purojekiti yekubatanidza neSonarQube

Sezvatinoona, chimwe chinhu chakashanda, uye kunyange chinoratidza imwe mhando yekuvhara, asi haifanani neyedu Jest-report.

Ngatizvionei. Ngatitarisei purojekiti mune zvakadzama, tinya pane yekuvhara kukosha, uye "kudonha" mune yakadzama faira repoti:

VueJS + TS purojekiti yekubatanidza neSonarQube

Pano tinoona, kuwedzera kune huru, yakaongororwa faira HelloWorld.vue, kune zvakare faira main.ts, iyo inoshatisa mufananidzo wose wekuvhara. Asi sei isu takazvibvisa kubva pakuverenga kwekuvhara. Hongu, zvese ndezvechokwadi, asi zvaive padanho Jest, asi scanner yakairatidza, saka yakaguma mukuverenga kwayo.

Ngatigadzirise izvi:

sonar-project.properties:

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

Ndinoda kujekesa: mukuwedzera kune maforodha anotsanangurwa mune iyi parameter, ese maforodha akanyorwa muparameter anowedzerwawo. sonar.test.inclusions.

Mushure mekutangisa scanner, tinoona iyo chaiyo ruzivo:

VueJS + TS purojekiti yekubatanidza neSonarQube

VueJS + TS purojekiti yekubatanidza neSonarQube

Ngatitarisei pane inotevera pfungwa - Quality profiles. Ndataura pamusoro pekutsigirwa Sonar'om mitauro yakawanda panguva imwe chete. Izvi ndizvo chaizvo zvatiri kuona. Asi isu tinoziva kuti chirongwa chedu chakanyorwa mukati TS, saka wadii kudzvanya scanner nemaitiro asina kufanira manipulations uye cheki. Tichaisa mutauro wekuongorora nekuwedzera imwezve parameter kune faira rekugadzirisa Sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

Ngatimhanyei scanner zvakare toona mhedzisiro:

VueJS + TS purojekiti yekubatanidza neSonarQube

Kuvhara kwacho kwakanga kwapera zvachose.

Kana tikatarisa iyo scanner log, tinogona kuona mutsara unotevera:

VueJS + TS purojekiti yekubatanidza neSonarQube

Ndiko kuti, mafaera edu epurojekiti haana kungoiswa indexed.

Mamiriro acho akaita seanotevera: anotsigirwa zviri pamutemo VueJs iri muplugin SonarJSndiani ane mhosva JavaScript.

VueJS + TS purojekiti yekubatanidza neSonarQube

Asi tsigiro iyi haisi mu plugin SonarTS nokuti TS, pamusoro pekuti tikiti repamutemo rakavhurwa mune bug tracker Sonar'A:

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

Hedzino dzimwe mhinduro kubva kune mumwe wevamiriri kubva kune SonarQube Developers, achisimbisa chokwadi ichi.

VueJS + TS purojekiti yekubatanidza neSonarQube

VueJS + TS purojekiti yekubatanidza neSonarQube

Asi zvese zvakatiitira, unopikisa. Hongu iripo, ngatimboedzai zvishoma "Hack".
Kana pane rutsigiro .vue-mafaira Sonar'om, saka ngatiedze kumuudza kuti azvione se TypeScript.

Ngatiwedzerei parameter:

sonar-project.properties:

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

Ngatitangei scanner:

VueJS + TS purojekiti yekubatanidza neSonarQube

Uye, voila, zvese zvadzokera kune zvakajairika, uye neprofile imwe chete TypeScript. Ndiko kuti, takakwanisa kugadzirisa dambudziko mukutsigira VueJs+TS nokuti soundQube.

Ngatiedzei kuenderera mberi nekuvandudza ruzivo rwekuvhara zvishoma.

Zvatakaita kusvika parizvino:

  • yakawedzerwa kupurojekiti Sonar-scanner;
  • gadzirira Jest kugadzira ruzivo rwekuvhara;
  • configured Sonar-scanner;
  • yakagadzirisa dambudziko rekutsigira .vue-mafaira + TypeScript.

Pamusoro pekuvhara bvunzo, kune zvimwe zvinonakidza zvinobatsira maitiro emhando yekodhi, semuenzaniso, kudzokorora kwekodhi uye nhamba yemitsara (inobatanidzwa mukuverenga coefficients inoenderana nekuoma kwekodhi) yeprojekiti.

Mukushandiswa kwazvino kwe plugin yekushanda nayo TS (SonarTS) hazvishande CPD (Copy Paste Detector) uye kuverenga mitsara yekodhi .vue-mafaira.

Kugadzira mamiriro ekugadzira ekudzokorodza kodhi, ingo dzokorora iyo chikamu faira ine rimwe zita uye wowedzera kune iyo kodhi. main.ts dummy basa uye woritevedzera nerimwe zita. Kuti utarise kudzokorora sezviri mukati .vueuye mukati .ts -mafaira.

main.ts:

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

Kuti uite izvi, iwe unofanirwa kutaura kwenguva pfupi mutsara wekugadzirisa:

sonar-project.properties:

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

Ngatitangezve scanner pamwe nekuyedza:

yarn test && yarn run sonar

Hongu, kufukidza kwedu kuchadonha, asi ikozvino hatisi kufarira izvozvo.

Panyaya yekudzokorora mitsara yekodhi, isu tichaona:

VueJS + TS purojekiti yekubatanidza neSonarQube

Kuongorora tichashandisa CPD- zvinoshandiswa - jscpd:

npx jscpd src

VueJS + TS purojekiti yekubatanidza neSonarQube

Kune mitsetse yekodhi:

VueJS + TS purojekiti yekubatanidza neSonarQube

Zvichida izvi zvichagadziriswa mune ramangwana plugin shanduro SonarJS(TS). Ndinoda kucherechedza kuti vari kutanga zvishoma nezvishoma kubatanidza aya mapulagi maviri kuita rimwe chete SonarJS, izvo zvandinofunga kuti ndizvo.

Zvino ini ndaida kufunga nezve sarudzo yekuvandudza ruzivo rwekuvhara.

Parizvino isu tinokwanisa kuona kuvharwa kwebvunzo muhuwandu hwematemu epurojekiti yese, uye nemafaira kunyanya. Asi zvinokwanisika kuwedzera chiratidzo ichi nemashoko pamusoro pehuwandu chikwata-tests yeprojekiti, pamwe chete nemamiriro ezvinhu emafaira.

Pane raibhurari inogona Jest-shandura iyo report kuita format ye Sonar'A:
generic test data - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Ngatiise raibhurari iyi muchirongwa chedu:

yarn add jest-sonar-reporter

Uye wedzera kune iyo configuration Jest:

package.json:

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

Zvino ngatimhanye bvunzo:

yarn test

Mushure meizvozvo faira ichagadzirwa mumudzi weprojekiti test-report.xml.

Ngatishandisei mukugadzirisa Sonar'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Uye tangazve scanner:

yarn run sonar

Ngationei kuti chii chachinja mune interface Sonar'A:

VueJS + TS purojekiti yekubatanidza neSonarQube

Uye hapana chakachinja. Icho chokwadi ndechekuti Sonar haatarise mafaera anotsanangurwa muJest mushumo semafaira chikwata-tests. Kuti tigadzirise mamiriro ezvinhu aya, tinoshandisa parameter yekugadzirisa Sonar sonar.tes, umo isu ticharatidza zvakajeka maforodha ane bvunzo (isu tine imwe chete ikozvino):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Ngatitangezve scanner:

yarn run sonar

Ngatione kuti chii chachinja mune interface:

VueJS + TS purojekiti yekubatanidza neSonarQube

Ikozvino taona nhamba yedu chikwata-tests uye, takundikana nekudzvanya mukati, tinogona kuona kugoverwa kwenhamba iyi pakati pemafaira eprojekiti:

VueJS + TS purojekiti yekubatanidza neSonarQube

mhedziso

Saka, takatarisa chishandiso chekuongorora nguva dzose soundQube. Isu takabudirira kubatanidza mairi chirongwa chakanyorwa mukati VueJs+TS. Yakagadzirisa dzimwe nyaya dzekuenderana. Isu takawedzera ruzivo rwemukati meyedzo yekuvhara chiratidzo. Muchinyorwa chino takaongorora imwe chete yekodhi yemhando yemhando (zvichida imwe yeiyo huru), asi soundQube inotsigira mamwe maitiro emhando, kusanganisira kuongororwa kwekuchengetedza. Asi haasi ese aya maficha anowanikwa zvizere mukati vemunharaunda-shanduro. Chimwe chezvinhu zvinonakidza uye zvinobatsira ndezvekubatanidza soundQube ine akasiyana kodhi repository manejimendi masisitimu, akadai seGitLab uye BitBucket. Kudzivirira merge pull(merge) chikumbiro'a kune bazi guru renzvimbo yekuchengetera kana kufukidzwa kwadzikiswa. Asi iyi inyaya yechinyorwa chakasiyana zvachose.

PS: Zvese zvinotsanangurwa muchinyorwa muchimiro chekodhi zvinowanikwa mukati forogo yangu.

Vashandisi vakanyoresa chete ndivo vanogona kutora chikamu muongororo. Nyorera mu, Munogamuchirwa.

Iwe unoshandisa SonarQube chikuva:

  • 26,3%Hongu5

  • 15,8%No3

  • 15,8%Ndakanzwa nezvepuratifomu iyi uye ndinoda kushandisa3

  • 10,5%Ndanzwa nezvepuratifomu iyi uye handidi kushandisa2

  • 0,0%Ndiri kushandisa imwe platform0

  • 31,6%Kekutanga kunzwa nezvake6

19 vashandisi vakavhota. 3 vashandisi vakaramba.

Source: www.habr.com

Voeg