İşimizdə platformadan fəal şəkildə istifadə edirik soundQube kodun keyfiyyətini yüksək səviyyədə saxlamaq. Yazılan layihələrdən birini inteqrasiya edərkən VueJs+Typescript, problemlər var. Buna görə də, onları necə həll edə bildiyimizi sizə daha çox danışmaq istərdim.

Bu məqalə, yuxarıda yazdığım kimi, SonarQube platformasına yönəldiləcəkdir. Bir az nəzəriyyə - ümumiyyətlə bu nədir, ilk dəfə eşidənlər üçün:

soundQube (keçmiş Sonar) davamlı yoxlama və kod keyfiyyətinin ölçülməsi üçün açıq mənbə platformasıdır.
MISRA C, MISRA C++, MITER/CWE və CERT Təhlükəsiz Kodlaşdırma Standartlarının qaydalarına uyğun olaraq kod təhlili və səhv aşkarlanmasını dəstəkləyir. O, həmçinin OWASP Top 10 və CWE / SANS Top 25 proqramlaşdırma səhvləri siyahısındakı səhvləri necə tanıyacağını bilir.
Platformanın müxtəlif hazır alətlərdən istifadə etməsinə baxmayaraq, SonarQube nəticələri tək bir tablosuna (İngiliscə tablosuna) endirərək, qaçışların tarixini saxlayır və beləliklə, inkişaf zamanı proqram təminatının keyfiyyətindəki ümumi tendensiyanı görməyə imkan verir.

Ətraflı məlumatı burada tapa bilərsiniz rəsmi sayt

Çox sayda proqramlaşdırma dilləri dəstəklənir. Yuxarıdakı linkdəki məlumatlara əsasən, bunlar 25-dən çox dildir. Müəyyən bir dili dəstəkləmək üçün müvafiq plagini quraşdırmalısınız. İcma versiyasına işləmək üçün plagin daxildir Javascript (o cümlədən typescript), baxmayaraq ki, viki başqa cür deyir. Arxada Javascript plagin cavab verir SonarJS, Typescript üçün SonarTS müvafiq.

Əhatə məlumatlarını göndərmək üçün rəsmi müştəri istifadə olunur sonarqube-skaner, olan, parametrləri istifadə edərək config-fayl, bu məlumatları serverə göndərir soundQube gələcək konsolidasiya və birləşmə üçün.

Uğrunda Javascript yoxdur npm sarğı. Beləliklə, addım-addım həyata keçirməyə başlayaq soundQube в Vue- layihədən istifadə Yazı növü.

Server yerləşdirilməsi üçün soundQube istifadə edək docker-compose.

sonar.yaml:

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

Başla:

docker-compose -f sonar.yml up

Bundan sonra soundQube mövcud olacaq - http://localhost:9001 .

Hələlik orada heç bir layihə yoxdur və bu, ədalətlidir. Bu vəziyyəti düzəldəcəyik. Əsas olaraq rəsmi nümunə layihəsini götürdüm VueJS+TS+Jest. Özümüzə tərəf əyək:

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

Əvvəlcə müştərini quraşdırmalıyıq soundQube, adlanır sonar-skanerüçün npm sarğı var:

yarn add sonarqube-scanner

Və dərhal əmri əlavə edin scripts onunla işləmək.

package.json:

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

Bundan sonra, skanerin işləməsi üçün xüsusi bir faylda layihə parametrlərini təyin etməlisiniz. Əsaslardan başlayaq.

sonar-layihə.xassələr:

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 - ünvan Sonar'A;
sonar.projectKey – serverdə unikal layihə identifikatoru Sonar'A;
sonar.layihəAdı - adı, layihə tərəfindən müəyyən edildiyi üçün istənilən vaxt dəyişdirilə bilər layihə açarı;
sonar.mənbələr - mənbə qovluğu, adətən src, lakin hər şey ola bilər. Bu qovluq skanerin işə salındığı qovluq olan kök qovluğa nisbətəndir;
sonar.testlər - əvvəlki ilə qoşalaşmış parametr. Bu, testlərin yerləşdiyi qovluqdur. Bu layihədə belə bir qovluq yoxdur və test qovluğunda test edilən komponentin yanında yerləşir.sınaq', buna görə də indilik ona məhəl qoymayacağıq və növbəti parametrdən istifadə edəcəyik;
sonar.test.inclusions – maskadan istifadə edərək testlər üçün yol, vergüllə ayrılmış bir neçə element ola bilər;
sonar.sourceEncoding – mənbə faylları üçün kodlaşdırma.

Skanerin ilk işə salınması üçün əvvəlki əsas hərəkətdən başqa hər şey hazırdır: skanerin sonradan istifadə edəcəyi əhatə dairəsi haqqında məlumat yaratmaq üçün sınaq mühərrikinin özünü işə salmaq.

