Mazoto mampiasa ny lampihazo amin'ny asantsika soundQube mba hitazonana ny kalitaon'ny code amin'ny ambaratonga avo. Rehefa mampiditra ny iray amin'ireo tetikasa voasoratra ao VueJs+Typescript, nipoitra ny olana. Noho izany dia tiako ny hilaza aminareo amin'ny antsipiriany ny fomba nandaminanay azy ireo.

Amin'ity lahatsoratra ity dia hiresaka momba ny sehatra SonarQube isika, araka ny nosoratako etsy ambony. Teoria kely - inona izany amin'ny ankapobeny, ho an'ireo izay vao mandre momba izany:

soundQube (teo aloha Sonar) dia sehatra misokatra ho an'ny fanaraha-maso mitohy sy fandrefesana ny kalitaon'ny kaody.
Manohana ny famakafakana kaody sy ny fitadiavana fahadisoana araka ny fitsipiky ny MISRA C, MISRA C++, MITER/CWE ary CERT Secure Coding Standards. Izy io koa dia afaka mamantatra ny lesoka avy amin'ny lisitry ny fahadisoana fandaharana OWASP Top 10 sy CWE/SANS Top 25.
Na dia eo aza ny zava-misy fa mampiasa fitaovana efa vita isan-karazany ny sehatra, ny SonarQube dia mampihena ny vokatra ho amin'ny dashboard tokana, mitazona ny tantaran'ny hazakazaka ary mamela anao hahita ny fironana ankapobeny amin'ny fiovan'ny kalitaon'ny rindrambaiko mandritra ny fampandrosoana.

Ny antsipiriany bebe kokoa dia azo jerena ao amin'ny tranonkala ofisialy

Betsaka ny fiteny fandaharana no tohana. Raha jerena ny fampahalalana avy amin'ny rohy etsy ambony, dia fiteny 25 mahery ireo. Mba hanohanana fiteny manokana dia tsy maintsy mametraka ny plugin mety ianao. Ny dikan-tenin'ny vondrom-piarahamonina dia misy plugin iray ahafahana miasa Javascript (anisan'izany ny typeсript), na dia mifanohitra amin'izany aza no lazain'ny wiki. aoriana Javascript valiny plugin SonarJS, ho an'ny Typescript SonarTS tsirairay avy.

Ny mpanjifa ofisialy dia ampiasaina handefasana vaovao momba ny fandrakofana sonarqube-scanner, izay, mampiasa ny fika avy amin'ny config-file, mandefa ity data ity amin'ny mpizara soundQube ho an'ny fanamafisana sy fanangonam-bokatra bebe kokoa.

ho an'ny Javascript dia npm fonosana. Noho izany, andao hanomboka ny fampiharana tsikelikely soundQube в Vue- tetikasa mampiasa Karazan-tsoratra.

Mba hametraka ny mpizara soundQube aleo hanararaotra docker-Mamboatra.

sonar.yaml:

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

fandefasana:

docker-compose -f sonar.yml up

Taorian'izany soundQube dia ho hita ao amin'ny: http://localhost:9001 .

Tsy mbola misy tetikasa ao ary rariny izany. Hanitsy izany toe-javatra izany izahay. Noraisiko ny tetikasa ohatra ofisialy ho an'ny VueJS+TS+Jest. Andeha isika hiondrika amin'ny tenantsika:

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

Voalohany dia mila mametraka ny mpanjifa isika soundQube, izay atao hoe scanner-sonarfor npm misy fonosana:

yarn add sonarqube-scanner

Ary ampio avy hatrany ny baiko amin'ny soratra hiasa aminy.

package.json:

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

Manaraka, ho an'ny scanner miasa, dia mila mametraka ny tetik'asa fikandrana amin'ny rakitra manokana. Andeha isika hanomboka amin'ny fototra.

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 - adiresy Sonar'A;
• sonar.projectKey – famantarana tetikasa tokana amin'ny mpizara Sonar'A;
• sonar.projectName – ny anarany, azo ovaina amin'ny fotoana rehetra, satria ny tetikasa dia fantatra amin'ny projectKey;
• sonar.sources – lahatahiry misy loharano, matetika ity src, fa mety ho na inona na inona. Ity lahatahiry ity dia apetraka mifandraika amin'ny lahatahiry fakany, izay lahatahiry niaingan'ny scanner;
• sonar.tests - paramètre mifanaraka amin'ny teo aloha. Ity no lahatahiry misy ny fitsapana. Amin'ity tetikasa ity dia tsy misy lahatahiry toy izany, ary ny fitsapana dia eo akaikin'ny singa nosedraina ao amin'ny lahatahiry 'fitsapana', noho izany dia tsy hiraharaha izany isika amin'izao fotoana izao ary hampiasa ny mari-pamantarana manaraka;
• sonar.test.inclusions - lalan'ny fitsapana mampiasa saron-tava, mety misy singa maromaro voatanisa amin'ny faingo;
• sonar.sourceEncoding - famandrihana ho an'ny rakitra loharano.

Ho an'ny fanombohana voalohany ny scanner dia efa vonona ny zava-drehetra, afa-tsy ny hetsika lehibe teo aloha: ny fandefasana ny motera fitsapana mihitsy, mba hahafahany mamoaka vaovao momba ny fandrakofana, izay hampiasain'ny scanner avy eo.

Saingy mba hanaovana izany dia mila manamboatra ny motera fitsapana ianao mba hamoronana ity fampahalalana ity. Amin'ity tetikasa ity, ny motera fitsapana dia misy. Ary ny filaharany dia ao amin'ny fizarana mifanaraka amin'ny rakitra package.json.

Andeha ampio ireto fanovana ireto:

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

Izany hoe, mametraka ny saina isika amin'ny filàna kajy ny fandrakofana sy ny loharano (miaraka amin'ny maningana) mifototra amin'ny fananganana azy.

