Kami secara aktif menggunakan platform dalam kerja kami soundQube untuk mengekalkan kualiti kod pada tahap yang tinggi. Apabila menyepadukan salah satu projek yang ditulis dalam VueJs+Typescript, timbul masalah. Oleh itu, saya ingin memberitahu anda dengan lebih terperinci bagaimana kami berjaya menyelesaikannya.

Dalam artikel ini kita akan bercakap, seperti yang saya tulis di atas, mengenai platform SonarQube. Sedikit teori - apakah itu secara umum, bagi mereka yang pertama kali mendengarnya:

soundQube (bekas Sonar) ialah platform sumber terbuka untuk pemeriksaan berterusan dan pengukuran kualiti kod.
Menyokong analisis kod dan pengesanan ralat mengikut peraturan standard pengaturcaraan MISRA C, MISRA C++, MITER/CWE dan CERT Secure Coding Standards. Ia juga boleh mengenali ralat daripada senarai ralat pengaturcaraan Top 10 dan CWE/SANS Top 25 OWASP.
Walaupun platform menggunakan pelbagai alat siap sedia, SonarQube mengurangkan keputusan kepada satu papan pemuka, menyimpan sejarah larian dan dengan itu membolehkan anda melihat trend umum perubahan dalam kualiti perisian semasa pembangunan.

Butiran lanjut boleh didapati di laman web rasmi

Sebilangan besar bahasa pengaturcaraan disokong. Berdasarkan maklumat daripada pautan di atas, ini adalah lebih daripada 25 bahasa. Untuk menyokong bahasa tertentu, anda mesti memasang pemalam yang sesuai. Versi komuniti termasuk pemalam untuk bekerja dengan Javascript (termasuk typesсript), walaupun wiki mengatakan sebaliknya. belakang Javascript jawapan pemalam SonarJS, untuk Typescript SonarTS masing-masing.

Pelanggan rasmi digunakan untuk menghantar maklumat liputan pengimbas sonarqube, yang, menggunakan tetapan daripada config-fail, menghantar data ini ke pelayan soundQube untuk penyatuan dan pengagregatan selanjutnya.

Untuk Javascript ada pembalut npm. Jadi, mari kita mulakan pelaksanaan langkah demi langkah soundQube в Vue-projek menggunakan Naskhah Jenis.

Untuk menggunakan pelayan soundQube jom ambil kesempatan compiler-compose.

sonar.yaml:

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

Pelancaran:

docker-compose -f sonar.yml up

Selepas itu soundQube akan tersedia di: http://localhost:9001 .

Belum ada projek di dalamnya dan itu adil. Kami akan membetulkan keadaan ini. Saya mengambil projek contoh rasmi untuk VueJS+TS+Jest. Mari kita bengkokkannya ke arah diri kita sendiri:

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

Mula-mula kita perlu memasang klien soundQube, yang dipanggil pengimbas sonaruntuk npm terdapat pembalut:

yarn add sonarqube-scanner

Dan serta-merta tambah arahan ke skrip untuk bekerja dengannya.

package.json:

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

Seterusnya, untuk pengimbas berfungsi, anda perlu menetapkan tetapan projek dalam fail khas. Mari kita mulakan dengan asas.

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 – pengecam projek unik pada pelayan Sonar'A;
• sonar.projectName – namanya, ia boleh ditukar pada bila-bila masa, kerana projek itu dikenal pasti oleh projectKey;
• sonar.sumber – folder dengan sumber, biasanya ini src, tetapi boleh jadi apa sahaja. Folder ini ditetapkan relatif kepada folder akar, iaitu folder dari mana pengimbas dilancarkan;
• sonar.ujian – parameter yang berjalan seiring dengan yang sebelumnya. Ini ialah folder tempat ujian berada. Dalam projek ini, tiada folder sedemikian, dan ujian terletak di sebelah komponen yang sedang diuji dalam folder 'ujian', jadi kami akan mengabaikannya buat masa ini dan menggunakan parameter seterusnya;
• sonar.test.inclusions – laluan untuk ujian menggunakan topeng, mungkin terdapat beberapa elemen disenaraikan dipisahkan dengan koma;
• sonar.sourceEncoding – pengekodan untuk fail sumber.

