VueJS + TS udibaniso lweprojekthi kunye neSonarQube

Silisebenzisa ngokukhutheleyo iqonga emsebenzini wethu I-SonarQube ukugcina umgangatho wekhowudi kwizinga eliphezulu. Xa udibanisa enye yeeprojekthi ezibhaliweyo VueJs+Typescript, kwavela iingxaki. Ke ngoko, ndingathanda ukukuxelela ngokweenkcukacha ngakumbi ukuba sikwazile njani ukuzisombulula.

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

Kweli nqaku siza kuthetha, njengoko ndibhale ngasentla, malunga neqonga leSonarQube. Ithiyori encinci - yintoni na ngokubanzi, kwabo bayivayo okokuqala:

I-SonarQube (ngaphambili sonar) liqonga lomthombo ovulekileyo lokuhlola rhoqo kunye nokulinganisa umgangatho wekhowudi.
Ixhasa uhlalutyo lwekhowudi kunye nokufunyanwa kwempazamo ngokwemigaqo ye-MISRA C, MISRA C ++, MITER / CWE kunye neCERT Secure Coding Standards programming standards. Isenokuqaphela iimpazamo kwi-OWASP Top 10 kunye ne-CWE/SANS Top 25 yoluhlu lweempazamo zenkqubo.
Ngaphandle kwento yokuba iqonga lisebenzisa izixhobo ezahlukeneyo esele zenziwe, iSonarQube inciphisa iziphumo kwideshibhodi enye, igcina imbali yokubaleka kwaye ngaloo ndlela ikuvumela ukuba ubone umkhwa jikelele wotshintsho kumgangatho wesoftware ngexesha lophuhliso.

Iinkcukacha ezithe vetshe zinokufumaneka apha website esemthethweni

Inani elikhulu leelwimi zokucwangcisa ziyaxhaswa. Ngokwenkcazelo ekweli khonkco lingasentla, ezi ziilwimi ezingaphezu kwama-25. Ukuxhasa ulwimi oluthile, kufuneka ufake i-plugin efanelekileyo. Inguqulelo yoluntu ibandakanya iplagi yokusebenza nayo Javascript (kubandakanya i-typesript), nangona i-wiki ithetha ngokuchaseneyo. Ngasemva Javascript iimpendulo kwi-plugin I-SonarJS, ye-Typescript I-SonarTS ngokulandelanayo.

Umxhasi osemthethweni usetyenziselwa ukuthumela ulwazi lokhuseleko sonarqube-scanner, leyo, usebenzisa izicwangciso ezivela qwa lasela-ifayile, ithumela le datha kumncedisi I-SonarQube ukuqinisa ngakumbi kunye nokudibanisa.

kuba Javascript is npm usonga. Ngoko ke, masiqalise ukuphunyezwa kwenyathelo ngenyathelo I-SonarQube Π² Vue-ukusetyenziswa kweprojekthi Uhlobo lwescript.

Ukusasaza umncedisi I-SonarQube masithathe inzuzo Dibanisa idokhethi.

sonar.yaml:

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

Qalisa:

docker-compose -f sonar.yml up

Emva koko I-SonarQube izakufumaneka apha: http://localhost:9001 .

VueJS + TS udibaniso lweprojekthi kunye neSonarQube
Azikho iiprojekthi kuyo okwangoku kwaye ilungile. Siza kuyilungisa le meko. Ndithathe iprojekthi esemthethweni yomzekelo VueJS+TS+Jest. Masiyigobe kuthi:

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

Okokuqala kufuneka sifake umxhasi I-SonarQube, ebizwa ngokuba iskena-sonaze npm kukho i-wrapper:

yarn add sonarqube-scanner

Kwaye ngoko nangoko yongeza umyalelo ku zeempendulo ukusebenza nayo.

package.json:

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

Emva koko, ukuze iskena sisebenze, kufuneka ubeke izicwangciso zeprojekthi kwifayile ekhethekileyo. Masiqale ngezinto ezisisiseko.