Andeha isika hanao ny fitsapana:

yarn test

Ho hitantsika ireto manaraka ireto:

Ny antony dia satria tsy misy kaody ao amin'ilay singa. Aleo amboary ity.

HelloWorld.vue:

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

Izany dia ho ampy hanombanana ny fandrakofana.

Aorian'ny famerenana indray ny fitsapana dia ho azo antoka fa:

Eo amin'ny efijery dia tokony hahita fampahalalana momba ny fandrakofana isika, ary hisy lahatahiry iray hamorona ao amin'ny lahatahiry tetikasa fandrakofana miaraka amin'ny fampahalalana momba ny fitsapana amin'ny endrika manerantany LCOV (fanitarana LTP GCOV).

Gcov dia fitaovana zaraina malalaka ho an'ny fandinihana ny fandrakofana kaody. Gcov dia mamorona ny isan'ny famonoana ho an'ny fanambarana tsirairay ao amin'ny programa iray ary ahafahanao manampy fanamarihana amin'ny kaody loharano. Ny Gcov dia tonga amin'ny maha-fitaovana mahazatra ao anatin'ny fonosana GCC.
Lcov - interface an-tsary ho an'ny gcov. Manangona rakitra gcov ho an'ny rakitra loharano maro izy io ary mamokatra pejy HTML misy kaody sy fampahalalana momba ny fandrakofana. Ny pejy koa dia natsangana mba hanamora ny fitetezana. Lcov dia manohana ny fandrakofana ny tady, ny fiasa ary ny sampana.

Rehefa vita ny fitsapana, dia ho hita ao ny fampahalalana momba ny fandrakofana coverage/lcov.info.
Mila miteny isika Sonar'Aiza no ahazoako azy? Noho izany, andao ampidirintsika ao amin'ny fichier configuration-ny ireto andalana manaraka ireto. Saingy misy teboka iray: ny tetikasa dia mety amin'ny fiteny maro, izany hoe ao anaty lahatahiry src misy kaody loharano ho an'ny fiteny fandaharana maromaro ary mifandray amin'ny iray na hafa, ary ny fampiasana plugin iray na iray hafa dia voafaritra amin'ny fanitarana azy. Ary ny fampahalalana momba ny fandrakofana dia azo tehirizina any amin'ny toerana samihafa ho an'ny fiteny fandaharana samihafa, ka ny fiteny tsirairay dia manana ny fizarana azy manokana amin'ny fametrahana izany. Mampiasa ny tetikasanay Karazan-tsoratra, noho izany dia mila sehatra fitendry ho azy fotsiny izahay:

