Timagwiritsa ntchito pulatifomu mwachangu pantchito yathu Alireza kusunga code khalidwe pa mlingo wapamwamba. Pophatikiza imodzi mwama projekiti olembedwa mu VueJs+Typescript, mavuto anabuka. Choncho, ndikufuna ndikuuzeni mwatsatanetsatane momwe tinatha kuwathetsera.

M'nkhaniyi tikambirana, monga ndinalembera pamwambapa, za nsanja ya SonarQube. Chiphunzitso chaching'ono - chomwe chiri chonse, kwa iwo omwe akumva za izo kwa nthawi yoyamba:

Alireza (kale sonar) ndi nsanja yotseguka yowunikira mosalekeza komanso kuyeza kwamtundu wa code.
Imathandizira kusanthula kwa ma code ndi kuzindikira zolakwika molingana ndi malamulo a MISRA C, MISRA C++, MITER/CWE ndi CERT Secure Coding Standards programming standards. Itha kuzindikiranso zolakwika kuchokera pamndandanda wa zolakwika zamapulogalamu a OWASP Top 10 ndi CWE/SANS Top 25.
Ngakhale kuti nsanjayi imagwiritsa ntchito zida zosiyanasiyana zopangidwa kale, SonarQube imachepetsa zotsatira zake kukhala dashboard imodzi, kusunga mbiri yamayendedwe ndikukulolani kuti muwone momwe kusintha kwa mapulogalamu pakukula.

Zambiri zitha kupezeka pa webusaitiyi

Zilankhulo zambiri zamapulogalamu zimathandizidwa. Kutengera zomwe zachokera pa ulalo womwe uli pamwambapa, izi ndi zinenero zoposa 25. Kuti muthandizire chilankhulo china, muyenera kukhazikitsa pulogalamu yowonjezera yoyenera. Mtundu wa anthu ammudzi uli ndi pulogalamu yowonjezera yogwirira nawo ntchito Javascript (kuphatikiza typeсript), ngakhale wiki ikunena zosiyana. Kumbuyo Javascript plugin mayankho SonarJS, kwa Typescript SonarTS motero.

Makasitomala ovomerezeka amagwiritsidwa ntchito kutumiza zidziwitso sonarqube scanner, zomwe, pogwiritsa ntchito zoikamo kuchokera config-file, imatumiza izi ku seva Alireza kwa kuphatikiza kowonjezera ndi kuphatikizika.

chifukwa Javascript pali npm chikwama. Kotero, tiyeni tiyambe kukhazikitsa pang'onopang'ono Alireza в Vue-kugwiritsa ntchito polojekiti Mtundu.

Kuti mutumize seva Alireza tiyeni titengerepo mwayi kuyimbira.

sonar.yaml:

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

Kukhazikitsa:

docker-compose -f sonar.yml up

Zitatha izi Alireza ipezeka pa: http://localhost:9001 .

Palibe ma projekiti momwemo pano ndipo ndizabwino. Tikonza izi. Ndinatenga ntchito yovomerezeka yachitsanzo VueJS+TS+Jest. Tiyeni tiitembenukire kwa ife tokha:

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

Choyamba tiyenera kukhazikitsa kasitomala Alireza, amene amatchedwa sonar scannerza npm pali pepala:

yarn add sonarqube-scanner

Ndipo nthawi yomweyo onjezani lamulo ku zolemba kugwira nawo ntchito.

package.json:

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

Kenako, kuti scanner igwire ntchito, muyenera kuyika makonda a polojekiti mu fayilo yapadera. Tiyeni tiyambe ndi zoyambira.

