Käytämme alustaa aktiivisesti työssämme soundQube ylläpitää koodin laatua korkealla tasolla. Integroitaessa jotakin sisäänkirjoitetuista projekteista VueJs+Typescript, ongelmia tuli. Siksi haluaisin kertoa sinulle yksityiskohtaisemmin, kuinka onnistuimme ratkaisemaan ne.

Tässä artikkelissa puhumme, kuten kirjoitin yllä, SonarQube-alustasta. Pieni teoria - mitä se yleensä on, niille, jotka kuulevat siitä ensimmäistä kertaa:

soundQube (entinen Sonar) on avoimen lähdekoodin alusta jatkuvaan tarkastukseen ja koodin laadun mittaamiseen.
Tukee koodianalyysiä ja virheiden havaitsemista MISRA C-, MISRA C++-, MITER/CWE- ja CERT Secure Coding Standards -ohjelmointistandardien sääntöjen mukaisesti. Se voi myös tunnistaa virheet OWASP Top 10 - ja CWE/SANS Top 25 -ohjelmointivirheluetteloista.
Huolimatta siitä, että alusta käyttää erilaisia ​​valmiita työkaluja, SonarQube vähentää tulokset yhdeksi kojelautaksi, säilyttää ajohistorian ja mahdollistaa siten ohjelmiston laadun muutosten yleisen kehitystrendin kehityksen aikana.

Lisätietoja löytyy osoitteesta virallisilla verkkosivuilla

Suuri määrä ohjelmointikieliä on tuettu. Yllä olevan linkin tietojen perusteella nämä ovat yli 25 kieltä. Tietyn kielen tukemiseksi sinun on asennettava asianmukainen laajennus. Yhteisöversio sisältää laajennuksen työskentelyä varten Javascript (mukaan lukien typeсript), vaikka wiki sanoo päinvastaista. Takana Javascript plugin vastauksia SonarJS, Typescriptille SonarTS vastaavasti.

Virallista asiakasta käytetään kattavuustietojen lähettämiseen sonarqube-skanneri, joka käyttämällä asetuksia kohteesta config-tiedosto, lähettää nämä tiedot palvelimelle soundQube edelleen konsolidointia ja yhdistämistä varten.

varten Javascript on npm kääre. Joten aloitetaan askel askeleelta toteutus soundQube в Näkymä-projektin käyttö konekirjoitusteksti.

Palvelimen käyttöönotto soundQube hyödynnetään docker-compose.

sonar.yaml:

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

Tuoda markkinoille:

docker-compose -f sonar.yml up

Sen jälkeen soundQube on saatavilla osoitteessa: http://localhost:9001 .

Siinä ei ole vielä projekteja ja se on reilua. Korjaamme tämän tilanteen. Otin virallisen esimerkkiprojektin VueJS+TS+Jest. Taivutetaan se itseämme kohti:

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

Ensin meidän on asennettava asiakas soundQubejota kutsutaan kaikuluotain-skannerivarten NPM siellä on kääre:

yarn add sonarqube-scanner

Ja lisää heti komento skriptejä työskennellä sen kanssa.

package.json:

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

Seuraavaksi, jotta skanneri toimisi, sinun on asetettava projektiasetukset erityiseen tiedostoon. Aloitetaan perusasioista.

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 -osoite Sonar"A;
• sonar.projectKey – yksilöllinen projektitunniste palvelimella Sonar"A;
• sonar.projectName – sen nimi, se voidaan muuttaa milloin tahansa, koska projektin tunnistaa projectKey;
• sonar.sources – kansio lähteillä, yleensä tämä src, mutta se voi olla mitä tahansa. Tämä kansio on asetettu suhteessa juurikansioon, joka on kansio, josta skanneri käynnistetään.
• kaikuluotain.testit – parametri, joka menee rinnakkain edellisen kanssa. Tämä on kansio, jossa testit sijaitsevat. Tässä projektissa ei ole tällaista kansiota, ja testi sijaitsee testattavan komponentin vieressä kansiossa 'testi', joten jätämme sen huomiotta toistaiseksi ja käytämme seuraavaa parametria;
• sonar.test.inclusions – maskia käyttävien testien polku, luettelossa voi olla useita pilkuilla erotettuja elementtejä;
• sonar.sourceEncoding – koodaus lähdetiedostoille.

