Ni aktive uzas la platformon en nia laboro soundQube konservi kodkvaliton je alta nivelo. Kiam oni integrigas unu el la projektoj enskribitaj VueJs+Tajpskribo, problemoj ekestis. Tial mi ŝatus rakonti al vi pli detale, kiel ni sukcesis solvi ilin.

En ĉi tiu artikolo ni parolos, kiel mi skribis supre, pri la platformo SonarQube. Iom da teorio - kio ĝi estas ĝenerale, por tiuj, kiuj aŭdas pri ĝi la unuan fojon:

soundQube (iama Soni) estas malfermfonta platformo por kontinua inspektado kaj kodkvalita mezurado.
Subtenas kodan analizon kaj erardetekton laŭ la reguloj de la programaj normoj MISRA C, MISRA C++, MITRE/CWE kaj CERT Secure Coding Standards. Ĝi ankaŭ povas rekoni erarojn de la OWASP Supraj 10 kaj CWE/SANS Supraj 25 programaj eraroj listoj.
Malgraŭ la fakto, ke la platformo uzas diversajn pretajn ilojn, SonarQube reduktas la rezultojn al ununura panelo, konservante historion de kuroj kaj tiel permesante al vi vidi la ĝeneralan tendencon de ŝanĝoj en softvarkvalito dum disvolviĝo.

Pliaj detaloj troveblas ĉe oficiala retejo

Granda nombro da programlingvoj estas subtenataj. Juĝante laŭ la informoj de la supra ligilo, ĉi tiuj estas pli ol 25 lingvoj. Por subteni specifan lingvon, vi devas instali la taŭgan kromprogramon. La komunuma versio inkluzivas kromaĵon por labori kun Javascript (inkluzive de tipskripto), kvankam la vikio diras la malon. Malantaŭe Javascript kromprogramoj respondas SonarJS, por Typescript SonarTS laŭe.

La oficiala kliento estas uzata por sendi informojn pri kovrado sonarqube-skanilo, kiu, uzante la agordojn de agordi-file, sendas ĉi tiujn datumojn al la servilo soundQube por plia firmiĝo kaj agregado.

Por Javascript estas npm envolvaĵo. Do, ni komencu paŝon post paŝo efektivigon soundQube в Vue-projekto uzante Tajpaĵo.

Por disfaldi servilon soundQube ni profitu docker-compose.

sonar.yaml:

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

Lanĉo:

docker-compose -f sonar.yml up

Post ĉi tio soundQube estos disponebla ĉe: http://localhost:9001 .

Ne estas projektoj en ĝi ankoraŭ kaj tio estas justa. Ni korektos ĉi tiun situacion. Mi prenis la oficialan ekzemploprojekton por VueJS+TS+Jest. Ni fleksu ĝin al ni mem:

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

Unue ni devas instali la klienton soundQube, kiu nomiĝas sonar-skanilopor npm estas envolvaĵo:

yarn add sonarqube-scanner

Kaj tuj aldonu la komandon al skriptoj labori kun ĝi.

package.json:

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

Poste, por ke la skanilo funkciu, vi devas agordi la projektajn agordojn en speciala dosiero. Ni komencu per la bazaĵoj.

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.gastiganto.url - adreso Soni— A;
sonar.projectKey - unika projektidentigilo sur la servilo Soni— A;
sonar.projectName – ĝia nomo, ĝi povas esti ŝanĝita en ajna momento, ĉar la projekto estas identigita per projectKey;
sonaro.fontoj – dosierujo kun fontoj, kutime ĉi tio src, sed povas esti io ajn. Ĉi tiu dosierujo estas agordita relative al la radika dosierujo, kiu estas la dosierujo el kiu la skanilo estas lanĉita;
sonaro.testoj – parametro kiu iras en tandemo kun la antaŭa. Ĉi tiu estas la dosierujo kie troviĝas la testoj. En ĉi tiu projekto, ne ekzistas tia dosierujo, kaj la testo situas apud la testata komponanto en la dosierujo 'testo', do ni ignoros ĝin nuntempe kaj uzos la sekvan parametron;
sonar.testo.inkluzivecoj – vojo por provoj uzante maskon, povas esti pluraj elementoj listigitaj apartigitaj per komoj;
sonar.sourceEncoding – kodigo por fontdosieroj.

