Rydym yn defnyddio'r platfform yn weithredol yn ein gwaith sainQube i gynnal ansawdd cod ar lefel uchel. Wrth integreiddio un o'r prosiectau a ysgrifennwyd yn VueJs+Mathysgrif, cododd problemau. Felly, hoffwn ddweud wrthych yn fanylach sut y llwyddasom i’w datrys.

Yn yr erthygl hon byddwn yn siarad, fel yr ysgrifennais uchod, am blatfform SonarQube. Ychydig o ddamcaniaeth - beth ydyw yn gyffredinol, i'r rhai sy'n clywed amdano am y tro cyntaf:

sainQube (cynt Sonar) yn llwyfan ffynhonnell agored ar gyfer arolygu parhaus a mesur ansawdd cod.
Yn cefnogi dadansoddi cod a chanfod gwallau yn unol â rheolau safonau rhaglennu Safonau Codio Diogel MISRA C, MISRA C ++, MITER / CWE a CERT. Gall hefyd adnabod gwallau o restrau gwallau rhaglennu 10 Uchaf OWASP a 25 Uchaf CWE/SANS.
Er gwaethaf y ffaith bod y platfform yn defnyddio offer parod amrywiol, mae SonarQube yn lleihau'r canlyniadau i ddangosfwrdd sengl, gan gadw hanes rhediadau a thrwy hynny ganiatáu ichi weld y duedd gyffredinol o newidiadau mewn ansawdd meddalwedd yn ystod datblygiad.

Ceir rhagor o fanylion yn gwefan swyddogol

Cefnogir nifer fawr o ieithoedd rhaglennu. A barnu yn ôl y wybodaeth o'r ddolen uchod, mae'r rhain yn fwy na 25 o ieithoedd. I gefnogi iaith benodol, rhaid i chi osod yr ategyn priodol. Mae'r fersiwn gymunedol yn cynnwys ategyn ar gyfer gweithio ag ef Javascript (gan gynnwys typesсript), er bod y wici yn dweud y gwrthwyneb. Tu ôl Javascript atebion ategyn SonarJS, ar gyfer Teipysgrif SonarTS yn y drefn honno.

Defnyddir y cleient swyddogol i anfon gwybodaeth am ddarpariaeth sonarqube-sganiwr, sydd, gan ddefnyddio'r gosodiadau o config-file, yn anfon y data hwn i'r gweinydd sainQube ar gyfer cydgrynhoi a chyfuno ymhellach.

I Javascript mae deunydd lapio npm. Felly, gadewch i ni ddechrau gweithredu cam wrth gam sainQube в Vue- defnyddio prosiect Teipysgrif.

I ddefnyddio gweinydd sainQube gadewch i ni fanteisio cyfansoddwr dociau.

sonar.yaml:

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

Lansio:

docker-compose -f sonar.yml up

Wedi hynny sainQube bydd ar gael yn: http://localhost:9001 .

Nid oes unrhyw brosiectau ynddo eto ac mae hynny'n deg. Byddwn yn cywiro'r sefyllfa hon. Cymerais y prosiect enghreifftiol swyddogol ar gyfer VueJS+TS+Jest. Gadewch i ni ei blygu tuag at ein hunain:

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

Yn gyntaf mae angen i ni osod y cleient sainQube, a elwir sonar-sganiwrcanys npm mae yna ddeunydd lapio:

yarn add sonarqube-scanner

Ac ar unwaith ychwanegu'r gorchymyn i sgriptiau i weithio ag ef.

pecyn.json:

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

Nesaf, er mwyn i'r sganiwr weithio, mae angen i chi osod gosodiadau'r prosiect mewn ffeil arbennig. Gadewch i ni ddechrau gyda'r pethau sylfaenol.

