Em di xebata xwe de platformê bi awayekî çalak bikar tînin soundQube ji bo parastina kalîteya kodê di astek bilind de. Dema ku yek ji wan projeyên ku tê de hatine nivîsandin yek bikin VueJs + Typescript, pirsgirêk derketin. Ji ber vê yekê, ez dixwazim bi hûrgulî ji we re vebêjim ka me çawa wan çareser kir.

Di vê gotarê de em ê, wekî ku min li jor nivîsî, li ser platforma SonarQube biaxivin. Teoriyek piçûk - ew bi gelemperî çi ye, ji bo kesên ku cara yekem li ser dibihîzin:

soundQube (pêşane Sonar) platformek çavkaniyek vekirî ye ji bo pîvandina domdar û pîvana kalîteya kodê.
Li gorî qaîdeyên standardên bernameya MISRA C, MISRA C++, MITER/CWE û CERT Secure Coding Standards, analîzkirina kodê û tespîtkirina xeletiyê piştgirî dike. Di heman demê de ew dikare xeletiyên ji navnîşên xeletiyên bernamekirinê yên OWASP Top 10 û CWE/SANS Top 25 nas bike.
Tevî vê rastiyê ku platform amûrên cûrbecûr amade bikar tîne, SonarQube encaman li tabloyek yekane kêm dike, dîroka rêvekirinê digire û bi vî rengî dihêle hûn di dema pêşkeftinê de meyla giştî ya guhertinên di kalîteya nermalavê de bibînin.

Agahiyên bêtir dikarin li ser bibînin malpera fermî

Hejmarek mezin ji zimanên bernamekirinê têne piştgirî kirin. Li gorî agahdariya ji lînka li jor dadbar kirin, ev ji 25 zimanan zêdetir in. Ji bo piştgirîkirina zimanek taybetî, divê hûn pêveka guncan saz bikin. Guhertoya civakê pêvekek ji bo xebatê vedihewîne Javascript (tevî tîpan jî tê de), her çend wiki berevajî dibêje. Paş Javascript bersivên pêvekê SonarJS, ji bo Typescript SonarTS bi awayekî

Muwekîlê fermî ji bo şandina agahdariya vegirtinê tê bikar anîn sonarqube-scanner, ku, mîhengên ji bi kar tînin config-pelê, vê daneyê ji serverê re dişîne soundQube ji bo yekbûn û kombûna bêtir.

bo Javascript e pêça npm. Ji ber vê yekê, bila em gav-bi-gav dest bi pêkanîna gav-gav bikin soundQube в Vue- Proje bi kar tîne Curenivîs.

Ji bo sazkirina serverê soundQube em jê sûd werbigirin docker-berhevkirin.

sonar.yaml:

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

Destpêkirin:

docker-compose -f sonar.yml up

Piştî wê soundQube dê li ser peyda bibin: http://localhost:9001 .

Hîn proje di wê de nînin û ev rast e. Em ê vê rewşê sererast bikin. Min ji bo projeya nimûneya fermî girt VueJS + TS + Jest. Ka em li ber xwe bidin:

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

Pêşî divê em xerîdar saz bikin soundQube, ku tê gotin sonar-skanerji bo npm pêçek heye:

yarn add sonarqube-scanner

Û tavilê fermanê lê zêde bike nivîsandin bi wê re bixebitin.

package.json:

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

Dûv re, ji bo ku skaner bixebite, hûn hewce ne ku mîhengên projeyê di pelek taybetî de bicîh bikin. Werin em bi bingehîn dest pê bikin.

