Platformu çalışmalarımızda aktif olarak kullanıyoruz. SonarQube Kod kalitesini yüksek seviyede tutmak için. Yazılı projelerden birini entegre ederken VueJs+TypeScript, sorunlar ortaya çıktı. Bu nedenle bunları nasıl çözmeyi başardığımızı size daha detaylı anlatmak istiyorum.

Bu yazımızda yukarıda da yazdığım gibi SonarQube platformundan bahsedeceğiz. Küçük bir teori - ilk kez duyanlar için genel olarak ne olduğu:

SonarQube (önceki Sonar) sürekli denetim ve kod kalitesi ölçümü için açık kaynaklı bir platformdur.
MISRA C, MISRA C++, MITRE/CWE ve CERT Güvenli Kodlama Standartları programlama standartlarının kurallarına göre kod analizini ve hata tespitini destekler. Ayrıca OWASP Top 10 ve CWE/SANS Top 25 programlama hatası listelerindeki hataları da tanıyabilir.
Platformun çeşitli hazır araçlar kullanmasına rağmen SonarQube, sonuçları tek bir kontrol paneline indirgeyerek çalıştırma geçmişini tutar ve böylece geliştirme sırasında yazılım kalitesindeki genel değişiklik eğilimini görmenize olanak tanır.

Daha fazla ayrıntıyı şu adreste bulabilirsiniz: resmi sitesi

Çok sayıda programlama dili desteklenmektedir. Yukarıdaki bağlantıdaki bilgilere bakılırsa bunlar 25'ten fazla dildir. Belirli bir dili desteklemek için uygun eklentiyi yüklemelisiniz. Topluluk sürümü, çalışmak için bir eklenti içerir Javascript (typeсript dahil), ancak wiki tam tersini söylüyor. Arka Javascript eklenti cevapları SonarJS, Daktilo için SonarTS sırasıyla.

Resmi istemci kapsama bilgilerini göndermek için kullanılır sonarqube-tarayıcıayarları kullanarak yapılandırma-file, bu verileri sunucuya gönderir SonarQube daha fazla birleştirme ve birleştirme için.

için Javascript var npm sarmalayıcı. O halde adım adım uygulamaya başlayalım SonarQube в Görünüm-kullanarak proje daktilo ile yazılmış yazı.

Sunucuyu dağıtmak için SonarQube hadi yararlanalım liman işçisi-oluşturma.

sonar.yaml:

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

Başlatmak:

docker-compose -f sonar.yml up

Sonra SonarQube şu adreste mevcut olacak: http://localhost:9001 .

Henüz ortada bir proje yok ve bu adil. Bu durumu düzelteceğiz. Resmi örnek projeyi aldım VueJS+TS+Jest. Bunu kendimize doğru çevirelim:

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

İlk önce istemciyi kurmamız gerekiyor SonarQube, denilen sonar tarayıcıiçin npm bir ambalaj var:

yarn add sonarqube-scanner

Ve hemen komutu ekleyin scriptler onunla çalışmak.

paket.json:

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

Daha sonra tarayıcının çalışması için proje ayarlarını özel bir dosyada yapmanız gerekir. Temel bilgilerle başlayalım.

sonar-proje.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 - adres Sonar'A;
• sonar.projectKey – sunucudaki benzersiz proje tanımlayıcısı Sonar'A;
• sonar.projeAdı – adı, proje şu şekilde tanımlandığından istenildiği zaman değiştirilebilir: projeAnahtarı;
• sonar.kaynakları – kaynakları içeren klasör, genellikle bu src, ama herhangi bir şey olabilir. Bu klasör, tarayıcının başlatıldığı klasör olan kök klasöre göre ayarlanır;
• sonar testleri – öncekiyle paralel giden bir parametre. Bu, testlerin bulunduğu klasördür. Bu projede böyle bir klasör yoktur ve test, 'klasöründe test edilen bileşenin yanında bulunur'test', bu yüzden şimdilik bunu görmezden gelip bir sonraki parametreyi kullanacağız;
• sonar.test.inklüzyonları – maske kullanan testlerin yolu, virgülle ayrılmış olarak listelenen birkaç öğe olabilir;
• sonar.sourceKodlama – kaynak dosyalar için kodlama.

