Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Sisebenzisa inkundla ngenkuthalo emsebenzini wethu I-SonarQube ukugcina izinga lekhodi lisezingeni eliphezulu. Lapho uhlanganisa eyodwa yamaphrojekthi abhalwe kuwo I-VueJs+Typescript, kwaphakama izinkinga. Ngakho-ke, ngithanda ukukutshela kabanzi ukuthi sikwazile kanjani ukuzixazulula.

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Kulesi sihloko sizokhuluma, njengoba ngibhale ngenhla, mayelana nesiteji se-SonarQube. Ithiyori encane - ukuthi iyini ngokujwayelekile, kulabo abezwa ngayo okokuqala ngqa:

I-SonarQube (okwangaphambili sonar) iyinkundla yomthombo ovulekile yokuhlolwa okuqhubekayo kanye nokukalwa kwekhwalithi yekhodi.
Isekela ukuhlaziywa kwekhodi nokutholwa kwamaphutha ngokuvumelana nemithetho ye-MISRA C, MISRA C++, MITER/CWE kanye ne-CERT Secure Coding Standards amazinga wokuhlela. Ingakwazi futhi ukubona amaphutha ohlwini lwamaphutha ohlelo lwe-OWASP Top 10 kanye ne-CWE/SANS Top 25.
Ngaphandle kweqiniso lokuthi inkundla isebenzisa amathuluzi ahlukahlukene enziwe ngomumo, i-SonarQube yehlisa imiphumela kudeshibhodi eyodwa, igcina umlando wokugijima futhi ngaleyo ndlela ikuvumela ukuthi ubone ukuthambekela okuvamile kwezinguquko kukhwalithi yesofthiwe ngesikhathi sokuthuthukiswa.

Imininingwane eyengeziwe ingatholakala kokuthi iwebhusayithi esemthethweni

Inani elikhulu lezilimi zokuhlela ziyasekelwa. Uma sibheka ukwaziswa okuvela kulesi sixhumanisi esingenhla, lezi izilimi ezingaphezu kuka-25. Ukuze usekele ulimi oluthile, kufanele ufake i-plugin efanelekile. Inguqulo yomphakathi ihlanganisa i-plugin ongasebenza nayo -Javascript (kuhlanganise ne-typesript), nakuba i-wiki isho okuphambene. Ngemuva -Javascript izimpendulo ze-plugin I-SonarJS, ye-Typescript I-SonarTS ngokulandelana.

Iklayenti elisemthethweni lisetshenziselwa ukuthumela imininingwane yokuxhumana sonarqube-isithwebuli, okuthi, kusetshenziswa izilungiselelo ezivela config-file, ithumela le datha kuseva I-SonarQube ukuze kuqiniswe futhi kuhlanganiswe.

Ukuze -Javascript kuyinto i-npm wrapper. Ngakho-ke, ake siqale ukuqaliswa kwesinyathelo ngesinyathelo I-SonarQube Π² Buka-ukusetshenziswa kwephrojekthi Uhlobo.

Ukuze usebenzise iseva I-SonarQube asisebenzise ithuba docker-compose.

sonar.yaml:

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

Yethula:

docker-compose -f sonar.yml up

Emva kwalokho I-SonarQube izotholakala ku: http://localhost:9001 .

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube
Awekho amaphrojekthi kuwo okwamanje futhi lokho kulungile. Sizosilungisa lesi simo. Ngithathele iphrojekthi eyisibonelo esemthethweni I-VueJS+TS+Jest. Masiyigobele kithina:

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

Okokuqala sidinga ukufaka iklayenti I-SonarQube, okuthiwa isithwebuli se-sonarngoba npm kukhona i-wrapper:

yarn add sonarqube-scanner

Futhi ngokushesha engeza umyalo ku izikripthi ukusebenza nayo.

package.json:

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

Okulandelayo, ukuze isithwebuli sisebenze, udinga ukusetha izilungiselelo zephrojekthi efayeleni elikhethekile. Ake siqale ngezisekelo.