sonar-project.taybetmendî:

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 - navnîşan Sonar'YEK;
sonar.projectKey - Nasnameya projeyê ya yekta li ser serverê Sonar'YEK;
sonar.projectName - navê wê, ew dikare di her kêliyê de were guheztin, ji ber ku proje ji hêla ve hatî nas kirin projectKey;
sonar.sources - Peldanka bi çavkaniyan, bi gelemperî ev src, lê dikare her tişt be. Ev peldank li gorî peldanka root, ku peldanka ku skaner jê tê dest pê kirin, tête danîn;
sonar.tests - Parametreyek ku bi ya berê re li hev dike. Ev peldanka ku test lê ne. Di vê projeyê de, peldankek wusa tune, û ceribandin li kêleka hêmana ku di peldankê de tê ceribandin heye 'îmtîhan', ji ber vê yekê em ê ji bo nuha paşguh bikin û pîvana din bikar bînin;
sonar.test.inclusions - Rêya ceribandinên ku maskek bikar tînin, dibe ku çend hêman hebin ku bi koman têne veqetandin;
sonar.sourceEncoding - kodkirina pelên çavkaniyê.

Ji bo destpêkirina yekem a skanerê, her tişt amade ye, ji bilî çalakiya pêşîn a sereke: destpêkirina motora ceribandinê bixwe, da ku ew bikaribe di derheqê vegirtinê de agahdariya ku skaner dê dûv re bikar bîne biafirîne.

Lê ji bo vê yekê, hûn hewce ne ku motora testê mîheng bikin da ku vê agahiyê biafirîne. Di vê projeyê de, motora testê ye li wir e. Û mîhengên wê di beşa têkildar a pelê de ne pakêt.json.

Ka em van mîhengan zêde bikin:

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

Ango, me ala xwe ji bo hewcedariya hesabkirina vegirtin û çavkaniyê (ligel îstîsnayan) li ser bingeha ku ew ê ava bibe destnîşan kir.

Naha em ceribandinê bimeşînin:

yarn test

Em ê jêrîn bibînin:

Sedem ev e ku di nav pêkhateyê de kodek bixwe tune. Ka em vê rast bikin.

HelloWorld.vue:

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

Ev ê ji bo hesabkirina vegirtinê bes be.

Piştî destpêkirina ceribandinê, em ê vê yekê piştrast bikin:

Li ser ekranê divê em agahdariya li ser vegirtinê bibînin, û peldankek dê di peldanka projeyê de were afirandin Nêzîkatîya bi agahdariya vegirtina testê di forma gerdûnî de LCOV (LTP GCOV dirêjkirin).

Gcov ji bo vekolîna vegirtina kodê amûrek bi serbestî hatî belav kirin. Gcov ji bo her gotinek di bernameyekê de jimareya rastîn a darvekirinê çêdike û dihêle hûn li koda çavkaniyê şîroveyan zêde bikin. Gcov wekî amûrek standard wekî beşek pakêta GCC tê.
Lcov - navgîniya grafîkî ya ji bo gcov. Ew pelên gcov ji bo pelên pir çavkanî kom dike û komek rûpelên HTML-ê bi kod û agahdariya vegirtinê çêdike. Rûpel jî têne çêkirin ku navîgasyon hêsantir bikin. Lcov vegirtina rêzan, fonksiyon û şaxan piştgirî dike.

Piştî ku ceribandin qediyan, agahdariya vegirtinê dê tê de cih bigire coverage/lcov.info.
Divê em bibêjin Sonar'Ez dikarim ji ku bistînim? Ji ber vê yekê, bila rêzikên jêrîn li pelê veavakirina wê zêde bikin. Lê xalek heye: proje dikarin pirzimanî bin, ango di peldankê de src ji bo çend zimanên bernamekirinê û girêdana bi yek an yekê re kodên çavkaniyê hene, û di encamê de, karanîna yek an pêvekek din ji hêla dirêjkirina wê ve tê destnîşankirin. Û agahdariya vegirtinê dikare li cîhên cihêreng ji bo zimanên bernamenûsê yên cihêreng were hilanîn, ji ber vê yekê her zimanek ji bo sazkirina vê beşa xwe heye. Projeya me bi kar tîne Curenivîs, ji ber vê yekê em tenê ji bo wê beşek mîhengan hewce ne:

sonar-project.taybetmendî:

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

Her tişt ji bo destpêkirina yekem a skanerê amade ye. Ez dixwazim bibêjim ku ev proje ye Sonar'e cara yekem ku hûn skanerê ji bo projeyek diyar dimeşînin bixweber tê afirandin. Di demên paşîn de, agahdarî dê werin berhev kirin da ku dînamîkên guhertinên di pîvanên projeyê de bi demê re bibînin.

Ji ber vê yekê, bila em fermana ku berê hatî afirandin bikar bînin pakêt.json:

yarn run sonar

Têbînî: hûn dikarin pîvanê jî bikar bînin -X ji bo têketina berfirehtir.

Ger skaner ji bo cara yekem hate destpêkirin, wê hingê dê yekem binarya skaner bixwe were dakêşandin. Piştî vê yekê ew dest pê dike û dest bi şopandina serverê dike Sonar'a ji bo pêvekên sazkirî, bi vî rengî zimanê piştgirî tê hesibandin. Parametreyên cihêreng ên ji bo xebata wê jî têne barkirin: profîlên kalîteyê, qaîdeyên çalak, depoya metrîkan, qaîdeyên serverê.

Têbînî: Em ê di çarçoveya vê gotarê de bi hûrgulî li ser wan nesekinin, lê hûn her gav dikarin bi çavkaniyên fermî re têkilî daynin.

Piştre, analîzkirina peldankê dest pê dike src ji bo hebûna pelên çavkaniyê ji bo hemî (heke yekî taybetî bi eşkere ne diyar be) zimanê piştgirî, bi îndekskirina wan a paşîn.

Dûv re vekolînên cihêreng ên din têne, ku em di vê gotarê de li ser wan nasekinin (mînakî, wekî linting, tespîtkirina dubarekirina kodê, hwd.).

Di dawiya xebata skaner de, hemî agahdariya berhevkirî têne berhev kirin, arşîv kirin û ji serverê re têne şandin.

Piştî vê yekê, em jixwe dikarin bibînin ka çi di navgîniya malperê de qewimî:

Wekî ku em dikarin bibînin, tiştek xebitî, û tewra cûreyek vegirtinê jî nîşan dide, lê ew bi ya me re hev nagire li wir e-nûçe.

Werin em wê bihesibînin. Ka em bi hûrgulî li projeyê binêrin, li ser nirxa vegirtinê bikirtînin, û "bikevin" nav raporek pelê ya berfireh:

Li vir em ji bilî pelê sereke, lêkolînkirî dibînin HelloWorld.vue, dosyayek jî heye sereke.ts, ku tevahiya wêneya vegirtinê xirab dike. Lê çawa me ew ji hesabê vegirtinê derxist. Erê, her tişt rast e, lê ew di astê de bû li wir e, lê skaner ew nîşan kir, ji ber vê yekê ew di hesabên xwe de bi dawî bû.

Ka em vê rast bikin:

sonar-project.taybetmendî:

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

Ez dixwazim zelaliyek bikim: ji bilî peldankên ku di vê parameterê de têne destnîşan kirin, hemî peldankên ku di pîvanê de têne navnîş kirin jî têne zêde kirin. sonar.test.inclusions.

Piştî destpêkirina skanerê, em agahdariya rast dibînin:

Ka em li xala din binêrin - Profîlên kalîteyê. Min li jor behsa piştgirîyê kir Sonar'ji çend zimanan di heman demê de. Ya ku em dibînin ev e. Lê em dizanin ku projeya me tê de hatiye nivîsandin TS, ji ber vê yekê çima skaner bi manîpulasyon û kontrolên nehewce teng bikin. Em ê ziman ji bo analîzê bi lê zêdekirina parametreyek din li pelê veavakirinê saz bikin Sonar'YEK:

sonar-project.taybetmendî:

...
sonar.language=ts
...

Ka em dîsa skanerê bimeşînin û encamê bibînin:

Ragihandin bi tevahî ji holê rabû.

Ger em li têketina skanerê binêrin, em dikarin rêza jêrîn bibînin:

Ango pelên projeya me bi tenê nehatin îndeks kirin.

Rewş wiha ye: bi fermî piştgirî VueJs di pêvekê de ye SonarJSkî berpirsiyar e Javascript.

Lê ev piştgirî ne di pêvekê de ye SonarTS bo TS, li ser ku di şopandina xeletiyê de bilêtek fermî hate vekirin Sonar'YEK:

Li vir çend bersivên yek ji nûnerên pêşdebirên SonarQube hene, ku vê rastiyê piştrast dikin.

Lê her tişt ji bo me xebitî, hûn îtîraz dikin. Erê ew e, em hinekî biceribînin "hack".
Ger piştgirî hebe .vue-pelên Sonar'oh, wê hingê em hewl bidin ku jê re bibêjin ku wan wekî wan bihesibîne Curenivîs.

Ka em parametreyek lê zêde bikin:

sonar-project.taybetmendî:

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

Ka em skanerê bidin destpêkirin:

Û, voila, her tişt vedigere rewşa normal, û bi yek profîlek tenê ji bo Curenivîs. Yanî me bi piştgirîyê karî pirsgirêkê çareser bikin VueJs + TS bo soundQube.

Werin em hewl bidin ku pêşdetir biçin û agahdariya vegirtinê hinekî baştir bikin.

Me heta niha çi kiriye:

li projeyê zêde kirin Sonar-skaner;
damezirandin li wir e ji bo afirandina agahdariya vegirtinê;
mîheng kirin Sonar-skaner;
pirsgirêka piştevaniyê çareser kir .vue-pel + Curenivîs.

Digel vegirtina ceribandinê, ji bo qalîteya kodê pîvanên din ên kêrhatî yên balkêş hene, mînakî, dubarekirina kodê û hejmara rêzan (di hesabkirina hevberên ku bi tevliheviya kodê ve girêdayî ne) projeyê.

Di pêkanîna heyî ya pêveka ji bo xebatê bi TS (SonarTS) dê nexebite CPD (Detektora Kopî Paste) û rêzikên kodê dihejmêre .vue-pelên.

Ji bo afirandina rewşek sentetîk a dubarekirina kodê, bi tenê pelê pêkhatê bi navek cûda dubare bikin û wê jî li kodê zêde bikin. sereke.ts fonksiyonek dummy û wê bi navek cûda dubare bike. Ji bo dubarekirinê wekî ku tê kontrol kirin .vueû di .ts -pelên.

main.ts:

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

Ji bo vê yekê, hûn hewce ne ku bi demkî rêzika veavakirinê şîrove bikin:

sonar-project.taybetmendî:

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

Werin em digel ceribandinê skaner ji nû ve bidin destpêkirin:

yarn test && yarn run sonar

Bê guman, girtina me dê bikeve, lê niha em bi vê yekê re eleqedar nabin.

Di warê dubarekirina rêzikên kodê de, em ê bibînin:

Ji bo kontrolê em ê bikar bînin CPD-kêrhatî - jscpd:

npx jscpd src

Ji bo rêzikên kodê:

Dibe ku ev di guhertoyên pêvekê yên pêşerojê de were çareser kirin SonarJS (TS). Ez dixwazim bibêjim ku ew hêdî hêdî dest bi yekkirina van her du pêvekan dikin yek SonarJS, ku ez difikirim rast e.

Naha min xwest ku vebijarka başkirina agahdariya vegirtinê binirxînim.