Tarayıcının ilk başlatılması için, önceki ana eylem dışında her şey hazırdır: tarayıcının daha sonra kullanacağı kapsam hakkında bilgi üretebilmesi için test motorunun kendisinin başlatılması.

Ancak bunu yapmak için test motorunu bu bilgiyi oluşturacak şekilde yapılandırmanız gerekir. Bu projede test motoru var. Ve ayarları dosyanın ilgili bölümündedir paket.json.

Bu ayarları ekleyelim:

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

Yani, kapsamı hesaplama ihtiyacına ve oluşturulacağı kaynağa (istisnalarla birlikte) göre bayrağın kendisini belirliyoruz.

Şimdi testi çalıştıralım:

yarn test

Aşağıdakileri göreceğiz:

Bunun nedeni bileşenin kendisinde kod bulunmamasıdır. Bunu düzeltelim.

MerhabaDünya.vue:

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

Bu kapsamı hesaplamak için yeterli olacaktır.

Testi yeniden başlattıktan sonra aşağıdakilerden emin olacağız:

Ekranda kapsamla ilgili bilgileri görmeliyiz ve proje klasöründe bir klasör oluşturulacaktır. kapsama evrensel formatta test kapsamı bilgileri ile LCOV (LTP GCOV uzantısı).

Gcov kod kapsamını incelemek için ücretsiz olarak dağıtılan bir yardımcı programdır. Gcov, bir programdaki her ifade için tam yürütme sayısını oluşturur ve kaynak koduna ek açıklamalar eklemenize olanak tanır. Gcov, GCC paketinin bir parçası olarak standart bir yardımcı program olarak gelir.
Lcov - gcov için grafiksel arayüz. Birden fazla kaynak dosya için gcov dosyalarını birleştirir ve kod ve kapsam bilgilerini içeren bir dizi HTML sayfası oluşturur. Sayfalar ayrıca gezinmeyi kolaylaştırmak için oluşturulur. Lcov dizelerin, işlevlerin ve dalların kapsamını destekler.

Testler tamamlandıktan sonra kapsam bilgileri şu adreste yer alacaktır: kapsama alanı/lcov.info.
Söylememiz gerekiyor Sonar'Nereden alabilirim? Bu nedenle konfigürasyon dosyasına aşağıdaki satırları ekleyelim. Ancak bir nokta var: projeler çok dilli olabilir, yani klasörde src çeşitli programlama dilleri için kaynak kodları ve bir veya diğerine bağlılık vardır ve buna göre bir veya başka bir eklentinin kullanımı, uzantısına göre belirlenir. Kapsama bilgileri farklı programlama dilleri için farklı yerlerde saklanabilir, böylece her dilin bunu ayarlamak için kendi bölümü vardır. Projemizin kullanım alanları daktilo ile yazılmış yazı, bu yüzden sadece bunun için bir ayarlar bölümüne ihtiyacımız var:

sonar-proje.properties:

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

Tarayıcının ilk başlatılması için her şey hazır. Projenin şu olduğunu belirtmek isterim. SonarBelirli bir proje için tarayıcıyı ilk çalıştırdığınızda 'e otomatik olarak oluşturulur. Daha sonraki zamanlarda, proje parametrelerinde zaman içinde meydana gelen değişikliklerin dinamiklerini görmek için bilgi toplanacaktır.

O halde daha önce oluşturduğumuz komutu kullanalım. paket.json:

yarn run sonar 

Not: parametresini de kullanabilirsiniz -X Daha ayrıntılı günlük kaydı için.

Tarayıcı ilk kez başlatıldıysa, önce tarayıcının ikili dosyası indirilecektir. Bundan sonra başlar ve sunucuyu taramaya başlar Sonar'a yüklü eklentiler için, böylece desteklenen dil hesaplanır. Çalışması için çeşitli diğer parametreler de yüklenmiştir: kalite profilleri, etkin kurallar, ölçüm deposu, sunucu kuralları.

Not: Bu yazı çerçevesinde bunlar üzerinde detaylı olarak durmayacağız ancak her zaman resmi kaynaklarla iletişime geçebilirsiniz.

Daha sonra klasör analizi başlar src Desteklenen tüm diller için (belirli bir tane açıkça belirtilmemişse) kaynak dosyalarının daha sonraki indekslemeleriyle birlikte kullanılabilirliği için.

