Biz o'z ishimizda platformadan faol foydalanamiz SonarQube kod sifatini yuqori darajada saqlash uchun. Yozilgan loyihalardan birini integratsiyalashganda VueJs+Typescript, muammolar paydo bo'ldi. Shuning uchun men ularni qanday hal qilishga muvaffaq bo'lganimizni batafsilroq aytib bermoqchiman.

Ushbu maqolada biz yuqorida yozganimdek, SonarQube platformasi haqida gaplashamiz. Bir oz nazariya - bu nima, bu haqda birinchi marta eshitayotganlar uchun:

SonarQube (sobiq sonar) uzluksiz tekshirish va kod sifatini o'lchash uchun ochiq manba platformasi.
MISRA C, MISRA C++, MITER/CWE va CERT Secure Coding Standards dasturlash standartlari qoidalariga muvofiq kod tahlili va xatolarni aniqlashni qo'llab-quvvatlaydi. Shuningdek, u OWASP Top 10 va CWE/SANS Top 25 dasturlash xatolar roʻyxatidagi xatolarni taniy oladi.
Platformada turli xil tayyor vositalardan foydalanishiga qaramay, SonarQube natijalarni bitta boshqaruv paneliga qisqartiradi, ishga tushirish tarixini saqlaydi va shu bilan ishlab chiqish jarayonida dasturiy ta'minot sifati o'zgarishining umumiy tendentsiyasini ko'rish imkonini beradi.

Batafsil ma'lumotni quyidagi manzilda topishingiz mumkin rasmiy veb-sayti

Ko'p sonli dasturlash tillari qo'llab-quvvatlanadi. Yuqoridagi havoladagi ma'lumotlarga ko'ra, bu 25 dan ortiq tildir. Muayyan tilni qo'llab-quvvatlash uchun tegishli plaginni o'rnatishingiz kerak. Jamoa versiyasida ishlash uchun plagin mavjud Javascript (jumladan, typesript), garchi wiki buning aksini aytadi. Orqada Javascript plagin javoblari SonarJS, Typescript uchun SonarTS mos ravishda.

Rasmiy mijoz qamrov ma'lumotlarini yuborish uchun ishlatiladi sonarqube-skanerdan sozlamalardan foydalangan holda config-fayl, bu ma'lumotlarni serverga yuboradi SonarQube keyingi birlashtirish va birlashtirish uchun.

uchun Javascript bo'ladi npm o'rami. Shunday qilib, keling, bosqichma-bosqich amalga oshirishni boshlaylik SonarQube в Vue- loyihadan foydalanish Yozuv turi.

Serverni joylashtirish uchun SonarQube unumli foydalanaylik docker-compose.

sonar.yaml:

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

Ishga tushirish:

docker-compose -f sonar.yml up

Bundan keyin SonarQube quyidagi manzilda mavjud bo'ladi: http://localhost:9001 .

Unda hali hech qanday loyihalar yo'q va bu adolatli. Biz bu vaziyatni tuzatamiz. Men loyihaning rasmiy namunasini oldim VueJS+TS+Jest. Keling, uni o'zimizga egaylik:

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

Avval mijozni o'rnatishimiz kerak SonarQube, deb ataladi sonar-skaneruchun npm o'rash mavjud:

yarn add sonarqube-scanner

Va darhol buyruqni qo'shing skriptlar u bilan ishlash.

package.json:

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

Keyinchalik, skaner ishlashi uchun siz loyiha sozlamalarini maxsus faylga o'rnatishingiz kerak. Keling, asoslardan boshlaylik.