Ancaq bunun üçün bu məlumatı yaratmaq üçün test mühərrikini konfiqurasiya etməlisiniz. Bu layihədə sınaq mühərriki var var. Və onun parametrləri faylın müvafiq bölməsindədir paket.json.

Bu parametrləri əlavə edək:

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

Yəni, onun əsasında formalaşacağı əhatə dairəsini və mənbəyini (istisnalarla birlikdə) hesablamaq ehtiyacı üçün bayrağın özünü təyin edirik.

İndi testi keçirək:

yarn test

Aşağıdakıları görəcəyik:

Səbəb komponentin özündə kodun olmamasıdır. Gəlin bunu düzəldək.

HelloWorld.vue:

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

Bu əhatə dairəsini hesablamaq üçün kifayət edəcəkdir.

Testi yenidən başlatdıqdan sonra buna əmin olun:

Ekranda biz əhatə məlumatını görməliyik və layihə qovluğunda qovluq yaradılacaq əhatə universal formatda test əhatəsi məlumatı ilə LCOV (LTP GCOV uzadılması).

Gcov kodu əhatə araşdırması üçün sərbəst paylanmış yardım proqramıdır. Gcov proqramdakı hər bir ifadə üçün icraların dəqiq sayını yaradır və mənbə koduna annotasiyalar əlavə etməyə imkan verir. Gcov GCC paketində standart yardım proqramı kimi təqdim olunur.
Lcov - gcov üçün GUI. O, bir neçə mənbə faylı üçün gcov fayllarını toplayır və kod və əhatə məlumatı olan bir sıra HTML səhifələri yaradır. Naviqasiyanı asanlaşdırmaq üçün səhifələr də yaradılır. Lcov xətt, funksiya, filial əhatəsini dəstəkləyir.

Testlər başa çatdıqdan sonra əhatə dairəsi məlumatı daxil olacaq əhatə dairəsi/lcov.info.
demək lazımdır Sonar'Haradan almaq olar. Beləliklə, onun konfiqurasiya faylına aşağıdakı sətirləri əlavə edək. Ancaq bir məqam var: layihələr çoxdilli, yəni qovluqda ola bilər src bir neçə proqramlaşdırma dilləri üçün mənbələr var və bu və ya digərinə aiddir və öz növbəsində müəyyən bir plaginin istifadəsi onun genişləndirilməsi ilə müəyyən edilir. Və əhatə dairəsi məlumatları müxtəlif proqramlaşdırma dilləri üçün müxtəlif yerlərdə saxlanıla bilər, buna görə də hər bir PL-nin bunu konfiqurasiya etmək üçün öz bölməsi var. Layihəmiz istifadə edir Yazı növü, ona görə də bunun üçün parametrlər bölməsinə ehtiyacımız var:

sonar-layihə.xassələr:

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

Skanerin ilk buraxılışı üçün hər şey hazırdır. Layihə olduğunu qeyd etmək istərdim Sonar'e, müəyyən bir layihə üçün skaneri ilk dəfə işə saldığınız zaman avtomatik olaraq yaradılır. Sonrakı dövrlərdə zamanla layihə parametrlərindəki dəyişikliklərin dinamikasını görmək üçün məlumatlar artıq toplanacaq.

Beləliklə, əvvəllər yaradılmış əmrdən istifadə edək paket.json:

yarn run sonar

Qeyd: variantından da istifadə edə bilərsiniz -X daha ətraflı giriş üçün.

Skaner ilk dəfə işə salınıbsa, ilk növbədə skanerin ikilisi endiriləcək. Bundan sonra işə başlayır və serveri skan etməyə başlayır Sonar'a quraşdırılmış plaginlər üçün, bununla da dəstəklənən PL-ləri hesablayır. O, həmçinin işləməsi üçün digər müxtəlif variantları da yükləyir: keyfiyyət profilləri, aktiv qaydalar, ölçülər anbarı, server qaydaları.

Qeyd: biz bu məqalə çərçivəsində onların üzərində ətraflı dayanmayacağıq, ancaq hər zaman rəsmi mənbələrə müraciət edə bilərsiniz.

Sonra, qovluğun təhlili başlayır src hamı üçün mənbə fayllarının mövcudluğu üçün (xüsusi biri açıq şəkildə göstərilməyibsə) dəstəklənən PL-lər, onların sonrakı indeksləşdirilməsi ilə.

Sonra bu məqalədə diqqət yetirmədiyimiz müxtəlif digər təhlillər var (məsələn, linting, kodun təkrarlanmasının aşkarlanması və s.).