sonar-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 - adilesi sonar'A;
• sonar.projectKey - chozindikiritsa chapadera cha projekiti pa seva sonar'A;
• sonar.projectName - dzina lake, likhoza kusinthidwa nthawi iliyonse, popeza polojekitiyi imadziwika ndi projectKey;
• sonar.gwero - chikwatu chokhala ndi magwero, nthawi zambiri izi src, koma akhoza kukhala chilichonse. Fodayi imayikidwa pokhudzana ndi foda ya mizu, yomwe ndi foda yomwe scanner imayambira;
• sonar.mayeso - parameter yomwe imayendera limodzi ndi yapitayo. Ichi ndi chikwatu chomwe mayeso ali. Mu pulojekitiyi, palibe foda yotereyi, ndipo kuyesa kuli pafupi ndi gawo lomwe likuyesedwa mufoda '.mayeso', kotero sitiyinyalanyaza pakadali pano ndikugwiritsa ntchito gawo lotsatira;
• sonar.test.inclusions - njira yoyesera pogwiritsa ntchito chigoba, pakhoza kukhala zinthu zingapo zolembedwa zosiyanitsidwa ndi koma;
• sonar.sourceEncoding - encoding kwa mafayilo oyambira.

Pakutsegulira koyamba kwa scanner, zonse zakonzeka, kupatulapo zomwe zidachitika kale: kuyambitsa injini yoyeserera yokha, kuti ipange chidziwitso chokhudza kuphimba, chomwe scanner idzagwiritsa ntchito pambuyo pake.

Koma kuti muchite izi, muyenera kukonza injini yoyesera kuti mupange chidziwitsochi. Mu polojekitiyi, injini yoyesera ndi pali. Ndipo makonda ake ali mu gawo lolingana la fayilo phukusi.json.

Tiyeni tiwonjezere zokonda izi:

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

Ndiko kuti, timayika mbendera yokha pakufunika kuwerengera kufalitsa ndi gwero (pamodzi ndi kupatulapo) pamaziko omwe idzapangidwe.

Tsopano tiyeni tiyesetse:

yarn test

Tidzawona zotsatirazi:

Chifukwa chake ndikuti palibe code mu gawo lomwelo. Tiyeni tikonze izi.

HelloWorld.vue:

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

Izi zidzakhala zokwanira kuwerengera kufalitsa.

Pambuyo poyambitsanso mayeso, tidzatsimikizira izi:

Pa zenera tiyenera kuona zambiri za Kuphunzira, ndipo chikwatu adzapangidwa mu chikwatu polojekiti Kuphunzira zokhala ndi chidziwitso cha mayeso mumtundu wapadziko lonse lapansi LCOV (LTP GCOV extension).

Gcov ndi chida chogawidwa mwaufulu chowunika ma code. Gcov imapanga chiwerengero chenicheni cha anthu omwe aphedwa pa chiganizo chilichonse mu pulogalamu ndipo imakupatsani mwayi wowonjezerapo mawu ofotokozera. Gcov imabwera ngati ntchito wamba ngati gawo la phukusi la GCC.
Lcov - mawonekedwe ojambulira agcov. Imasonkhanitsa mafayilo agcov pamafayilo angapo oyambira ndikupanga masamba a HTML okhala ndi ma code komanso chidziwitso. Masamba amapangidwanso kuti kuyenda kukhale kosavuta. Lcov imathandizira kuphimba zingwe, ntchito, ndi nthambi.

Mayeso akamalizidwa, zidziwitso zoperekedwa zidzapezeka coverage/lcov.info.
Tiyenera kunena sonar'Kodi ndingachitenge kuti? Chifukwa chake, tiyeni tiwonjezere mizere yotsatirayi ku fayilo yake yosinthira. Koma pali mfundo imodzi: mapulojekiti amatha kukhala azilankhulo zambiri, ndiye kuti, mufoda src pali magwero a zilankhulo zingapo zamapulogalamu ndi kulumikizana ndi chimodzi kapena chimzake, ndipo, kugwiritsa ntchito pulogalamu yowonjezera imodzi kumatsimikiziridwa ndikukulitsa kwake. Ndipo zambiri zowunikira zitha kusungidwa m'malo osiyanasiyana pazilankhulo zosiyanasiyana zamapulogalamu, kotero chilankhulo chilichonse chimakhala ndi gawo lake lokhazikitsa izi. Ntchito yathu imagwiritsidwa ntchito Mtundu, kotero tikufuna gawo lokhazikitsira chifukwa chake:

sonar-properties:

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

Chilichonse chakonzeka kukhazikitsidwa koyamba kwa scanner. Ndikufuna kuzindikira kuti polojekitiyi ndi sonar'e imapangidwa yokha nthawi yoyamba mukayendetsa sikani ya projekiti yomwe mwapatsidwa. Munthawi zotsatila, chidziwitso chidzasonkhanitsidwa kuti muwone kusintha kwa magawo a polojekiti pakapita nthawi.

Chifukwa chake, tiyeni tigwiritse ntchito lamulo lomwe linapangidwa kale mkati phukusi.json:

yarn run sonar 

Taonani: mutha kugwiritsanso ntchito parameter -X kuti mudziwe zambiri zodula mitengo.

Ngati sikaniyo idakhazikitsidwa koyamba, ndiye kuti binary ya scanneryo imatsitsidwa kaye. Pambuyo pake imayamba ndikuyamba kuyang'ana seva sonar'a mapulagini oyika, potero kuwerengera chilankhulo chothandizira. Magawo ena osiyanasiyana ogwiritsira ntchito amayikidwanso: mbiri yabwino, malamulo ogwira ntchito, malo osungira ma metrics, malamulo a seva.

Taonani: Sitidzakambirana mwatsatanetsatane mwatsatanetsatane munkhaniyi, koma mutha kulumikizana ndi magwero ovomerezeka nthawi zonse.

Kenako, kusanthula chikwatu kumayamba src pa kupezeka kwa mafayilo oyambira onse (ngati china chake sichinatchulidwe momveka bwino) chilankhulo chothandizira, ndikulozera kwawo kotsatira.

Kenako pamabwera kusanthula kwina kosiyanasiyana, komwe sitikuganizira kwambiri m'nkhaniyi (mwachitsanzo, monga kuyika, kuzindikira kubwereza kachidindo, ndi zina).

Kumapeto kwa ntchito ya scanner, zonse zomwe zasonkhanitsidwa zimasonkhanitsidwa, zosungidwa ndikutumizidwa ku seva.

Pambuyo pake, titha kuwona kale zomwe zidachitika pa intaneti:

Monga tikuonera, chinachake chinagwira ntchito, ndipo ngakhale chimasonyeza mtundu wina wa Kuphunzira, koma sichikugwirizana ndi zathu pali- report.

Tiyeni tiganizire. Tiyeni tiwone pulojekitiyi mwatsatanetsatane, dinani pamtengo wofikira, ndi "kugwera" mu lipoti latsatanetsatane la fayilo:

Apa tikuwona, kuwonjezera pa fayilo yayikulu, yoyesedwa HelloWorld.vue, palinso fayilo chachikulu.ts, zomwe zimawononga chithunzi chonse cha kufalitsa. Koma zidatheka bwanji kuti tichotsere kuwerengera kwa kufalitsa. Inde, zonse ndi zolondola, koma zinali pamlingo pali, koma sikeloyo inailondolera, motero inathera m’kuŵerengera kwake.

Tiyeni tikonze izi:

sonar-properties:

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

Ndikufuna kumveketsa bwino: kuwonjezera pa zikwatu zomwe zafotokozedwa mu parameter iyi, zikwatu zonse zomwe zalembedwa pazigawo zimawonjezedwa. sonar.test.inclusions.

Pambuyo poyambitsa scanner, timawona zolondola:

Tiyeni tiwone mfundo yotsatira - Mbiri yabwino. Ndalankhula pamwambapa za chithandizo sonar'om zilankhulo zingapo nthawi imodzi. Izi ndi zomwe tikuwona. Koma tikudziwa kuti polojekiti yathu yalembedwa TS, ndiye bwanji kusefa sikani ndikusintha kosafunikira ndi macheke. Tidzakhazikitsa chilankhulo kuti chiwunikidwe powonjezera gawo limodzi ku fayilo yosinthira sonar'A:

sonar-properties:

...
sonar.language=ts
...

Tiyeni tiyambenso sikanirayo ndikuwona zotsatira zake:

Kuphunzirako kunatheratu.

Ngati tiyang'ana pa chipika cha scanner, titha kuwona mzere wotsatirawu:

Ndiye kuti, mafayilo athu a projekiti sanali olembedwa.

Zinthu zili motere: mothandizidwa ndi boma VueJs ili mu pulogalamu yowonjezera SonarJSamene ali ndi udindo Javascript.

Koma thandizo ili siliri mu pulogalamu yowonjezera SonarTS chifukwa TS, zomwe tikiti yovomerezeka idatsegulidwa mu bug tracker sonar'A:

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

Nawa mayankho ochokera kwa m'modzi mwa oyimilira ochokera kwa opanga SonarQube, kutsimikizira izi.

Koma zonse zidatigwirira ntchito, mukutsutsa. Inde, tiyeni tiyese pang'ono "hack".
Ngati pali thandizo .vue- mafayilo sonar'o, ndiye tiyeni tiyese kumuuza kuti awaganizire ngati Mtundu.

Tiyeni tiwonjezere parameter:

sonar-properties:

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

Tiyeni tiyambitse scanner:

Ndipo, voila, zonse zabwerera mwakale, ndipo ndi mbiri imodzi yokha Mtundu. Ndiye kuti, tinakwanitsa kuthetsa vutoli pothandizira VueJs+TS chifukwa Alireza.

Tiyeni tiyesere kupita patsogolo ndikuwongolera zambiri zofalitsa pang'ono.

Zomwe tachita mpaka pano:

• anawonjezera ku polojekiti sonar- scanner;
• khazikitsa pali kupanga zidziwitso zofalitsa;
• kukonzedwa sonar- scanner;
• anathetsa vuto lothandizira .vue- mafayilo + Mtundu.

Kuphatikiza pa kufalitsa koyesa, palinso njira zina zosangalatsa zothandiza zamtundu wa code, mwachitsanzo, kubwereza kachidindo ndi chiwerengero cha mizere (yomwe ikuphatikizidwa mu kuwerengera kwa ma coefficients okhudzana ndi zovuta za code) za polojekitiyo.

Pakukhazikitsa kwaposachedwa kwa pulogalamu yowonjezera yogwirira ntchito ndi TS (SonarTS) sizigwira ntchito CPD (Copy Paste Detector) ndi mizere yowerengera ma code .vue- mafayilo.

Kuti mupange mawonekedwe ophatikizika a kachidindo, ingofanizirani fayiloyo ndi dzina lina ndikuwonjezeranso pa code. chachikulu.ts dummy ntchito ndi kubwereza ndi dzina lina. Kuti muwone kubwereza ngati mu .vue, ndi .ts - mafayilo.

main.ts:

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

Kuti muchite izi, muyenera kupereka ndemanga kwakanthawi pamzere wokonzekera:

sonar-properties:

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

Tiyeni tiyambitsenso sikanila pamodzi ndi kuyesa:

yarn test && yarn run sonar

Zowona, kufalitsa kwathu kudzagwa, koma tsopano sitikukondwera nazo.

Pankhani yobwereza mizere ya ma code, tiwona:

Kuwona tidzagwiritsa ntchito CPD- zothandiza - jscpd ndi:

npx jscpd src

Kwa mizere ya code:

Mwina izi zidzathetsedwa m'mabaibulo a plugin amtsogolo SonarJS(TS). Ndikufuna kuzindikira kuti pang'onopang'ono akuyamba kuphatikiza mapulagini awiriwa kukhala amodzi SonarJS, zomwe ndikuganiza kuti ndizolondola.