sonar-loyiha.xususiyatlari:

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 - manzil sonar'A;
• sonar.projectKey – serverdagi noyob loyiha identifikatori sonar'A;
• sonar.loyiha nomi - uning nomi, uni istalgan vaqtda o'zgartirish mumkin, chunki loyiha tomonidan aniqlangan loyiha kaliti;
• sonar.manbalar – manbalarga ega papka, odatda bu src, lekin har qanday narsa bo'lishi mumkin. Ushbu papka skaner ishga tushiriladigan papka bo'lgan ildiz papkasiga nisbatan o'rnatiladi;
• sonar.testlar - oldingi parametr bilan tandemga mos keladigan parametr. Bu testlar joylashgan papka. Ushbu loyihada bunday papka yo'q va test ' papkasida tekshirilayotgan komponentning yonida joylashgan.sinov', shuning uchun biz buni hozircha e'tiborsiz qoldiramiz va keyingi parametrdan foydalanamiz;
• sonar.test.inclusions - niqob yordamida testlar uchun yo'l, vergul bilan ajratilgan bir nechta elementlar bo'lishi mumkin;
• sonar.sourceEncoding – manba fayllarni kodlash.

Skanerni birinchi ishga tushirish uchun hamma narsa tayyor, oldingi asosiy amaldan tashqari: sinov dvigatelining o'zini ishga tushirish, u skaner keyinchalik foydalanadigan qamrov haqida ma'lumot yaratishi mumkin.

Lekin buning uchun siz ushbu ma'lumotni yaratish uchun sinov mexanizmini sozlashingiz kerak. Ushbu loyihada sinov dvigateli bor. Va uning sozlamalari faylning tegishli qismida joylashgan paket.json.

Keling, ushbu sozlamalarni qo'shamiz:

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

Ya'ni, biz qamrovni hisoblash zarurati va manba (istisnolar bilan birga) uning asosida shakllanadigan bayroqni o'rnatamiz.

Endi testni bajaramiz:

yarn test

Biz quyidagilarni ko'ramiz:

Buning sababi shundaki, komponentning o'zida kod yo'q. Keling, buni tuzataylik.

HelloWorld.vue:

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

Bu qoplamani hisoblash uchun etarli bo'ladi.

Sinovni qayta ishga tushirgandan so'ng, biz bunga ishonch hosil qilamiz:

Ekranda biz qamrov haqida ma'lumotni ko'rishimiz kerak va loyiha papkasida papka yaratiladi qamrov universal formatda test qamrovi ma'lumotlari bilan LCOV (LTP GCOV kengaytmasi).

Gcov kod qamrovini tekshirish uchun bepul tarqatiladigan yordamchi dasturdir. Gcov dasturdagi har bir bayonot uchun bajarilishlarning aniq sonini yaratadi va manba kodiga izohlar qo'shish imkonini beradi. Gcov GCC paketining bir qismi sifatida standart yordamchi dastur sifatida keladi.
Lcov - gcov uchun grafik interfeys. U bir nechta manba fayllari uchun gcov fayllarini yig'adi va kod va qamrov ma'lumotlariga ega HTML sahifalar to'plamini ishlab chiqaradi. Navigatsiyani osonlashtirish uchun sahifalar ham yaratilgan. Lcov satrlar, funktsiyalar va filiallarni qamrab olishni qo'llab-quvvatlaydi.

Sinovlar tugallangandan so'ng, qamrov haqida ma'lumot joylashgan bo'ladi coverage/lcov.info.
aytishimiz kerak sonar'Qaerdan olsam bo'ladi? Shuning uchun uning konfiguratsiya fayliga quyidagi qatorlarni qo'shamiz. Lekin bir nuqta bor: loyihalar ko'p tilli, ya'ni papkada bo'lishi mumkin src bir nechta dasturlash tillari uchun manba kodlari va u yoki bu bilan bog'liqlik mavjud va o'z navbatida u yoki bu plagindan foydalanish uning kengaytmasi bilan belgilanadi. Va qamrov ma'lumotlari turli dasturlash tillari uchun turli joylarda saqlanishi mumkin, shuning uchun har bir tilda buni sozlash uchun o'z bo'limi mavjud. Bizning loyihamiz foydalanadi Yozuv turi, shuning uchun bizga sozlamalar bo'limi kerak:

sonar-loyiha.xususiyatlari:

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

Skanerning birinchi ishga tushirilishi uchun hamma narsa tayyor. Shuni ta'kidlashni istardimki, loyiha sonar'e ma'lum bir loyiha uchun skanerni birinchi marta ishga tushirganingizda avtomatik ravishda yaratiladi. Keyingi vaqtlarda loyiha parametrlarining vaqt o'tishi bilan o'zgarishlar dinamikasini ko'rish uchun ma'lumotlar to'planadi.

Shunday qilib, avval yaratilgan buyruqdan foydalanamiz paket.json:

yarn run sonar 

Eslatma: parametridan ham foydalanishingiz mumkin -X batafsil ro'yxatga olish uchun.

Agar skaner birinchi marta ishga tushirilgan bo'lsa, avval skanerning ikkilik fayli yuklab olinadi. Shundan so'ng u boshlanadi va serverni skanerlashni boshlaydi sonar'a o'rnatilgan plaginlar uchun, shu bilan qo'llab-quvvatlanadigan tilni hisoblash. Uning ishlashi uchun boshqa turli parametrlar ham yuklangan: sifat profillari, faol qoidalar, o'lchovlar ombori, server qoidalari.

Eslatma: Ushbu maqola doirasida biz ular haqida batafsil to'xtalmaymiz, lekin siz har doim rasmiy manbalarga murojaat qilishingiz mumkin.

