Kita aktif nggunakake platform ing karya kita soundQube kanggo njaga kualitas kode ing tingkat dhuwur. Nalika nggabungake salah sawijining proyek sing ditulis ing VueJs+Typescript, masalah muncul. Mula, aku pengin ngandhani kanthi luwih rinci babagan carane ngatasi masalah kasebut.
Ing artikel iki kita bakal ngomong, kaya sing daktulis ing ndhuwur, babagan platform SonarQube. A teori sethitik - apa iku umume, kanggo wong-wong sing krungu bab iku kanggo pisanan:
soundQube (mantan Sonar) minangka platform open source kanggo inspeksi terus-terusan lan pangukuran kualitas kode.
Ndhukung analisis kode lan deteksi kesalahan miturut aturan standar pemrograman MISRA C, MISRA C ++, MITER / CWE lan CERT Secure Coding Standards. Uga bisa ngenali kasalahan saka OWASP Top 10 lan CWE / SANS Top 25 dhaptar kesalahan program.
Senadyan kasunyatan manawa platform kasebut nggunakake macem-macem alat sing wis siap, SonarQube nyuda asil dadi dashboard siji, njaga riwayat mlaku lan ngidini sampeyan ndeleng tren umum babagan owah-owahan kualitas piranti lunak sajrone pangembangan.
Rincian liyane bisa ditemokake ing
Akeh basa pamrograman sing didhukung. Dideleng saka informasi saka pranala ing ndhuwur, iki luwih saka 25 basa. Kanggo ndhukung basa tartamtu, sampeyan kudu nginstal plugin sing cocog. Versi komunitas kalebu plugin kanggo nggarap Javascript (kalebu typesсript), sanajan wiki ngandika ngelawan. konco Javascript jawaban plugin SonarJS, kanggo Typescript SonarTS masing-masing.
Klien resmi digunakake kanggo ngirim informasi jangkoan sonarqube-scanner, kang, nggunakake setelan saka config-file, ngirim data iki kanggo server soundQube kanggo konsolidasi lan agregasi luwih lanjut.
Kanggo Javascript ana . Dadi, ayo miwiti implementasine langkah-langkah soundQube в Vue-proyek nggunakake Tipe naskah.
Kanggo nyebarke server soundQube ayo manfaatake docker-compose.
sonar.yaml:
version: '1'
services:
simplesample-sonar:
image: sonarqube:lts
ports:
- 9001:9000
- 9092:9092
network_mode: bridgeBukak:
docker-compose -f sonar.yml upSawise iki soundQube bakal kasedhiya ing: .
Durung ana proyek lan iku adil. Kita bakal mbenerake kahanan iki. Aku njupuk proyek conto resmi kanggo VueJS+TS+Jest. Ayo mbengkongake marang awake dhewe:
git clone https://github.com/vuejs/vue-test-utils-typescript-example.gitPisanan kita kudu nginstal klien soundQube, kang diarani pemindai sonarkanggo npm ana bungkuse:
yarn add sonarqube-scannerLan langsung nambah printah kanggo skrip kanggo nggarap.
package.json:
{
…
scripts: {
...
"sonar": "sonar-scanner"
...
},
…
}Sabanjure, supaya scanner bisa digunakake, sampeyan kudu nyetel setelan proyek ing file khusus. Ayo dadi miwiti karo dhasar.
sonar-proyek.properti:
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 - alamat Sonar'A;
- sonar.projectKey - pengenal proyek unik ing server Sonar'A;
- sonar.projectName – jeneng sawijining, iku bisa diganti ing sembarang wektu, wiwit project dikenali dening projectKey;
- sonar.sumber – folder karo sumber, biasane iki src, nanging bisa apa wae. Folder iki disetel relatif menyang folder root, yaiku folder sing diluncurake scanner;
- sonar.tes - parameter sing cocog karo sing sadurunge. Iki minangka folder ing ngendi tes kasebut. Ing proyek iki, ora ana folder kasebut, lan tes kasebut ana ing jejere komponen sing diuji ing folder 'test', dadi kita bakal nglirwakake saiki lan nggunakake parameter sabanjure;
- sonar.test.inklusi - dalan kanggo tes nggunakake topeng, bisa uga ana sawetara unsur sing dipisahake kanthi koma;
- sonar.sourceEncoding – enkoding kanggo file sumber.
Kanggo peluncuran pisanan scanner, kabeh wis siyap, kajaba tumindak utama sadurunge: ngluncurake mesin tes dhewe, supaya bisa ngasilake informasi babagan jangkoan, sing bakal digunakake scanner.
Nanging kanggo nindakake iki, sampeyan kudu ngatur mesin tes kanggo ngasilake informasi kasebut. Ing proyek iki, mesin tes yaiku ana. Lan setelan kasebut ana ing bagean file sing cocog paket.json.
Ayo ditambahake setelan iki:
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*",
"!src/main.ts",
"!src/App.vue",
"!src/**/*.d.*",
"!src/**/*__tests__*"
],Sing, kita nyetel flag dhewe kanggo perlu kanggo ngetung jangkoan lan sumber (bebarengan karo pangecualian) ing basis kang bakal kawangun.
Saiki ayo nglakoni tes:
yarn testKita bakal weruh ing ngisor iki:
Alesane yaiku ora ana kode ing komponen kasebut dhewe. Ayo didandani iki.
HelloWorld.vue:
...
methods: {
calc(n) {
return n + 1;
}
},
mounted() {
this.msg1 = this.msg + this.calc(1);
},
...Iki bakal cukup kanggo ngetung jangkoan.
Sawise miwiti maneh tes, kita bakal nggawe manawa iki:
Ing layar kita kudu ndeleng informasi babagan jangkoan, lan folder bakal digawe ing folder project jangkoan karo informasi jangkoan test ing format universal LCOV (ekstensi LTP GCOV).
Gcov minangka sarana sing disebarake kanthi bebas kanggo mriksa jangkoan kode. Gcov ngasilake jumlah eksekusi sing tepat kanggo saben statement ing program lan ngidini sampeyan nambah anotasi menyang kode sumber. Gcov kasedhiya minangka sarana standar minangka bagéan saka paket GCC.
Lcov - antarmuka grafis kanggo gcov. Nglumpukake file gcov kanggo macem-macem file sumber lan ngasilake set kaca HTML kanthi informasi kode lan jangkoan. Kaca-kaca uga digawe kanggo nggawe navigasi luwih gampang. Lcov ndhukung jangkoan senar, fungsi, lan cabang.
Sawise tes rampung, informasi jangkoan bakal ditemokake ing jangkoan/lcov.info.
Kita kudu ngomong Sonar'Endi aku bisa njaluk saka? Mulane, ayo nambahake baris ing ngisor iki menyang file konfigurasi. Nanging ana siji titik: proyek bisa multibasa, yaiku, ing folder src ana kode sumber kanggo sawetara basa pamrograman lan afiliasi karo siji utawa liyane, lan nggunakake siji utawa liyane plugin ditemtokake dening ekstensi. Lan informasi jangkoan bisa disimpen ing macem-macem panggonan kanggo macem-macem basa program, supaya saben basa duwe bagean dhewe kanggo nyetel iki. Proyek kita nggunakake Tipe naskah, dadi kita butuh bagean setelan mung kanggo:
sonar-proyek.properti:
sonar.typescript.coveragePlugin=lcov
sonar.typescript.lcov.reportPaths=coverage/lcov.infoKabeh wis siyap kanggo peluncuran pisanan scanner. Aku kaya Wigati sing project punika Sonar'e digawe kanthi otomatis nalika pisanan sampeyan mbukak scanner kanggo proyek tartamtu. Ing kaping sakteruse, informasi bakal diklumpukake kanggo ndeleng dinamika owah-owahan ing parameter project liwat wektu.
Dadi, ayo nggunakake perintah sing digawe sadurunge paket.json:
yarn run sonar Wigati: sampeyan uga bisa nggunakake parameter -X kanggo logging luwih rinci.
Yen pemindai diluncurake sepisanan, mula binar pemindai kasebut dhewe bakal diundhuh dhisik. Sawisé iku wiwit lan miwiti mindhai server Sonar'a kanggo plugin sing diinstal, mula ngetung basa sing didhukung. Macem-macem paramèter liyane kanggo operasi uga dimuat: profil kualitas, aturan aktif, gudang metrik, aturan server.
Wigati: Kita ora bakal manggon ing rinci ing framework saka artikel iki, nanging sampeyan bisa tansah hubungi sumber resmi.
Sabanjure, analisis folder diwiwiti src kanggo kasedhiyan file sumber kanggo kabeh (yen khusus ora ditetepake kanthi jelas) basa sing didhukung, kanthi indeksasi sabanjure.
Sabanjure teka macem-macem analisis liyane, sing ora fokus ing artikel iki (contone, linting, deteksi duplikasi kode, lan sapiturute).
Ing pungkasan karya scanner, kabeh informasi sing diklumpukake dikumpulake, diarsipake lan dikirim menyang server.
Sawise iki, kita wis bisa ndeleng apa sing kedadeyan ing antarmuka web:
Minangka kita bisa ndeleng, soko makarya, lan malah nuduhake sawetara jenis jangkoan, nanging ora cocog kita ana-laporan.
Ayo dipikirake. Ayo ndeleng proyek kasebut kanthi luwih rinci, klik ing nilai jangkoan, lan "tumindak" menyang laporan file sing rinci:
Kene kita waca, saliyane kanggo utama, sinaoni file HelloWorld.vue, ana uga file utama.ts, sing ngrusak kabeh gambar jangkoan. Nanging kepiye carane ora kalebu saka pitungan jangkoan. Ya, kabeh bener, nanging ana ing level ana, nanging pemindai ngindeks, saengga rampung ing petungan.
Ayo ndandani iki:
sonar-proyek.properti:
...
sonar.exclusions=src/main.ts
...Aku pengin nggawe klarifikasi: saliyane folder sing ditemtokake ing parameter iki, kabeh folder sing kadhaptar ing parameter uga ditambahake sonar.test.inklusi.
Sawise mbukak scanner, kita ndeleng informasi sing bener:
Ayo ndeleng titik sabanjure - Profil kualitas. Aku ngomong ing ndhuwur babagan dhukungan Sonar'om sawetara basa ing wektu sing padha. Iki persis apa sing kita deleng. Nanging kita ngerti yen proyek kita wis ditulis TS, dadi kok ketegangan scanner karo manipulasi rasah lan mriksa. Kita bakal nyetel basa kanggo analisis kanthi nambahake siji parameter liyane menyang file konfigurasi Sonar'A:
sonar-proyek.properti:
...
sonar.language=ts
...Ayo mbukak scanner maneh lan ndeleng asil:
Cakupan wis ilang.
Yen kita ndeleng log scanner, kita bisa ndeleng baris ing ngisor iki:
Tegese, file proyek kita mung ora diindeks.
Kahanan kaya ing ngisor iki: didhukung kanthi resmi VueJs ana ing plugin SonarJSsing tanggung jawab Javascript.
Nanging dhukungan iki ora ana ing plugin kasebut SonarTS kanggo TS, babagan tiket resmi dibukak ing tracker bug Sonar'A:
Mangkene sawetara jawaban saka salah sawijining wakil saka pangembang SonarQube, sing ngonfirmasi kasunyatan kasebut.
Nanging kabeh bisa kanggo kita, sampeyan mbantah. Ya wis, ayo nyoba sethithik "hack".
Yen ana dhukungan .vue- file Sonar'oh, banjur ayo nyoba marang dheweke kanggo nimbang minangka Tipe naskah.
Ayo nambah parameter:
sonar-proyek.properti:
...
sonar.typescript.file.suffixes=.ts,.tsx,.vue
...Ayo miwiti scanner:
Lan, voila, kabeh bali menyang normal, lan karo siji profil mung kanggo Tipe naskah. Yaiku, kita bisa ngatasi masalah kasebut kanthi dhukungan VueJs+TS kanggo soundQube.
Ayo nyoba luwih maju lan nambah informasi jangkoan sethithik.
Apa sing wis ditindakake nganti saiki:
- ditambahake menyang proyek kasebut Sonar- scanner;
- nyetel ana kanggo ngasilake informasi jangkoan;
- diatur Sonar- scanner;
- ditanggulangi masalah support .vue-file + Tipe naskah.
Saliyane jangkoan test, ana kritéria migunani liyane menarik kanggo kualitas kode, contone, duplikasi kode lan nomer baris (melu ing pitungan koefisien related kanggo kerumitan kode) saka project.
Ing implementasine saiki saka plugin kanggo nggarap TS (SonarTS) ora bakal bisa CPD (Copy Paste Detector) lan ngetang baris kode .vue- file.
Kanggo nggawe kahanan sintetik saka duplikasi kode, mung duplikat file komponen kanthi jeneng sing beda lan uga ditambahake menyang kode utama.ts fungsi goblok lan duplikat karo jeneng liyane. Kanggo mriksa duplikasi kaya ing .vuelan ing .ts - file.
utama.ts:
...
function name(params:string): void {
console.log(params);
}
...Kanggo nindakake iki, sampeyan kudu menehi komentar sementara babagan baris konfigurasi:
sonar-proyek.properti:
...
sonar.exclusions=src/main.ts
...Ayo miwiti maneh scanner bebarengan karo testing:
yarn test && yarn run sonarMesthine, jangkoan kita bakal tiba, nanging saiki kita ora kasengsem.
Ing babagan duplikat baris kode, kita bakal weruh:
Kanggo mriksa kita bakal nggunakake CPD-utilitas- jscpd:
npx jscpd src
Kanggo baris kode:
Mbok menawa iki bakal ditanggulangi ing versi plugin sing bakal teka SonarJS(TS). Aku kaya Wigati sing padha mboko sithik miwiti kanggo nggabungake loro Plugins iki dadi siji SonarJS, sing dakanggep bener.
Saiki aku pengin nimbang pilihan kanggo nambah informasi jangkoan.
Nganti saiki, kita bisa ndeleng jangkoan tes kanthi persentase kanggo kabeh proyek, lan khususe file. Nanging sampeyan bisa nggedhekake indikator iki kanthi informasi babagan jumlah unit-tes kanggo proyek, uga ing konteks file.
Ana perpustakaan sing bisa ana-ngowahi laporan menyang format kanggo Sonar'A:
data tes umum - .
Ayo nginstal perpustakaan iki ing proyek kita:
yarn add jest-sonar-reporterLan ditambahake menyang konfigurasi ana:
package.json:
…
"testResultsProcessor": "jest-sonar-reporter"
…Saiki ayo nglakoni tes:
yarn testSawise iku file bakal digawe ing ROOT saka project test-report.xml.
Ayo digunakake ing konfigurasi Sonar'A:
sonar-proyek.properti:
…
sonar.testExecutionReportPaths=test-report.xml
…Lan miwiti maneh scanner:
yarn run sonarAyo ndeleng apa sing wis diganti ing antarmuka Sonar'A:
Lan ora ana owah-owahan. Kasunyatane Sonar ora nganggep file sing diterangake ing laporan Jest minangka file unit- tes. Kanggo mbenerake kahanan iki, kita nggunakake parameter konfigurasi Sonar sonar.tes, ing ngendi kita bakal nuduhake folder kanthi tes kanthi jelas (saiki mung duwe siji):
sonar-proyek.properti:
…
sonar.tests=src/components/__tests__
…Ayo miwiti maneh scanner:
yarn run sonarAyo ndeleng apa sing wis diganti ing antarmuka:
Saiki kita wis ndeleng nomer kita unit-tes lan, sawise gagal ngeklik ing njero, kita bisa ndeleng distribusi nomer kasebut ing antarane file proyek:
kesimpulan
Dadi, kita ndeleng alat kanggo analisis terus-terusan soundQube. Kita kasil nggabungake menyang proyek sing ditulis ing VueJs+TS. Ndandani sawetara masalah kompatibilitas. Kita nambah isi informasi saka indikator jangkoan test. Ing artikel iki kita nliti mung siji saka kritéria kualitas kode (mbok menawa salah siji sing utama), nanging soundQube ndhukung kritéria kualitas liyane, kalebu testing safety. Nanging ora kabeh fitur iki kasedhiya ing masyarakat-versi. Salah sawijining fitur sing menarik lan migunani yaiku integrasi soundQube karo macem-macem sistem manajemen repositori kode, kayata GitLab lan BitBucket. Kanggo nyegah panyuwunan tarik (gabung).'a menyang cabang utama repositori nalika jangkoan rusak. Nanging iki crita kanggo artikel temen beda.
PS: Kabeh sing diterangake ing artikel ing wangun kode kasedhiya ing .
Mung pangguna pangguna sing bisa melu survey. nggih.
Apa sampeyan nggunakake platform SonarQube:
-
26,3%inggih5
-
15,8%No3
-
15,8%Aku krungu babagan platform iki lan pengin nggunakake3
-
10,5%Aku wis krungu bab platform iki lan ora pengin nggunakake2
-
0,0%Aku nggunakake platform sing beda0
-
31,6%Sepisanan aku krungu bab dheweke6
19 pangguna milih. 3 pangguna abstain.
Source: www.habr.com