Daha sonra bu yazıda odaklanmadığımız diğer çeşitli analizler geliyor (örneğin, astarlama, kod çoğaltmasının tespiti vb.).

Tarayıcının çalışmasının en sonunda toplanan tüm bilgiler toplanır, arşivlenir ve sunucuya gönderilir.

Bundan sonra web arayüzünde ne olduğunu zaten görebiliriz:

Gördüğümüz gibi, bir şey işe yaradı ve hatta bir tür kapsam gösteriyor, ancak bu bizimkiyle eşleşmiyor var-rapor.

Hadi çözelim. Projeye daha detaylı bakalım, kapsam değerine tıklayın ve ayrıntılı bir dosya raporuna "geçin":

Burada incelenen ana dosyaya ek olarak görüyoruz MerhabaDünya.vuebir de dosya var ana.ts, bu da kapsamın bütün resmini bozuyor. Ama nasıl oldu da bunu teminat hesaplamasının dışında bıraktık? Evet, her şey doğru ama aynı seviyedeydi var, ancak tarayıcı onu dizine ekledi, dolayısıyla hesaplamalarında sona erdi.

Bunu düzeltelim:

sonar-proje.properties:

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

Bir açıklama yapmak isterim: Bu parametrede belirtilen klasörlere ek olarak parametrede listelenen tüm klasörler de eklenir. sonar.test.inklüzyonları.

Tarayıcıyı başlattıktan sonra doğru bilgileri görüyoruz:

Bir sonraki noktaya bakalım - Kalite profilleri. Yukarıda destekten bahsetmiştim. Sonar'Aynı anda birkaç dilde. Bu tam olarak gördüğümüz şey. Ancak projemizin şu şekilde yazıldığını biliyoruz: TSöyleyse neden gereksiz manipülasyonlar ve kontrollerle tarayıcıyı zorlayasınız ki? Yapılandırma dosyasına bir parametre daha ekleyerek analiz dilini ayarlayacağız Sonar'A:

sonar-proje.properties:

...
sonar.language=ts
...

Tarayıcıyı tekrar çalıştıralım ve sonucu görelim:

Kapsama tamamen kaybolmuştu.

Tarayıcı günlüğüne bakarsak aşağıdaki satırı görebiliriz:

Yani proje dosyalarımız indekslenmedi.

Durum şu: resmi olarak destekleniyor VueJ'ler eklentide var SonarJSkim sorumludur Javascript.

Ancak bu destek eklentide yok SonarTS için TSHata izleyicide resmi bir bildirimin açıldığı Sonar'A:

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

İşte SonarQube geliştiricilerinin temsilcilerinden birinin bu gerçeği doğrulayan bazı yanıtları.

Ama her şey işimize yaradı, itiraz ediyorsunuz. Evet öyle, hadi biraz deneyelim "hile".
Destek varsa .vue-Dosyalar Sonar'oh, o zaman ona bunları şöyle düşünmesini söylemeye çalışalım daktilo ile yazılmış yazı.

Bir parametre ekleyelim:

sonar-proje.properties:

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

Tarayıcıyı başlatalım:

Ve işte, her şey normale döndü ve yalnızca tek bir profille daktilo ile yazılmış yazı. Yani sorunu destekte çözmeyi başardık VueJ'ler+TS için SonarQube.

Daha ileri giderek kapsam bilgilerini biraz iyileştirmeye çalışalım.

Şu ana kadar yaptıklarımız:

• projeye eklendi Sonar-tarayıcı;
• kurmak var kapsam bilgisi oluşturmak;
• yapılandırılmış Sonar-tarayıcı;
• destek sorununu çözdüm .vue-dosyalar + daktilo ile yazılmış yazı.

Test kapsamına ek olarak, kod kalitesi için başka ilginç yararlı kriterler de vardır; örneğin kod çoğaltma ve projenin satır sayısı (kod karmaşıklığıyla ilgili katsayıların hesaplanmasında yer alan).

Çalışmak için eklentinin mevcut uygulamasında TS (SonarTS) çalışmayacak CPD (Kopyala Yapıştır Dedektörü) ve kod satırlarını saymak .vue-Dosyalar.

Sentetik bir kod çoğaltma durumu oluşturmak için, bileşen dosyasını farklı bir adla çoğaltmanız ve onu da koda eklemeniz yeterlidir. ana.ts sahte bir işlev ve onu farklı bir adla çoğaltın. Aşağıdaki gibi çoğaltmayı kontrol etmek için .vueve ts -Dosyalar.