sonar-prosiect.priodweddau:

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 - cyfeiriad Sonar'A;
• sonar.projectKey – dynodwr prosiect unigryw ar y gweinydd Sonar'A;
• sonar.projectName – ei enw, gellir ei newid ar unrhyw adeg, gan fod y prosiect yn cael ei nodi gan allwedd prosiect;
• ffynonellau.sonar – ffolder gyda ffynonellau, fel arfer hwn src, ond gall fod yn unrhyw beth. Mae'r ffolder hon wedi'i gosod mewn perthynas â'r ffolder gwraidd, sef y ffolder y mae'r sganiwr yn cael ei lansio ohoni;
• profion sonar – paramedr sy'n cyd-fynd â'r un blaenorol. Dyma'r ffolder lle mae'r profion wedi'u lleoli. Yn y prosiect hwn, nid oes ffolder o'r fath, ac mae'r prawf wedi'i leoli wrth ymyl y gydran sy'n cael ei brofi yn y ffolder 'prawf', felly byddwn yn ei anwybyddu am y tro ac yn defnyddio'r paramedr nesaf;
• sonar.cynwysiadau.prawf - llwybr ar gyfer profion gan ddefnyddio mwgwd, efallai y bydd sawl elfen wedi'u rhestru wedi'u gwahanu gan atalnodau;
• sonar.sourceEncoding - amgodio ar gyfer ffeiliau ffynhonnell.

Ar gyfer lansiad cyntaf y sganiwr, mae popeth yn barod, ac eithrio'r prif gamau blaenorol: lansio'r injan prawf ei hun, fel y gall gynhyrchu gwybodaeth am y sylw, y bydd y sganiwr yn ei ddefnyddio wedyn.

Ond i wneud hyn, mae angen i chi ffurfweddu'r peiriant prawf i gynhyrchu'r wybodaeth hon. Yn y prosiect hwn, mae'r injan prawf mae. Ac mae ei osodiadau yn yr adran gyfatebol o'r ffeil pecyn.json.

Gadewch i ni ychwanegu'r gosodiadau hyn:

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

Hynny yw, rydym yn gosod y faner ei hun ar gyfer yr angen i gyfrifo cwmpas a'r ffynhonnell (ynghyd ag eithriadau) ar y sail y bydd yn cael ei ffurfio.

Nawr gadewch i ni redeg y prawf:

yarn test

Byddwn yn gweld y canlynol:

Y rheswm yw nad oes cod yn y gydran ei hun. Gadewch i ni drwsio hyn.

HelloWorld.vue:

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

Bydd hyn yn ddigon i gyfrifo cwmpas.

Ar ôl ailgychwyn y prawf, byddwn yn sicrhau hyn:

Ar y sgrin dylem weld gwybodaeth am y sylw, a bydd ffolder yn cael ei greu yn y ffolder prosiect sylw gyda gwybodaeth cwmpas prawf mewn fformat cyffredinol LCOV (estyniad LTP GCOV).

Gcov yn gyfleustodau a ddosberthir yn rhydd ar gyfer archwilio cwmpas cod. Mae Gcov yn cynhyrchu'r union nifer o gyflawniadau ar gyfer pob datganiad mewn rhaglen ac yn caniatáu ichi ychwanegu anodiadau i'r cod ffynhonnell. Daw Gcov fel cyfleustodau safonol fel rhan o becyn GCC.
Lcov - rhyngwyneb graffigol ar gyfer gcov. Mae'n cydosod ffeiliau gcov ar gyfer ffeiliau ffynhonnell lluosog ac yn cynhyrchu set o dudalennau HTML gyda gwybodaeth cod a sylw. Cynhyrchir tudalennau hefyd i'w gwneud yn haws llywio. Mae Lcov yn cefnogi sylw i linynnau, swyddogaethau a changhennau.

Ar ôl i'r profion gael eu cwblhau, bydd gwybodaeth cwmpas yn cael ei lleoli yn sylw/lcov.info.
Mae angen inni ddweud Sonar'O ble y gallaf ei gael? Felly, gadewch i ni ychwanegu'r llinellau canlynol at ei ffeil ffurfweddu. Ond mae un pwynt: gall prosiectau fod yn amlieithog, hynny yw, yn y ffolder src mae codau ffynhonnell ar gyfer sawl iaith raglennu a chysylltiad ag un neu'r llall, ac yn ei dro, mae'r defnydd o un ategyn neu'r llall yn cael ei bennu gan ei estyniad. A gellir storio gwybodaeth am ddarpariaeth mewn mannau gwahanol ar gyfer gwahanol ieithoedd rhaglennu, felly mae gan bob iaith ei hadran ei hun ar gyfer sefydlu hyn. Mae ein prosiect yn defnyddio Teipysgrif, felly mae angen adran gosodiadau ar ei gyfer yn unig:

sonar-prosiect.priodweddau:

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

Mae popeth yn barod ar gyfer lansiad cyntaf y sganiwr. Hoffwn nodi bod y prosiect yn Sonar'e yn cael ei greu yn awtomatig y tro cyntaf i chi redeg y sganiwr ar gyfer prosiect penodol. Mewn amseroedd dilynol, bydd gwybodaeth yn cael ei chronni er mwyn gweld deinameg newidiadau mewn paramedrau prosiect dros amser.

Felly, gadewch i ni ddefnyddio'r gorchymyn a grëwyd yn gynharach yn pecyn.json:

yarn run sonar 

Nodyn: gallwch hefyd ddefnyddio'r paramedr -X am logio mwy manwl.

Os lansiwyd y sganiwr am y tro cyntaf, yna bydd deuaidd y sganiwr ei hun yn cael ei lawrlwytho yn gyntaf. Ar ôl hynny mae'n dechrau ac yn dechrau sganio'r gweinydd Sonar'a ar gyfer ategion wedi'u gosod, a thrwy hynny gyfrifo'r iaith a gefnogir. Mae paramedrau amrywiol eraill ar gyfer ei weithrediad hefyd yn cael eu llwytho: proffiliau ansawdd, rheolau gweithredol, ystorfa metrigau, rheolau gweinydd.

Nodyn: Ni fyddwn yn canolbwyntio arnynt yn fanwl o fewn fframwaith yr erthygl hon, ond gallwch bob amser gysylltu â ffynonellau swyddogol.

Nesaf, mae'r dadansoddiad ffolder yn dechrau src ar gyfer argaeledd ffeiliau ffynhonnell i bawb (os nad yw un penodol wedi'i nodi'n benodol) iaith a gefnogir, gyda'u mynegeio dilynol.

Nesaf daw dadansoddiadau amrywiol eraill, nad ydym yn canolbwyntio arnynt yn yr erthygl hon (er enghraifft, megis linting, canfod dyblygu cod, ac ati).

Ar ddiwedd gwaith y sganiwr, mae'r holl wybodaeth a gesglir yn cael ei hagregu, ei harchifo a'i hanfon at y gweinydd.

Ar ôl hyn, gallwn eisoes weld beth ddigwyddodd yn y rhyngwyneb gwe:

Fel y gallwn weld, gweithiodd rhywbeth, a hyd yn oed yn dangos rhyw fath o sylw, ond nid yw'n cyfateb i'n rhai ni mae-adroddiad.

Gadewch i ni chyfrif i maes. Gadewch i ni edrych ar y prosiect yn fwy manwl, cliciwch ar y gwerth sylw, a “syrthio drwy” i mewn i adroddiad ffeil manwl:

Yma gwelwn, yn ogystal â'r brif ffeil a archwiliwyd HelloWorld.vue, mae ffeil hefyd prif.ts, sy'n difetha'r darlun cyfan o'r sylw. Ond sut ydym yn ei eithrio o'r cyfrifiad o sylw. Ydy, mae popeth yn gywir, ond roedd ar y lefel mae, ond mynegodd y sganiwr ef, felly fe ddaeth i ben yn ei gyfrifiadau.

Gadewch i ni drwsio hyn:

sonar-prosiect.priodweddau:

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

Hoffwn wneud eglurhad: yn ychwanegol at y ffolderi a nodir yn y paramedr hwn, mae'r holl ffolderi a restrir yn y paramedr hefyd yn cael eu hychwanegu sonar.cynwysiadau.prawf.

Ar ôl lansio'r sganiwr, gwelwn y wybodaeth gywir:

Edrychwn ar y pwynt nesaf - Proffiliau ansawdd. Soniais uchod am gefnogaeth Sonar'om sawl iaith ar yr un pryd. Dyma'n union yr ydym yn ei weld. Ond rydym yn gwybod bod ein prosiect wedi'i ysgrifennu i mewn TS, felly pam straenio'r sganiwr gyda thriniaethau a gwiriadau diangen. Byddwn yn gosod yr iaith i'w dadansoddi trwy ychwanegu un paramedr arall i'r ffeil ffurfweddu Sonar'A:

sonar-prosiect.priodweddau:

...
sonar.language=ts
...

Gadewch i ni redeg y sganiwr eto a gweld y canlyniad:

Roedd y sylw wedi diflannu'n llwyr.

Os edrychwn ar log y sganiwr, gallwn weld y llinell ganlynol:

Hynny yw, ni chafodd ein ffeiliau prosiect eu mynegeio.

Mae'r sefyllfa fel a ganlyn: cefnogi swyddogol VueJs yn y plugin SonarJSpwy sy'n gyfrifol am Javascript.

Ond nid yw'r gefnogaeth hon yn yr ategyn SonarTS gyfer TS, am yr hwn yr agorwyd tocyn swyddogol yn y traciwr bygiau Sonar'A:

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

Dyma rai atebion gan un o gynrychiolwyr datblygwyr SonarQube, gan gadarnhau'r ffaith hon.

Ond gweithiodd popeth i ni, rydych chi'n gwrthwynebu. Ydy, gadewch i ni roi cynnig arni ychydig “hacio”.
Os oes cefnogaeth .vue-ffeiliau Sonar'o, yna gadewch i ni geisio dweud wrtho i'w hystyried fel Teipysgrif.

Gadewch i ni ychwanegu paramedr:

sonar-prosiect.priodweddau:

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

Gadewch i ni lansio'r sganiwr:

Ac, voila, mae popeth yn ôl i normal, a gydag un proffil yn unig ar gyfer Teipysgrif. Hynny yw, rydym wedi llwyddo i ddatrys y broblem yn cefnogi VueJs+TS gyfer sainQube.

Gadewch i ni geisio mynd ymhellach a gwella'r wybodaeth cwmpas ychydig.

Yr hyn rydym wedi'i wneud hyd yn hyn:

• ychwanegu at y prosiect Sonar-sganiwr;
• sefydlu mae i gynhyrchu gwybodaeth cwmpas;
• ffurfweddu Sonar-sganiwr;
• datrys y broblem cymorth .vue-ffeiliau + Teipysgrif.

Yn ogystal â sylw'r prawf, mae meini prawf defnyddiol diddorol eraill ar gyfer ansawdd cod, er enghraifft, dyblygu cod a nifer y llinellau (sy'n ymwneud â chyfrifo cyfernodau sy'n gysylltiedig â chymhlethdod cod) y prosiect.

Yn y gweithrediad presennol y ategyn ar gyfer gweithio gyda TS (SonarTS) ni fydd yn gweithio DPP (Synhwyrydd Copïo Gludo) a chyfrif llinellau cod .vue-ffeiliau.

I greu sefyllfa synthetig o ddyblygu cod, yn syml, dyblygwch y ffeil gydran gydag enw gwahanol a hefyd ei hychwanegu at y cod prif.ts ffwythiant ffug a'i ddyblygu gydag enw gwahanol. I wirio am ddyblygu fel yn .vue, ac yn .ts -ffeiliau.

prif.ts:

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

I wneud hyn, mae angen i chi wneud sylwadau dros dro ar y llinell ffurfweddu:

sonar-prosiect.priodweddau:

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

Gadewch i ni ailgychwyn y sganiwr ynghyd â phrofi:

yarn test && yarn run sonar

Wrth gwrs, bydd ein sylw yn gostwng, ond nawr nid oes gennym ddiddordeb yn hynny.

O ran dyblygu llinellau cod, byddwn yn gweld:

I wirio byddwn yn defnyddio DPP- cyfleustodau - jscpd:

npx jscpd src

Ar gyfer llinellau cod:

Efallai y bydd hyn yn cael ei ddatrys mewn fersiynau ategyn yn y dyfodol SonarJS(TS). Hoffwn nodi eu bod yn raddol yn dechrau uno'r ddau ategyn hyn yn un SonarJS, sy'n gywir yn fy marn i.

Nawr roeddwn i eisiau ystyried yr opsiwn o wella gwybodaeth am ddarpariaeth.