Iipropathi.iprojekthi yesonr:

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 - idilesi sonar'A;
  • I-sonar.projectKey – isichongi seprojekthi esisodwa kumncedisi sonar'A;
  • sonar.projectName - igama layo, linokutshintshwa nangaliphi na ixesha, ekubeni iprojekthi ichongwa ngu projectKey;
  • imithombo yesonr -ifolda enemithombo, ngokuqhelekileyo oku src, kodwa ingaba nantoni na. Olu lawulo lucwangciswe ngokuhambelana nengcambu yencwadi eneenkcukacha, eyincwadi apho iskena siqaliswe khona.
  • Iimvavanyo -iparamitha ehamba kunye neyokuqala. Esi sisiqulathi seefayili apho iimvavanyo zibekwe khona. Kule projekthi, akukho lawulo lunjalo, kwaye uvavanyo lubekwe ecaleni kwecandelo elivavanywa kulawulo '.uvavanyo', ngoko ke asiyi kuyihoya okwangoku kwaye sisebenzise iparamitha elandelayo;
  • sonar.test.inclusions – indlela yovavanyo kusetyenziswa imaski, kunokubakho izinto ezininzi ezidweliswe ngokwahlulwe ziikoma;
  • isonar.sourceEncoding -ukufakwa kweekhowudi kwiifayile zomthombo.

Ukuqaliswa kokuqala kweskena, yonke into ilungile, ngaphandle kwesenzo esiphambili sangaphambili: ukuqaliswa kwe-injini yokuvavanya ngokwayo, ukwenzela ukuba ikwazi ukuvelisa ulwazi malunga ne-coverage, apho i-scanner iya kuyisebenzisa emva koko.

Kodwa ukwenza oku, kufuneka uqwalasele injini yokuvavanya ukuvelisa olu lwazi. Kule projekthi, injini yokuvavanya Isimbo somzimba. Kwaye izicwangciso zayo zikwicandelo elihambelanayo lefayile iphakheji.json.

Makhe songeze ezi zicwangciso:

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

Oko kukuthi, sibeka iflegi ngokwayo ngesidingo sokubala ukugubungela kunye nomthombo (kunye nezinto ezingaphandle) kwisiseko esiya kwenziwa.

Ngoku masenze uvavanyo:

yarn test

Siza kubona oku kulandelayo:

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

Isizathu kukuba akukho khowudi kwicandelo ngokwalo. Masiyilungise lento.

HelloWorld.vue:

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

Oku kuya kwanela ukubala ukhuseleko.

Emva kokuqalisa uvavanyo kwakhona, siya kuqinisekisa oku:

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

Kwisikrini kufuneka sibone ulwazi malunga nokugubungela, kwaye ifolda iya kwenziwa kwifolda yeprojekthi Ukufihla ngolwazi lokugubungela uvavanyo kwifomathi yehlabathi I-LCOV (LTP GCOV ulwandiso).

Gcov sisixhobo esisasazwa ngokukhululekileyo sokuvavanya ukhuseleko lwekhowudi. I-Gcov yenza elona nani lichanekileyo lokubulawa kwisiteyitimenti ngasinye kwinkqubo kwaye ikuvumela ukuba wongeze amanqakwana kwikhowudi yomthombo. I-Gcov iza njengento eqhelekileyo njengenxalenye yephakheji ye-GCC.
Lcov -Ujongano lomzobo lwegcov. Ihlanganisa iifayile ze-gcov kwiifayile ezininzi zemithombo kwaye ivelise isethi yamaphepha e-HTML ngekhowudi kunye nolwazi lokhuselo. Amaphepha ayaveliswa ukwenza ukukhangela kube lula. Lcov ixhasa coverage imitya, imisebenzi, kunye namasebe.

Emva kokuba iimvavanyo zigqityiwe, ulwazi lokhuseleko luya kufakwa coverage/lcov.info.
Kufuneka sitsho sonar'Ndingayifumana phi? Ngoko ke, masidibanise le migca ilandelayo kwifayile yayo yoqwalaselo. Kodwa kukho inqaku elinye: iiprojekthi zinokuba ngeelwimi ezininzi, oko kukuthi, kwifolda src kukho iikhowudi zemithombo yeelwimi ezininzi zeprogram kunye nokudibanisa enye okanye enye, kwaye, ukusetyenziswa kwenye okanye enye iplagin imiselwa ngokwandiswa kwayo. Kwaye ulwazi lokugubungela lunokugcinwa kwiindawo ezahlukeneyo kwiilwimi ezahlukeneyo zokucwangcisa, ngoko ke ulwimi ngalunye lunecandelo lalo lokumisela oku. Iprojekthi yethu isebenzisa Uhlobo lwescript, ngoko sidinga icandelo leseto nje ngalo:

Iipropathi.iprojekthi yesonr:

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

Yonke into ilungele ukuqaliswa kokuqala kweskena. Ndingathanda ukuqaphela ukuba iprojekthi sonar'e yenziwe ngokuzenzekelayo kwixesha lokuqala usenza iskena seprojekthi enikiweyo. Ngamaxesha alandelayo, ulwazi luya kuqokelelwa ukuze kubonwe ukuguquguquka kweenguqu kwiiparamitha zeprojekthi ekuhambeni kwexesha.

Ke, masisebenzise umyalelo owenziwe ngaphambili iphakheji.json:

yarn run sonar 

Qaphela: Ungasebenzisa kwakhona iparameter -X ngokungena iinkcukacha ezithe vetshe.

Ukuba iskena saphehlelelwa okokuqala, ngoko ke ibini yesikena ngokwaso siya kukhutshelwa kuqala. Emva koko iqala kwaye iqalise ukuskena umncedisi sonar'a yeeplagi ezifakiweyo, ngokwenza njalo kubalwa ulwimi oluxhaswayo. Ezinye iiparamitha ezahlukeneyo zokusebenza kwayo nazo zilayishiwe: iinkangeleko ezisemgangathweni, imithetho esebenzayo, indawo yokugcina i-metrics, imithetho yomncedisi.

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

Qaphela: Asiyi kuhlala kuzo ngokweenkcukacha ngaphakathi kwesakhelo seli nqaku, kodwa unokuhlala unxibelelana nemithombo esemthethweni.

Emva koko, uhlalutyo lwefolda luqala src kubukho beefayile zemvelaphi yazo zonke (ukuba eyodwa ayichazwanga ngokucacileyo) ulwimi oluxhaswayo, kunye nezalathiso zazo ezilandelayo.

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

Okulandelayo kuza olunye uhlalutyo olwahlukeneyo, esingagxininisi kulo kweli nqaku (umzekelo, njengokufakela i-liting, ukufumanisa ukuphindaphinda kwekhowudi, njl.).

Ekupheleni komsebenzi weskena, lonke ulwazi oluqokelelweyo ludityanisiwe, lugcinwe kwaye luthunyelwe kumncedisi.

Emva koku, sinokubona ukuba kwenzeke ntoni kujongano lwewebhu:

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

Njengoko sibona, kukho into esebenzayo, kwaye ibonise uhlobo oluthile lokugubungela, kodwa ayihambelani neyethu Isimbo somzimba-ingxelo.

Masiyiqonde. Makhe sijonge iprojekthi ngokweenkcukacha ezithe vetshe, cofa kwixabiso lokhuselo, kwaye "uwele" kwingxelo yefayile eneenkcukacha:

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

Apha sibona, ngaphezu kweyona nto iphambili, ifayile evavanyiweyo HelloWorld.vue, kukho kwakhona ifayile eziphambili.ts, eyonakalisa wonke umfanekiso we-coverage. Kodwa kwenzeka njani ukuba siyikhuphe ekubaleni ukhuseleko. Ewe, yonke into ichanekile, kodwa yayikwinqanaba Isimbo somzimba, kodwa iskena sasiyilayile, ngoko ke yaphelela kwizibalo zayo.

Masilungise oku:

Iipropathi.iprojekthi yesonr:

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

Ndingathanda ukwenza ingcaciso: ukongeza kwiincwadi ezineenkcukacha ezikhankanyiweyo kule parameter, zonke iifolda ezidweliswe kwiparameter nazo zongezwa. sonar.test.inclusions.

Emva kokuqalisa iskena, sibona ulwazi oluchanekileyo:

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

Makhe sijonge inqaku elilandelayo - Iiprofayili ezisemgangathweni. Ndithethe ngentla ngenkxaso sonariilwimi ezininzi ngaxeshanye. Yile nto kanye siyibonayo. Kodwa siyazi ukuba iprojekthi yethu ibhaliwe TS, ke kutheni ucofa iskena ngokukhohlisa nokutshekishwa okungeyomfuneko. Siza kumisela ulwimi lokuhlalutya ngokongeza enye iparameter kwifayile yoqwalaselo sonar'A:

Iipropathi.iprojekthi yesonr:

...
sonar.language=ts
...

Masiqhube iskena kwakhona kwaye sibone isiphumo:

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

I-coverage yayiphelile ngokupheleleyo.

Ukuba sijonga kwilog yeskena, sinokubona lo mgca ulandelayo:

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

Oko kukuthi, iifayile zethu zeprojekthi azizange zifakwe kwisalathiso.

Imeko imi ngolu hlobo lulandelayo: ixhaswa ngokusemthethweni VueJs ikwi-plugin I-SonarJSngubani onoxanduva Javascript.

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

Kodwa le nkxaso ayikho kwi-plugin I-SonarTS kuba TS, malunga netikiti elisemthethweni lavulwa kwi-tracker ye-bug sonar'A:

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

Nazi ezinye iimpendulo ezivela komnye wabameli abaphuhlisi be-SonarQube, eqinisekisa le nyaniso.

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

Kodwa yonke into yasisebenzela, uyachasa. Ewe kunjalo, masiyizame kancinci "Hack".
Ukuba kukho inkxaso .vue-iifayile sonar'oh, ke masizame ukumxelela ukuba azithathe njenge Uhlobo lwescript.

Masidibanise ipharamitha:

Iipropathi.iprojekthi yesonr:

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

Masiqalise iskena:

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

Kwaye, voila, yonke into ibuyele kwesiqhelo, kwaye ngeprofayile enye kuphela Uhlobo lwescript. Oko kukuthi, sikwazile ukusombulula ingxaki ekuxhaseni VueJs+TS kuba I-SonarQube.

Masizame ukuya phambili kwaye siphucule ulwazi lokugubungela kancinci.

Into esiyenzileyo ukuza kuthi ga ngoku:

  • yongezwe kwiprojekthi sonar-skena;
  • Misela Isimbo somzimba ukuvelisa ulwazi olubanzi;
  • iqwalaselwe sonar-skena;
  • yasombulula ingxaki yenkxaso .vue-iifayile + Uhlobo lwescript.

Ukongeza kwi-coverage yovavanyo, kukho ezinye iikhrayitheriya ezinomdla eziluncedo kumgangatho wekhowudi, umzekelo, ukuphindaphinda ikhowudi kunye nenani lemigca (ebandakanyekayo ekubaleni i-coefficients ehambelana nobunzima bekhowudi) yeprojekthi.

Ekuphunyezweni kwangoku kweplagin yokusebenza nayo TS (I-SonarTS) ayiyi kusebenza I-CPD (Kopisha isitshici sokuCola) kunye nemigca yokubala yekhowudi .vue-iifayile.

Ukwenza imeko yokwenziwa kophindaphindo lwekhowudi, phinda phinda ifayile yecandelo ngegama elahlukileyo kwaye uyidibanise kwikhowudi. eziphambili.ts umsebenzi wedummy kwaye uyiphindaphinde ngegama elahlukileyo. Ukukhangela uphindaphindo njengoko ku .vue, nangaphakathi .ts -iifayile.

eziphambili.ts:

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

Ukwenza oku, kufuneka uphawule okwethutyana kumgca woqwalaselo:

Iipropathi.iprojekthi yesonr:

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

Masiqale ngokutsha iskena kunye novavanyo:

yarn test && yarn run sonar

Ewe, ukhuseleko lwethu luya kuwa, kodwa ngoku asinamdla kuloo nto.

Ngokuphathelele ukuphindaphinda imigca yekhowudi, siya kubona:

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

Ukujonga siza kusebenzisa I-CPD-izinto eziluncedo - jscpd:

npx jscpd src

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

Ngemigca yekhowudi:

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

Mhlawumbi oku kuya kusonjululwa kwiinguqulelo zeplugin ezizayo I-SonarJS(TS). Ndingathanda ukuqaphela ukuba ngokuthe ngcembe baqala ukudibanisa ezi plugins zimbini zibe nye I-SonarJS, endicinga ukuba ichanekile.

Ngoku bendifuna ukuqwalasela ukhetho lokuphucula ulwazi lokhuseleko.