Untuk pelancaran pertama pengimbas, segala-galanya sudah sedia, kecuali untuk tindakan utama sebelumnya: melancarkan enjin ujian itu sendiri, supaya ia boleh menjana maklumat tentang liputan, yang akan digunakan oleh pengimbas kemudiannya.

Tetapi untuk melakukan ini, anda perlu mengkonfigurasi enjin ujian untuk menjana maklumat ini. Dalam projek ini, enjin ujian adalah isyarat. Dan tetapannya berada dalam bahagian fail yang sepadan package.json.

Mari tambah tetapan ini:

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

Iaitu, kami menetapkan bendera itu sendiri untuk keperluan mengira liputan dan sumber (bersama-sama dengan pengecualian) berdasarkan mana ia akan dibentuk.

Sekarang mari kita jalankan ujian:

yarn test

Kita akan melihat perkara berikut:

Sebabnya ialah tiada kod dalam komponen itu sendiri. Mari kita betulkan ini.

HelloWorld.vue:

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

Ini sudah cukup untuk mengira liputan.

Selepas memulakan semula ujian, kami akan memastikan ini:

Pada skrin kita harus melihat maklumat tentang liputan, dan folder akan dibuat dalam folder projek liputan dengan maklumat liputan ujian dalam format universal LCOV (sambungan LTP GCOV).

Gcov ialah utiliti yang diedarkan secara bebas untuk memeriksa liputan kod. Gcov menjana bilangan pelaksanaan yang tepat untuk setiap pernyataan dalam program dan membolehkan anda menambah anotasi pada kod sumber. Gcov datang sebagai utiliti standard sebagai sebahagian daripada pakej GCC.
Lcov - antara muka grafik untuk gcov. Ia memasang fail gcov untuk berbilang fail sumber dan menghasilkan satu set halaman HTML dengan maklumat kod dan liputan. Halaman juga dijana untuk memudahkan navigasi. Lcov menyokong liputan rentetan, fungsi dan cawangan.

Selepas ujian selesai, maklumat liputan akan ditempatkan di liputan/lcov.info.
Kita perlu katakan Sonar'Dari mana saya boleh mendapatkannya? Oleh itu, mari tambah baris berikut pada fail konfigurasinya. Tetapi ada satu perkara: projek boleh berbilang bahasa, iaitu, dalam folder src terdapat kod sumber untuk beberapa bahasa pengaturcaraan dan gabungan dengan satu atau yang lain, dan seterusnya, penggunaan satu atau pemalam lain ditentukan oleh sambungannya. Dan maklumat liputan boleh disimpan di tempat yang berbeza untuk bahasa pengaturcaraan yang berbeza, jadi setiap bahasa mempunyai bahagian sendiri untuk menetapkan ini. Projek kami menggunakan Naskhah Jenis, jadi kami memerlukan bahagian tetapan hanya untuknya:

sonar-project.properties:

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

Segala-galanya sedia untuk pelancaran pertama pengimbas. Saya ingin ambil perhatian bahawa projek itu Sonar'e dicipta secara automatik pada kali pertama anda menjalankan pengimbas untuk projek tertentu. Pada masa-masa berikutnya, maklumat akan terkumpul untuk melihat dinamik perubahan dalam parameter projek dari semasa ke semasa.

Jadi, mari kita gunakan arahan yang dibuat sebelum ini package.json:

yarn run sonar 

Nota: anda juga boleh menggunakan parameter -X untuk pengelogan yang lebih terperinci.

Jika pengimbas dilancarkan buat kali pertama, maka binari pengimbas itu sendiri akan dimuat turun terlebih dahulu. Selepas itu ia bermula dan mula mengimbas pelayan Sonar'a untuk pemalam yang dipasang, dengan itu mengira bahasa yang disokong. Pelbagai parameter lain untuk operasinya juga dimuatkan: profil kualiti, peraturan aktif, repositori metrik, peraturan pelayan.

Nota: Kami tidak akan membincangkannya secara terperinci dalam rangka artikel ini, tetapi anda sentiasa boleh menghubungi sumber rasmi.

Seterusnya, analisis folder bermula src untuk ketersediaan fail sumber untuk semua (jika yang khusus tidak dinyatakan secara eksplisit) bahasa yang disokong, dengan pengindeksan seterusnya.

Seterusnya datang pelbagai analisis lain, yang tidak kami fokuskan dalam artikel ini (contohnya, seperti linting, pengesanan pertindihan kod, dll.).

