Wy brûke it platfoarm aktyf yn ús wurk soundQube om koade kwaliteit op in heech nivo te behâlden. By it yntegrearjen fan ien fan 'e projekten skreaun yn VueJs+Typeskript, problemen ûntstienen. Dêrom, ik soe graach fertelle jo yn mear detail hoe't wy slagge om te lossen se.

Yn dit artikel sille wy prate, lykas ik hjirboppe skreau, oer it SonarQube-platfoarm. In lytse teory - wat is it yn 't algemien, foar dyjingen dy't der foar it earst oer hearre:

soundQube (earder Sonar) is in iepen boarne platfoarm foar trochgeande ynspeksje en mjitting fan koadekwaliteit.
Unterstützt koade-analyze en flaterdeteksje neffens de regels fan 'e MISRA C, MISRA C ++, MITER / CWE en CERT Secure Coding Standards programmearring noarmen. It kin ek flaters werkenne út 'e OWASP Top 10 en CWE / SANS Top 25 programmearring flaters listen.
Nettsjinsteande it feit dat it platfoarm ferskate ready-made ark brûkt, ferleget SonarQube de resultaten nei ien dashboard, hâldt in skiednis fan runs en dêrmei kinne jo de algemiene trend sjen fan feroaringen yn softwarekwaliteit tidens ûntwikkeling.

Mear details kinne fûn wurde op offisjele webside

In grut oantal programmeartalen wurde stipe. Te oardieljen nei de ynformaasje fan de boppesteande keppeling, dit binne mear dan 25 talen. Om in spesifike taal te stypjen, moatte jo de passende plugin ynstallearje. De mienskipferzje befettet in plugin om mei te wurkjen Javascript (ynklusyf typesсript), hoewol't de wiki it tsjinoerstelde seit. Efter Javascript plugin antwurden SonarJS, foar Typescript SonarTS respektivelik.

De offisjele kliïnt wurdt brûkt om dekkingynformaasje te stjoeren sonarqube-scanner, dy't, mei help fan de ynstellings út config-bestân, stjoert dizze gegevens nei de tsjinner soundQube foar fierdere konsolidaasje en aggregaasje.

foar Javascript is npm wrapper. Dat, lit ús stap-foar-stap ymplemintaasje begjinne soundQube в vue-projekt mei help Typoskript.

Om de tsjinner yn te setten soundQube lit ús profitearje docker-komponearje.

sonar.yaml:

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

Launch:

docker-compose -f sonar.yml up

Nei dit soundQube sil beskikber wêze op: http://localhost:9001 .

Der sitte noch gjin projekten yn en dat is goed. Wy sille dizze situaasje korrigearje. Ik naam it offisjele foarbyldprojekt foar VueJS+TS+Jest. Litte wy it nei ússels bûge:

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

Earst moatte wy de kliïnt ynstallearje soundQube, dat hjit sonar-scannerfoar npm der is in omslach:

yarn add sonarqube-scanner

En foegje fuortendaliks it kommando ta skripts om der mei te wurkjen.

package.json:

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

Folgjende, om de scanner te wurkjen, moatte jo de projektynstellingen yn in spesjale triem ynstelle. Litte wy begjinne mei de basis.

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 - adres Sonar'IN;
sonar.projectKey - unike projektidentifikaasje op 'e tsjinner Sonar'IN;
sonar.projectName - syn namme, it kin wurde feroare op elk momint, sûnt it projekt wurdt identifisearre troch projektKey;
sonar.sources - map mei boarnen, meastal dit src, mar kin alles wêze. Dizze map is ynsteld relatyf oan de root map, dat is de map wêrút de scanner wurdt lansearre;
sonar.tests - in parameter dy't yn tandem giet mei de foarige. Dit is de map wêr't de tests lizze. Yn dit projekt is d'r gjin sa'n map, en de test leit neist it komponint dat wurdt hifke yn 'e map 'toets', dus wy sille it no negearje en de folgjende parameter brûke;
sonar.test.inclusions - paad foar tests mei in masker, d'r kinne ferskate eleminten wurde neamd skieden troch komma's;
sonar.sourceEncoding - kodearring foar boarnebestannen.

Foar de earste lansearring fan 'e scanner is alles klear, útsein de wichtichste foarôfgeande aksje: it starten fan de testmotor sels, sadat dizze ynformaasje generearje kin oer de dekking, dy't de scanner dêrnei sil brûke.