Heya nuha em dikarin ji bo tevahiya projeyê, û bi taybetî jî ji bo pelan, vegirtina testê di warê sedî de bibînin. Lê gengaz e ku meriv vê nîşankerê bi agahdariya li ser hejmarê berfireh bike yekbûn-testên ji bo projeyê, û her weha di çarçoveya pelan de.

Pirtûkxaneyek heye ku dikare li wir e-raporê ji bo formatê veguherînin Sonar'YEK:
daneyên testa giştî - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Ka em vê pirtûkxaneyê di projeya xwe de saz bikin:

yarn add jest-sonar-reporter

Û wê li veavakirinê zêde bike li wir e:

package.json:

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

Naha em ceribandinê bimeşînin:

yarn test

Piştî vê yekê pelek dê di root ya projeyê de were afirandin test-raport.xml.

Ka em wê di veavakirinê de bikar bînin Sonar'YEK:

sonar-project.taybetmendî:

…
sonar.testExecutionReportPaths=test-report.xml
…

Û skaner ji nû ve bidin destpêkirin:

yarn run sonar

Ka em bibînin ka di navberê de çi guherî Sonar'YEK:

Û tiştek nehatiye guhertin. Rastî ev e ku Sonar pelên ku di rapora Jestê de hatine vegotin wekî pel nahesibîne yekbûn-testên. Ji bo rastkirina vê rewşê, em pîvana veavakirinê bikar tînin Sonar sonar.tests, ku tê de em ê peldankên bi ceribandinan bi eşkere destnîşan bikin (ji bo niha tenê yek heye):

sonar-project.taybetmendî:

…
sonar.tests=src/components/__tests__
…

Ka em skanerê ji nû ve bidin destpêkirin:

yarn run sonar

Ka em bibînin ka çi di navberê de guherî:

Niha me hejmara xwe dît yekbûn-ceribandin û, ku bi tikandina hundurê têk çû, em dikarin belavkirina vê hejmarê di nav pelên projeyê de bibînin:

encamê

Ji ber vê yekê, me li amûrek ji bo analîzkirina domdar nihêrî soundQube. Me bi serketî projeyek ku tê de hatî nivîsandin de entegre kir VueJs + TS. Hin pirsgirêkên lihevhatinê rast kirin. Me naveroka agahdariya nîşana vegirtina testê zêde kir. Di vê gotarê de me tenê yek ji pîvanên kalîteya kodê (dibe ku yek ji yên sereke) lêkolîn kir, lê soundQube Pîvanên din ên kalîteyê piştgirî dike, tevî ceribandina ewlehiyê. Lê ne hemî van taybetmendiyan bi tevahî têne peyda kirin civatî- versiyonên. Yek ji taybetmendiyên balkêş û kêrhatî entegrasyon e soundQube bi pergalên rêveberiya depoya kodê ya cihêreng, wek GitLab û BitBucket. Ji bo pêşîlêgirtinê daxwaza hevgirtinê kişandin (hevgirtin).'a ber bi şaxê sereke yê depoyê gava ku vegirtin tê xerakirin. Lê ev çîrokek ji bo gotarek bi tevahî cûda ye.

PS: Her tiştê ku di gotarê de di forma kodê de hatî destnîşan kirin tê de heye qaça min.

Tenê bikarhênerên qeydkirî dikarin beşdarî anketê bibin. Têketinji kerema xwe.

Ma hûn platforma SonarQube bikar tînin:

26,3%Erê5
15,8%No3
15,8%Min li ser vê platformê bihîst û dixwazim bikar bînim3
10,5%Min li ser vê platformê bihîstiye û naxwazim bikar bînim2
0,0%Ez platformek cûda bikar tînim0
31,6%Cara yekem min li ser wê dibihîzim6

19 bikarhêneran deng dan. 3 bikarhêner betal bûn.

Source: www.habr.com

Yekbûna projeya VueJS + TS bi SonarQube

encamê

Ma hûn platforma SonarQube bikar tînin:

Add a comment cancel reply