Por la unua lanĉo de la skanilo ĉio estas preta, krom la ĉefa antaŭa ago: lanĉi la testmotoron mem, por ke ĝi povu generi informojn pri la kovrado, kiun la skanilo poste uzos.

Sed por fari tion, vi devas agordi la testmotoron por generi ĉi tiun informon. En ĉi tiu projekto, la testmotoro estas Ŝerco. Kaj ĝiaj agordoj estas en la responda sekcio de la dosiero pako.json.

Ni aldonu ĉi tiujn agordojn:

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

Tio estas, ni starigas la flagon mem por la bezono kalkuli kovradon kaj la fonton (kune kun esceptoj) surbaze de kiu ĝi estos formita.

Nun ni faru la teston:

yarn test

Ni vidos la jenon:

La kialo estas, ke ne ekzistas kodo en la komponanto mem. Ni riparu ĉi tion.

HelloWorld.vue:

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

Ĉi tio sufiĉos por kalkuli kovradon.

Post rekomenco de la testo, ni certigos pri tio:

Sur la ekrano ni devus vidi informojn pri la kovrado, kaj dosierujo estos kreita en la projekta dosierujo kovrado kun testpriraporta informo en universala formato LCOV (LTP GCOV-etendaĵo).

Gcov estas libere distribuita ilo por ekzameni kodan kovradon. Gcov generas la precizan nombron da ekzekutoj por ĉiu deklaro en programo kaj permesas vin aldoni komentadojn al la fontkodo. Gcov venas kiel norma utileco kiel parto de la GCC-pakaĵo.
Lcov - grafika interfaco por gcov. Ĝi kunvenas gcov-dosierojn por multoblaj fontdosieroj kaj produktas aron da HTML-paĝoj kun kodaj kaj priraportaj informoj. Paĝoj ankaŭ estas generitaj por faciligi navigadon. Lcov subtenas priraportadon de ŝnuroj, funkcioj kaj branĉoj.

Post kiam la testoj estas finitaj, priraportaj informoj troviĝos en kovrado/lcov.info.
Ni devas diri Soni— De kie mi povas preni ĝin? Tial ni aldonu la sekvajn liniojn al ĝia agorda dosiero. Sed estas unu punkto: projektoj povas esti plurlingvaj, tio estas en la dosierujo src ekzistas fontkodoj por pluraj programlingvoj kaj aliĝo kun unu aŭ alia, kaj siavice, la uzo de unu aŭ alia kromaĵo estas determinita de ĝia etendaĵo. Kaj priraportaj informoj povas esti konservitaj en malsamaj lokoj por malsamaj programlingvoj, do ĉiu lingvo havas sian propran sekcion por agordi ĉi tion. Nia projekto uzas Tajpaĵo, do ni bezonas agordan sekcion nur por ĝi:

sonar-project.properties:

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

Ĉio estas preta por la unua lanĉo de la skanilo. Mi ŝatus noti, ke la projekto estas Soni'e kreiĝas aŭtomate la unuan fojon kiam vi rulas la skanilon por difinita projekto. En postaj tempoj, informoj estos akumulitaj por vidi la dinamikon de ŝanĝoj en projektparametroj laŭlonge de la tempo.

Do, ni uzu la komandon kreitan antaŭe en pako.json:

yarn run sonar

Notu: vi ankaŭ povas uzi la parametron -X por pli detala registrado.

Se la skanilo estis lanĉita por la unua fojo, tiam la duuma de la skanilo mem estos elŝutita unue. Post tio ĝi komenciĝas kaj komencas skanadon de la servilo Soni'a por instalitaj kromprogramoj, tiel kalkulante subtenatan lingvon. Diversaj aliaj parametroj por ĝia funkciado ankaŭ estas ŝarĝitaj: kvalitaj profiloj, aktivaj reguloj, metrika deponejo, servilaj reguloj.

Notu: Ni ne detale pritraktos ilin en la kadro de ĉi tiu artikolo, sed vi ĉiam povas kontakti oficialajn fontojn.

Poste, la dosierujo-analizo komenciĝas src por la havebleco de fontdosieroj por ĉiuj (se specifa unu ne estas eksplicite specifita) subtenata lingvo, kun ilia posta indeksado.

Poste venas diversaj aliaj analizoj, pri kiuj ni ne fokusiĝas en ĉi tiu artikolo (ekzemple, kiel linting, detekto de koda duobligo ktp.).