Mar om dit te dwaan, moatte jo de testmotor konfigurearje om dizze ynformaasje te generearjen. Yn dit projekt is de testmotor Gebeart. En har ynstellingen binne yn 'e oerienkommende seksje fan' e triem pakket.json.

Litte wy dizze ynstellings tafoegje:

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

Dat is, wy sette de flagge sels foar de needsaak om te berekkenjen dekking en de boarne (tegearre mei útsûnderingen) op basis wêrfan it sil wurde foarme.

Litte wy no de test útfiere:

yarn test

Wy sille it folgjende sjen:

De reden is dat d'r gjin koade is yn 'e komponint sels. Litte wy dit reparearje.

HelloWorld.vue:

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

Dit sil genôch wêze om de dekking te berekkenjen.

Nei it opnij begjinnen fan de test sille wy der wis fan wêze:

Op it skerm moatte wy ynformaasje oer de dekking sjen, en in map sil wurde makke yn 'e projektmap dekking mei ynformaasje oer testdekking yn in universele opmaak LCOV (LTP GCOV tafoeging).

Gcov is in frij ferdield nut foar it ûndersykjen fan koadedekking. Gcov genereart it krekte oantal útfieringen foar elke ferklearring yn in programma en lit jo annotaasjes tafoegje oan 'e boarnekoade. Gcov komt as in standert hulpprogramma as ûnderdiel fan it GCC-pakket.
Lcov - grafyske ynterface foar gcov. It sammelet gcov-bestannen foar meardere boarnebestannen en produseart in set HTML-siden mei koade- en dekkingynformaasje. Siden wurde ek oanmakke om de navigaasje makliker te meitsjen. Lcov stipet dekking fan snaren, funksjes en tûken.

Nei't de tests binne foltôge, sil dekkingynformaasje wurde pleatst yn coverage/lcov.info.
Wy moatte sizze Sonar‘Wêr kin ik it weihelje? Litte wy dêrom de folgjende rigels tafoegje oan syn konfiguraasjetriem. Mar der is ien punt: projekten kinne meartalich wêze, dat wol sizze yn de folder src d'r binne boarnekoades foar ferskate programmeartalen en oansluting by ien of oare, en op syn beurt wurdt it gebrûk fan ien of oare plugin bepaald troch syn útwreiding. En dekkingynformaasje kin op ferskate plakken opslein wurde foar ferskate programmeartalen, sadat elke taal syn eigen seksje hat foar it ynstellen fan dit. Us projekt brûkt Typoskript, dus wy hawwe in ynstellingsdiel gewoan foar it nedich:

sonar-project.properties:

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

Alles is klear foar de earste lansearring fan 'e scanner. Ik soe graach opmerke dat it projekt is Sonar'e wurdt automatysk oanmakke de earste kear dat jo de scanner útfiere foar in opjûn projekt. Yn folgjende tiden sil ynformaasje wurde sammele om de dynamyk fan feroaringen yn projektparameters oer de tiid te sjen.

Dat, lit ús it kommando brûke dat earder makke is pakket.json:

yarn run sonar

Tink derom: jo kinne ek de parameter brûke -X foar mear detaillearre logging.

As de scanner foar de earste kear is lansearre, dan sil it binêr fan 'e scanner sels earst wurde ynladen. Dêrnei begjint it en begjint it scannen fan de tsjinner Sonar'a foar ynstallearre plugins, dêrmei berekkene stipe taal. Ferskate oare parameters foar syn wurking wurde ek laden: kwaliteitsprofilen, aktive regels, metric repository, serverregels.

Tink derom: Wy sille net yn detail oer har yn it ramt fan dit artikel wenje, mar jo kinne altyd kontakt opnimme mei offisjele boarnen.

Dêrnei begjint de mapanalyse src foar de beskikberens fan boarnebestannen foar alle (as in spesifyk net spesifyk oantsjutte is) stipe taal, mei har folgjende yndeksearring.

Dêrnei komme ferskate oare analyzes, dêr't wy yn dit artikel net op rjochtsje (bygelyks linting, detectie fan koadeduplikaasje, ensfh.).