iphrojekthi.yezakhiwo:

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 - ikheli sonar'A;
  • sonar.projectKey - isihlonzi sephrojekthi esiyingqayizivele kuseva sonar'A;
  • sonar.projectName - igama layo, lingashintshwa nganoma yisiphi isikhathi, njengoba iphrojekthi ikhonjwa ngu iphrojekthiKey;
  • imithombo.yesona – ifolda enemithombo, ngokuvamile lokhu src, kodwa kungaba noma yini. Le folda isethwe ngokuhlobene nefolda yezimpande, okuyifolda okuqalwa kuyo isithwebuli;
  • i-sonar.test – ipharamitha ehambisana nedlule. Lena ifolda lapho ukuhlolwa kutholakala khona. Kule phrojekthi, ayikho ifolda enjalo, futhi ukuhlolwa kutholakala eduze kwengxenye ehlolwayo kufolda '.test', ngakho-ke sizokuziba okwamanje futhi sisebenzise ipharamitha elandelayo;
  • sonar.test.inclusions – indlela yokuhlola kusetshenziswa imaski, kungase kube nezinto ezimbalwa ezisohlwini ezihlukaniswa ngokhefana;
  • i-sonar.sourceUkufaka ikhodi – umbhalo wekhodi wamafayela omthombo.

Ukwethulwa kokuqala kwesithwebuli, konke sekumi ngomumo, ngaphandle kwesenzo esiyinhloko esandulele: ukwethula injini yokuhlola ngokwayo, ukuze ikwazi ukukhiqiza ulwazi mayelana nokumbozwa, okuzosetshenziswa isithwebuli ngokulandelayo.

Kodwa ukwenza lokhu, udinga ukumisa injini yokuhlola ukuze ukhiqize lolu lwazi. Kule phrojekthi, injini yokuhlola i kukhona. Futhi izilungiselelo zayo zisesigabeni esihambisanayo sefayela iphakethe.json.

Masingeze lezi zilungiselelo:

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

Okusho ukuthi, sisetha ifulegi ngokwalo ngesidingo sokubala ukumbozwa kanye nomthombo (kanye nokunye okuhlukile) ngokusekelwe lapho lizokwakhiwa khona.

Manje ake siqalise ukuhlolwa:

yarn test

Sizobona okulandelayo:

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Isizathu siwukuthi ayikho ikhodi engxenyeni ngokwayo. Asilungise lokhu.

HelloWorld.vue:

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

Lokhu kuzokwanela ukubala ukumbozwa.

Ngemva kokuqala kabusha isivivinyo, sizoqinisekisa lokhu:

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Esikrinini kufanele sibone ulwazi mayelana nokufakwa, futhi ifolda izokwakhiwa kufolda yephrojekthi Ukuhlanganisa ngolwazi olufaka ukuhlolwa ngefomethi yendawo yonke I-LCOV (LTP GCOV extension).

Gcov iwuhlelo olusatshalaliswa ngokukhululekile lokuhlola ukumbozwa kwekhodi. I-Gcov ikhiqiza inani eliqondile lokusetshenziswa kwesitatimende ngasinye kuhlelo futhi ikuvumela ukuthi ungeze izichasiselo kukhodi yomthombo. I-Gcov iza njengesisetshenziswa esijwayelekile njengengxenye yephakheji ye-GCC.
I-Lcov - isikhombimsebenzisi sokuqhafaza se-gcov. Ihlanganisa amafayela e-gcov kumafayela amaningi omthombo futhi ikhiqize isethi yamakhasi e-HTML anekhodi nolwazi lokuhlanganisa. Amakhasi nawo akhiqizwa ukwenza ukuzulazula kube lula. I-Lcov isekela ukumbozwa kwezintambo, imisebenzi, namagatsha.

Ngemuva kokuthi izivivinyo seziqediwe, imininingwane yokumboza izotholakala coverage/lcov.info.
Sidinga ukusho sonar'Ngingayithathaphi? Ngakho-ke, ake sengeze imigqa elandelayo kufayela layo lokucushwa. Kodwa kukhona iphuzu elilodwa: amaphrojekthi angaba ngezilimi eziningi, okungukuthi, kufolda src kukhona amakhodi omthombo wezilimi ezimbalwa zokuhlela kanye nokuzibandakanya neyodwa noma enye, futhi, ukusetshenziswa kwe-plugin eyodwa noma enye kunqunywa ngokunwetshwa kwayo. Futhi ulwazi lokuhlanganisa lungagcinwa ezindaweni ezihlukene ngezilimi ezihlukene zokuhlela, ngakho ulimi ngalunye lunesigaba salo sokusetha lokhu. Iphrojekthi yethu isetshenziswa Uhlobo, ngakho-ke sidinga isigaba sezilungiselelo sayo nje:

iphrojekthi.yezakhiwo:

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

Konke sekulungele ukwethulwa kokuqala kwesithwebuli. Ngingathanda ukuqaphela ukuthi iphrojekthi sonar'e idalwa ngokuzenzakalela uma uqala ukusebenzisa isithwebuli sephrojekthi ethile. Ezikhathini ezizayo, ulwazi luzoqoqwa ukuze kubonwe ukuguquguquka kwezinguquko kumapharamitha wephrojekthi ngokuhamba kwesikhathi.

Ngakho-ke, masisebenzise umyalo owenziwe ekuqaleni iphakethe.json:

yarn run sonar 

Qaphela: ungasebenzisa futhi ipharamitha -X ukuze uthole imininingwane eyengeziwe.

Uma ngabe isikena saqalwa okokuqala, khona-ke unambambili weskena ngokwaso uzolandwa kuqala. Ngemva kwalokho iqala futhi iqala ukuskena iseva sonar'a yama-plugin afakiwe, ngaleyo ndlela kubalwa ulimi olusekelwe. Amanye amapharamitha ahlukahlukene wokusebenza kwawo nawo ayalayishwa: amaphrofayili ekhwalithi, imithetho esebenzayo, inqolobane yamamethrikhi, imithetho yeseva.

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Qaphela: Ngeke sigxile kuzo ngokuningiliziwe ngaphakathi kohlaka lwalesi sihloko, kodwa ungahlala uthintana nemithombo esemthethweni.

Okulandelayo, ukuhlaziywa kwefolda kuyaqala src ngokutholakala kwamafayela omthombo awo wonke (uma elilodwa lingashiwongo ngokusobala) ulimi olusekelwayo, kanye nezinkomba zalo ezilandelayo.

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Okulandelayo kuza okunye ukuhlaziya okuhlukahlukene, esingagxili kukho kulesi sihloko (isibonelo, njengokuhlanganisa, ukutholwa kokuphindwaphindwa kwekhodi, njll.).

Ekupheleni komsebenzi wesithwebuli, lonke ulwazi oluqoqiwe luyahlanganiswa, lufakwe kungobo yomlando futhi luthunyelwe kuseva.

Ngemuva kwalokhu, sesingabona ukuthi kwenzekeni ku-interface yewebhu:

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Njengoba sibona, kukhona okusebenzayo, futhi kubonisa uhlobo oluthile lokuhlanganisa, kodwa aluhambisani nolwethu kukhona-bika.

Ake sikuthole. Ake sibheke iphrojekthi ngokuningiliziwe, chofoza inani lekhava, futhi "siwele" embikweni wefayela onemininingwane:

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Lapha sibona, ngaphezu kwefayela eliyinhloko, elihloliwe HelloWorld.vue, kukhona nefayela main.ts, okonakalisa sonke isithombe sekhava. Kodwa kwenzeka kanjani ukuthi sikukhiphe ekubalweni kokufakwa. Yebo, konke kulungile, kodwa bekusezingeni kukhona, kodwa isithwebuli sayikhomba, ngakho yagcina ifinyelele ezibalweni zayo.

Masilungise lokhu:

iphrojekthi.yezakhiwo:

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

Ngingathanda ukucacisa: ngaphezu kwamafolda ashiwo kule pharamitha, wonke amafolda asohlwini lwepharamitha ayangezwa. sonar.test.inclusions.

Ngemva kokwethula isithwebuli, sibona ulwazi olulungile:

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Ake sibheke iphuzu elilandelayo - Amaphrofayili ekhwalithi. Ngikhulume ngenhla mayelana nokwesekwa sonar'om izilimi eziningana ngesikhathi esisodwa. Yilokhu kanye esikubonayo. Kodwa siyazi ukuthi iphrojekthi yethu ibhalwe ku TS, kungani-ke ucindezela isithwebuli ngokukhohlisa nokuhlola okungadingekile. Sizosetha ulimi ukuze luhlaziywe ngokwengeza enye ipharamitha kufayela lokumisa sonar'A:

iphrojekthi.yezakhiwo:

...
sonar.language=ts
...

Masiqalise isithwebuli futhi futhi sibone umphumela:

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Ukufakwa kwakungasekho ngokuphelele.

Uma sibheka ilogi yesithwebuli, singabona umugqa olandelayo:

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Okusho ukuthi, amafayela wethu wephrojekthi awazange akhonjwe.

Isimo simi kanje: sisekelwe ngokusemthethweni I-VueJs iku-plugin I-SonarJSngubani onesibopho -Javascript.

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Kodwa lokhu kusekelwa akukho ku-plugin I-SonarTS ngoba TS, mayelana nokuthi ithikithi elisemthethweni lavulwa kusilandeleli sesiphazamisi sonar'A:

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

Nazi ezinye izimpendulo ezivela komunye wabamele abathuthukisi be-SonarQube, eqinisekisa leli qiniso.

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Kodwa konke kusisebenzele, niyaphika. Yebo kunjalo, ake sikuzame kancane "Hack".
Uma kukhona ukwesekwa .vue-amafayela sonar'oh, ke asizame ukumtshela ukuthi azithathe njenge Uhlobo.

Masingeze ipharamitha:

iphrojekthi.yezakhiwo:

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

Masiqalise isithwebuli:

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Futhi, voila, yonke into isibuyele kokujwayelekile, futhi ngephrofayela eyodwa kuphela Uhlobo. Okusho ukuthi, sikwazile ukuxazulula inkinga ekusekeleni I-VueJs+TS ngoba I-SonarQube.

Ake sizame ukuqhubekela phambili futhi sithuthukise ulwazi lokuhlanganisa kancane.

Esikwenzile kuze kube manje:

  • kwengezwe kuphrojekthi sonar- isithwebuli;
  • misa kukhona ukwenza ukwaziswa okwengeziwe;
  • kulungisiwe sonar- isithwebuli;
  • ixazulule inkinga yokusekela .vue-amafayela + Uhlobo.

Ngaphezu kokufakwa kokuhlola, kunezinye izindlela ezithakazelisayo eziwusizo zekhwalithi yekhodi, isibonelo, ukuphindaphinda ikhodi kanye nenani lemigqa (ehilelekile ekubalweni kwama-coefficient ahlobene nobunkimbinkimbi bekhodi) yephrojekthi.

Ekusetshenzisweni kwamanje kwe-plugin yokusebenza nayo TS (I-SonarTS) ngeke isebenze I-CPD (Kopisha Namathisela Detector) kanye nemigqa yokubala yekhodi .vue-amafayela.

Ukuze udale isimo sokwenziwa sokuphindaphinda ikhodi, mane ukopishe ifayela lengxenye ngegama elihlukile futhi ulingeze kukhodi. main.ts umsebenzi we-dummy bese uwuphinda ngegama elihlukile. Ukuze uhlole ukuphindaphinda njengaku .vue, futhi .ts -amafayela.

main.ts:

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

Ukuze wenze lokhu, udinga ukubeka amazwana okwesikhashana umugqa wokumisa:

iphrojekthi.yezakhiwo:

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

Masiqale kabusha isikena kanye nokuhlola:

yarn test && yarn run sonar

Yebo, ukufakwa kwethu kuzokwehla, kodwa manje asinandaba nalokho.

Mayelana nokuphindaphinda imigqa yekhodi, sizobona:

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Ukuhlola sizosebenzisa I-CPD-usizo - jscpd:

npx jscpd src

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Ngemigqa yekhodi:

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Mhlawumbe lokhu kuzoxazululwa ezinguqulweni ze-plugin ezizayo I-SonarJS(TS). Ngithanda ukuqaphela ukuthi kancane kancane baqala ukuhlanganisa lawa ma-plugin amabili abe yinye I-SonarJS, engicabanga ukuthi ilungile.

Manje bengifuna ukucabangela inketho yokuthuthukisa ulwazi lokuhlanganisa.

