Waxaan si firfircoon u isticmaalnaa goobta shaqadayada codQube si loo ilaaliyo tayada koodhka heer sare. Marka la isku daro mid ka mid ah mashaariicda ku qoran VueJs+Nooca qoraalka, dhibaatooyin ayaa ka dhashay. Sidaa darteed, waxaan jeclaan lahaa inaan si faahfaahsan kuu sheego sida aan ugu suurtagashay in aan xalino.

Maqaalkan waxaan kaga hadli doonaa, sidaan kor ku qoray, oo ku saabsan madal SonarQube. Aragti yar - waa maxay guud ahaan, kuwa maqlaya waxa ku saabsan markii ugu horeysay:

codQube ( hore Sonar) waa goob il furan oo loogu talagalay kormeer joogto ah iyo cabbirka tayada code.
Waxay taageertaa falanqaynta koodka iyo ogaanshaha khaladaadka iyadoo la raacayo qawaaniinta MISRA C, MISRA C++, MITER/CWE iyo heerarka barnaamijka ee CERT Secure Coding Standards. Waxa kale oo ay aqoonsan kartaa khaladaadka ka imanaya OWASP Top 10 iyo CWE/SANS Top 25 liisaska khaladaadka barnaamijyada.
In kasta oo xaqiiqda ah in madalku isticmaasho qalabyo diyaarsan oo kala duwan, SonarQube waxay yaraynaysaa natiijooyinka hal dashboard, ilaalinta taariikhda socodsiinta waxayna kuu oggolaaneysaa inaad aragto isbeddelka guud ee isbeddelka tayada software inta lagu jiro horumarka.

Faahfaahin dheeraad ah ayaa laga heli karaa website-ka rasmiga ah

Tiro badan oo luuqadaha barnaamijka ah ayaa la taageeraa. Marka loo eego xogta laga helay isku xirka kore, kuwani waa in ka badan 25 luqadood. Si aad u taageerto luqad gaar ah, waa inaad ku rakibtaa plugin ku habboon. Nooca bulshada waxaa ku jira plugin ah oo lagula shaqeynayo javascript (oo ay ku jiraan noocyadaсript), in kasta oo wiki uu leeyahay caksi. Gadaal javascript jawaabaha plugin SonarJS, loogu talagalay Qoraal-qorista SonarTS siday u kala horreeyaan.

Macmiilka rasmiga ah waxaa loo isticmaalaa in lagu diro macluumaadka caymiska sonarqube-scanner, kaas oo, isticmaalaya settings ka config-file, waxay u dirtaa xogtan server-ka codQube sii xoojinta iyo isu-ururinta.

Si aad u javascript waa npm duub. Haddaba, aan bilowno tallaabo-tallaabo fulinta codQube в Vue-mashruuc la isticmaalayo Nooc qoraal ah.

Si loo geeyo server codQube aan ka faa'iidaysano docker-compose.

sonar.yaml:

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

Bilaw

docker-compose -f sonar.yml up

Intaa ka dib codQube waxaa laga heli karaa: http://localhost:9001 .

Ma jiraan wax mashaariic ah oo wali ku jira taasina waa cadaalad. Waan sixi doonaa xaaladdan. Waxaan u soo qaatay mashruuca tusaalaha rasmiga ah VueJS+TS+Jest. Aynu dhanka nafteena u soo laabo:

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

Marka hore waxaan u baahanahay inaan rakibno macmiilka codQube, oo loo yaqaan sonar-scanneree shm waxaa jira duub:

yarn add sonarqube-scanner

Oo isla markiiba ku dar amarka qoraallo in lala shaqeeyo.

xirmo.json:

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

Marka xigta, iskaanka si uu u shaqeeyo, waxaad u baahan tahay inaad dejiso goobaha mashruuca fayl gaar ah. Aan ku bilowno aasaaska.

