MÄs aktÄ«vi izmantojam platformu savÄ darbÄ soundQube lai uzturÄtu koda kvalitÄti augstÄ lÄ«menÄ«. IntegrÄjot kÄdu no rakstÄ«tajiem projektiem VueJs+MaŔīnraksts, radÄs problÄmas. TÄpÄc es vÄlos jums pastÄstÄ«t sÄ«kÄk, kÄ mums izdevÄs tos atrisinÄt.
Å ajÄ rakstÄ mÄs runÄsim, kÄ jau rakstÄ«ju iepriekÅ”, par SonarQube platformu. Nedaudz teorijas - kas tas vispÄr ir, tiem, kas par to dzird pirmo reizi:
soundQube (bijuÅ”ais SonÄrs) ir atvÄrtÄ koda platforma nepÄrtrauktai pÄrbaudei un koda kvalitÄtes mÄrÄ«Å”anai.
Atbalsta koda analÄ«zi un kļūdu noteikÅ”anu saskaÅÄ ar MISRA C, MISRA C++, MITER/CWE un CERT Secure Coding Standards noteikumiem. TÄ var arÄ« atpazÄ«t kļūdas no OWASP Top 10 un CWE/SANS Top 25 programmÄÅ”anas kļūdu sarakstiem.
Neskatoties uz to, ka platforma izmanto dažÄdus gatavus rÄ«kus, SonarQube samazina rezultÄtus lÄ«dz vienam informÄcijas panelim, saglabÄjot palaiÅ”anas vÄsturi un tÄdÄjÄdi ļaujot jums redzÄt vispÄrÄjo programmatÅ«ras kvalitÄtes izmaiÅu tendenci izstrÄdes laikÄ.
SÄ«kÄku informÄciju var atrast vietnÄ
Tiek atbalstÄ«ts liels skaits programmÄÅ”anas valodu. Spriežot pÄc informÄcijas no iepriekÅ” norÄdÄ«tÄs saites, Ŕīs ir vairÄk nekÄ 25 valodas. Lai atbalstÄ«tu noteiktu valodu, ir jÄinstalÄ atbilstoÅ”ais spraudnis. Kopienas versijÄ ir iekļauts spraudnis darbam ar Javascript (ieskaitot typeŃript), lai gan wiki saka pretÄjo. Aiz muguras Javascript spraudÅu atbildes SonarJS, maŔīnrakstam SonarTS attiecÄ«gi.
OficiÄlais klients tiek izmantots, lai nosÅ«tÄ«tu pÄrklÄjuma informÄciju sonarqube-skeneris, kas, izmantojot iestatÄ«jumus no config-fails, nosÅ«ta Å”os datus serverim soundQube turpmÄkai konsolidÄcijai un apkopoÅ”anai.
Par Javascript tur ir . TÄtad, sÄksim soli pa solim ievieÅ”anu soundQube Š² Vue-projekta izmantoÅ”ana MaŔīnraksts.
Lai izvietotu serveri soundQube izmantosim priekÅ”rocÄ«bas docker-komponÄt.
sonÄrs.yaml:
version: '1'
services:
simplesample-sonar:
image: sonarqube:lts
ports:
- 9001:9000
- 9092:9092
network_mode: bridgePalaist:
docker-compose -f sonar.yml upPÄc tam soundQube bÅ«s pieejams: .
TajÄ vÄl nav projektu, un tas ir godÄ«gi. MÄs labosim Å”o situÄciju. Es izmantoju oficiÄlo projekta piemÄru VueJS+TS+Jest. Noliecam to pret sevi:
git clone https://github.com/vuejs/vue-test-utils-typescript-example.gitVispirms mums jÄinstalÄ klients soundQube, ko sauc sonÄrs-skenerispar npm ir iesaiÅojums:
yarn add sonarqube-scannerUn nekavÄjoties pievienojiet komandu skripti strÄdÄt ar to.
package.json:
{
ā¦
scripts: {
...
"sonar": "sonar-scanner"
...
},
ā¦
}TÄlÄk, lai skeneris darbotos, ir jÄiestata projekta iestatÄ«jumi Ä«paÅ”Ä failÄ. SÄksim ar pamatiem.
sonÄrs-projekts.Ä«paŔības:
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 - adrese SonÄrsāA;
- sonar.projectKey ā unikÄls projekta identifikators serverÄ« SonÄrsāA;
- sonar.projectName ā tÄ nosaukumu, to var mainÄ«t jebkurÄ laikÄ, jo projektu identificÄ pÄc projekta atslÄga;
- sonÄrs.avoti ā mape ar avotiem, parasti Ŕī src, bet var bÅ«t jebkas. Å Ä« mape ir iestatÄ«ta attiecÄ«bÄ pret saknes mapi, kas ir mape, no kuras tiek palaists skeneris;
- sonÄrs.pÄrbaudes ā parametrs, kas iet kopÄ ar iepriekÅ”Äjo. Å Ä« ir mape, kurÄ atrodas testi. Å ajÄ projektÄ Å”Ädas mapes nav, un tests atrodas blakus testÄjamajam komponentam mapÄ 'pÄrbaude', tÄpÄc pagaidÄm to ignorÄsim un izmantosim nÄkamo parametru;
- sonar.test.inclusions ā ceļŔ testiem, izmantojot masku, var bÅ«t vairÄki elementi, kas atdalÄ«ti ar komatiem;
- sonar.sourceEncoding - avota failu kodÄjums.
Pirmajai skenera palaiÅ”anai viss ir gatavs, izÅemot galveno iepriekÅ”Äjo darbÄ«bu: paÅ”a testa dzinÄja palaiÅ”anu, lai tas varÄtu Ä£enerÄt informÄciju par pÄrklÄjumu, ko skeneris vÄlÄk izmantos.
Bet, lai to izdarÄ«tu, jums ir jÄkonfigurÄ testa dzinÄjs, lai Ä£enerÄtu Å”o informÄciju. Å ajÄ projektÄ testa dzinÄjs ir Jest. Un tÄ iestatÄ«jumi atrodas attiecÄ«gajÄ faila sadaÄ¼Ä pack.json.
Pievienosim Ŕos iestatījumus:
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*",
"!src/main.ts",
"!src/App.vue",
"!src/**/*.d.*",
"!src/**/*__tests__*"
],Tas ir, mÄs uzstÄdÄm paÅ”u karogu, lai aprÄÄ·inÄtu pÄrklÄjumu un avotu (kopÄ ar izÅÄmumiem), uz kura pamata tas tiks veidots.
Tagad izpildīsim testu:
yarn testMÄs redzÄsim sekojoÅ”o:
Iemesls ir tÄds, ka paÅ”Ä komponentÄ nav koda. Labosim Å”o.
HelloWorld.vue:
...
methods: {
calc(n) {
return n + 1;
}
},
mounted() {
this.msg1 = this.msg + this.calc(1);
},
...Tas bÅ«s pietiekami, lai aprÄÄ·inÄtu segumu.
PÄc testa restartÄÅ”anas mÄs pÄrliecinÄsimies par to:
EkrÄnÄ vajadzÄtu redzÄt informÄciju par pÄrklÄjumu, un projekta mapÄ tiks izveidota mape pÄrklÄjums ar testa pÄrklÄjuma informÄciju universÄlÄ formÄtÄ LCOV (LTP GCOV paplaÅ”inÄjums).
Gcov ir brÄ«vi izplatÄ«ta utilÄ«ta koda pÄrklÄjuma pÄrbaudei. Gcov Ä£enerÄ precÄ«zu izpildes skaitu katram priekÅ”rakstam programmÄ un ļauj avota kodam pievienot anotÄcijas. Gcov ir standarta utilÄ«ta kÄ daļa no GCC pakotnes.
Lcov - gcov grafiskais interfeiss. Tas apkopo gcov failus vairÄkiem avota failiem un izveido HTML lapu kopu ar kodu un pÄrklÄjuma informÄciju. Lapas tiek Ä£enerÄtas arÄ«, lai atvieglotu navigÄciju. Lcov atbalsta virkÅu, funkciju un zaru pÄrklÄjumu.
PÄc pÄrbaužu pabeigÅ”anas informÄcija par pÄrklÄjumu tiks ievietota coverage/lcov.info.
Mums jÄsaka SonÄrs'No kurienes es to varu dabÅ«t? TÄpÄc tÄ konfigurÄcijas failam pievienosim Å”Ädas rindas. Bet ir viens punkts: projekti var bÅ«t daudzvalodu, tas ir, mapÄ src ir pirmkodi vairÄkÄm programmÄÅ”anas valodÄm un piederÄ«bai vienai vai otrai, un, savukÄrt, konkrÄta spraudÅa izmantoÅ”anu nosaka tÄ paplaÅ”inÄjums. Un pÄrklÄjuma informÄciju var glabÄt dažÄdÄs vietÄs dažÄdÄm programmÄÅ”anas valodÄm, tÄpÄc katrai valodai ir sava sadaļa Ŕīs iestatÄ«Å”anai. MÅ«su projekts izmanto MaŔīnraksts, tÄpÄc mums ir nepiecieÅ”ama iestatÄ«jumu sadaļa tikai tai:
sonÄrs-projekts.Ä«paŔības:
sonar.typescript.coveragePlugin=lcov
sonar.typescript.lcov.reportPaths=coverage/lcov.infoViss ir gatavs skenera pirmajai palaiÅ”anai. Gribu atzÄ«mÄt, ka projekts ir SonÄrse tiek izveidots automÄtiski, kad pirmo reizi palaižat skeneri konkrÄtam projektam. TurpmÄkajos laikos tiks uzkrÄta informÄcija, lai redzÄtu projekta parametru izmaiÅu dinamiku laika gaitÄ.
TÄtad, izmantosim iepriekÅ” izveidoto komandu pack.json:
yarn run sonar PiezÄ«me: varat arÄ« izmantot parametru -X sÄ«kÄkai mežizstrÄdei.
Ja skeneris tika palaists pirmo reizi, vispirms tiks lejupielÄdÄts paÅ”a skenera binÄrais fails. PÄc tam tas sÄk un sÄk skenÄt serveri SonÄrs'a instalÄtiem spraudÅiem, tÄdÄjÄdi aprÄÄ·inot atbalstÄ«to valodu. Tiek ielÄdÄti arÄ« dažÄdi citi tÄ darbÄ«bas parametri: kvalitÄtes profili, aktÄ«vie noteikumi, metrikas repozitorijs, servera noteikumi.
PiezÄ«me: Å Ä« raksta ietvaros mÄs par tiem sÄ«kÄk nepakavÄsimies, taÄu jÅ«s vienmÄr varat sazinÄties ar oficiÄlajiem avotiem.
PÄc tam sÄkas mapju analÄ«ze src par avota failu pieejamÄ«bu visÄs atbalstÄ«tajÄs valodÄs (ja konkrÄta nav skaidri norÄdÄ«ta) ar to turpmÄko indeksÄÅ”anu.
TÄlÄk seko dažÄdas citas analÄ«zes, uz kurÄm mÄs Å”ajÄ rakstÄ nepievÄrÅ”am uzmanÄ«bu (piemÄram, dÄ«gÅ”ana, koda dublÄÅ”anÄs noteikÅ”ana utt.).
Skenera darba paÅ”Äs beigÄs visa savÄktÄ informÄcija tiek apkopota, arhivÄta un nosÅ«tÄ«ta uz serveri.
PÄc tam mÄs jau varam redzÄt, kas notika tÄ«mekļa saskarnÄ:
KÄ redzam, kaut kas nostrÄdÄja un pat rÄda kaut kÄdu segumu, bet tas nesakrÄ«t ar mÅ«sÄjo Jest-ZiÅot.
IzdomÄsim. ApskatÄ«sim projektu sÄ«kÄk, noklikŔķiniet uz pÄrklÄjuma vÄrtÄ«bas un āiekļūsimā detalizÄtÄ faila atskaitÄ:
Å eit mÄs redzam papildus galvenajai pÄrbaudÄ«tajai lietai HelloWorld.vue, ir arÄ« fails galvenais.ts, kas sabojÄ visu pÄrklÄjuma ainu. Bet kÄ tad mÄs to izslÄdzÄm no seguma aprÄÄ·ina. JÄ, viss ir pareizi, bet tas bija lÄ«menÄ« Jest, bet skeneris to indeksÄja, tÄpÄc tas nokļuva savos aprÄÄ·inos.
Labosim Ŕo:
sonÄrs-projekts.Ä«paŔības:
...
sonar.exclusions=src/main.ts
...VÄlos precizÄt: papildus Å”ajÄ parametrÄ norÄdÄ«tajÄm mapÄm tiek pievienotas arÄ« visas parametrÄ norÄdÄ«tÄs mapes. sonar.test.inclusions.
PÄc skenera palaiÅ”anas mÄs redzam pareizo informÄciju:
ApskatÄ«sim nÄkamo punktu - KvalitatÄ«vi profili. IepriekÅ” es runÄju par atbalstu SonÄrsvairÄkÄs valodÄs vienlaikus. Tas ir tieÅ”i tas, ko mÄs redzam. Bet mÄs zinÄm, ka mÅ«su projekts ir ierakstÄ«ts TS, tad kÄpÄc noslogot skeneri ar nevajadzÄ«gÄm manipulÄcijÄm un pÄrbaudÄm. MÄs iestatÄ«sim analÄ«zes valodu, pievienojot konfigurÄcijas failam vÄl vienu parametru SonÄrs'A:
sonÄrs-projekts.Ä«paŔības:
...
sonar.language=ts
...PalaidÄ«sim skeneri vÄlreiz un redzÄsim rezultÄtu:
PÄrklÄjums bija pilnÄ«bÄ pazudis.
Ja skatÄmies uz skenera žurnÄlu, mÄs varam redzÄt Å”Ädu rindu:
Tas ir, mÅ«su projekta faili vienkÄrÅ”i netika indeksÄti.
SituÄcija ir Å”Äda: oficiÄli atbalstÄ«ts VueJs ir spraudnÄ« SonarJSkurÅ” ir atbildÄ«gs par Javascript.
Bet Å”is atbalsts nav iekļauts spraudnÄ« SonarTS par TS, par ko kļūdu izsekotÄjÄ tika atvÄrta oficiÄla biļete SonÄrs'A:
Å eit ir dažas atbildes no viena no SonarQube izstrÄdÄtÄju pÄrstÄvjiem, kas apstiprina Å”o faktu.
Bet mums viss strÄdÄja, jÅ«s iebilstat. JÄ, tÄ ir, nedaudz pamÄÄ£inÄsim "uzlauzt".
Ja ir atbalsts .vue- faili SonÄrs'ak, tad mÄÄ£inÄsim pateikt viÅam, lai viÅÅ” tos uzskata par MaŔīnraksts.
Pievienosim parametru:
sonÄrs-projekts.Ä«paŔības:
...
sonar.typescript.file.suffixes=.ts,.tsx,.vue
...Palaidīsim skeneri:
Un, voila, viss ir atgriezies normÄlÄ stÄvoklÄ« un tikai ar vienu profilu MaŔīnraksts. Tas ir, mums izdevÄs problÄmu atrisinÄt atbalstÄ VueJs+TS par soundQube.
MÄÄ£inÄsim iet tÄlÄk un nedaudz uzlabot pÄrklÄjuma informÄciju.
Ko mÄs lÄ«dz Å”im esam paveikuÅ”i:
- pievienots projektam SonÄrs-skeneris;
- uzstÄdÄ«t Jest Ä£enerÄt pÄrklÄjuma informÄciju;
- konfigurÄts SonÄrs-skeneris;
- atrisinÄja atbalsta problÄmu .vue- faili + MaŔīnraksts.
Papildus testa pÄrklÄjumam ir arÄ« citi interesanti noderÄ«gi koda kvalitÄtes kritÄriji, piemÄram, koda dublÄÅ”anÄs un rindu skaits (iesaistÄ«ts ar koda sarežģītÄ«bu saistÄ«to koeficientu aprÄÄ·inÄÅ”anÄ).
PaÅ”reizÄjÄ spraudÅa ievieÅ”anÄ darbam ar TS (SonarTS) nedarbosies CPD (kopÄÅ”anas ielÄ«mÄÅ”anas detektors) un koda rindu skaitÄ«Å”ana .vue- faili.
Lai izveidotu sintÄtisku koda dublÄÅ”anas situÄciju, vienkÄrÅ”i dublÄjiet komponenta failu ar citu nosaukumu un pievienojiet to kodam galvenais.ts fiktÄ«vu funkciju un dublÄt to ar citu nosaukumu. Lai pÄrbaudÄ«tu dublÄÅ”anos, kÄ norÄdÄ«ts .vueun iekÅ”Ä .ts - faili.
main.ts:
...
function name(params:string): void {
console.log(params);
}
...Lai to izdarÄ«tu, jums Ä«slaicÄ«gi jÄkomentÄ konfigurÄcijas rindiÅa:
sonÄrs-projekts.Ä«paŔības:
...
sonar.exclusions=src/main.ts
...RestartÄsim skeneri kopÄ ar testÄÅ”anu:
yarn test && yarn run sonarProtams, mÅ«su pÄrklÄjums samazinÄsies, bet tagad tas mÅ«s neinteresÄ.
RunÄjot par koda rindu dublÄÅ”anu, mÄs redzÄsim:
Lai pÄrbaudÄ«tu, mÄs izmantosim CPD- lietderÄ«ba - jscpd:
npx jscpd src
Koda rindÄm:
IespÄjams, tas tiks atrisinÄts nÄkamajÄs spraudÅu versijÄs SonarJS(TS). VÄlos atzÄ«mÄt, ka viÅi pamazÄm sÄk apvienot Å”os divus spraudÅus vienÄ SonarJS, kas, manuprÄt, ir pareizi.
Tagad es gribÄju apsvÄrt iespÄju uzlabot pÄrklÄjuma informÄciju.
LÄ«dz Å”im mÄs varam redzÄt testa pÄrklÄjumu procentuÄlÄ izteiksmÄ visam projektam un jo Ä«paÅ”i failiem. Bet ir iespÄjams paplaÅ”inÄt Å”o rÄdÄ«tÄju ar informÄciju par daudzumu vienÄ«ba-testi projektam, kÄ arÄ« failu kontekstÄ.
Ir bibliotÄka, kas var Jest-konvertÄt pÄrskatu formÄtÄ SonÄrs'A:
vispÄrÄ«gi testa dati SÄkot no .
InstalÄsim Å”o bibliotÄku mÅ«su projektÄ:
yarn add jest-sonar-reporterUn pievienojiet to konfigurÄcijai Jest:
package.json:
ā¦
"testResultsProcessor": "jest-sonar-reporter"
ā¦Tagad izpildÄ«sim testu:
yarn testPÄc tam projekta saknÄ tiks izveidots fails test-report.xml.
Izmantosim to konfigurÄcijÄ SonÄrs'A:
sonÄrs-projekts.Ä«paŔības:
ā¦
sonar.testExecutionReportPaths=test-report.xml
ā¦Un restartÄjiet skeneri:
yarn run sonarApskatÄ«sim, kas ir mainÄ«jies saskarnÄ SonÄrs'A:
Un nekas nav mainÄ«jies. Fakts ir tÄds, ka Sonar neuzskata Jest ziÅojumÄ aprakstÄ«tos failus par failiem vienÄ«ba- testi. Lai Å”o situÄciju labotu, mÄs izmantojam konfigurÄcijas parametru SonÄrs sonÄrs.pÄrbaudes, kurÄ mÄs skaidri norÄdÄ«sim mapes ar testiem (mums pagaidÄm ir tikai viena):
sonÄrs-projekts.Ä«paŔības:
ā¦
sonar.tests=src/components/__tests__
ā¦RestartÄsim skeneri:
yarn run sonarApskatÄ«sim, kas ir mainÄ«jies saskarnÄ:
Tagad mÄs esam redzÄjuÅ”i mÅ«su numuru vienÄ«ba-testi un, ja neizdevÄs, noklikŔķinot iekÅ”Ä, mÄs varam redzÄt Ŕī skaitļa sadalÄ«jumu starp projekta failiem:
SecinÄjums
TÄtad, mÄs apskatÄ«jÄm nepÄrtrauktas analÄ«zes rÄ«ku soundQube. MÄs veiksmÄ«gi integrÄjÄm tajÄ uzrakstÄ«tu projektu VueJs+TS. NovÄrstas dažas saderÄ«bas problÄmas. PalielinÄjÄm testa pÄrklÄjuma indikatora informÄcijas saturu. Å ajÄ rakstÄ mÄs apskatÄ«jÄm tikai vienu no koda kvalitÄtes kritÄrijiem (varbÅ«t vienu no galvenajiem), bet soundQube atbalsta citus kvalitÄtes kritÄrijus, tostarp droŔības testÄÅ”anu. TaÄu ne visas Ŕīs funkcijas ir pilnÄ«bÄ pieejamas kopiena- versijas. Viena no interesantÄm un noderÄ«gÄm funkcijÄm ir integrÄcija soundQube ar dažÄdÄm kodu repozitoriju pÄrvaldÄ«bas sistÄmÄm, piemÄram, GitLab un BitBucket. Lai novÄrstu sapludinÄÅ”anas vilkÅ”anas (apvienoÅ”anas) pieprasÄ«jumsāa uz galveno repozitorija filiÄli, kad pÄrklÄjums ir pasliktinÄts. Bet Å”is ir stÄsts pavisam citam rakstam.
PS: Viss, kas rakstÄ aprakstÄ«ts koda veidÄ, ir pieejams .
AptaujÄ var piedalÄ«ties tikai reÄ£istrÄti lietotÄji. , lÅ«dzu.
Vai izmantojat SonarQube platformu:
-
26,3%JÄ 5
-
15,8%Nr.3
-
15,8%Es dzirdÄju par Å”o platformu un vÄlos izmantot3
-
10,5%Esmu dzirdÄjis par Å”o platformu un nevÄlos to izmantot2
-
0,0%Es izmantoju citu platformu0
-
31,6%Pirmo reizi dzirdu par viÅu6
Nobalsoja 19 lietotÄji. 3 lietotÄji atturÄjÄs.
Avots: www.habr.com