Pada penghujung kerja pengimbas, semua maklumat yang dikumpul diagregatkan, diarkibkan dan dihantar ke pelayan.

Selepas ini, kita sudah boleh melihat apa yang berlaku dalam antara muka web:

Seperti yang kita dapat lihat, sesuatu berjaya, malah menunjukkan beberapa jenis liputan, tetapi ia tidak sepadan dengan kita isyarat-laporan.

Mari kita fikirkan. Mari kita lihat projek dengan lebih terperinci, klik pada nilai liputan dan "jatuhkan" ke dalam laporan fail terperinci:

Di sini kita lihat, sebagai tambahan kepada fail utama yang diperiksa HelloWorld.vue, terdapat juga fail utama.ts, yang merosakkan keseluruhan gambaran liputan. Tetapi bagaimana kita mengecualikannya daripada pengiraan perlindungan. Ya, semuanya betul, tetapi ia berada pada tahap isyarat, tetapi pengimbas mengindeksnya, jadi ia berakhir dalam pengiraannya.

Mari kita betulkan ini:

sonar-project.properties:

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

Saya ingin membuat penjelasan: sebagai tambahan kepada folder yang dinyatakan dalam parameter ini, semua folder yang disenaraikan dalam parameter juga ditambah sonar.test.inclusions.

Selepas melancarkan pengimbas, kami melihat maklumat yang betul:

Mari kita lihat perkara seterusnya - Profil berkualiti. Saya bercakap di atas tentang sokongan Sonar'om beberapa bahasa pada masa yang sama. Inilah sebenarnya yang kita lihat. Tetapi kami tahu bahawa projek kami telah ditulis TS, jadi mengapa menapis pengimbas dengan manipulasi dan pemeriksaan yang tidak perlu. Kami akan menetapkan bahasa untuk analisis dengan menambah satu lagi parameter pada fail konfigurasi Sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

Mari jalankan pengimbas sekali lagi dan lihat hasilnya:

Liputan telah hilang sepenuhnya.

Jika kita melihat log pengimbas, kita dapat melihat baris berikut:

Iaitu, fail projek kami hanya tidak diindeks.

Keadaannya adalah seperti berikut: disokong secara rasmi VueJs berada dalam pemalam SonarJSsiapa yang bertanggungjawab Javascript.

Tetapi sokongan ini tiada dalam pemalam SonarTS untuk TS, yang tiket rasmi dibuka dalam penjejak pepijat Sonar'A:

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

Berikut adalah beberapa jawapan daripada salah seorang wakil daripada pemaju SonarQube, mengesahkan fakta ini.

Tetapi semuanya bekerja untuk kami, anda membantah. Ya, mari kita cuba sedikit “godam”.
Jika ada sokongan .vue-fail Sonar'oh, kalau begitu mari kita cuba beritahu dia untuk menganggap mereka sebagai Naskhah Jenis.

Mari tambah parameter:

sonar-project.properties:

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

Mari lancarkan pengimbas:

Dan, voila, semuanya kembali normal, dan dengan satu profil sahaja untuk Naskhah Jenis. Iaitu, kami berjaya menyelesaikan masalah dalam sokongan VueJs+TS untuk soundQube.

Mari cuba pergi lebih jauh dan perbaiki sedikit maklumat liputan.

Apa yang telah kami lakukan setakat ini:

• ditambah kepada projek itu Sonar-pengimbas;
• sediakan isyarat untuk menjana maklumat liputan;
• dikonfigurasikan Sonar-pengimbas;
• menyelesaikan masalah sokongan .vue-fail + Naskhah Jenis.

Selain liputan ujian, terdapat kriteria berguna lain yang menarik untuk kualiti kod, contohnya, pertindihan kod dan bilangan baris (terlibat dalam pengiraan pekali yang berkaitan dengan kerumitan kod) projek.

Dalam pelaksanaan semasa pemalam untuk bekerja dengan TS (SonarTS) tidak akan berfungsi CPD (Pengesan Salin Tampal) dan mengira baris kod .vue-fail.

Untuk mencipta situasi sintetik pertindihan kod, hanya pendua fail komponen dengan nama yang berbeza dan juga tambahkannya pada kod utama.ts fungsi dummy dan salinkannya dengan nama yang berbeza. Untuk menyemak pertindihan seperti dalam .vue, dan dalam .t -fail.