Tsopano ndimafuna kuganizira za njira yopititsira patsogolo chidziwitso.

Pakadali pano titha kuwona kuwunika kwa mayeso pamaperesenti a polojekiti yonse, komanso mafayilo makamaka. Koma ndizotheka kukulitsa chizindikirochi ndi chidziwitso cha kuchuluka kwake Unit-mayeso a polojekitiyi, komanso pamafayilo.

Pali laibulale yomwe ingathe pali-kusintha lipoti kukhala mawonekedwe a sonar'A:
generic test data - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Tiyeni tiyike laibulale iyi mu projekiti yathu:

yarn add jest-sonar-reporter

Ndipo yonjezerani ku kasinthidwe pali:

package.json:

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

Tsopano tiyeni tiyesetse:

yarn test

Pambuyo pake fayilo idzapangidwa muzu wa polojekitiyo test-report.xml.

Tiyeni tigwiritse ntchito mu kasinthidwe sonar'A:

sonar-properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Ndipo yambitsaninso scanner:

yarn run sonar

Tiyeni tiwone zomwe zasintha mu mawonekedwe sonar'A:

Ndipo palibe chomwe chasintha. Chowonadi ndi chakuti Sonar samawona mafayilo omwe akufotokozedwa mu lipoti la Jest ngati mafayilo Unit-mayesero. Kuti tikonze izi, timagwiritsa ntchito parameter yokonzekera sonar sonar.mayeso, momwe tidzawonetsera momveka bwino zikwatu zokhala ndi mayeso (tili ndi imodzi yokha pakadali pano):

sonar-properties:

…
sonar.tests=src/components/__tests__
…

Tiyeni tiyambitsenso sikanira:

yarn run sonar

Tiyeni tiwone zomwe zasintha mu mawonekedwe:

Tsopano taona nambala yathu Unit-mayeso ndipo, atalephera ndikudina mkati, titha kuwona kugawidwa kwa nambalayi pakati pa mafayilo a polojekiti:

Pomaliza

Kotero, tinayang'ana pa chida chowunikira mosalekeza Alireza. Tinaphatikizamo bwino ntchito yolembedwamo VueJs+TS. Tinakonza zovuta zina. Tinawonjezera zomwe zili muzowonetsa zoyeserera. M'nkhaniyi, tidasanthula chimodzi mwazofunikira zamtundu wa code (mwinamwake chimodzi mwazinthu zazikulu), koma Alireza imathandizira njira zina zabwino, kuphatikizapo kuyesa chitetezo. Koma sizinthu zonsezi zomwe zimapezeka kwathunthu ammudzi-mitundu. Chimodzi mwazinthu zosangalatsa komanso zothandiza ndikuphatikiza Alireza ndi machitidwe osiyanasiyana osungira ma code, monga GitLab ndi BitBucket. Kupewa phatikizani kukoka(kuphatikiza) pempho'a ku nthambi yayikulu ya nkhokwe pamene kufalikira kwawonongeka. Koma iyi ndi nkhani ya nkhani yosiyana kotheratu.

PS: Chilichonse chofotokozedwa m'nkhaniyi mu mawonekedwe a code chikupezeka mu mphanda wanga.

Ogwiritsa ntchito olembetsedwa okha ndi omwe angatenge nawo gawo pa kafukufukuyu. Lowani muakauntichonde.

Kodi mumagwiritsa ntchito nsanja ya SonarQube:

• 26,3%Yes5

• 15,8%No3

• 15,8%Ndinamva za nsanja ndipo ndikufuna kugwiritsa3

• 10,5%Ndamva za nsanja iyi ndipo sindikufuna kugwiritsa ntchito2

• 0,0%Ndikugwiritsa ntchito nsanja ina0

• 31,6%Nthawi yoyamba yomwe ndinamva za iye6

Ogwiritsa ntchito 19 adavota. Ogwiritsa 3 adakana.

Source: www.habr.com