Skanerin ən sonunda bütün toplanmış məlumatlar birləşdirilir, arxivləşdirilir və serverə göndərilir.

Bundan sonra, veb interfeysində nə baş verdiyini artıq görə bilərik:

Gördüyünüz kimi, bir şey çıxdı, hətta bir növ əhatə göstərir, amma bizimki ilə uyğun gəlmir var- hesabat.

Gəlin bunu anlayaq. Layihəyə daha ətraflı baxaq, əhatə dəyərinə klikləyin və fayllar haqqında ətraflı hesabata "düşün":

Burada əsas, araşdırılmış fayla əlavə olaraq görürük HelloWorld.vue, fayl da mövcuddur əsas.ts, bu da əhatə dairəsinin bütün mənzərəsini korlayır. Bəs necə oldu ki, biz onu əhatə dairəsinin hesablanmasından çıxardıq. Bəli, hər şey düzdü, amma səviyyədə idi var, lakin skaner onu indeksləşdirdi, ona görə də hesablamalarına daxil oldu.

Bunu düzəldək:

sonar-layihə.xassələr:

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

Mən bir aydınlıq gətirmək istərdim: bu parametrdə göstərilən qovluqlara əlavə olaraq, parametrdə sadalanan bütün qovluqlar da əlavə olunur. sonar.test.inclusions.

Skaneri işə saldıqdan sonra düzgün məlumatları görürük:

Gəlin növbəti birinə nəzər salaq - Keyfiyyətli profillər. Mən dəstəkdən danışdım SonarEyni anda bir neçə EP. Bizim gördüyümüz də məhz budur. Amma bilirik ki, bizim layihəmiz yazılıb TS, bəs niyə skaneri lazımsız manipulyasiyalar və yoxlamalarla gərginləşdirin. Konfiqurasiya faylına daha bir parametr əlavə etməklə təhlil üçün dili təyin edəcəyik Sonar'A:

sonar-layihə.xassələr:

...
sonar.language=ts
...

Skaneri yenidən işə salın və nəticəyə baxın:

Qapaq tamamilə yox olub.

Skaner jurnalına baxsaq, aşağıdakı sətri görə bilərik:

Yəni, bizim layihəmizin faylları sadəcə olaraq indeksləşdirilməyib.

Vəziyyət belədir: rəsmi dəstək vue js plagindədir SonarJSkim cavabdehdir Javascript.

Lakin bu dəstək plagində yoxdur SonarTS uğrunda TS, bu barədə səhv izləyicisində rəsmi bilet açıldı Sonar'A:

SonarQube tərtibatçılarının nümayəndələrindən birinin bu faktı təsdiqləyən bəzi cavabları.

Amma hər şey bizim xeyrimizə oldu, etiraz edirsən. Bəli, gəlin bir az cəhd edək "hack".
Dəstək olarsa .vue-fayllar Sonar'Oh, onda gəlin ona deməyə çalışaq ki, onlarla belə davransın Yazı növü.

Parametr əlavə edək:

sonar-layihə.xassələr:

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

Skaneri işə salaq:

Və, voila, hər şey normala qayıdır və yalnız bir profillə Yazı növü. Yəni dəstəkdə problemi həll edə bildik VueJs+TS uğrunda soundQube.

Gəlin daha da irəli getməyə və əhatə məlumatını bir az təkmilləşdirməyə çalışaq.

İndiyə qədər nə etdik:

layihəyə əlavə edildi Sonar- skaner;
qurmaq var əhatə dairəsi haqqında məlumat yaratmaq;
konfiqurasiya edilmişdir Sonar- skaner;
dəstək problemini həll etdi .vue-fayllar + Yazı növü.

Test əhatəsinə əlavə olaraq, kodun təkrarlanması və layihənin sətirlərin sayı (kod mürəkkəbliyi ilə bağlı əmsalların hesablanmasında iştirak edən) kimi digər maraqlı faydalı kod keyfiyyət meyarları da mövcuddur.

Ilə işləmək üçün plugin cari həyata keçirilməsində TS (SonarTS) işləməyəcək CPD (Copy Paste Detector) və kod sətirlərini sayın .vue-fayllar.

Kodun təkrarlanması üçün sintetik situasiya yaratmaq üçün sadəcə komponent faylını başqa adla dublikat edin, həmçinin koda əlavə edin əsas.ts dummy funksiyası və onu başqa bir adla dublikat edin. Əvvəlki kimi təkrarlamanı yoxlamaq üçün .vue, və .ts -fayllar.

main.ts:

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

Bunu etmək üçün müvəqqəti olaraq konfiqurasiya xəttini şərh edin:

sonar-layihə.xassələr:

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

