Munkánk során aktívan használjuk a platformot soundQube a kód minőségének magas szinten tartása érdekében. A beírt projektek egyikének integrálásakor VueJs+Gépirat, problémák merültek fel. Ezért szeretném részletesebben elmondani, hogyan sikerült ezeket megoldanunk.
Ebben a cikkben, ahogy fentebb írtam, a SonarQube platformról fogunk beszélni. Egy kis elmélet - mi ez általában, azoknak, akik először hallanak róla:
soundQube (korábbi Hanglokátor) egy nyílt forráskódú platform folyamatos ellenőrzéshez és kódminőség méréshez.
Támogatja a kódelemzést és a hibaészlelést a MISRA C, MISRA C++, MITER/CWE és CERT Secure Coding Standards programozási szabványok szabályai szerint. Felismeri a hibákat az OWASP Top 10 és a CWE/SANS Top 25 programozási hibalistájáról is.
Annak ellenére, hogy a platform különféle kész eszközöket használ, a SonarQube egyetlen irányítópultra redukálja az eredményeket, megőrzi a futtatások történetét, és ezáltal lehetővé teszi a szoftverminőség változásainak általános tendenciáját a fejlesztés során.
További részletek a címen találhatók
Számos programozási nyelv támogatott. A fenti linken található információk alapján több mint 25 nyelvről van szó. Egy adott nyelv támogatásához telepítenie kell a megfelelő beépülő modult. A közösségi verzió egy bővítményt tartalmaz a munkavégzéshez Javascript (beleértve a typeсript-et is), bár a wiki ennek az ellenkezőjét mondja. Mögött Javascript plugin válaszol SonarJS, gépíráshoz SonarTS volt.
A hivatalos kliens a lefedettségi információk küldésére szolgál sonarqube-szkenner, amely a beállítások segítségével config-file, elküldi ezeket az adatokat a szervernek soundQube további konszolidációhoz és összesítéshez.
mert Javascript van . Tehát kezdjük a megvalósítás lépésről lépésre soundQube в Vue-projekt felhasználásával Gépelt.
A szerver üzembe helyezéséhez soundQube használjuk ki dokkoló-levélírás.
szonár.yaml:
version: '1'
services:
simplesample-sonar:
image: sonarqube:lts
ports:
- 9001:9000
- 9092:9092
network_mode: bridgeDob:
docker-compose -f sonar.yml upEzután soundQube elérhető lesz: .
Még nincsenek benne projektek, és ez tisztességes. Ezt a helyzetet orvosolni fogjuk. Vettem a hivatalos példaprojektet VueJS+TS+Jest. Hajlítsuk magunk felé:
git clone https://github.com/vuejs/vue-test-utils-typescript-example.gitElőször telepítenünk kell a klienst soundQube, ami az úgynevezett szonár-szkennermert NPM van egy csomagolóanyag:
yarn add sonarqube-scannerÉs azonnal adja hozzá a parancsot szkriptek dolgozni vele.
package.json:
{
…
scripts: {
...
"sonar": "sonar-scanner"
...
},
…
}Ezután a szkenner működéséhez meg kell adnia a projektbeállításokat egy speciális fájlban. Kezdjük az alapokkal.
szonár-projekt.tulajdonságok:
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 - cím Hanglokátor„A;
- szonár.projectKey – egyedi projektazonosító a szerveren Hanglokátor„A;
- szonar.projectName – a neve, bármikor módosítható, mivel a projektet a projectKey;
- szonár.források – mappa forrásokkal, általában ez src, de bármi lehet. Ez a mappa a gyökérmappához viszonyítva van beállítva, amely az a mappa, amelyből a szkenner elindul;
- szonár.tesztek – az előzővel párhuzamos paraméter. Ez az a mappa, ahol a tesztek találhatók. Ebben a projektben nincs ilyen mappa, és a teszt a tesztelt összetevő mellett található a " mappábanteszt', ezért egyelőre figyelmen kívül hagyjuk, és a következő paramétert használjuk;
- szonár.teszt.zárványok – maszkot használó tesztek elérési útja, több elem is szerepelhet vesszővel elválasztva;
- sonar.sourceEncoding – forrásfájlok kódolása.
A szkenner első indítására minden készen áll, kivéve a fő megelőző műveletet: magát a tesztmotort elindítva, hogy az információkat generálhasson a lefedettségről, amelyet a szkenner ezután felhasznál.
Ehhez azonban be kell állítania a tesztmotort, hogy előállítsa ezeket az információkat. Ebben a projektben a tesztmotor az van. A beállításai pedig a fájl megfelelő részében találhatók csomag.json.
Adjuk hozzá ezeket a beállításokat:
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*",
"!src/main.ts",
"!src/App.vue",
"!src/**/*.d.*",
"!src/**/*__tests__*"
],Vagyis magát a zászlót állítjuk be a lefedettség kiszámításának szükségességére és a forrás kiszámítására (kivételekkel együtt), amely alapján ez létrejön.
Most futtassuk le a tesztet:
yarn testA következőket fogjuk látni:
Ennek az az oka, hogy magában az összetevőben nincs kód. Javítsuk ki.
HelloWorld.vue:
...
methods: {
calc(n) {
return n + 1;
}
},
mounted() {
this.msg1 = this.msg + this.calc(1);
},
...Ez elegendő lesz a fedezet kiszámításához.
A teszt újraindítása után a következőkről fogunk meggyőződni:
A képernyőn a lefedettségre vonatkozó információkat kell látnunk, és a projekt mappájában létrejön egy mappa lefedettség tesztlefedettség információval univerzális formátumban LCOV (LTP GCOV kiterjesztés).
Gcov egy szabadon terjesztett segédprogram a kódlefedettség vizsgálatára. A Gcov a végrehajtások pontos számát generálja a program minden utasításához, és lehetővé teszi megjegyzések hozzáadását a forráskódhoz. A Gcov szabványos segédprogramként érkezik a GCC csomag részeként.
Lcov - grafikus felület a gcov számára. Összeállítja a gcov fájlokat több forrásfájlhoz, és HTML-oldalakat állít elő kóddal és lefedettség információval. A navigáció megkönnyítése érdekében oldalakat is generálnak. Az Lcov támogatja a karakterláncok, függvények és ágak lefedését.
A tesztek befejezése után a lefedettségre vonatkozó információk itt találhatók coverage/lcov.info.
Azt kell mondanunk Hanglokátor'Honnan szerezhetem be? Ezért adjuk hozzá a következő sorokat a konfigurációs fájljához. De van egy pont: a projektek lehetnek többnyelvűek, azaz a mappában src több programozási nyelvhez és az egyikhez való kapcsolódáshoz vannak forráskódok, és viszont az egyik vagy másik bővítmény használatát annak kiterjesztése határozza meg. A lefedettség információi pedig különböző helyeken tárolhatók a különböző programozási nyelvekhez, így minden nyelvnek megvan a saját szekciója ennek beállításához. Projektünk használ Gépelt, ezért szükségünk van egy beállítási szakaszra csak ehhez:
szonár-projekt.tulajdonságok:
sonar.typescript.coveragePlugin=lcov
sonar.typescript.lcov.reportPaths=coverage/lcov.infoMinden készen áll a szkenner első indítására. Szeretném megjegyezni, hogy a projekt az HanglokátorAz 'e automatikusan létrejön, amikor először futtatja a szkennert egy adott projekthez. A későbbiekben információk halmozódnak fel annak érdekében, hogy lássák a projektparaméterek időbeli változásainak dinamikáját.
Tehát használjuk a korábban létrehozott parancsot csomag.json:
yarn run sonar Megjegyzés: paramétert is használhatja -X részletesebb naplózáshoz.
Ha a szkennert először indították el, akkor először magának a szkennernek a bináris fájlja lesz letöltve. Ezt követően elindul, és elkezdi vizsgálni a szervert Hanglokátor'a a telepített beépülő modulokhoz, ezáltal kiszámítva a támogatott nyelvet. A működéséhez számos egyéb paraméter is betöltődik: minőségi profilok, aktív szabályok, mérőszámok tárháza, szerverszabályok.
Megjegyzés: A cikk keretein belül nem foglalkozunk velük részletesen, de bármikor kapcsolatba léphet a hivatalos forrásokkal.
Ezután megkezdődik a mappaelemzés src a forrásfájlok elérhetőségére az összes (ha egy adott nincs kifejezetten megadva) támogatott nyelvhez, azok utólagos indexelésével.
Ezután jönnek a különféle egyéb elemzések, amelyekre ebben a cikkben nem foglalkozunk (például szöszmötölés, kódduplikáció észlelése stb.).
A szkenner munkájának legvégén az összes összegyűjtött információt összesítik, archiválják és elküldik a szerverre.
Ezek után már a webes felületen is láthatjuk, hogy mi történt:
Mint látjuk, valami működött, sőt valamiféle lefedettséget is mutat, de nem egyezik a miénkkel van-jelentés.
Találjuk ki. Nézzük meg részletesebben a projektet, kattintsunk a fedezeti értékre, és „essünk át” egy részletes fájljelentésbe:
Itt látjuk a fő, vizsgált fájl mellett HelloWorld.vue, van egy fájl is fő.ts, ami rontja a borítás összképét. De hogyan zártuk ki a fedezet számításából. Igen, minden helyes, de szinten volt van, de a szkenner indexelte, így került a számításaiba.
Javítsuk ki:
szonár-projekt.tulajdonságok:
...
sonar.exclusions=src/main.ts
...Szeretnék egy pontosítást tenni: az ebben a paraméterben megadott mappákon kívül a paraméterben felsorolt összes mappa is hozzáadásra kerül szonár.teszt.zárványok.
A szkenner elindítása után a helyes információkat látjuk:
Nézzük a következő pontot - Minőségi profilok. Fentebb a támogatásról beszéltem Hanglokátor'om több nyelven egyszerre. Pontosan ezt látjuk. De tudjuk, hogy a projektünk be van írva TS, akkor miért terheljük meg a szkennert felesleges manipulációkkal és ellenőrzésekkel. Az elemzés nyelvét úgy állítjuk be, hogy hozzáadunk egy további paramétert a konfigurációs fájlhoz Hanglokátor„A:
szonár-projekt.tulajdonságok:
...
sonar.language=ts
...Futtassuk újra a szkennert, és nézzük meg az eredményt:
A tudósítás teljesen megszűnt.
Ha megnézzük a szkennernaplót, a következő sort láthatjuk:
Vagyis a projektfájljaink egyszerűen nem voltak indexelve.
A helyzet a következő: hivatalosan támogatott VueJs a bővítményben van SonarJSki a felelős azért Javascript.
De ez a támogatás nem szerepel a bővítményben SonarTS a TS, amiről hivatalos jegyet nyitottak a hibakövetőben Hanglokátor„A:
Íme néhány válasz a SonarQube fejlesztők egyik képviselőjétől, megerősítve ezt a tényt.
De nekünk minden működött, tiltakozik. Igen, próbáljuk meg egy kicsit "csapkod".
Ha van támogatás .vue- fájlok Hanglokátor– Ó, akkor próbáljuk elmondani neki, hogy tekintse őket annak Gépelt.
Adjunk hozzá egy paramétert:
szonár-projekt.tulajdonságok:
...
sonar.typescript.file.suffixes=.ts,.tsx,.vue
...Indítsuk el a szkennert:
És íme, minden visszatért a normális kerékvágásba, és csak egyetlen profillal Gépelt. Vagyis támogatásban sikerült megoldani a problémát VueJs+TS a soundQube.
Próbáljunk tovább menni, és kicsit javítani a lefedettségi információkat.
Amit eddig csináltunk:
- hozzáadva a projekthez Hanglokátor-scanner;
- beállít van lefedettségi információk generálása;
- konfigurálva Hanglokátor-scanner;
- megoldotta a támogatási problémát .vue-fájlok + Gépelt.
A tesztlefedettség mellett a kód minőségének további érdekes, hasznos kritériumai is vannak, például a kódduplikáció és a projekt sorainak száma (amelyek a kód bonyolultságához kapcsolódó együtthatók számításában vesznek részt).
A beépülő modul jelenlegi megvalósításában TS (SonarTS) nem fog működni CPD (másoló beillesztés érzékelő) és a kódsorok számlálása .vue- fájlok.
A kódduplikáció szintetikus helyzetének létrehozásához egyszerűen duplikálja meg az összetevő fájlt más néven, és adja hozzá a kódhoz fő.ts egy dummy függvényt, és másolja le más néven. A duplikáció ellenőrzéséhez, mint itt .vueés be .ts - fájlok.
main.ts:
...
function name(params:string): void {
console.log(params);
}
...Ehhez ideiglenesen megjegyzésbe kell írnia a konfigurációs sort:
szonár-projekt.tulajdonságok:
...
sonar.exclusions=src/main.ts
...Indítsuk újra a szkennert a teszteléssel együtt:
yarn test && yarn run sonarTermészetesen a lefedettségünk csökkenni fog, de most ez nem érdekel minket.
A kódsorok megkettőzését illetően a következőket fogjuk látni:
Ellenőrizni fogjuk használni CPD-hasznosság - jscpd:
npx jscpd src
A kódsorokhoz:
Talán ez megoldódik a jövőbeni bővítményverziókban SonarJS(TS). Szeretném megjegyezni, hogy fokozatosan kezdik egyesíteni ezt a két bővítményt SonarJS, ami szerintem helyes.
Most meg akartam fontolni a lefedettségi információk javításának lehetőségét.
Eddig százalékban láthatjuk a tesztlefedettséget a teljes projektre, és különösen a fájlokra vonatkozóan. De ez a mutató a mennyiségre vonatkozó információkkal bővíthető egység-tesztek a projekthez, valamint a fájlok kontextusában.
Van egy könyvtár, amely képes rá van-konvertálja a jelentést formátumba Hanglokátor„A:
általános vizsgálati adatok - .
Telepítsük ezt a könyvtárat a projektünkben:
yarn add jest-sonar-reporterÉs adja hozzá a konfigurációhoz van:
package.json:
…
"testResultsProcessor": "jest-sonar-reporter"
…Most futtassuk le a tesztet:
yarn testEzt követően egy fájl jön létre a projekt gyökerében teszt-jelentés.xml.
Használjuk a konfigurációban Hanglokátor„A:
szonár-projekt.tulajdonságok:
…
sonar.testExecutionReportPaths=test-report.xml
…És indítsa újra a szkennert:
yarn run sonarLássuk, mi változott a felületen Hanglokátor„A:
És semmi sem változott. A helyzet az, hogy a Sonar nem tekinti fájlnak a Jest-jelentésben leírt fájlokat egység- tesztek. A helyzet javítására a konfigurációs paramétert használjuk Hanglokátor szonár.tesztek, amelyben kifejezetten feltüntetjük a tesztekkel ellátott mappákat (egyelőre csak egy van):
szonár-projekt.tulajdonságok:
…
sonar.tests=src/components/__tests__
…Indítsuk újra a szkennert:
yarn run sonarLássuk, mi változott a felületen:
Most láttuk a mieink számát egység-tesztek, és miután a belső kattintással nem sikerült, láthatjuk ennek a számnak a megoszlását a projektfájlok között:
Következtetés
Tehát megvizsgáltunk egy eszközt a folyamatos elemzéshez soundQube. Sikeresen integráltunk bele egy beírt projektet VueJs+TS. Néhány kompatibilitási probléma kijavítva. Növeltük a tesztlefedettség mutató információtartalmát. Ebben a cikkben a kódminőségi kritériumok közül csak egyet vizsgáltunk (talán az egyik legfontosabbat), de soundQube támogatja az egyéb minőségi kritériumokat, beleértve a biztonsági tesztelést is. De ezeknek a funkcióknak nem mindegyike érhető el teljesen közösség-verziók. Az egyik érdekes és hasznos funkció az integráció soundQube különféle kódtárkezelő rendszerekkel, mint például a GitLab és a BitBucket. Megelőzni merge pull(merge) kérés„a az adattár fő ágára, ha a lefedettség leromlott. De ez egy teljesen más cikk története.
PS: A cikkben leírtak kód formájában elérhetőek .
A felmérésben csak regisztrált felhasználók vehetnek részt. , kérem.
Használja a SonarQube platformot:
-
26,3%Igen 5
-
15,8%No3
-
15,8%Hallottam erről a platformról, és szeretném használni3
-
10,5%Hallottam erről a platformról, és nem akarom használni2
-
0,0%Más platformot használok0
-
31,6%Először hallok róla 6
19 felhasználó szavazott. 3 felhasználó tartózkodott.
Forrás: will.com