Ĉe la fino de la laboro de la skanilo, ĉiuj kolektitaj informoj estas kunigitaj, arkivitaj kaj senditaj al la servilo.

Post ĉi tio, ni jam povas vidi kio okazis en la retinterfaco:

Kiel ni povas vidi, io funkciis, kaj eĉ montras ian kovradon, sed ĝi ne kongruas kun la nia Ŝerco-raporto.

Ni eltrovu ĝin. Ni rigardu la projekton pli detale, alklaku la kovrovaloron, kaj "falu" en detalan dosierraporton:

Ĉi tie ni vidas, krom la ĉefa, ekzamenita dosiero HelloWorld.vue, estas ankaŭ dosiero ĉefaj.ts, kiu difektas la tutan bildon de la priraportado. Sed kiel ni ekskludis ĝin de la kalkulo de kovrado. Jes, ĉio estas ĝusta, sed ĝi estis sur la nivelo Ŝerco, sed la skanilo indeksigis ĝin, do ĝi finiĝis en siaj kalkuloj.

Ni riparu ĉi tion:

sonar-project.properties:

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

Mi ŝatus fari klarigon: krom la dosierujoj kiuj estas specifitaj en ĉi tiu parametro, ankaŭ ĉiuj dosierujoj listigitaj en la parametro estas aldonitaj. sonar.testo.inkluzivecoj.

Post lanĉo de la skanilo, ni vidas la ĝustajn informojn:

Ni rigardu la sekvan punkton - Kvalitaj profiloj. Mi parolis supre pri subteno Soniel pluraj lingvoj samtempe. Ĝuste ĉi tio ni vidas. Sed ni scias, ke nia projekto estas skribita TS, kial do streĉi la skanilon per nenecesaj manipuladoj kaj kontroloj. Ni agos la lingvon por analizo aldonante unu plian parametron al la agorda dosiero Soni'A:

sonar-project.properties:

...
sonar.language=ts
...

Ni rulu la skanilon denove kaj vidu la rezulton:

La kovrado tute malaperis.

Se ni rigardas la skanilon protokolo, ni povas vidi la sekvan linion:

Tio estas, niaj projektdosieroj simple ne estis indeksitaj.

La situacio estas jena: oficiale subtenata VueJs estas en la kromaĵo SonarJS, kiu respondecas pri Javascript.

Sed ĉi tiu subteno ne estas en la kromaĵo SonarTS por TS, pri kiu oficiala bileto estis malfermita en la cimspurilo Soni'A:

Jen kelkaj respondoj de unu el la reprezentantoj de la programistoj de SonarQube, konfirmante ĉi tiun fakton.

Sed ĉio funkciis por ni, vi kontraŭas. Jes, ĝi estas, ni provu ĝin iomete "haki".
Se estas subteno .vue- dosieroj Soni— Ho, do ni provu diri al li, ke li konsideru ilin kiel Tajpaĵo.

Ni aldonu parametron:

sonar-project.properties:

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

Ni lanĉu la skanilon:

Kaj, voila, ĉio revenis al normalo, kaj kun unu profilo nur por Tajpaĵo. Tio estas, ni sukcesis solvi la problemon en subteno VueJs+TS por soundQube.

Ni provu iri plu kaj iom plibonigi la prikovrajn informojn.

Kion ni faris ĝis nun:

aldonita al la projekto Soni-skanilo;
agordi Ŝerco generi informojn pri kovrado;
agordita Soni-skanilo;
solvis la subtenan problemon .vue-dosieroj + Tajpaĵo.

Krom testa kovrado, ekzistas aliaj interesaj utilaj kriterioj por kodkvalito, ekzemple, koda duobligo kaj la nombro da linioj (engaĝitaj en la kalkulo de koeficientoj rilataj al koda komplekseco) de la projekto.

En la nuna efektivigo de la kromaĵo por labori kun TS (SonarTS) ne funkcios CPD (Kopia Algluita Detektilo) kaj kalkulante liniojn de kodo .vue-dosieroj.

Por krei sintezan situacion de koda duobligo, simple dupliku la komponan dosieron kun malsama nomo kaj ankaŭ aldonu ĝin al la kodo. ĉefaj.ts imita funkcio kaj duobligu ĝin per alia nomo. Por kontroli la duobligon kiel en .vue, kaj en .ts -dosieroj.