sonar-project.properties:

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

Efa vonona ny zava-drehetra amin'ny fandefasana voalohany ny scanner. Tiako ny manamarika fa ny tetikasa dia Sonar'e dia noforonina ho azy amin'ny fotoana voalohany anaovanao ny scanner ho an'ny tetikasa iray. Amin'ny fotoana manaraka dia angonina ny vaovao mba hahitana ny fihetsehan'ny fiovan'ny mari-pamantarana tetikasa rehefa mandeha ny fotoana.

Noho izany, andao hampiasa ny baiko noforonina teo aloha package.json:

yarn run sonar 

Fanamarihana: azonao atao koa ny mampiasa ny parameter -X ho an'ny fisoratana anarana bebe kokoa.

Raha sambany no natomboka ny scanner, dia ny binary an'ny scanner mihitsy no alaina voalohany. Aorian'izay dia manomboka ary manomboka mijery ny mpizara Sonar'a ho an'ny plugins napetraka, ka kajy ny fiteny tohanana. Misy paramètre maro hafa ho an'ny fampandehanana azy koa: mombamomba ny kalitao, fitsipika mavitrika, fitahirizana metrika, fitsipika mpizara.

Fanamarihana: Tsy hiresaka momba azy ireo amin'ny antsipiriany ao anatin'ity lahatsoratra ity izahay, fa afaka mifandray amin'ny loharano ofisialy foana ianao.

Manaraka, manomboka ny famakafakana lahatahiry src noho ny fisian'ny rakitra loharano ho an'ny rehetra (raha tsy voafaritra mazava) ny fiteny tohana, miaraka amin'ny fanondroana azy ireo manaraka.

Avy eo dia misy famakafakana hafa isan-karazany, izay tsy hifantohantsika ato amin'ity lahatsoratra ity (ohatra, toy ny linting, ny fahitana ny dika mitovy, sns.).

Any amin'ny faran'ny asan'ny scanner, ny fampahalalana voaangona rehetra dia atambatra, voatahiry ary alefa any amin'ny mpizara.

Aorian'izany dia efa hitantsika ny zava-nitranga tao amin'ny interface web:

Araka ny hitantsika, nisy zavatra niasa, ary na dia mampiseho karazana fandrakofam-baovao, nefa tsy mifanaraka amin'ny anay misy-tatitra.

Andeha hojerentsika izany. Andeha hojerentsika amin'ny antsipiriany bebe kokoa ny tetikasa, tsindrio ny sandan'ny fandrakofana, ary "milatsaka" ao anaty tatitra momba ny rakitra amin'ny antsipiriany:

Eto isika dia mahita, ankoatry ny rakitra lehibe, nodinihina HelloWorld.vue, misy koa ny rakitra main.ts, izay manimba ny sary manontolo amin'ny fandrakofana. Ahoana anefa no nesorinay tamin'ny kajy ny fandrakofana. Eny, marina ny zava-drehetra, saingy teo amin'ny ambaratonga izany misy, fa ny scanner no nanondro azy, ka niafara tamin'ny kajikajy.

Andeha amboary ity:

sonar-project.properties:

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

Te-hanazava aho: ankoatry ny lahatahiry voatondro ao amin'io paramètre io, dia ampiana ihany koa ny lahatahiry rehetra voatanisa ao amin'ny parameter sonar.test.inclusions.

Aorian'ny fandefasana ny scanner dia hitantsika ny fampahalalana marina:

Andeha hojerentsika ny teboka manaraka - Profil kalitao. Niresaka momba ny fanohanana aho teo ambony Sonaramin'ny fiteny maromaro miaraka. Izany indrindra no hitantsika. Fa fantatray fa voasoratra ao ny tetikasanay TS, koa maninona no manenjana ny scanner amin'ny fanodinkodinana sy fisavana tsy ilaina. Hametraka ny fiteny ho an'ny famakafakana isika amin'ny alalan'ny fampidirana paramètre iray hafa amin'ny rakitra fikirakirana Sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

Andeha hojerentsika indray ny scanner ary jereo ny vokatra:

Lasa tanteraka ny fandrakofana.

Raha mijery ny logs scanner isika dia afaka mahita ity andalana manaraka ity:

Izany hoe, ny antontan-taratasintsika dia tsy natao indexed tsotra izao.

Toy izao ny zava-misy: tohana amin’ny fomba ofisialy VueJs dia ao amin'ny plugin SonarJSiza no tompon'andraikitra Javascript.

Saingy tsy ao amin'ny plugin io fanohanana io SonarTS ho an'ny TS, izay misy tapakila ofisialy nosokafana tao amin'ny mpitsikilo bibikely Sonar'A:

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

Ireto misy valiny vitsivitsy avy amin'ny iray amin'ireo solontenan'ny mpamorona SonarQube, manamafy izany zava-misy izany.

Saingy niasa ho anay ny zava-drehetra, manohitra ianao. Eny ary, andramo kely “hack”.
Raha misy ny fanohanana .vue- rakitra Sonar'Oh, andeha isika hiezaka hilaza aminy mba hihevitra azy ireo ho toy ny Karazan-tsoratra.

Andeha isika hanampy paramètre:

sonar-project.properties:

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

Andao hanomboka ny scanner:

Ary, voila, miverina amin'ny laoniny ny zava-drehetra, ary miaraka amin'ny mombamomba iray ihany Karazan-tsoratra. Izany hoe nahavita namaha ny olana tamin’ny fanohanana VueJs+TS ho an'ny soundQube.

Andao hiezaka handroso sy hanatsara kely ny vaovao momba ny fandrakofana.

Ny zavatra nataontsika hatramin'izao:

• nampiana ny tetikasa Sonar- scanner;
• hametraka misy mamorona vaovao momba ny fandrakofana;
• voaendrika Sonar- scanner;
• namaha ny olana fanohanana .vue-rakitra + Karazan-tsoratra.

Ho fanampin'ny fandrakofam-panadinana, misy fepetra mahasoa hafa mahaliana momba ny kalitaon'ny kaody, ohatra, ny kopia kaody sy ny isan'ny andalana (tafiditra amin'ny kajy ny coefficient mifandraika amin'ny fahasarotan'ny code) an'ny tetikasa.

Ao amin'ny fampiharana amin'izao fotoana izao ny plugin miasa amin'ny TS (SonarTS) tsy hiasa CPD (Detector Copy Paste) ary manisa andalana code .vue- rakitra.

Mba hamoronana toe-javatra sentetika amin'ny dika mitovy amin'ny kaody dia adikao fotsiny ilay rakitra singa amin'ny anarana hafa ary ampio koa amin'ny kaody. main.ts asa dummy ary adikao amin'ny anarana hafa. Mba hanamarinana ny duplication toy ny ao .vue, ary ao .ts - rakitra.

main.ts:

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

Mba hanaovana izany dia mila maneho hevitra vonjimaika momba ny tsipika fanamafisana ianao:

sonar-project.properties:

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

Andao atomboka indray ny scanner miaraka amin'ny fitsapana:

yarn test && yarn run sonar

Mazava ho azy fa hihena ny fandrakofanay, saingy tsy liana amin'izany izahay ankehitriny.

Amin'ny resaka famadihana andalana kaody dia ho hitantsika:

Mba hanamarinana dia hampiasainay CPD-utilité- jscpd:

npx jscpd src

Ho an'ny andalana code:

Angamba ho voavaha amin'ny dikan-teny plugin ho avy izany SonarJS(TS). Tiako ny manamarika fa manomboka manambatra tsikelikely ireo plugins roa ireo ho iray izy ireo SonarJS, izay heveriko fa marina.