Keyinchalik, papkalarni tahlil qilish boshlanadi src barcha uchun manba fayllar mavjudligi uchun (agar ma'lum bir aniq ko'rsatilmagan bo'lsa) qo'llab-quvvatlanadigan til, ularning keyingi indekslanishi.

Keyinchalik, biz ushbu maqolada e'tibor bermagan boshqa tahlillar (masalan, linting, kodning takrorlanishini aniqlash va boshqalar) keladi.

Skaner ishining oxirida barcha to'plangan ma'lumotlar yig'iladi, arxivlanadi va serverga yuboriladi.

Shundan so'ng, biz veb-interfeysda nima sodir bo'lganini allaqachon ko'rishimiz mumkin:

Ko'rib turganimizdek, biror narsa ishladi va hatto qandaydir qamrovni ko'rsatadi, lekin u biznikiga mos kelmaydi bor- hisobot.

Keling, buni aniqlaylik. Keling, loyihani batafsil ko'rib chiqaylik, qamrov qiymatini bosing va batafsil fayl hisobotiga "tushiling":

Bu erda biz asosiy tekshirilgan faylga qo'shimcha ravishda ko'ramiz HelloWorld.vue, fayl ham mavjud main.ts, bu qamrovning butun rasmini buzadi. Lekin qanday qilib biz uni qamrovni hisoblashdan chiqarib tashladik. Ha, hamma narsa to'g'ri, lekin u darajada edi bor, lekin skaner uni indeksladi, shuning uchun u o'z hisob-kitoblarida yakunlandi.

Keling, buni tuzatamiz:

sonar-loyiha.xususiyatlari:

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

Men aniqlik kiritmoqchiman: ushbu parametrda ko'rsatilgan papkalarga qo'shimcha ravishda parametrda ko'rsatilgan barcha papkalar ham qo'shiladi. sonar.test.inclusions.

Skanerni ishga tushirgandan so'ng biz to'g'ri ma'lumotlarni ko'ramiz:

Keling, keyingi nuqtani ko'rib chiqaylik - Sifat profillari. Men yuqorida qo'llab-quvvatlash haqida gapirdim sonarbir vaqtning o'zida bir nechta tillarni bilaman. Aynan shu narsa biz ko'rib turibmiz. Lekin bizning loyihamiz yozilganligini bilamiz TS, shuning uchun nima uchun skanerni keraksiz manipulyatsiyalar va tekshiruvlar bilan torting. Konfiguratsiya fayliga yana bitta parametr qo'shish orqali tahlil qilish uchun tilni o'rnatamiz sonar'A:

sonar-loyiha.xususiyatlari:

...
sonar.language=ts
...

Keling, skanerni qayta ishga tushiramiz va natijani ko'ramiz:

Qoplama butunlay yo'qoldi.

Agar skaner jurnaliga qarasak, quyidagi qatorni ko'rishimiz mumkin:

Ya'ni, bizning loyiha fayllarimiz oddiygina indekslanmagan.

Vaziyat quyidagicha: rasman qo'llab-quvvatlanadi VueJs plaginda mavjud SonarJSkim uchun javobgar Javascript.

Ammo bu qo'llab-quvvatlash plaginda mavjud emas SonarTS uchun TS, bu haqda xato kuzatuvchisida rasmiy chipta ochilgan sonar'A:

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

Mana, bu haqiqatni tasdiqlovchi SonarQube ishlab chiquvchilari vakillaridan birining javoblari.

Lekin hamma narsa biz uchun ishladi, siz e'tiroz bildirasiz. Ha shunday, keling, biroz harakat qilib ko'raylik "hack".
Agar qo'llab-quvvatlash bo'lsa .vue-fayllar sonar- Oh, keling, unga ularni shunday deb hisoblashini aytishga harakat qilaylik Yozuv turi.

Keling, parametr qo'shamiz:

sonar-loyiha.xususiyatlari:

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

Skanerni ishga tushiramiz:

Va, voila, hamma narsa normal holatga qaytdi va faqat bitta profil bilan Yozuv turi. Ya'ni, biz qo'llab-quvvatlashda muammoni hal qilishga muvaffaq bo'ldik VueJs+TS uchun SonarQube.

Keling, oldinga borishga va qamrov ma'lumotlarini biroz yaxshilashga harakat qilaylik.

Biz hozirgacha nima qildik:

• loyihaga qo'shildi sonar- skaner;
• sozlash; o'rnatish bor qamrov ma'lumotlarini yaratish;
• tuzilgan sonar- skaner;
• qo'llab-quvvatlash muammosini hal qildi .vue-fayllar + Yozuv turi.

Sinovni qamrab olishdan tashqari, kod sifati uchun boshqa qiziqarli foydali mezonlar mavjud, masalan, kodni takrorlash va loyihaning satrlar soni (kodning murakkabligi bilan bog'liq koeffitsientlarni hisoblashda ishtirok etadi).

U bilan ishlash uchun plaginning joriy tatbiqida TS (SonarTS) ishlamaydi CPD (Copy Paste Detektori) va kod satrlarini hisoblash .vue-fayllar.

Kodni takrorlashning sintetik holatini yaratish uchun oddiygina komponent faylini boshqa nom bilan takrorlang va uni kodga qo'shing. main.ts qo'g'irchoq funksiya va uni boshqa nom bilan takrorlang. Quyidagi kabi takroriylikni tekshirish uchun .vue, va .ts -fayllar.

main.ts:

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

Buni amalga oshirish uchun siz konfiguratsiya qatoriga vaqtincha izoh berishingiz kerak:

sonar-loyiha.xususiyatlari:

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

Sinov bilan birga skanerni qayta ishga tushiramiz:

yarn test && yarn run sonar

Albatta, bizning qamrovimiz pasayadi, lekin hozir bizni bu qiziqtirmaydi.

Kod satrlarini takrorlash nuqtai nazaridan biz quyidagilarni ko'ramiz:

Tekshirish uchun biz foydalanamiz CPD-qulaylik - jscpd:

npx jscpd src

Kod qatorlari uchun:

Ehtimol, bu keyingi plagin versiyalarida hal qilinadi SonarJS(TS). Shuni ta'kidlashni istardimki, ular asta-sekin bu ikkita plaginni bitta plaginga birlashtira boshlaydilar SonarJS, menimcha, bu to'g'ri.

Endi men qamrov ma'lumotlarini yaxshilash variantini ko'rib chiqmoqchi edim.

Hozircha biz butun loyiha va xususan fayllar uchun test qamrovini foizlarda ko'rishimiz mumkin. Ammo bu ko'rsatkichni miqdor haqida ma'lumot bilan kengaytirish mumkin birlik-loyiha uchun testlar, shuningdek, fayllar kontekstida.

qila oladigan kutubxona mavjud bor-hisobotni formatga aylantirish sonar'A:
umumiy test ma'lumotlari - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Keling, ushbu kutubxonani loyihamizga o'rnatamiz:

yarn add jest-sonar-reporter

Va uni konfiguratsiyaga qo'shing bor:

package.json:

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

Endi testni bajaramiz:

yarn test

Shundan so'ng loyihaning ildizida fayl yaratiladi test-report.xml.

Keling, uni konfiguratsiyada ishlatamiz sonar'A:

sonar-loyiha.xususiyatlari:

…
sonar.testExecutionReportPaths=test-report.xml
…

Va skanerni qayta ishga tushiring:

yarn run sonar

Keling, interfeysda nima o'zgarganini ko'rib chiqaylik sonar'A:

Va hech narsa o'zgarmadi. Gap shundaki, Sonar Jest hisobotida tasvirlangan fayllarni fayl deb hisoblamaydi birlik-testlar. Ushbu vaziyatni tuzatish uchun biz konfiguratsiya parametridan foydalanamiz sonar sonar.testlar, unda biz testlari bo'lgan papkalarni aniq ko'rsatamiz (hozircha bizda faqat bittasi bor):

sonar-loyiha.xususiyatlari:

…
sonar.tests=src/components/__tests__
…

Skanerni qayta ishga tushiramiz:

yarn run sonar

Keling, interfeysda nima o'zgarganini ko'rib chiqaylik:

Endi biz raqamimizni ko'rdik birlik-testlar va ichkariga bosish orqali muvaffaqiyatsizlikka uchragan holda, biz ushbu raqamning loyiha fayllari orasida taqsimlanishini ko'rishimiz mumkin:

xulosa

Shunday qilib, biz uzluksiz tahlil qilish vositasini ko'rib chiqdik SonarQube. Biz unga yozilgan loyihani muvaffaqiyatli birlashtirdik VueJs+TS. Ba'zi moslik muammolari tuzatildi. Test qamrovi indikatorining axborot mazmunini oshirdik. Ushbu maqolada biz kod sifati mezonlaridan faqat bittasini ko'rib chiqdik (ehtimol asosiylaridan biri), lekin SonarQube boshqa sifat mezonlarini, jumladan, xavfsizlik testlarini qo'llab-quvvatlaydi. Ammo bu xususiyatlarning hammasi ham to'liq mavjud emas jamoa-versiyalari. Qiziqarli va foydali xususiyatlardan biri bu integratsiya SonarQube GitLab va BitBucket kabi turli xil kodlar omborini boshqarish tizimlari bilan. Oldini olish uchun birlashtirish (birlashtirish) so'rovi'a qamrovi yomonlashganda omborning asosiy bo'limiga. Ammo bu butunlay boshqa maqola uchun hikoya.

PS: Maqolada kod shaklida tasvirlangan hamma narsa mavjud mening vilkalarim.

So'rovda faqat ro'yxatdan o'tgan foydalanuvchilar ishtirok etishlari mumkin. tizimga kirishiltimos.

Siz SonarQube platformasidan foydalanasizmi:

• 26,3%Ha 5

• 15,8%№3

• 15,8%Men ushbu platforma haqida eshitdim va foydalanmoqchiman3

• 10,5%Men bu platforma haqida eshitganman va foydalanmoqchi emasman2

• 0,0%Men boshqa platforma 0 dan foydalanmoqdaman

• 31,6%Men u haqida birinchi marta eshitganman6

19 nafar foydalanuvchi ovoz berdi. 3 nafar foydalanuvchi betaraf qolgan.

Manba: www.habr.com