Urang aktip ngagunakeun platform dina karya urang soundQube pikeun ngajaga kualitas kode dina tingkat anu luhur. Nalika ngahijikeun salah sahiji proyék anu ditulis dina VueJs + Typescript, timbul masalah. Ku alatan éta, abdi hoyong ngabejaan Anjeun leuwih jéntré kumaha urang junun ngajawab aranjeunna.

Dina artikel ieu kami bakal ngobrol, sakumaha kuring nyerat di luhur, ngeunaan platform SonarQube. Téori saeutik - naon éta sacara umum, pikeun anu ngupingkeunana pikeun kahiji kalina:

soundQube (tilas sonar) nyaéta platform open source pikeun pamariksaan kontinyu sareng pangukuran kualitas kode.
Ngarojong analisis kode jeung deteksi kasalahan nurutkeun aturan tina standar programming MISRA C, MISRA C ++, MITER / CWE na CERT Secure Coding Standards. Ogé bisa ngakuan kasalahan tina OWASP Top 10 jeung CWE / SANS Top 25 daptar kasalahan programming.
Sanaos kanyataan yén platformna ngagunakeun rupa-rupa alat anu siap-siap, SonarQube ngirangan hasil kana dasbor tunggal, ngajaga sajarah jalan sareng ku kituna anjeun tiasa ningali tren umum parobihan kualitas parangkat lunak nalika pangwangunan.

Leuwih rinci bisa kapanggih dina ramatloka resmi

Sajumlah ageung basa pamrograman dirojong. Ditilik ku inpormasi tina tautan di luhur, ieu langkung ti 25 basa. Pikeun ngarojong basa husus, Anjeun kudu masang plugin nu luyu. Versi komunitas kalebet plugin pikeun damel sareng Javascript (kaasup typesсript), sanajan wiki nyebutkeun sabalikna. Tukangeun Javascript waleran plugin SonarJS, pikeun Typescript SonarTS sasuai.

Klién resmi dianggo pikeun ngirim inpormasi sinyalna sonarqube-scanner, nu, ngagunakeun setélan ti config-file, ngirimkeun data ieu ka server soundQube pikeun konsolidasi salajengna jeung aggregation.

keur Javascript nyaeta npm bungkus. Janten, hayu urang ngamimitian palaksanaan léngkah-léngkah soundQube в Vue-proyék ngagunakeun Tulisan tipeu.

Pikeun nyebarkeun server soundQube hayu urang mangpaatkeun docker-nyusun.

sonar.yaml:

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

peluncuran:

docker-compose -f sonar.yml up

saterusna soundQube bakal sayogi di: http://localhost:9001 .

Henteu aya proyék di jerona sareng éta adil. Kami bakal ngabenerkeun kaayaan ieu. Kuring nyokot proyék conto resmi pikeun VueJS+TS+Jest. Hayu urang ngabengkokkeun ka diri urang sorangan:

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

Kahiji urang kudu install klien soundQube, anu disebut panyeken sonarpikeun npm aya bungkusna:

yarn add sonarqube-scanner

Jeung geura tambahkeun paréntah ka naskah pikeun digawekeun ku eta.

package.json:

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

Salajengna, pikeun panyeken jalan, anjeun kedah nyetél setélan proyék dina file khusus. Hayu urang mimitian ku dasar.

sonar-project.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 - alamat sonar'A;
• sonar.projectKey - identifier proyék unik dina server sonar'A;
• sonar.projectName - ngaranna, eta bisa dirobah iraha wae, saprak proyék nu dicirikeun ku ProjectKey;
• sonar.sumber – folder kalawan sumber, biasana ieu src, tapi tiasa nanaon. Polder ieu diatur relatif ka polder root, nu polder ti mana scanner dibuka;
• sonar.tés - parameter anu saluyu sareng anu sateuacana. Ieu mangrupikeun folder dimana tés aya. Dina proyék ieu, teu aya polder sapertos kitu, sareng tésna aya di gigireun komponén anu diuji dina folder 'ujian', ku kituna urang bakal malire eta pikeun ayeuna sarta ngagunakeun parameter salajengna;
• sonar.test.inclusions - jalur pikeun tés ngagunakeun topéng, meureun aya sababaraha elemen didaptarkeun dipisahkeun ku koma;
• sonar.sourceEncoding - encoding pikeun file sumber.