Oan 'e ein fan it wurk fan' e scanner wurdt alle sammele ynformaasje aggregearre, argivearre en stjoerd nei de tsjinner.

Hjirnei kinne wy al sjen wat der bard is yn 'e webynterface:

Sa't wy sjen kinne, wurke wat, en toant sels in soarte fan dekking, mar it komt net oerien mei ús Gebeart-melde.

Litte wy it útfine. Litte wy it projekt yn mear detail besjen, klikje op 'e dekkingswearde en "falle troch" yn in detaillearre bestânrapport:

Hjir sjogge wy, neist it haad, ûndersochte bestân HelloWorld.vue, der is ek in triem main.ts, dy't it hiele byld fan 'e dekking bedjert. Mar hoe komt it dat wy it útsletten hawwe fan 'e berekkening fan dekking. Ja, alles is korrekt, mar it wie op it nivo Gebeart, mar de scanner hat it yndeksearre, sadat it yn syn berekkeningen einige.

Litte wy dit reparearje:

sonar-project.properties:

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

Ik wol in opheldering meitsje: neist de mappen dy't yn dizze parameter oantsjutte binne, wurde ek alle mappen yn 'e parameter tafoege sonar.test.inclusions.

Nei it lansearjen fan de scanner sjogge wy de juste ynformaasje:

Litte wy nei it folgjende punt sjen - Kwaliteit profilen. Ik hie it hjirboppe oer stipe Sonar'om ferskate talen tagelyk. Dit is krekt wat wy sjogge. Mar wy witte dat ús projekt ynskreaun is TS, dus wêrom spanne de scanner mei ûnnedige manipulaasjes en kontrôles. Wy sille de taal foar analyse ynstelle troch noch ien parameter ta te foegjen oan it konfiguraasjetriem Sonar'IN:

sonar-project.properties:

...
sonar.language=ts
...

Litte wy de scanner nochris útfiere en it resultaat sjen:

De dekking wie hielendal fuort.

As wy nei it scannerlog sjogge, kinne wy de folgjende rigel sjen:

Dat is, ús projektbestannen binne gewoan net yndeksearre.

De situaasje is as folget: offisjeel stipe VueJs is yn 'e plugin SonarJSwa is ferantwurdlik foar Javascript.

Mar dizze stipe is net yn 'e plugin SonarTS foar TS, dêr't in offisjele kaartsje oer iepene waard yn 'e bug tracker Sonar'IN:

Hjir binne wat antwurden fan ien fan 'e fertsjintwurdigers fan' e SonarQube-ûntwikkelders, dy't dit feit befêstigje.

Mar alles wurke foar ús, do beswier. Ja it is, litte wy it in bytsje besykje "hack".
As der stipe is .vue-bestannen Sonar'Och, lit ús dan besykje him te sizzen dat se har as beskôgje Typoskript.

Litte wy in parameter tafoegje:

sonar-project.properties:

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

Litte wy de scanner starte:

En, voila, alles is werom nei normaal, en mei ien profyl allinnich foar Typoskript. Dat is, wy slagge it probleem op te lossen yn stipe VueJs+TS foar soundQube.

Litte wy besykje fierder te gean en de dekkingsynformaasje in bytsje te ferbetterjen.

Wat wy oant no ta dien hawwe:

tafoege oan it projekt Sonar- scanner;
opsette Gebeart om dekkingynformaasje te generearjen;
ynsteld Sonar- scanner;
it stipeprobleem oplost .vue-bestannen + Typoskript.

Neist test dekking, der binne oare nijsgjirrige nuttige kritearia foar koade kwaliteit, Bygelyks, koade duplication en it oantal rigels (belutsen by de berekkening fan koeffizienten yn ferbân mei koade kompleksiteit) fan it projekt.

Yn de hjoeddeiske útfiering fan de plugin foar wurkjen mei TS (SonarTS) sil net wurkje CPD (Copy Paste Detector) en telle rigels fan koade .vue-bestannen.

Om in syntetyske situaasje te meitsjen fan koadeduplikaasje, duplizearje gewoan it komponintbestân mei in oare namme en foegje it ek ta oan 'e koade main.ts in dummyfunksje en duplikearje it mei in oare namme. Om te kontrolearjen op duplikaasje lykas yn .vueen yn .ts -bestannen.

main.ts:

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