Ukuza kuthi ga ngoku sinokubona uvavanyo lovavanyo ngokwepesenti yeprojekthi iyonke, kunye neefayile ngokukodwa. Kodwa kunokwenzeka ukwandisa esi salathisi ngolwazi malunga nobuninzi iyunithi-uvavanyo lweprojekthi, kunye nakumxholo weefayile.

Kukho ithala leencwadi elinako Isimbo somzimba-guqula ingxelo ibe yifomathi ye sonar'A:
idatha yovavanyo lwegeneric - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Masifake eli thala leencwadi kwiprojekthi yethu:

yarn add jest-sonar-reporter

Kwaye wongeze kuqwalaselo Isimbo somzimba:

package.json:

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

Ngoku masenze uvavanyo:

yarn test

Emva koko ifayile iya kwenziwa kwingcambu yeprojekthi uvavanyo-ngxelo.xml.

Masiyisebenzise kuqwalaselo sonar'A:

Iipropathi.iprojekthi yesonr:

…
sonar.testExecutionReportPaths=test-report.xml
…

Kwaye uqalise kwakhona iskena:

yarn run sonar

Makhe sibone ukuba yintoni etshintshileyo kwi-interface sonar'A:

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

Kwaye akukho nto itshintshileyo. Inyaniso kukuba i-Sonar ayiqwalasele iifayile ezichazwe kwingxelo ye-Jest njengeefayile iyunithi-iimvavanyo. Ukulungisa le meko, sisebenzisa iparameter yoqwalaselo sonar Iimvavanyo, apho siya kubonisa ngokucacileyo iifolda ezinovavanyo (esinenye kuphela okwangoku):

Iipropathi.iprojekthi yesonr:

…
sonar.tests=src/components/__tests__
…

Masiqale kwakhona iskena:

yarn run sonar

Makhe sibone ukuba yintoni etshintshileyo kwi-interface:

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

Ngoku silibonile inani lethu iyunithi-uvavanyo kwaye, xa ungaphumelelanga ngokunqakraza ngaphakathi, sinokubona ukuhanjiswa kweli nani phakathi kweefayile zeprojekthi:

VueJS + TS udibaniso lweprojekthi kunye neSonarQube

isiphelo

Ngoko ke, sijonge isixhobo sohlalutyo oluqhubekayo I-SonarQube. Sidibanise ngempumelelo kuyo iprojekthi ebhalwe kuyo VueJs+TS. Kulungiswe imiba ethile yokuhambelana. Sandise umxholo wolwazi lwesalathisi sovavanyo. Kule nqaku sihlolisise enye kuphela yemilinganiselo yomgangatho wekhowudi (mhlawumbi enye yezona zibalulekileyo), kodwa I-SonarQube ixhasa ezinye iindlela zomgangatho, kubandakanywa uvavanyo lokhuseleko. Kodwa ayizizo zonke ezi mpawu zifumaneka ngokupheleleyo umphakathi-iinguqulelo. Enye yezinto ezinomdla kunye neziluncedo kukudibanisa I-SonarQube ngeenkqubo ezahlukeneyo zolawulo lwekhowudi yokugcina, njengeGitLab kunye neBitBucket. Ukunqanda dibanisa tsala(dibanisa) isicelo'a ukuya kwisebe eliphambili lovimba xa ukhuselo luthotywa. Kodwa eli libali lenqaku elahluke ngokupheleleyo.

PS: Yonke into echazwe kwinqaku ngendlela yekhowudi ifumaneka kuyo ifolokhwe yam.

Ngabasebenzisi ababhalisiweyo kuphela abanokuthatha inxaxheba kuphando. Ngena, ndiyacela.

Ngaba uyalisebenzisa iqonga leSonarQube:

  • 26,3%Ewe5

  • 15,8%No3

  • 15,8%Ndivile ngeliqonga kwaye ndifuna ukusebenzisa3

  • 10,5%Ndivile ngale platform and andifuni kuyisebenzisa2

  • 0,0%Ndisebenzisa iqonga elahlukileyo0

  • 31,6%Bendiqala ukuva ngaye6

Bangama-19 abasebenzisi abavotileyo. Abasebenzisi abangama-3 abakhange.

umthombo: www.habr.com

Yongeza izimvo