Pikeun peluncuran mimiti scanner, sagalana geus siap, iwal ti aksi utama saméméhna: ngajalankeun mesin test sorangan, ku kituna bisa ngahasilkeun informasi ngeunaan sinyalna, nu scanner salajengna bakal dipaké.

Tapi pikeun ngalakukeun ieu, anjeun kedah ngonpigurasikeun mesin uji pikeun ngahasilkeun inpormasi ieu. Dina proyék ieu, mesin test nyaeta Jest. Sareng setélanna aya dina bagian anu saluyu dina file rangkep.json.

Hayu urang tambahkeun setelan ieu:

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

Nyaéta, urang nyetel bandéra sorangan pikeun perlu ngitung sinyalna jeung sumberna (sareng iwal) dina dasar nu eta bakal kabentuk.

Ayeuna hayu urang ngajalankeun tés:

yarn test

Urang bakal ningali di handap ieu:

alesan teh nya eta euweuh kode dina komponén sorangan. Hayu urang ngalereskeun ieu.

HelloWorld.vue:

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

Ieu bakal cukup keur ngitung cakupan.

Saatos ngamimitian deui tés, kami bakal mastikeun ieu:

Dina layar urang kedah ningali inpormasi ngeunaan sinyalna, sareng polder bakal didamel dina folder proyék sinyalna kalawan informasi sinyalna test dina format universal LCOV (ekstensi LTP GCOV).

Gcov mangrupakeun utilitas bébas disebarkeun pikeun examining sinyalna kode. Gcov ngahasilkeun jumlah eksekusi pasti pikeun tiap pernyataan dina program tur ngidinan Anjeun pikeun nambahkeun annotations kana kode sumber. Gcov asalna salaku utilitas standar salaku bagian tina pakét GCC.
Lcov - panganteur grafis pikeun gcov. Éta ngumpul file gcov pikeun sababaraha file sumber sareng ngahasilkeun sakumpulan halaman HTML sareng inpormasi kode sareng sinyalna. Kaca ogé dihasilkeun pikeun ngagampangkeun navigasi. Lcov ngadukung cakupan senar, fungsi, sareng cabang.

Saatos tés réngsé, inpormasi sinyalna bakal aya di sinyalna / lcov.info.
Urang kudu ngomong sonar'Ti mana abdi tiasa kéngingkeun éta? Ku alatan éta, hayu urang tambahkeun garis handap kana file konfigurasi na. Tapi aya hiji titik: proyék tiasa multibasa, nyaeta, dina folder src Aya kodeu sumber pikeun sababaraha basa pamrograman sareng hubungan sareng hiji atanapi anu sanés, sareng waktosna, panggunaan hiji atanapi plugin anu sanés ditangtukeun ku ekstensina. Sareng inpormasi sinyalna tiasa disimpen di tempat anu béda pikeun basa pamrograman anu béda, ku kituna unggal basa gaduh bagian sorangan pikeun nyetél ieu. Proyék urang ngagunakeun Tulisan tipeu, janten urang peryogi bagian setélan kanggo éta:

sonar-project.properties:

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

Sagalana geus siap pikeun peluncuran mimiti scanner teh. Abdi hoyong dicatet yén proyék éta sonar'e didamel sacara otomatis nalika pertama kali anjeun ngajalankeun panyeken pikeun proyék anu dipasihkeun. Dina waktos-waktos salajengna, inpormasi bakal diakumulasi pikeun ningali dinamika parobahan parameter proyék kana waktosna.

Janten, hayu urang nganggo paréntah anu diciptakeun sateuacana rangkep.json:

yarn run sonar 

Catetan: Anjeun oge bisa make parameter -X pikeun logging langkung rinci.

Upami panyeken diluncurkeun pertama kalina, maka binér panyeken éta sorangan bakal diunduh heula. Sanggeus éta dimimitian tur dimimitian scanning server sonar'a pikeun plugins dipasang, kukituna ngitung basa dirojong. Rupa-rupa parameter séjén pikeun operasi na ogé dimuat: propil kualitas, aturan aktip, Repository metrics, aturan server.

Catetan: Kami moal ngabahas aranjeunna sacara rinci dina kerangka tulisan ieu, tapi anjeun tiasa ngahubungi sumber resmi.

Salajengna, analisis folder dimimitian src pikeun kasadiaan file sumber pikeun sakabéh (upami hiji husus teu eksplisit dieusian) dirojong basa, kalawan indexing saterusna maranéhanana.