Hyd yn hyn gallwn weld sylw prawf yn nhermau canrannol ar gyfer y prosiect cyfan, ac ar gyfer ffeiliau yn benodol. Ond mae'n bosibl ehangu'r dangosydd hwn gyda gwybodaeth am faint uned-profion ar gyfer y prosiect, yn ogystal ag yng nghyd-destun ffeiliau.

Mae yna lyfrgell a all mae-trosi'r adroddiad yn fformat ar gyfer Sonar'A:
data prawf generig - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Gadewch i ni osod y llyfrgell hon yn ein prosiect:

yarn add jest-sonar-reporter

A'i ychwanegu at y ffurfweddiad mae:

pecyn.json:

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

Nawr gadewch i ni redeg y prawf:

yarn test

Ar ôl hynny bydd ffeil yn cael ei chreu yng ngwraidd y prosiect prawf-adroddiad.xml.

Gadewch i ni ei ddefnyddio yn y ffurfweddiad Sonar'A:

sonar-prosiect.priodweddau:

…
sonar.testExecutionReportPaths=test-report.xml
…

Ac ailgychwyn y sganiwr:

yarn run sonar

Gadewch i ni weld beth sydd wedi newid yn y rhyngwyneb Sonar'A:

A does dim byd wedi newid. Y ffaith yw nad yw Sonar yn ystyried y ffeiliau a ddisgrifir yn adroddiad Jest fel ffeiliau uned-profion. Er mwyn cywiro'r sefyllfa hon, rydym yn defnyddio'r paramedr cyfluniad Sonar profion sonar, lle byddwn yn nodi'n benodol y ffolderi gyda phrofion (dim ond un sydd gennym ar hyn o bryd):

sonar-prosiect.priodweddau:

…
sonar.tests=src/components/__tests__
…

Gadewch i ni ailgychwyn y sganiwr:

yarn run sonar

Gadewch i ni weld beth sydd wedi newid yn y rhyngwyneb:

Nawr rydym wedi gweld nifer ein uned-profion ac, ar ôl methu trwy glicio y tu mewn, gallwn weld dosbarthiad y rhif hwn ymhlith y ffeiliau prosiect:

Casgliad

Felly, buom yn edrych ar offeryn ar gyfer dadansoddi parhaus sainQube. Llwyddwyd i integreiddio prosiect a ysgrifennwyd ynddo VueJs+TS. Wedi trwsio rhai materion cydnawsedd. Gwnaethom gynyddu cynnwys gwybodaeth y dangosydd cwmpas prawf. Yn yr erthygl hon, dim ond un o'r meini prawf ansawdd cod a archwiliwyd gennym (efallai un o'r prif rai), ond sainQube cefnogi meini prawf ansawdd eraill, gan gynnwys profion diogelwch. Ond nid yw pob un o'r nodweddion hyn ar gael yn llawn yn cymuned-fersiynau. Un o'r nodweddion diddorol a defnyddiol yw integreiddio sainQube gyda systemau rheoli cadwrfeydd cod amrywiol, megis GitLab a BitBucket. Er mwyn atal uno cais tynnu (uno).'a i brif gangen yr ystorfa pan y mae yr ymdriniaeth yn cael ei diraddio. Ond stori ar gyfer erthygl hollol wahanol yw hon.

PS: Mae popeth a ddisgrifir yn yr erthygl ar ffurf cod ar gael yn fy fforch.

Dim ond defnyddwyr cofrestredig all gymryd rhan yn yr arolwg. Mewngofnodios gwelwch yn dda.

Ydych chi'n defnyddio platfform SonarQube:

• 26,3%Oes5

• 15,8%Rhif 3

• 15,8%Clywais am y platfform hwn ac rwyf am ddefnyddio3

• 10,5%Rwyf wedi clywed am y platfform hwn ac nid wyf am ei ddefnyddio2

• 0,0%Rwy'n defnyddio platfform gwahanol0

• 31,6%Y tro cyntaf i mi glywed amdani6

Pleidleisiodd 19 o ddefnyddwyr. Ymataliodd 3 o ddefnyddwyr.

Ffynhonnell: hab.com