Om dit te dwaan, moatte jo de konfiguraasjerigel tydlik kommentaar jaan:

sonar-project.properties:

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

Litte wy de scanner opnij starte tegearre mei testen:

yarn test && yarn run sonar

Fansels sil ús dekking falle, mar no binne wy dêr net yn ynteressearre.

Yn termen fan it duplikearjen fan rigels fan koade, sille wy sjen:

Om te kontrolearjen sille wy brûke CPD- utility - jscpd:

npx jscpd src

Foar rigels fan koade:

Miskien sil dit wurde oplost yn takomstige plugin-ferzjes SonarJS(TS). Ik soe graach opmerke dat se stadichoan begjinne te fusearjen dizze twa plugins yn ien SonarJS, wat ik tink is korrekt.

No woe ik de opsje beskôgje om dekkingynformaasje te ferbetterjen.

Oant no kinne wy testdekking sjen yn persintaazje termen foar it heule projekt, en foar bestannen yn it bysûnder. Mar it is mooglik om dizze yndikator út te wreidzjen mei ynformaasje oer de kwantiteit ienheid-tests foar it projekt, lykas yn 'e kontekst fan bestannen.

Der is in biblioteek dy't kin Gebeart-konvertearje it rapport yn formaat foar Sonar'IN:
generyske testgegevens - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Litte wy dizze bibleteek yn ús projekt ynstallearje:

yarn add jest-sonar-reporter

En foegje it ta oan de konfiguraasje Gebeart:

package.json:

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

Litte wy no de test útfiere:

yarn test

Dêrnei sil in bestân makke wurde yn 'e root fan it projekt test-report.xml.

Litte wy it brûke yn 'e konfiguraasje Sonar'IN:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

En start de scanner opnij:

yarn run sonar

Litte wy sjen wat is feroare yn 'e ynterface Sonar'IN:

En neat is feroare. It feit is dat Sonar de bestannen beskreaun yn it Jest-rapport net as bestannen beskôget ienheid-tests. Om dizze situaasje te korrigearjen, brûke wy de konfiguraasjeparameter Sonar sonar.tests, wêryn wy de mappen mei tests eksplisyt oanjaan (wy hawwe foarearst mar ien):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Litte wy de scanner opnij starte:

yarn run sonar

Litte wy sjen wat is feroare yn 'e ynterface:

No hawwe wy sjoen it oantal fan ús ienheid-tests en, nei't mislearre troch binnen te klikken, kinne wy de ferdieling fan dit nûmer sjen ûnder de projektbestannen:

konklúzje

Dat, wy seagen nei in ark foar trochgeande analyse soundQube. Wy hawwe mei súkses yntegrearre yn it in projekt skreaun yn VueJs+TS. Guon kompatibiliteitsproblemen reparearre. Wy hawwe de ynformaasjeynhâld fan 'e yndikator foar testdekking ferhege. Yn dit artikel wy ûndersocht mar ien fan de koade kwaliteit kritearia (miskien ien fan de wichtichste), mar soundQube stipet oare kwaliteit kritearia, ynklusyf feiligens testen. Mar net al dizze funksjes binne folslein beskikber yn mienskip-ferzjes. Ien fan 'e nijsgjirrige en nuttige funksjes is yntegraasje soundQube mei ferskate koade repository behear systemen, lykas GitLab en BitBucket. Foarkomme gearfoegje pull (fusearje) fersyk'a nei de haadtûke fan 'e repository as de dekking wurdt degradearre. Mar dit is in ferhaal foar in folslein oar artikel.

PS: Alles beskreaun yn it artikel yn 'e foarm fan koade is beskikber yn myn fork.

Allinnich registrearre brûkers kinne meidwaan oan 'e enkête. Ynlogge, asjebleaft.

Brûk jo it SonarQube-platfoarm:

26,3%Ja5
15,8%nr3
15,8%Ik hearde oer dit platfoarm en wol 3 brûke
10,5%Ik haw heard oer dit platfoarm en wol net brûke 2
0,0%Ik brûk in oar platfoarm0
31,6%De earste kear dat ik oer har hearde6

19 brûkers stimden. 3 brûkers ûntholden har.

Boarne: www.habr.com

VueJS + TS projekt yntegraasje mei SonarQube

konklúzje

Brûk jo it SonarQube-platfoarm:

Add a comment cancel reply