ana.ts:

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

Bunu yapmak için yapılandırma satırını geçici olarak açıklamanız gerekir:

sonar-proje.properties:

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

Testle birlikte tarayıcıyı yeniden başlatalım:

yarn test && yarn run sonar

Tabii ki kapsama alanımız düşecek ama şu anda bununla ilgilenmiyoruz.

Kod satırlarının kopyalanması açısından şunu göreceğiz:

Kontrol etmek için kullanacağız CPD-Yarar - jscpd:

npx jscpd src

Kod satırları için:

Belki bu durum gelecekteki eklenti sürümlerinde çözülecektir SonarJS(TS). Yavaş yavaş bu iki eklentiyi tek bir eklentide birleştirmeye başladıklarını belirtmek isterim. SonarJSki bence doğru.

Şimdi kapsam bilgilerini iyileştirme seçeneğini değerlendirmek istedim.

Şu ana kadar tüm proje ve özellikle dosyalar için test kapsamını yüzde cinsinden görebiliyoruz. Ancak bu göstergeyi miktara ilişkin bilgilerle genişletmek mümkündür. birim-Proje için ve dosyalar bağlamında testler.

Bunu yapabilecek bir kütüphane var var-raporu formata dönüştürün Sonar'A:
genel test verileri - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Bu kütüphaneyi projemize yükleyelim:

yarn add jest-sonar-reporter

Ve bunu konfigürasyona ekleyin var:

paket.json:

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

Şimdi testi çalıştıralım:

yarn test

Bundan sonra projenin kökünde bir dosya oluşturulacak test-raporu.xml.

Yapılandırmada kullanalım Sonar'A:

sonar-proje.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Ve tarayıcıyı yeniden başlatın:

yarn run sonar

Bakalım arayüzde neler değişti Sonar'A:

Ve hiçbir şey değişmedi. Gerçek şu ki Sonar, Jest raporunda açıklanan dosyaları dosya olarak görmüyor birim-testler. Bu durumu düzeltmek için konfigürasyon parametresini kullanıyoruz. Sonar sonar testleri, burada testlerin bulunduğu klasörleri açıkça belirteceğiz (şimdilik yalnızca bir tane var):

sonar-proje.properties:

…
sonar.tests=src/components/__tests__
…

Tarayıcıyı yeniden başlatalım:

yarn run sonar

Arayüzde nelerin değiştiğini görelim:

Artık sayımızı gördük. birim-testler ve içeriye tıklayarak başarısız olduktan sonra bu sayının proje dosyaları arasındaki dağılımını görebiliriz:

Sonuç

Bu nedenle sürekli analiz için bir araca baktık SonarQube. İçinde yazılmış bir projeyi başarıyla entegre ettik. VueJ'ler+TS. Bazı uyumluluk sorunları düzeltildi. Test kapsamı göstergesinin bilgi içeriğini artırdık. Bu makalede kod kalitesi kriterlerinden yalnızca birini (belki de ana kriterlerden birini) inceledik, ancak SonarQube Güvenlik testleri de dahil olmak üzere diğer kalite kriterlerini destekler. Ancak bu özelliklerin tümü tam olarak mevcut değildir. topluluk-versiyonlar. İlginç ve kullanışlı özelliklerden biri entegrasyondur SonarQube GitLab ve BitBucket gibi çeşitli kod deposu yönetim sistemleriyle. Önlemek birleştirme çekme(birleştirme) isteği'a kapsamı bozulduğunda havuzun ana şubesine. Ancak bu tamamen farklı bir makalenin hikayesi.

Not: Makalede anlatılan her şey kod biçiminde mevcuttur benim çatalım.

Ankete sadece kayıtlı kullanıcılar katılabilir. Giriş yapLütfen.

SonarQube platformunu kullanıyor musunuz:

• %26,3Evet5

• %15,8hayır3

• %15,8Bu platformu duydum ve kullanmak istiyorum3

• %10,5Bu platformu duydum ve kullanmak istemiyorum2

• %0,0Farklı bir platform kullanıyorum0

• %31,6Adını ilk kez duydum6

19 kullanıcı oy kullandı. 3 kullanıcı çekimser kaldı.

Kaynak: habr.com