Kuze kube manje singabona ukuhlolwa kokuhlolwa ngokwemibandela yamaphesenti ayo yonke iphrojekthi, futhi ikakhulukazi amafayela. Kodwa kungenzeka ukwandisa le nkomba ngolwazi mayelana nenani Iyunithi-ukuhlolwa kwephrojekthi, kanye nakumongo wamafayela.

Kukhona umtapo ongakwazi kukhona-guqula umbiko ube yifomethi ye sonar'A:
idatha yokuhlola ejwayelekile - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Masifake le labhulali kuphrojekthi yethu:

yarn add jest-sonar-reporter

Bese wengeze ekucushweni kukhona:

package.json:

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

Manje ake siqalise ukuhlolwa:

yarn test

Ngemuva kwalokho kuzokwakhiwa ifayela empandeni yephrojekthi test-report.xml.

Masiyisebenzise ekucushweni sonar'A:

iphrojekthi.yezakhiwo:

…
sonar.testExecutionReportPaths=test-report.xml
…

Bese uqala kabusha isithwebuli:

yarn run sonar

Ake sibone ukuthi yini eshintshile kusixhumi esibonakalayo sonar'A:

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Futhi akukho okushintshile. Iqiniso liwukuthi i-Sonar ayibheki amafayela achazwe embikweni we-Jest njengamafayela Iyunithi-izivivinyo. Ukuze silungise lesi simo, sisebenzisa ipharamitha yokumisa sonar i-sonar.test, lapho sizobonisa khona ngokucacile amafolda anokuhlolwa (esinayo eyodwa kuphela okwamanje):

iphrojekthi.yezakhiwo:

…
sonar.tests=src/components/__tests__
…

Masiqale kabusha isithwebuli:

yarn run sonar

Ake sibone ukuthi yini eshintshile kusixhumi esibonakalayo:

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

Manje sesiyibonile inombolo yethu Iyunithi-tests futhi, sehlulekile ngokuchofoza ngaphakathi, singabona ukusatshalaliswa kwale nombolo phakathi kwamafayela ephrojekthi:

Ukuhlanganiswa kwephrojekthi ye-VueJS+TS ne-SonarQube

isiphetho

Ngakho-ke, sibheke ithuluzi lokuhlaziya okuqhubekayo I-SonarQube. Sihlanganise ngempumelelo kulo iphrojekthi ebhalwe kuyo I-VueJs+TS. Kulungiswe izinkinga ezithile zokusebenzisana. Sikhuphule okuqukethwe kolwazi lwenkomba yokufakwa kokuhlolwa. Kulesi sihloko sihlole eyodwa kuphela yezindinganiso zekhwalithi yekhodi (mhlawumbe enye yezinto eziyinhloko), kodwa I-SonarQube isekela ezinye izindlela zekhwalithi, okuhlanganisa ukuhlolwa kokuphepha. Kodwa akuzona zonke lezi zici ezitholakala ngokugcwele umphakathi-izinguqulo. Esinye sezici ezithakazelisayo neziwusizo ukuhlanganisa I-SonarQube ngezinhlelo ezahlukahlukene zokuphatha inqolobane yamakhodi, njenge-GitLab ne-BitBucket. Ukuze ugweme hlanganisa isicelo sokudonsa(hlanganisa).'a egatsheni eliyinhloko lenqolobane lapho ukumbozwa kwehliswa. Kodwa lena indaba yesihloko esihluke ngokuphelele.

PS: Konke okuchazwe esihlokweni ngendlela yekhodi kuyatholakala ku imfologo yami.

Abasebenzisi ababhalisiwe kuphela abangabamba iqhaza kuhlolovo. Ngena ngemvume, wamukelekile.

Ingabe usebenzisa inkundla ye-SonarQube:

  • 26,3%Yebo5

  • 15,8%No3

  • 15,8%Ngezwa ngale nkundla futhi ngifuna ukusebenzisa3

  • 10,5%Ngizwile ngale platform futhi angifuni ukusebenzisa2

  • 0,0%Ngisebenzisa inkundla ehlukile0

  • 31,6%Okokuqala ngizwa ngaye6

Bangu-19 abasebenzisi abavotile. Abasebenzisi abangu-3 bayenqaba.

Source: www.habr.com

Engeza amazwana