Skannerin ensimmäistä käynnistystä varten kaikki on valmis, paitsi pääasiallinen edeltävä toimenpide: itse testimoottorin käynnistäminen, jotta se voi tuottaa tietoja kattavuudesta, jota skanneri käyttää myöhemmin.

Mutta tehdäksesi tämän, sinun on määritettävä testimoottori luomaan nämä tiedot. Tässä projektissa testimoottori on on. Ja sen asetukset ovat tiedoston vastaavassa osiossa package.json.

Lisätään nämä asetukset:

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

Eli asetamme itse lipun kattavuuden laskemistarpeelle ja lähteen (poikkeuksin), jonka perusteella se muodostetaan.

Suoritetaan nyt testi:

yarn test

Näemme seuraavat asiat:

Syynä on, että itse komponentissa ei ole koodia. Korjataan tämä.

HelloWorld.vue:

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

Tämä riittää kattavuuden laskemiseen.

Testin uudelleenkäynnistyksen jälkeen varmistamme tämän:

Näytöllä pitäisi nähdä tiedot kattavuudesta ja projektikansioon luodaan kansio kattavuus testin kattavuustiedot yleisessä muodossa LCOV (LTP GCOV -laajennus).

Gcov on vapaasti jaettu apuohjelma koodin kattavuuden tutkimiseen. Gcov luo tarkan suoritusmäärän kullekin ohjelman käskylle ja antaa sinun lisätä huomautuksia lähdekoodiin. Gcov on vakioapuohjelma osana GCC-pakettia.
Lcov - graafinen käyttöliittymä gcov:lle. Se kokoaa gcov-tiedostoja useille lähdetiedostoille ja tuottaa joukon HTML-sivuja, joissa on koodi- ja kattavuustiedot. Sivuja luodaan myös navigoinnin helpottamiseksi. Lcov tukee merkkijonojen, funktioiden ja haarojen peittoa.

Kun testit on suoritettu, kattavuustiedot sijaitsevat osoitteessa coverage/lcov.info.
Meidän täytyy sanoa Sonar'Mistä saan sen? Sen vuoksi lisätään seuraavat rivit sen asetustiedostoon. Mutta on yksi kohta: projektit voivat olla monikielisiä, eli kansiossa src on olemassa lähdekoodeja useille ohjelmointikielille ja sidoksille yhteen tai toiseen, ja vuorostaan ​​​​yhden tai toisen laajennuksen käyttö määräytyy sen laajennuksen mukaan. Ja peittotiedot voidaan tallentaa eri paikkoihin eri ohjelmointikielille, joten jokaisella kielellä on oma osio tämän määrittämistä varten. Projektimme käyttää konekirjoitusteksti, joten tarvitsemme asetusosion vain sitä varten:

sonar-project.properties:

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

Kaikki on valmiina skannerin ensimmäistä käynnistystä varten. Haluan huomauttaa, että hanke on Sonar'e luodaan automaattisesti, kun suoritat tietyn projektin skannerin ensimmäisen kerran. Seuraavina aikoina tietoja kerätään, jotta voidaan nähdä projektin parametrien muutosten dynamiikka ajan mittaan.

Joten, käytetään aiemmin luotua komentoa package.json:

yarn run sonar 

Huom: voit myös käyttää parametria -X tarkempaa kirjaamista varten.

Jos skanneri käynnistettiin ensimmäistä kertaa, itse skannerin binaari ladataan ensin. Sen jälkeen se alkaa ja alkaa skannaa palvelinta Sonar'a asennetuille laajennuksille, mikä laskee tuetun kielen. Myös useita muita sen toiminnan parametreja ladataan: laatuprofiilit, aktiiviset säännöt, mittaustietovarasto, palvelinsäännöt.

Huom: Emme käsittele niitä yksityiskohtaisesti tämän artikkelin puitteissa, mutta voit aina ottaa yhteyttä virallisiin lähteisiin.

Seuraavaksi kansioanalyysi alkaa src lähdetiedostojen saatavuudesta kaikille tuetuille kielille (jos tiettyä kieltä ei ole erikseen määritelty) ja niiden myöhempää indeksointia.