sonar-mashruuc.hantiyo:

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 - ciwaanka SonarA;
sonar.projectKey - Aqoonsiga mashruuca gaarka ah ee server-ka SonarA;
sonar.Magaca mashruuca - magaceeda, waa la bedeli karaa wakhti kasta, maadaama mashruuca lagu aqoonsaday by furaha mashruuca;
sonar.ilo - Galka leh ilaha, badanaa tan srclaakiin waxay noqon kartaa wax kasta. Galkan waxa loo dejiyay marka loo eego galka xididka, kaas oo ah galka laga soo saaray iskaanka;
sonar.tijaabooyin - halbeeg la socda kii hore. Tani waa galka ay imtixaanadu ku yaalliin. Mashruucan, ma jiro gal noocaas ah, imtixaankuna wuxuu ku ag yaal qaybta lagu tijaabinayo galka 'imtixaanka', markaa hadda waanu iska indha tiraynaa oo isticmaalnaa cabbirka xiga;
sonar.tijaabada.ka mid noqoshada - Jidka imtixaannada iyadoo la isticmaalayo maaskaro, waxaa jiri kara dhowr walxood oo ay ku qoran yihiin hakadyo;
sonar.sourceEncoding - codaynta faylasha isha.

Bilawga ugu horreeya ee scanner, wax walbaa waa diyaar, marka laga reebo falkii hore ee ugu muhiimsanaa: bilaabista mishiinka tijaabada laftiisa, si ay u soo saarto macluumaadka ku saabsan caymiska, kaas oo scanner uu isticmaali doono.

Laakiin si tan loo sameeyo, waxaad u baahan tahay inaad habayso mishiinka tijaabada si aad u soo saarto macluumaadkan. Mashruucan, mashiinka tijaabada ayaa ah waxaa jira. Oo habaynteedu waxay ku yaalaan qaybta u dhiganta ee faylka xirmo.json.

Aan ku darno goobahan:

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

Taasi waa, waxaan u dejinay calanka laftiisa baahida loo qabo xisaabinta caymiska iyo isha (oo ay weheliso ka reeban tahay) iyada oo ku saleysan taas oo la samayn doono.

Hadda aan wadno imtixaanka:

yarn test

Waxaan arki doonaa kuwan soo socda:

Sababtu waxa weeye ma jiro kood ku jira qaybta lafteeda. Aan hagaajino tan.

HelloWorld.vue:

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

Tani waxay ku filnaan doontaa xisaabinta caymiska.

Ka dib markii aan dib u bilaabo imtixaanka, waxaan hubin doonaa tan:

Shaashadda waa inaan ku aragnaa macluumaadka ku saabsan daboolka, iyo gal ayaa lagu abuuri doonaa galka mashruuca caymiska oo wata macluumaadka daboolida tijaabada ee qaab caalami ah LCOV (LTP GCOV).

Gcov waa utility si xor ah loo qaybiyey si loo baaro caynsanaanta code. Gcov waxa ay soo saartaa tirada saxda ah ee fulinta bayaan kasta oo ku jira barnaamijka oo waxa uu kuu ogolaanayaa inaad ku darto faahfaahinta koodka isha. Gcov waxay u timaadaa sida utility caadiga ah iyada oo qayb ka ah xirmada GCC.
Lcov - interface garaafyada gcov. Waxay u ururisaa gcov galalka faylal ilo badan waxayna soo saartaa bogag HTML ah oo leh kood iyo macluumaadka caymiska. Bogag sidoo kale waa la soo saaray si loo fududeeyo socodka. Lcov waxay taageertaa daboolida xadhkaha, hawlaha, iyo laamaha.

Ka dib marka imtixaanada la dhammeeyo, macluumaadka caymiska ayaa la geli doonaa caymiska/lcov.info.
Waxaan u baahanahay inaan dhahno SonarXagee ka heli karaa? Sidaa darteed, aan ku darno khadadka soo socda faylka qaabeynta. Laakiin waxaa jira hal dhibic: mashruucyadu waxay noqon karaan kuwo luqado badan ku hadla, taas oo ah, galka src Waxaa jira codes ilo dhowr luqadood oo barnaamijyo ah iyo ku xiran mid ama mid kale, iyo markeeda, isticmaalka hal ama mid kale plugin waxaa lagu go'aamiyaa kordhintiisa. Macluumaadka daboolka waxaa lagu kaydin karaa meelo kala duwan oo loogu talagalay luqadaha barnaamijyada kala duwan, markaa luqad kastaa waxay leedahay qayb u gaar ah oo tan lagu dejiyo. Mashruucayagu wuu isticmaalaa Nooc qoraal ah, markaa waxaan u baahanahay qaybta dejinta kaliya iyada:

sonar-mashruuc.hantiyo:

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

Wax walba waxay diyaar u yihiin bilaabista ugu horeysa ee iskaanka. Waxaan jeclaan lahaa in aan ogaado in mashruucu yahay Sonar'e si toos ah ayaa loo abuuraa marka ugu horraysa ee aad ku shubto sawirka mashruuc la bixiyay. Waqtiyada soo socda, macluumaadka ayaa la ururin doonaa si loo arko dhaqdhaqaaqa isbeddelka ee xuduudaha mashruuca waqti ka dib.

Marka, aynu isticmaalno amarka hore loo abuuray xirmo.json:

yarn run sonar

Fiiro gaar ah: Waxaad sidoo kale isticmaali kartaa parameterka -X si aad u hesho goynta faahfaahsan.

Haddii iskaanka la bilaabay markii ugu horeysay, markaas binary ee iskaanka laftiisa ayaa marka hore la soo dejin doonaa. Intaa ka dib waxay bilaabataa oo bilaabataa iskaanka server-ka Sonar'a loogu talagalay plugins-ka lagu rakibay, si loo xisaabiyo luqadda la taageeray. Meelo kale oo kala duwan oo loogu talagalay hawlgalkeeda ayaa sidoo kale lagu raray: profiles tayada, xeerarka firfircoon, kaydka metrics, xeerarka server.

Fiiro gaar ah: Si faahfaahsan uga hadli mayno iyaga oo ku jira qaabka qodobkan, laakiin waxaad mar walba la xiriiri kartaa ilo rasmi ah.

Marka xigta, falanqaynta galku waxay bilaabmaysaa src Helitaanka faylasha isha ee dhammaan (haddii mid gaar ah aan si cad loo cayimin) luqadda la taageeray, oo leh tusmooyinkooda xiga.

Waxa soo socda falanqayno kale oo kala duwan, kuwaas oo aynaan diiradda saarin maqaalkan (tusaale ahaan, sida xuubka, ogaanshaha nuqulka koodhka, iwm.).

Dhammaadka shaqada iskaanka, dhammaan macluumaadka la ururiyey waa la ururiyey, kaydsan oo loo diraa server-ka.

Taas ka dib, waxaan horayba u arki karnaa waxa ka dhacay interface interface:

Sida aan arki karno, wax ayaa shaqeeyay, oo xitaa wuxuu muujinayaa nooc ka mid ah caymiska, laakiin ma aha mid u dhigma annaga waxaa jira-warbixin.

Aynu ogaano. Aynu si faahfaahsan u eegno mashruuca, guji qiimaha daboolka, oo "ku dhacay" warbixinta faylka oo faahfaahsan:

Halkan waxaan ku aragnaa, marka lagu daro faylka ugu weyn, ee la baaray HelloWorld.vue, waxa kale oo jira fayl ugu weyn.ts, kaas oo kharriba sawirka oo dhan ee daboolka. Laakiin sidee ayaynu uga saarnay xisaabinta caymiska. Haa, wax walba waa sax, laakiin waxay ahayd heer waxaa jira, laakiin scanner-ku wuu tilmaamay, markaa waxay ku dhammaatay xisaabteeda.

Aan hagaajino tan:

sonar-mashruuc.hantiyo:

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

Waxaan jeclaan lahaa inaan caddeeyo: marka lagu daro faylalka lagu cayimay halbeeggan, dhammaan faylalka ku taxan cabbirka ayaa sidoo kale lagu daray sonar.tijaabada.ka mid noqoshada.

Ka dib markii aan soo saarno iskaanka, waxaan aragnaa macluumaadka saxda ah:

Bal aan eegno qodobka xiga - Tilmaamaha tayada. Waxaan kor uga hadlay taageerada Sonar'om dhowr luqadood isku mar. Tani waa dhab ahaan waxa aan aragno. Laakiin waxaan ognahay in mashruucayagu ku qoran yahay TS, hadaba maxaa ku cadaadisay iskaanka adigoo isticmaalaya wax is daba marin iyo jeegag aan loo baahnayn. Waxaanu dejin doonaa luqadda falanqaynta annagoo ku darayna halbeeg oo kale faylka qaabaynta SonarA:

sonar-mashruuc.hantiyo:

...
sonar.language=ts
...

Aan mar kale wadno iskaanka oo arag natiijada:

Cafiskii ayaa gabi ahaanba meesha ka baxay.

Haddii aan eegno loggga iskaanka, waxaan arki karnaa xariiqan soo socota:

Taasi waa, faylasha mashruuceena si fudud looma tilmaamin.

Xaaladdu waa sida soo socota: si rasmi ah loo taageeray VueJs waa in plugin SonarJSyaa ka masuula javascript.

Laakiin taageeradani kuma jirto plugin SonarTS si ay u TS, kaas oo ku saabsan tigidh rasmi ah oo laga furay tracker bug SonarA:

Waa kuwan qaar ka mid ah jawaabaha mid ka mid ah wakiilada ka socda horumarinta SonarQube, oo xaqiijinaya xaqiiqadan.

Laakiin wax walba waa noo shaqeeyay, waad diidday. Haa waa tahay, aan isku dayno in yar "Hack".
Hadday taageero jirto .vue-faylal Sonar"Oh, markaas aan isku dayno inaan u sheegno inuu u tixgeliyo iyaga Nooc qoraal ah.

Aan ku darno halbeeg:

sonar-mashruuc.hantiyo:

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

Aan bilowno iskaanka:

Iyo, voila, wax walba waxay ku soo noqdeen sidii caadiga ahayd, oo leh hal profile oo keliya Nooc qoraal ah. Taasi waa, waxaan ku guuleysanay inaan xallino dhibaatada taageerada VueJs+TS si ay u codQube.

Aan isku dayno inaan sii wadno oo aan yara wanaajino macluumaadka caymiska.

Waxaan ilaa hadda qabanay:

lagu daray mashruuca Sonar- scanner;
dhigay waxaa jira si loo abuuro macluumaadka caymiska;
habaysan Sonar- scanner;
xaliyay dhibaatada taageerada .vue-faylal + Nooc qoraal ah.

Marka lagu daro caymiska tijaabada, waxaa jira shuruudo kale oo xiiso leh oo faa'iido leh oo loogu talagalay tayada koodhka, tusaale ahaan, nuqul ka mid ah koodhka iyo tirada xariiqyada (ku lug leh xisaabinta isku-dhafka ee la xidhiidha kakanaanta koodhka) ee mashruuca.

In fulinta hadda ee plugin ee la shaqeeya TS (SonarTS) ma shaqayn doono CPD (Koobi gareeyaha koollada) iyo tirinta khadadka koodka .vue-faylal

Si aad u abuurto xaalad synthetic ee nuqul ka mid ah koodka, si fudud ugu koobi faylka qaybta oo leh magac kale oo sidoo kale ku dar koodka ugu weyn.ts hawl yar oo ku duub magac kale. Si aad u hubiso nuqul ka mid ah sida ku jirta .vue, iyo .ts -faylal

main.ts:

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

Si tan loo sameeyo, waxaad u baahan tahay inaad si ku meel gaar ah faallo uga bixiso khadka qaabaynta:

sonar-mashruuc.hantiyo:

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

Aan dib u bilowno iskaanka oo ay la socoto baaritaanka:

yarn test && yarn run sonar

Dabcan, caymiskayagu wuu dhici doonaa, laakiin hadda ma xiisaynno taas.

Marka la eego khadadka koodhka la nuqulo, waxaanu arki doonaa:

Si loo hubiyo waxaan isticmaali doonaa CPD-Utility - jscpd:

npx jscpd src

Khadadka koodka:

Waxaa laga yaabaa in tan lagu xalin doono noocyada plugin mustaqbalka SonarJS(TS). Waxaan jeclaan lahaa in aan ogaado in ay si tartiib tartiib ah u bilaabayaan in ay isku daraan labadan plugin oo mid ah SonarJS, taasoo aan filayo inay sax tahay.

Hadda waxaan rabay inaan tixgeliyo ikhtiyaarka hagaajinta macluumaadka caymiska.