Testlə birlikdə skaneri yenidən başladın:

yarn test && yarn run sonar

Təbii ki, əhatə dairəmiz azalacaq, amma indi bizi maraqlandırmır.

Kod sətirlərinin təkrarlanması kontekstində biz aşağıdakıları görəcəyik:

Yoxlamaq üçün istifadə edirik CPD-kommunal - jscpd:

npx jscpd src

Kod sətirləri üçün:

Bəlkə də bu, plaginlərin gələcək versiyalarında düzəldiləcək. SonarJS(TS). Qeyd etmək istəyirəm ki, onlar tədricən bu iki plaqini birinə birləşdirməyə başlayırlar SonarJSməncə doğrudur.

İndi mən əhatə məlumatının təkmilləşdirilməsi variantını nəzərdən keçirmək istərdim.

İndiyə qədər bütün layihə üçün və xüsusən də fayllar üçün test əhatəsini faizlə görə bilərik. Amma rəqəmlə bağlı məlumatla bu göstəricini genişləndirmək olar vahid- layihə üzrə testlər, eləcə də fayllar kontekstində.

Bunu edə biləcək bir kitabxana var var-formatına çevirmək üçün hesabat Sonar'A:
ümumi test məlumatları - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Bu kitabxananı layihənizdə quraşdırın:

yarn add jest-sonar-reporter

Və onu konfiqurasiyaya əlavə edin var:

package.json:

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

İndi testi keçirək:

yarn test

Bundan sonra layihənin kökündə bir fayl yaradılacaq test hesabatı.xml.

Onu konfiqurasiyada aktivləşdirin Sonar'A:

sonar-layihə.xassələr:

…
sonar.testExecutionReportPaths=test-report.xml
…

Və skaneri yenidən başladın:

yarn run sonar

İnterfeysdə nə dəyişdiyini görək Sonar'A:

Və heç nə dəyişməyib. Fakt budur ki, Sonar Jest hesabatında təsvir olunan faylları fayl hesab etmir vahid-testlər. Bu vəziyyəti düzəltmək üçün konfiqurasiya parametrindən istifadə edirik Sonar sonar.testlər, burada testlərlə qovluqları açıq şəkildə təyin edirik (hələ birimiz var):

sonar-layihə.xassələr:

…
sonar.tests=src/components/__tests__
…

Skaneri yenidən başladın:

yarn run sonar

İnterfeysdə nələrin dəyişdiyini görək:

İndi öz sayımızı gördük vahid-testlər və içəriyə klikləməklə uğursuz olduqdan sonra bu nömrənin layihə faylları arasında paylanmasını görə bilərik:

Nəticə

Beləliklə, biz davamlı təhlil üçün bir vasitə nəzərdən keçirdik soundQube. Biz ona yazılmış bir layihəni uğurla inteqrasiya etdik VueJs+TS. Bəzi uyğunluq problemləri düzəldildi. Testin əhatə dairəsi göstəricisinin məlumat məzmunu artırıldı. Bu yazıda kodun keyfiyyət meyarlarından yalnız birini (bəlkə də əsas meyarlardan birini) nəzərdən keçirdik, lakin soundQube təhlükəsizlik testi də daxil olmaqla digər keyfiyyət meyarlarını dəstəkləyir. Ancaq bu xüsusiyyətlərin hamısı tam olaraq mövcud deyil icma-versiyaları. Maraqlı və faydalı xüsusiyyətlərdən biri inteqrasiyalardır. soundQube GitLab və BitBucket kimi müxtəlif kod anbarı idarəetmə sistemləri ilə. Qarşısını almaq birləşdirmək (birləşdirmək) sorğusu'və əhatə dairəsi pisləşdikdə deponun əsas şöbəsinə. Amma bu tamam başqa hekayədir.

PS: Məqalədə kod şəklində təsvir olunan hər şey mövcuddur mənim çəngəlim.

Sorğuda yalnız qeydiyyatdan keçmiş istifadəçilər iştirak edə bilər. Daxil olunxahiş edirəm.

SonarQube platformasından istifadə edirsiniz:

26,3%Bəli 5
15,8%№3
15,8%Bu platforma haqqında eşitdim və istifadə etmək istəyirəm3
10,5%Bu platforma haqqında eşitdim və istifadə etmək istəmirəm2
0,0%Mən fərqli platformadan istifadə edirəm0
31,6%Onun haqqında ilk dəfə eşidirəm

19 istifadəçi səs verib. 3 istifadəçi bitərəf qalıb.

Mənbə: www.habr.com

SonarQube ilə VueJS+TS layihəsinin inteqrasiyası

Nəticə

SonarQube platformasından istifadə edirsiniz:

Добавить комментарий Cavab ləğv