Seuraavaksi tulevat monet muut analyysit, joihin emme tässä artikkelissa keskity (esimerkiksi lintuminen, koodin päällekkäisyyden havaitseminen jne.).

Aivan skannerin työn lopussa kaikki kerätyt tiedot kootaan, arkistoidaan ja lähetetään palvelimelle.

Tämän jälkeen voimme jo nähdä mitä tapahtui verkkokäyttöliittymässä:

Kuten näemme, jokin toimi, ja jopa näyttää jonkinlaista kattavuutta, mutta se ei vastaa meidän on-raportti.

Selvitetään se. Katsotaanpa projektia tarkemmin, klikataan kattavuusarvoa ja "pudotetaan" yksityiskohtaiseen tiedostoraporttiin:

Tässä näemme pääasiallisen tutkitun tiedoston lisäksi HelloWorld.vue, siellä on myös tiedosto main.ts, mikä pilaa kattavuuden kokonaiskuvan. Mutta miksi jätimme sen pois kattavuuden laskemisesta. Kyllä, kaikki on oikein, mutta se oli tasolla on, mutta skanneri indeksoi sen, joten se päätyi sen laskelmiin.

Korjataan tämä:

sonar-project.properties:

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

Haluaisin tehdä selvennyksen: tässä parametrissa määritettyjen kansioiden lisäksi kaikki parametrissa luetellut kansiot lisätään myös sonar.test.inclusions.

Kun skanneri on käynnistetty, näemme oikeat tiedot:

Katsotaanpa seuraavaa kohtaa - Laatuprofiilit. Puhuin yllä tuesta Sonarusealla kielellä samaan aikaan. Juuri tätä me näemme. Mutta tiedämme, että projektimme on kirjoitettu sisään TS, joten miksi rasittaa skanneria tarpeettomilla manipuloinneilla ja tarkistuksilla. Määritämme analyysin kielen lisäämällä määritystiedostoon vielä yhden parametrin Sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

Suoritetaan skanneri uudelleen ja katsotaan tulos:

Kattavuus katosi kokonaan.

Jos katsomme skannerin lokia, voimme nähdä seuraavan rivin:

Eli projektitiedostojamme ei yksinkertaisesti indeksoitu.

Tilanne on seuraava: virallisesti tuettu VueJs on laajennuksessa SonarJSkuka on vastuussa Javascript.

Mutta tämä tuki ei ole laajennuksessa SonarTS varten TS, josta vianseurannassa avattiin virallinen lippu Sonar'A:

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

Tässä on joitakin vastauksia yhdeltä SonarQube-kehittäjien edustajalta, jotka vahvistavat tämän tosiasian.

Mutta kaikki toimi meille, vastustat. Kyllä on, kokeillaan vähän "hakata".
Jos on tukea .vue-tiedostot Sonar"Oi, yritetään sitten kertoa hänelle, että hän pitää niitä sellaisina konekirjoitusteksti.

Lisätään parametri:

sonar-project.properties:

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

Käynnistämme skannerin:

Ja voila, kaikki on palannut normaaliksi ja yhdellä profiililla vain konekirjoitusteksti. Eli onnistuimme ratkaisemaan ongelman tuessa VueJs+TS varten soundQube.

Yritetään mennä pidemmälle ja parantaa kattavuustietoja hieman.

Mitä olemme tehneet tähän mennessä:

• lisätty projektiin Sonar-skanneri;
• perustaa on kattavuustietojen tuottaminen;
• määritetty Sonar-skanneri;
• ratkaisi tukiongelman .vue-tiedostot + konekirjoitusteksti.

Testauksen kattavuuden lisäksi koodin laadulle on muitakin mielenkiintoisia hyödyllisiä kriteerejä, kuten koodin monistaminen ja projektin (koodin monimutkaisuuteen liittyvien kertoimien laskennassa mukana) rivien määrä.

Nykyisessä toteutuksessa laajennus työskentelyyn TS (SonarTS) ei toimi CPD (kopioliitännän ilmaisin) ja koodirivien laskeminen .vue-tiedostot.

Jos haluat luoda synteettisen koodin monistamisen tilanteen, kopioi komponenttitiedosto eri nimellä ja lisää se myös koodiin main.ts dummy-funktio ja kopioi se eri nimellä. Voit tarkistaa päällekkäisyydet kuten kohdassa .vue, ja in .ts -tiedostot.