Salajengna datangna rupa-rupa analisis sejen, nu urang teu difokuskeun dina artikel ieu (contona, kayaning linting, deteksi duplikasi kode, jsb).

Dina ahir karya scanner, sadaya inpormasi anu dikumpulkeun dihijikeun, diarsipkeun sareng dikirim ka server.

Saatos ieu, urang parantos ningali naon anu kajantenan dina antarmuka wéb:

Salaku bisa urang tingali, hal digawé, komo nembongkeun sababaraha jenis sinyalna, tapi teu cocog ours Jest-laporkeun.

Hayu urang angka eta kaluar. Hayu urang tingali proyék éta sacara langkung rinci, klik dina nilai sinyalna, sareng "turun" kana laporan file anu lengkep:

Di dieu urang tingali, sajaba ti utama, nalungtik file HelloWorld.vue, aya ogé file utama.ts, nu spoils sakabeh gambar sinyalna. Tapi kumaha carana urang ngaluarkeun tina itungan cakupan. Leres, sadayana leres, tapi éta dina tingkat Jest, tapi panyeken indéks eta, jadi eta réngsé nepi di itungan na.

Hayu urang ngalereskeun ieu:

sonar-project.properties:

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

Abdi hoyong ngadamel klarifikasi: sajaba polder anu dieusian dina parameter ieu, sadaya polder anu didaptarkeun dina parameter ogé ditambahkeun. sonar.test.inclusions.

Saatos ngaluncurkeun scanner, urang ningali inpormasi anu leres:

Hayu urang tingali titik salajengna - Propil kualitas. Kuring ngobrol di luhur ngeunaan dukungan sonar'om sababaraha basa dina waktos anu sareng. Ieu persis naon urang ningali. Tapi urang terang yén proyék kami ditulis dina TS, janten naha galur scanner sareng manipulasi sareng pamariksaan anu teu perlu. Urang bakal nyetél basa pikeun analisis ku nambahkeun hiji parameter deui kana file konfigurasi sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

Hayu urang ngajalankeun scanner deui tur tingal hasilna:

Sinyalna parantos musna.

Upami urang ningali log scanner, urang tiasa ningali garis ieu:

Hartina, file proyék urang ngan saukur teu indéks.

Kaayaanana nyaéta kieu: dirojong sacara resmi VueJs aya dina plugin SonarJSsaha nu tanggung jawab Javascript.

Tapi rojongan ieu teu di plugin nu SonarTS keur TS, ngeunaan nu tikét resmi dibuka dina tracker bug sonar'A:

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

Ieu sababaraha waleran ti salah sahiji wawakil ti pamekar SonarQube, confirming kanyataan ieu.

Tapi sagalana digawé pikeun kami, anjeun bantahan. Sumuhun, hayu urang coba eta saeutik "hack".
Upami aya dukungan .vue-berkas sonar'Oh, lajeng hayu urang coba ngabejaan manehna mertimbangkeun aranjeunna salaku Tulisan tipeu.

Hayu urang tambahkeun parameter:

sonar-project.properties:

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

Hayu urang ngajalankeun scanner:

Na, voila, sagalana geus normal deui, tur kalawan hiji profil ngan pikeun Tulisan tipeu. Hartina, urang junun ngajawab masalah dina rojongan VueJs+TS keur soundQube.

Hayu urang cobian langkung jauh sareng ningkatkeun inpormasi liputan sakedik.

Anu parantos kami lakukeun dugi ka ayeuna:

• ditambahkeun kana proyék sonar- scanner;
• disetél Jest pikeun ngahasilkeun informasi cakupan;
• dikonpigurasikeun sonar- scanner;
• direngsekeun masalah rojongan .vue-file + Tulisan tipeu.

Salian sinyalna test, aya kriteria mangpaat séjén metot pikeun kualitas kode, Contona, duplikasi kode jeung Jumlah garis (aub dina itungan koefisien patali pajeulitna kode) proyek.

Dina palaksanaan ayeuna tina plugin pikeun gawé bareng TS (SonarTS) moal jalan CPD (Copy Paste Detector) jeung cacah baris kode .vue-berkas.

Pikeun nyieun situasi sintétik tina duplikasi kode, cukup duplikat file komponén kalawan ngaran béda sarta ogé nambahkeun kana kode. utama.ts fungsi dummy sarta duplikat eta kalawan ngaran béda. Pikeun mariksa duplikasi sakumaha dina .vuesareng di .ts -berkas.