Ankehitriny aho dia te-handinika ny safidy hanatsara ny fampahalalam-baovao.

Hatreto dia afaka mahita fandrakofam-panadinana amin'ny isan-jato isika, ho an'ny tetikasa manontolo, ary indrindra ho an'ny rakitra. Saingy azo atao ny manitatra ity famantarana ity miaraka amin'ny fampahalalana momba ny habetsahana vondrona- fitsapana ho an'ny tetikasa, ary koa amin'ny tontolon'ny rakitra.

Misy tranomboky afaka misy-manova ny tatitra ho endrika ho an'ny Sonar'A:
angona fitsapana ankapobeny - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Andao hametraka ity tranomboky ity amin'ny tetikasantsika:

yarn add jest-sonar-reporter

Ary ampio amin'ny config misy:

package.json:

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

Andeha isika hanao ny fitsapana:

yarn test

Aorian'izay dia hamorona rakitra iray ao amin'ny fototry ny tetikasa test-report.xml.

Andao hampiasa azy io amin'ny fanamafisana Sonar'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Ary avereno indray ny scanner:

yarn run sonar

Andeha hojerentsika izay niova tao amin'ny interface Sonar'A:

Ary tsy nisy niova. Ny zava-misy dia tsy heverin'i Sonar ho rakitra ireo rakitra voalaza ao amin'ny Jest report vondrona- fitsapana. Mba hanitsiana izany toe-javatra izany, dia mampiasa ny mari-pamantarana fanamafisana Sonar sonar.tests, izay hanondro mazava tsara ireo lahatahiry misy fitsapana (iray ihany no ananantsika amin'izao fotoana izao):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Andao atomboka indray ny scanner:

yarn run sonar

Andeha hojerentsika izay niova tao amin'ny interface:

Ankehitriny dia hitanay ny isan'ny anay vondrona-fitsapana ary, rehefa tsy nahomby tamin'ny fipihana ao anatiny, dia hitantsika ny fizarana an'io isa io eo amin'ireo rakitra tetikasa:

famaranana

Noho izany, nijery fitaovana ho an'ny fanadihadiana mitohy izahay soundQube. Tafiditra soa aman-tsara tao anatin'izany ny tetikasa voasoratra ao VueJs+TS. Namboarina ny olana sasany mifanentana. Nampitomboinay ny votoatin'ny fampahafantarana momba ny tondro fandrakofam-panadinana. Ao amin'ity lahatsoratra ity isika dia nandinika afa-tsy ny iray amin'ireo fepetra momba ny kalitaon'ny code (angamba iray amin'ireo lehibe indrindra), fa soundQube manohana fepetra kalitao hafa, anisan'izany ny fitsapana fiarovana. Saingy tsy ireo endri-javatra rehetra ireo dia hita tanteraka ao fiaraha-monina-versions. Ny iray amin'ireo endri-javatra mahaliana sy mahasoa dia ny fampidirana soundQube miaraka amin'ny rafitra fitantanana tahiry kaody isan-karazany, toy ny GitLab sy BitBucket. Misoroka merge pull(manakambana) fangatahana'a mankany amin'ny sampana lehibe amin'ny tahiry rehefa simba ny fandrakofana. Saingy ity dia tantara ho an'ny lahatsoratra hafa tanteraka.

Sal: Ny zavatra rehetra voalaza ao amin'ny lahatsoratra amin'ny endrika kaody dia misy ao ny fitrebako.

Ireo mpampiasa voasoratra anarana ihany no afaka mandray anjara amin'ny fanadihadiana. HiditraPlease.

Mampiasa ny sehatra SonarQube ve ianao:

• 26,3%Eny5

• 15,8%No3

• 15,8%Nandre momba ity sehatra ity aho ary te hampiasa3

• 10,5%Efa naheno momba ity sehatra ity aho ary tsy te hampiasa2

• 0,0%Mampiasa sehatra hafa 0 aho

• 31,6%Sambany aho nandre momba azy6

Mpampiasa 19 no nifidy. Mpampiasa 3 no nifady.

Source: www.habr.com