main.ts:

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

Por fari tion, vi devas provizore komenti la agordan linion:

sonar-project.properties:

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

Ni rekomencu la skanilon kune kun testado:

yarn test && yarn run sonar

Kompreneble, nia kovrado falos, sed nun ni ne interesiĝas pri tio.

Koncerne al duobligado de linioj de kodo, ni vidos:

Por kontroli ni uzos CPD-utilo - jscpd:

npx jscpd src

Por linioj de kodo:

Eble ĉi tio estos solvita en estontaj kromprogramoj SonarJS(TS). Mi ŝatus rimarki, ke ili iom post iom komencas kunfandi ĉi tiujn du kromaĵojn en unu SonarJS, kiun mi opinias ĝusta.

Nun mi volis konsideri la eblon plibonigi informojn pri kovrado.

Ĝis nun ni povas vidi testan kovradon en procentaj terminoj, por la tuta projekto, kaj por dosieroj precipe. Sed eblas vastigi ĉi tiun indikilon kun informoj pri la kvanto unuo-testoj por la projekto, same kiel en la kunteksto de dosieroj.

Estas biblioteko kiu povas Ŝerco-konverti la raporton en formaton por Soni'A:
ĝeneralaj testaj datumoj - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Ni instalu ĉi tiun bibliotekon en nia projekto:

yarn add jest-sonar-reporter

Kaj aldonu ĝin al la agordo Ŝerco:

package.json:

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

Nun ni faru la teston:

yarn test

Post tio dosiero estos kreita en la radiko de la projekto test-raporto.xml.

Ni uzu ĝin en la agordo Soni'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Kaj rekomencu la skanilon:

yarn run sonar

Ni vidu, kio ŝanĝiĝis en la interfaco Soni'A:

Kaj nenio ŝanĝiĝis. Fakte, Sonar ne konsideras la dosierojn priskribitajn en la raporto Jest kiel dosierojn unuo-provoj. Por korekti ĉi tiun situacion, ni uzas la agordan parametron Soni sonaro.testoj, en kiu ni eksplicite indikos la dosierujojn kun testoj (ni nun havas nur unu):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Ni rekomencu la skanilon:

yarn run sonar

Ni vidu, kio ŝanĝiĝis en la interfaco:

Nun ni vidis la nombron de nia unuo-testoj kaj, malsukcesinte alklakante enen, ni povas vidi la distribuadon de ĉi tiu numero inter la projektdosieroj:

konkludo

Do, ni rigardis ilon por kontinua analizo soundQube. Ni sukcese integris en ĝi projekton skribitan VueJs+TS. Korektis iujn problemojn pri kongruo. Ni pliigis la informan enhavon de la testkovra indikilo. En ĉi tiu artikolo, ni ekzamenis nur unu el la kriterioj por kodkvalito (eble unu el la ĉefaj), sed soundQube subtenas aliajn kvalitajn kriteriojn, inkluzive de sekurecaj provoj. Sed ne ĉiuj ĉi tiuj funkcioj estas plene haveblaj en komunumo-versioj. Unu el la interesaj kaj utilaj trajtoj estas integriĝo soundQube kun diversaj kodaj deponaj administradsistemoj, kiel ekzemple GitLab kaj BitBucket. Preventi kunfandi tiri (kunfandi) peton'a al la ĉefa branĉo de la deponejo kiam la kovrado estas degradita. Sed ĉi tio estas rakonto por tute alia artikolo.

PS: Ĉio priskribita en la artikolo en formo de kodo estas havebla en mia forko.

Nur registritaj uzantoj povas partopreni la enketon. Ensaluti, bonvolu.

Ĉu vi uzas la platformon SonarQube:

26,3%Jes5
15,8%No3
15,8%Mi aŭdis pri ĉi tiu platformo kaj volas uzi3
10,5%Mi aŭdis pri ĉi tiu platformo kaj ne volas uzi2
0,0%Mi uzas alian platformon0
31,6%Unuafoje mi aŭdis pri ŝi6

Voĉdonis 19 uzantoj. 3 uzantoj sindetenis.

fonto: www.habr.com

Integrante la projekton VueJS+TS kun SonarQube

konkludo

Ĉu vi uzas la platformon SonarQube:

Aldoni komenton Отменить ответ