main.ts:

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

Untuk melakukan ini, anda perlu mengulas baris konfigurasi buat sementara waktu:

sonar-project.properties:

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

Mari mulakan semula pengimbas bersama-sama dengan ujian:

yarn test && yarn run sonar

Sudah tentu, liputan kami akan jatuh, tetapi sekarang kami tidak berminat dengan itu.

Dari segi pendua baris kod, kita akan melihat:

Untuk menyemak kami akan gunakan CPD- utiliti - jscpd:

npx jscpd src

Untuk baris kod:

Mungkin ini akan diselesaikan dalam versi pemalam akan datang SonarJS(TS). Saya ingin ambil perhatian bahawa mereka secara beransur-ansur mula menggabungkan kedua-dua pemalam ini menjadi satu SonarJS, yang saya rasa betul.

Sekarang saya ingin mempertimbangkan pilihan untuk menambah baik maklumat liputan.

Setakat ini kita boleh melihat liputan ujian dari segi peratusan untuk keseluruhan projek, dan untuk fail khususnya. Tetapi adalah mungkin untuk mengembangkan penunjuk ini dengan maklumat tentang kuantiti unit-ujian untuk projek, serta dalam konteks fail.

Ada perpustakaan yang boleh isyarat-tukar laporan ke dalam format untuk Sonar'A:
data ujian generik - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Mari pasang perpustakaan ini dalam projek kami:

yarn add jest-sonar-reporter

Dan tambahkannya pada konfigurasi isyarat:

package.json:

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

Sekarang mari kita jalankan ujian:

yarn test

Selepas itu fail akan dibuat dalam akar projek test-report.xml.

Mari gunakannya dalam konfigurasi Sonar'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Dan mulakan semula pengimbas:

yarn run sonar

Mari lihat apa yang telah berubah dalam antara muka Sonar'A:

Dan tiada apa yang berubah. Hakikatnya ialah Sonar tidak menganggap fail yang diterangkan dalam laporan Jest sebagai fail unit-ujian. Untuk membetulkan keadaan ini, kami menggunakan parameter konfigurasi Sonar sonar.ujian, di mana kami akan menunjukkan secara eksplisit folder dengan ujian (kami hanya mempunyai satu buat masa ini):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Mari mulakan semula pengimbas:

yarn run sonar

Mari lihat apa yang telah berubah dalam antara muka:

Sekarang kami telah melihat nombor kami unit-tests dan, setelah gagal dengan mengklik di dalam, kita dapat melihat pengedaran nombor ini di antara fail projek:

Kesimpulan

Jadi, kami melihat alat untuk analisis berterusan soundQube. Kami berjaya menyepadukan projek yang ditulis di dalamnya VueJs+TS. Membetulkan beberapa isu keserasian. Kami meningkatkan kandungan maklumat penunjuk liputan ujian. Dalam artikel ini kami hanya mengkaji satu daripada kriteria kualiti kod (mungkin salah satu yang utama), tetapi soundQube menyokong kriteria kualiti lain, termasuk ujian keselamatan. Tetapi tidak semua ciri ini tersedia sepenuhnya komuniti-versi. Salah satu ciri yang menarik dan berguna ialah penyepaduan soundQube dengan pelbagai sistem pengurusan repositori kod, seperti GitLab dan BitBucket. Untuk mengelakkan merge tarik(gabung) permintaan'a ke cawangan utama repositori apabila liputan terdegradasi. Tetapi ini adalah cerita untuk artikel yang sama sekali berbeza.

PS: Semua yang diterangkan dalam artikel dalam bentuk kod tersedia dalam garpu saya.

Hanya pengguna berdaftar boleh mengambil bahagian dalam tinjauan. Log masuk, Sama-sama.

Adakah anda menggunakan platform SonarQube:

• 26,3% Ya5

• 15,8% No3

• 15,8% Saya mendengar tentang platform ini dan ingin menggunakan3

• 10,5% Saya pernah mendengar tentang platform ini dan tidak mahu menggunakan2

• 0,0% Saya menggunakan platform0 yang berbeza

• 31,6% Pertama kali saya mendengar tentang dia6

19 pengguna mengundi. 3 pengguna berpantang.

Sumber: www.habr.com