main.ts:

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

Tätä varten sinun on tilapäisesti kommentoitava asetusriviä:

sonar-project.properties:

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

Käynnistetään skanneri uudelleen testauksen ohessa:

yarn test && yarn run sonar

Tietysti kattavuutemme laskee, mutta nyt emme ole siitä kiinnostuneita.

Mitä tulee koodirivien kopioimiseen, näemme:

Tarkistaaksemme käytämme CPD-hyöty - jscpd:

npx jscpd src

Koodirivit:

Ehkä tämä ratkaistaan ​​tulevissa laajennusversioissa SonarJS(TS). Haluaisin huomauttaa, että he alkavat vähitellen yhdistää nämä kaksi laajennusta yhdeksi SonarJS, mikä on mielestäni oikein.

Halusin nyt harkita kattavuustietojen parantamista.

Toistaiseksi voimme nähdä testikattavuuden prosentteina koko projektille ja erityisesti tiedostoille. Mutta on mahdollista laajentaa tätä indikaattoria määrää koskevilla tiedoilla yksikkö-testit projektille sekä tiedostojen yhteydessä.

On kirjasto, joka voi on- muuntaa raportin muotoon Sonar'A:
yleiset testitiedot - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Asennataan tämä kirjasto projektiimme:

yarn add jest-sonar-reporter

Ja lisää se kokoonpanoon on:

package.json:

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

Suoritetaan nyt testi:

yarn test

Tämän jälkeen projektin juureen luodaan tiedosto testi-raportti.xml.

Käytetään sitä kokoonpanossa Sonar'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Ja käynnistä skanneri uudelleen:

yarn run sonar

Katsotaan mikä käyttöliittymässä on muuttunut Sonar'A:

Eikä mikään ole muuttunut. Tosiasia on, että Sonar ei pidä Jest-raportissa kuvattuja tiedostoja tiedostoina yksikkö- testit. Tämän tilanteen korjaamiseksi käytämme konfigurointiparametria Sonar kaikuluotain.testit, jossa ilmoitamme nimenomaisesti kansiot, joissa on testejä (meillä on toistaiseksi vain yksi):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Käynnistetään skanneri uudelleen:

yarn run sonar

Katsotaanpa, mikä käyttöliittymässä on muuttunut:

Nyt olemme nähneet meidän lukumäärämme yksikkö-testejä ja epäonnistuttuasi napsauttamalla sisällä näemme tämän numeron jakautumisen projektitiedostojen kesken:

Johtopäätös

Joten tarkastelimme työkalua jatkuvaan analysointiin soundQube. Integroimme siihen onnistuneesti sisään kirjoitetun projektin VueJs+TS. Korjattu joitain yhteensopivuusongelmia. Lisäsimme testikattavuusindikaattorin tietosisältöä. Tässä artikkelissa tarkastelimme vain yhtä koodin laatukriteereistä (ehkä yhtä tärkeimmistä), mutta soundQube tukee muita laatukriteerejä, mukaan lukien turvallisuustestaukset. Mutta kaikki nämä ominaisuudet eivät ole täysin saatavilla yhteisö- versiot. Yksi mielenkiintoisista ja hyödyllisistä ominaisuuksista on integrointi soundQube erilaisilla koodivaraston hallintajärjestelmillä, kuten GitLab ja BitBucket. Estää yhdistä veto (yhdistämispyyntö).'a arkiston päähaaraan, kun peitto on heikentynyt. Mutta tämä on tarina täysin eri artikkelista.

PS: Kaikki artikkelissa kuvattu koodin muodossa on saatavilla minun haarukkani.

Vain rekisteröityneet käyttäjät voivat osallistua kyselyyn. Kirjaudu sisään, ole kiltti.

Käytätkö SonarQube-alustaa:

• 26,3%Kyllä 5

• 15,8%Nro 3

• 15,8%Kuulin tästä alustasta ja haluan käyttää3

• 10,5%Olen kuullut tästä alustasta enkä halua käyttää2

• 0,0%Käytän eri alustaa0

• 31,6%Ensimmäistä kertaa kuulen hänestä 6

19 käyttäjää äänesti. 3 käyttäjää pidättyi äänestämästä.

Lähde: will.com