main.ts:

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

Jang ngalampahkeun ieu, anjeun kedah mairan samentawis garis konfigurasi:

sonar-project.properties:

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

Hayu urang balikan deui scanner sareng uji:

yarn test && yarn run sonar

Tangtosna, liputan urang bakal tumiba, tapi ayeuna urang henteu resep kana éta.

Dina watesan duplikat garis kode, urang bakal ningali:

Pikeun pariksa kami bakal ngagunakeun CPD- utiliti - jscpd:

npx jscpd src

Pikeun baris kode:

Panginten ieu bakal direngsekeun dina versi plugin anu bakal datang SonarJS(TS). Abdi hoyong dicatet yén aranjeunna laun mimiti ngahijikeun dua plugins ieu kana hiji SonarJS, anu kuring pikir leres.

Ayeuna kuring hoyong mertimbangkeun pilihan pikeun ningkatkeun inpormasi sinyalna.

Sajauh ieu urang tiasa ningali sinyalna tés dina persentase istilah pikeun sakabéh proyék, sarta file hususna. Tapi kasebut nyaéta dimungkinkeun pikeun dilegakeun indikator ieu kalayan informasi ngeunaan kuantitas kamanunggalan-tes pikeun proyék, kitu ogé dina konteks file.

Aya perpustakaan anu tiasa Jest-ngarobah laporan kana format pikeun sonar'A:
data tés umum - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Hayu urang pasang perpustakaan ieu dina proyék kami:

yarn add jest-sonar-reporter

Sareng tambahkeun kana konfigurasi Jest:

package.json:

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

Ayeuna hayu urang ngajalankeun tés:

yarn test

Saatos éta file bakal didamel dina akar proyék test-report.xml.

Hayu urang nganggo éta dina konfigurasi sonar'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Sareng balikan deui scanner:

yarn run sonar

Hayu urang tingali naon anu robih dina antarmuka sonar'A:

Jeung euweuh geus robah. Kanyataanna nyaéta Sonar henteu nganggap file anu dijelaskeun dina laporan Jest salaku file kamanunggalan- tés. Pikeun ngabenerkeun kaayaan ieu, kami nganggo parameter konfigurasi sonar sonar.tés, dimana urang sacara eksplisit bakal nunjukkeun polder kalayan tés (urang ngan ukur gaduh hiji kanggo ayeuna):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Hayu urang balikan deui scanner:

yarn run sonar

Hayu urang tingali naon anu robih dina antarmuka:

Ayeuna kami geus katempo jumlah urang kamanunggalan-tests na, sanggeus gagal ku ngaklik di jero, urang tiasa ningali distribusi jumlah ieu diantara file proyék:

kacindekan

Janten, urang ningali alat pikeun analisa kontinyu soundQube. Kami hasil ngahijikeun kana éta proyék anu ditulis dina VueJs+TS. Ngalereskeun sababaraha masalah kasaluyuan. Kami ningkatkeun eusi inpormasi tina indikator sinyalna tés. Dina artikel ieu, urang nalungtik ngan salah sahiji kriteria pikeun kualitas kode (panginten salah sahiji nu utama), tapi soundQube ngarojong kriteria kualitas séjén, kaasup nguji kaamanan. Tapi teu sakabéh fitur ieu sadia pinuh di masarakat-versi. Salah sahiji fitur anu pikaresepeun sareng mangpaat nyaéta integrasi soundQube kalayan sagala rupa sistem manajemen gudang kode, sapertos GitLab sareng BitBucket. Pikeun nyegah ngahiji tarik(ngahiji) pamundut'a ka cabang utama gudang nalika sinyalna didegradasi. Tapi ieu carita pikeun artikel lengkep beda.

PS: Sagalana dijelaskeun dina artikel dina bentuk kode sadia dina garpu kuring.

Ngan pamaké nu kadaptar bisa ilubiung dina survey. Daptar, Punten.

Naha anjeun nganggo platform SonarQube:

• 26,3%Leres5

• 15,8%No3

• 15,8%Kuring ngadangu ngeunaan platform ieu sareng hoyong nganggo3

• 10,5%Kuring geus uninga ngeunaan platform ieu sarta teu hayang make2

• 0,0%Abdi nganggo platform0 anu béda

• 31,6%Pertama kali kuring ngadéngé ngeunaan dirina6

19 pamaké milih. 3 pamaké abstained.

sumber: www.habr.com