Tunatumia jukwaa kikamilifu katika kazi yetu sautiQube kudumisha ubora wa msimbo katika kiwango cha juu. Wakati wa kuunganisha moja ya miradi iliyoandikwa ndani VueJs+Typescript, matatizo yakatokea. Kwa hiyo, ningependa kukuambia kwa undani zaidi jinsi tulivyoweza kutatua.
Katika nakala hii tutazungumza, kama nilivyoandika hapo juu, juu ya jukwaa la SonarQube. Nadharia kidogo - ni nini kwa ujumla, kwa wale ambao wanasikia juu yake kwa mara ya kwanza:
sautiQube (zamani Sonar) ni jukwaa huria la ukaguzi unaoendelea na upimaji wa ubora wa msimbo.
Inasaidia uchanganuzi wa msimbo na ugunduzi wa makosa kulingana na sheria za viwango vya programu vya MISRA C, MISRA C++, MITER/CWE na CERT Secure Coding Standards. Inaweza pia kutambua hitilafu kutoka kwa orodha 10 za Juu za OWASP na CWE/SANS Top 25 za makosa ya utayarishaji.
Licha ya ukweli kwamba jukwaa hutumia zana mbalimbali zilizopangwa tayari, SonarQube inapunguza matokeo kwenye dashibodi moja, kuweka historia ya uendeshaji na hivyo kuruhusu kuona mwenendo wa jumla wa mabadiliko katika ubora wa programu wakati wa maendeleo.
Maelezo zaidi yanaweza kupatikana kwa
Idadi kubwa ya lugha za programu zinasaidiwa. Kwa kuzingatia habari kutoka kwa kiungo hapo juu, hizi ni zaidi ya lugha 25. Ili kuauni lugha mahususi, lazima usakinishe programu-jalizi inayofaa. Toleo la jumuiya linajumuisha programu-jalizi ya kufanya kazi nayo Javascript (pamoja na typeΡript), ingawa wiki inasema kinyume. Nyuma Javascript majibu ya programu-jalizi SonarJS, kwa Typescript SonarTS ipasavyo.
Mteja rasmi hutumiwa kutuma maelezo ya chanjo sonarqube-skana, ambayo, kwa kutumia mipangilio kutoka config-file, hutuma data hii kwa seva sautiQube kwa uimarishaji zaidi na ujumlisho.
Kwa Javascript kuna . Kwa hivyo, wacha tuanze utekelezaji wa hatua kwa hatua sautiQube Π² Vue-mradi kwa kutumia Aina.
Ili kupeleka seva sautiQube tuchukue faida mtengenzaji.
sonar.yaml:
version: '1'
services:
simplesample-sonar:
image: sonarqube:lts
ports:
- 9001:9000
- 9092:9092
network_mode: bridgeUzinduzi:
docker-compose -f sonar.yml upBaada ya hapo sautiQube itapatikana kwa: .
Bado hakuna miradi ndani yake na hiyo ni sawa. Tutarekebisha hali hii. Nilichukua mradi wa mfano rasmi wa VueJS+TS+Jest. Wacha tuiinamishe kuelekea sisi wenyewe:
git clone https://github.com/vuejs/vue-test-utils-typescript-example.gitKwanza tunahitaji kufunga mteja sautiQube, ambayo inaitwa sonar-skanakwa npm kuna kanga:
yarn add sonarqube-scannerNa mara moja ongeza amri kwa scripts kufanya kazi nayo.
package.json:
{
β¦
scripts: {
...
"sonar": "sonar-scanner"
...
},
β¦
}Ifuatayo, ili skana ifanye kazi, unahitaji kuweka mipangilio ya mradi kwenye faili maalum. Hebu tuanze na mambo ya msingi.
mali-mradi:
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 - anwani Sonar'A;
- sonar.projectKey - kitambulisho cha kipekee cha mradi kwenye seva Sonar'A;
- sonar.projectName - jina lake, linaweza kubadilishwa wakati wowote, kwani mradi unatambuliwa na projectKey;
- vyanzo.vya.sonar - folda iliyo na vyanzo, kawaida hii src, lakini inaweza kuwa chochote. Folda hii imewekwa kuhusiana na folda ya mizizi, ambayo ni folda ambayo scanner imezinduliwa;
- vipimo. vya sonar - kigezo kinachoenda sanjari na kilichotangulia. Hii ndio folda ambapo vipimo viko. Katika mradi huu, hakuna folda kama hiyo, na jaribio liko karibu na sehemu iliyo chini ya jaribio kwenye folda '.mtihaniβ, kwa hivyo tutaipuuza kwa sasa na kutumia kigezo kinachofuata;
- mjumuisho.wa.mtihani - njia ya majaribio kwa kutumia mask, kunaweza kuwa na vipengele kadhaa vilivyoorodheshwa vilivyotenganishwa na koma;
- Sonar.sourceUsimbaji - usimbaji wa faili za chanzo.
Kwa uzinduzi wa kwanza wa skana, kila kitu kiko tayari, isipokuwa kwa hatua kuu iliyotangulia: kuzindua injini ya majaribio yenyewe, ili iweze kutoa habari juu ya chanjo, ambayo skana itatumia baadaye.
Lakini kwa kufanya hivyo, unahitaji kusanidi injini ya mtihani ili kuzalisha habari hii. Katika mradi huu, injini ya mtihani ni Jest. Na mipangilio yake iko katika sehemu inayolingana ya faili kifurushi.json.
Wacha tuongeze mipangilio hii:
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*",
"!src/main.ts",
"!src/App.vue",
"!src/**/*.d.*",
"!src/**/*__tests__*"
],Hiyo ni, tunaweka bendera yenyewe kwa haja ya kuhesabu chanjo na chanzo (pamoja na ubaguzi) kwa misingi ambayo itaundwa.
Sasa wacha tufanye mtihani:
yarn testTutaona yafuatayo:
Sababu ni kwamba hakuna msimbo katika sehemu yenyewe. Hebu kurekebisha hili.
HelloWorld.vue:
...
methods: {
calc(n) {
return n + 1;
}
},
mounted() {
this.msg1 = this.msg + this.calc(1);
},
...Hii itakuwa ya kutosha kuhesabu chanjo.
Baada ya kuanza tena mtihani, tutahakikisha hii:
Kwenye skrini tunapaswa kuona habari kuhusu chanjo, na folda itaundwa kwenye folda ya mradi chanjo na maelezo ya chanjo ya majaribio katika umbizo la wote LCOV (kiendelezi cha LTP GCOV).
Gcov ni shirika linalosambazwa kwa uhuru kwa ajili ya kuchunguza ufunikaji wa msimbo. Gcov hutengeneza idadi kamili ya utekelezaji kwa kila taarifa katika mpango na hukuruhusu kuongeza vidokezo kwenye msimbo wa chanzo. Gcov inakuja kama matumizi ya kawaida kama sehemu ya kifurushi cha GCC.
Lcov - kiolesura cha picha cha gcov. Inakusanya faili za gcov kwa faili nyingi za chanzo na hutoa seti ya kurasa za HTML zilizo na msimbo na habari ya chanjo. Kurasa pia hutengenezwa ili kurahisisha urambazaji. Lcov inasaidia ufunikaji wa masharti, vitendaji na matawi.
Baada ya majaribio kukamilika, habari ya chanjo itapatikana chanjo/lcov.info.
Tunahitaji kusema Sonar'Naweza kuipata wapi? Kwa hiyo, hebu tuongeze mistari ifuatayo kwenye faili yake ya usanidi. Lakini kuna hatua moja: miradi inaweza kuwa ya lugha nyingi, ambayo ni, kwenye folda src kuna nambari za chanzo za lugha kadhaa za programu na uhusiano na moja au nyingine, na kwa upande wake, matumizi ya programu-jalizi moja au nyingine imedhamiriwa na ugani wake. Na habari ya chanjo inaweza kuhifadhiwa katika sehemu tofauti kwa lugha tofauti za programu, kwa hivyo kila lugha ina sehemu yake ya kusanidi hii. Mradi wetu unatumia Aina, kwa hivyo tunahitaji sehemu ya mipangilio kwa ajili yake tu:
mali-mradi:
sonar.typescript.coveragePlugin=lcov
sonar.typescript.lcov.reportPaths=coverage/lcov.infoKila kitu kiko tayari kwa uzinduzi wa kwanza wa skana. Ningependa kutambua kwamba mradi ni Sonar'e huundwa kiotomatiki mara ya kwanza unapozindua kichanganuzi cha mradi fulani. Katika nyakati zinazofuata, habari itakusanywa ili kuona mienendo ya mabadiliko katika vigezo vya mradi kwa muda.
Kwa hivyo, wacha tutumie amri iliyoundwa hapo awali kifurushi.json:
yarn run sonar Kumbuka: unaweza pia kutumia parameter -X kwa ukataji wa kina zaidi.
Ikiwa scanner ilizinduliwa kwa mara ya kwanza, basi binary ya scanner yenyewe itapakuliwa kwanza. Baada ya hapo huanza na kuanza kutambaza seva Sonar'a kwa programu-jalizi zilizosakinishwa, na hivyo kuhesabu lugha inayotumika. Vigezo vingine mbalimbali vya uendeshaji wake pia vinapakiwa: wasifu wa ubora, sheria zinazotumika, hazina ya vipimo, sheria za seva.
Kumbuka: Hatutakaa juu yao kwa undani ndani ya mfumo wa kifungu hiki, lakini unaweza kuwasiliana na vyanzo rasmi kila wakati.
Ifuatayo, uchambuzi wa folda huanza src kwa upatikanaji wa faili chanzo kwa wote (ikiwa moja mahususi haijabainishwa wazi) lugha inayotumika, pamoja na faharasa zao zinazofuata.
Ifuatayo inakuja uchambuzi mwingine tofauti, ambao hatuzingatii katika nakala hii (kwa mfano, kama kuweka, kugundua kurudiwa kwa nambari, n.k.).
Mwishoni mwa kazi ya skana, habari zote zilizokusanywa zinakusanywa, kuwekwa kwenye kumbukumbu na kutumwa kwa seva.
Baada ya hayo, tunaweza kuona kilichotokea kwenye kiolesura cha wavuti:
Kama tunavyoona, kitu kilifanya kazi, na hata inaonyesha aina fulani ya chanjo, lakini hailingani na yetu Jest-ripoti.
Hebu tufikirie. Hebu tuangalie mradi huo kwa undani zaidi, bofya thamani ya chanjo, na "kupitia" katika ripoti ya kina ya faili:
Hapa tunaona, pamoja na faili kuu, iliyochunguzwa HelloWorld.vue, pia kuna faili kuu.ts, ambayo huharibu picha nzima ya chanjo. Lakini imekuwaje tuliiondoa kwenye hesabu ya chanjo. Ndio, kila kitu ni sawa, lakini ilikuwa kwenye kiwango Jest, lakini skana iliiweka index, kwa hivyo iliishia kwenye mahesabu yake.
Wacha turekebishe hii:
mali-mradi:
...
sonar.exclusions=src/main.ts
...Ningependa kufanya ufafanuzi: kwa kuongeza folda ambazo zimeainishwa kwenye paramu hii, folda zote zilizoorodheshwa kwenye paramu pia huongezwa. mjumuisho.wa.mtihani.
Baada ya kuzindua skana, tunaona habari sahihi:
Wacha tuangalie hatua inayofuata - Profaili za ubora. Nilizungumza juu ya msaada SonarLugha kadhaa kwa wakati mmoja. Hivi ndivyo tunavyoona. Lakini tunajua kuwa mradi wetu umeandikwa ndani TS, kwa nini uchuja skana kwa udanganyifu na ukaguzi usio wa lazima. Tutaweka lugha kwa uchambuzi kwa kuongeza kigezo kimoja zaidi kwenye faili ya usanidi Sonar'A:
mali-mradi:
...
sonar.language=ts
...Wacha tuendeshe skana tena na tuone matokeo:
Chanjo ilipotea kabisa.
Ikiwa tunatazama logi ya skana, tunaweza kuona mstari ufuatao:
Hiyo ni, faili zetu za mradi hazikuorodheshwa.
Hali ni kama ifuatavyo: kuungwa mkono rasmi VueJs iko kwenye programu-jalizi SonarJSnani anawajibika Javascript.
Lakini msaada huu hauko kwenye programu-jalizi SonarTS kwa TS, ambayo tikiti rasmi ilifunguliwa kwenye tracker ya mdudu Sonar'A:
Hapa kuna majibu kutoka kwa mmoja wa wawakilishi kutoka kwa watengenezaji wa SonarQube, akithibitisha ukweli huu.
Lakini kila kitu kilitufanyia kazi, unapinga. Ndio, wacha tujaribu kidogo "haki".
Ikiwa kuna msaada .vue-mafaili Sonar'om, basi tujaribu kumwambia azichukulie kama Aina.
Wacha tuongeze kigezo:
mali-mradi:
...
sonar.typescript.file.suffixes=.ts,.tsx,.vue
...Wacha tuzindue skana:
Na, voila, kila kitu kimerudi kwa kawaida, na kwa wasifu mmoja tu kwa Aina. Hiyo ni, tuliweza kutatua tatizo kwa msaada VueJs+TS kwa sautiQube.
Wacha tujaribu kwenda zaidi na kuboresha habari ya chanjo kidogo.
Tumefanya nini hadi sasa:
- imeongezwa kwenye mradi Sonar-skana;
- weka Jest kuunda habari za uhifadhi;
- imesanidiwa Sonar-skana;
- kusuluhisha shida ya usaidizi .vue-faili + Aina.
Mbali na chanjo ya mtihani, kuna vigezo vingine vya kuvutia vya ubora wa msimbo, kwa mfano, kurudia msimbo na idadi ya mistari (inayohusika katika hesabu ya coefficients kuhusiana na utata wa msimbo) wa mradi.
Katika utekelezaji wa sasa wa programu-jalizi ya kufanya kazi nayo TS (SonarTS) haitafanya kazi CPD (Nakili Kigunduzi cha Bandika) na mistari ya kuhesabu kanuni .vue-mafaili.
Ili kuunda hali ya usanifu ya kurudia nambari, rudia tu faili ya sehemu na jina tofauti na pia uiongeze kwenye nambari. kuu.ts kitendakazi dummy na uirudie kwa jina tofauti. Ili kuangalia kwa kurudia kama ndani .vue, na .ts -mafaili.
main.ts:
...
function name(params:string): void {
console.log(params);
}
...Ili kufanya hivyo, unahitaji kutoa maoni kwa muda kwenye mstari wa usanidi:
mali-mradi:
...
sonar.exclusions=src/main.ts
...Wacha tuanze tena skana pamoja na majaribio:
yarn test && yarn run sonarBila shaka, chanjo yetu itaanguka, lakini sasa hatuna nia ya hilo.
Kwa upande wa nakala za mistari ya nambari, tutaona:
Kuangalia tutatumia CPD-matumizi - jscpd:
npx jscpd src
Kwa mistari ya nambari:
Labda hii itatatuliwa katika matoleo yajayo ya programu-jalizi SonarJS(TS). Ningependa kutambua kwamba hatua kwa hatua wanaanza kuunganisha programu-jalizi hizi mbili kuwa moja SonarJS, ambayo nadhani ni sahihi.
Sasa nilitaka kuzingatia chaguo la kuboresha habari za chanjo.
Kufikia sasa tunaweza kuona chanjo ya majaribio katika masharti ya asilimia kwa mradi mzima, na kwa faili haswa. Lakini inawezekana kupanua kiashiria hiki kwa habari kuhusu wingi kitengo-majaribio ya mradi, na pia katika muktadha wa faili.
Kuna maktaba ambayo inaweza Jest-badilisha ripoti kuwa umbizo la Sonar'A:
data ya mtihani wa jumla - .
Wacha tusakinishe maktaba hii katika mradi wetu:
yarn add jest-sonar-reporterNa uiongeze kwenye usanidi Jest:
package.json:
β¦
"testResultsProcessor": "jest-sonar-reporter"
β¦Sasa wacha tufanye mtihani:
yarn testBaada ya hapo faili itaundwa kwenye mzizi wa mradi ripoti ya mtihani.xml.
Wacha tuitumie katika usanidi Sonar'A:
mali-mradi:
β¦
sonar.testExecutionReportPaths=test-report.xml
β¦Na anza tena skana:
yarn run sonarWacha tuone ni nini kimebadilika kwenye kiolesura Sonar'A:
Na hakuna kilichobadilika. Ukweli ni kwamba Sonar haizingatii faili zilizoelezewa katika ripoti ya Jest kama faili kitengo- vipimo. Ili kurekebisha hali hii, tunatumia parameter ya usanidi Sonar vipimo. vya sonar, ambamo tutaonyesha wazi folda zilizo na majaribio (tunayo moja tu kwa sasa):
mali-mradi:
β¦
sonar.tests=src/components/__tests__
β¦Wacha tuanze tena skana:
yarn run sonarWacha tuone ni nini kimebadilika kwenye kiolesura:
Sasa tumeona idadi yetu kitengo-tests na, baada ya kushindwa kwa kubofya ndani, tunaweza kuona usambazaji wa nambari hii kati ya faili za mradi:
Hitimisho
Kwa hivyo, tuliangalia zana ya uchambuzi endelevu sautiQube. Tuliunganisha kwa ufanisi mradi ulioandikwa ndani yake VueJs+TS. Imerekebisha baadhi ya masuala ya uoanifu. Tuliongeza maudhui ya maelezo ya kiashirio cha chanjo ya jaribio. Katika makala hii tulichunguza moja tu ya vigezo vya ubora wa kanuni (labda moja ya kuu), lakini sautiQube inasaidia vigezo vingine vya ubora, ikiwa ni pamoja na kupima usalama. Lakini sio vipengele vyote hivi vinapatikana kikamilifu ndani jamii-matoleo. Moja ya vipengele vya kuvutia na muhimu ni ushirikiano sautiQube na mifumo mbali mbali ya usimamizi wa hazina, kama vile GitLab na BitBucket. Ili kuzuia unganisha ombi la kuvuta(unganisha).'a kwa tawi kuu la hazina wakati ufunikaji umeharibika. Lakini hii ni hadithi kwa makala tofauti kabisa.
PS: Kila kitu kilichoelezewa katika kifungu kwa njia ya nambari kinapatikana ndani .
Watumiaji waliojiandikisha pekee ndio wanaweza kushiriki katika utafiti. tafadhali.
Je! unatumia jukwaa la SonarQube:
-
26,3%Ndiyo5
-
15,8%No3
-
15,8%Nilisikia kuhusu jukwaa hili na ninataka kutumia3
-
10,5%Nimesikia kuhusu jukwaa hili na sitaki kutumia2
-
0,0%Ninatumia jukwaa tofauti0
-
31,6%Mara ya kwanza nimesikia kuhusu yeye6
Watumiaji 19 walipiga kura. Watumiaji 3 walijizuia.
Chanzo: mapenzi.com