Ilaa hadda waxaan arki karnaa caymiska tijaabada ee boqolleyda marka loo eego mashruuca oo dhan, iyo gaar ahaan faylasha. Laakiin waa suurtogal in lagu ballaariyo tilmaamehan macluumaadka ku saabsan tirada unit-tijaabooyin mashruuca, iyo sidoo kale macnaha guud ee faylasha.

Waxaa jira maktabad awood u leh waxaa jira- u beddelo warbixinta qaab ahaan SonarA:
xogta guud ee imtixaanka - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Aynu ku rakibno maktabaddan mashruucayaga:

yarn add jest-sonar-reporter

Oo ku dar qaabeynta waxaa jira:

xirmo.json:

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

Hadda aan wadno imtixaanka:

yarn test

Ka dib markaa faylka ayaa la abuuri doonaa xididka mashruuca imtixaan-warbixin.xml.

Aan u isticmaalno qaabeynta SonarA:

sonar-mashruuc.hantiyo:

…
sonar.testExecutionReportPaths=test-report.xml
…

Oo dib u bilow iskaanka:

yarn run sonar

Aan aragno waxa iska beddelay interface-ka SonarA:

Wax is beddelayna ma jiraan. Xaqiiqdu waxay tahay in Sonar aysan tixgelineynin faylasha lagu qeexay warbixinta Jest inay yihiin faylal unit-tijaabooyin. Si loo saxo xaaladdan, waxaan isticmaalnaa cabbirka qaabeynta Sonar sonar.tijaabooyin, kaas oo aan si cad ugu muujin doono galka imtixaannada (hal kaliya ayaan hadda haysanaa):

sonar-mashruuc.hantiyo:

…
sonar.tests=src/components/__tests__
…

Aan dib u bilowno iskaanka:

yarn run sonar

Aynu aragno waxa iska beddelay interface-ka:

Hadda waxaan aragnay tiradayada unit-tijaabooyin iyo, markii aan ku guuldareysanay adigoo gujinaya gudaha, waxaan arki karnaa qaybinta lambarkan ee faylasha mashruuca:

gunaanad

Markaa, waxaanu eegnay qalab loogu talagalay falanqaynta joogtada ah codQube. Waxaan si guul leh u dhexgelinay mashruuc ku qoran VueJs+TS. La dejiyay qaar ka mid ah arrimaha iswaafajinta Waxaan kordhinay nuxurka macluumaadka ee tusaha daboolida tijaabada. Maqaalkani waxa aanu eegnay mid ka mid ah shuruudaha tayada code (laga yaabee mid ka mid ah kuwa ugu muhiimsan), laakiin codQube waxay taageertaa shuruudaha tayada kale, oo ay ku jiraan baaritaanka badbaadada. Laakiin dhammaan sifooyinkan si buuxda looguma heli karo gudaha beesha-Noocyada. Mid ka mid ah sifooyinka xiisaha leh ee faa'iidada leh waa isdhexgalka codQube oo leh habab kala duwan oo lagu maareeyo kood, sida GitLab iyo BitBucket. Si looga hortago codsi isku dar aha ilaa laanta ugu weyn ee kaydka marka caymiska la yareeyo. Laakiin tani waa sheeko loogu talagalay maqaal gebi ahaanba ka duwan.

PS: Wax kasta oo lagu sifeeyay maqaalka qaabka koodka ayaa laga heli karaa fargeetoyga.

Isticmaalayaasha diiwaangashan oo keliya ayaa ka qaybqaadan kara sahanka. Soo gal, soo dhawoow.

Ma isticmaashaa aaladda SonarQube:

26,3%Haa5
15,8%No3
15,8%Waxaan ka maqlay goobtan oo waxaan rabaa inaan isticmaalo3
10,5%Waxaan ka maqlay goobtan mana rabo inaan isticmaalo2
0,0%Waxaan isticmaalayaa madal ka duwan0
31,6%Markii ugu horeysay ee aan iyada maqlay6

19 isticmaale ayaa codeeyay. 3 isticmaale ayaa ka aamusay.

Source: www.habr.com

VueJS+ TS isku dhafka mashruuca ee SonarQube

gunaanad

Ma isticmaashaa aaladda SonarQube:

Add a comment cancel reply