Peb nquag siv lub platform hauv peb txoj haujlwm soundQube kom tswj tau cov lej zoo ntawm qib siab. Thaum sib koom ua ke ib qho ntawm cov phiaj xwm sau rau hauv VueJs+Typescript, teeb meem tshwm sim. Yog li ntawd, kuv xav qhia rau koj paub ntau ntxiv txog yuav ua li cas peb tswj kom daws tau lawv.

Hauv tsab xov xwm no peb yuav tham, raws li kuv tau sau saum toj no, hais txog SonarQube platform. Ib qho kev xav me me - nws yog dab tsi, rau cov neeg uas hnov ​​​​txog nws thawj zaug:

soundQube (yav dhau los Tub Yaj) yog qhov qhib qhov chaw rau kev tshuaj xyuas tas li thiab ntsuas qhov zoo.
Txhawb nqa kev txheeb xyuas cov lej thiab tshawb pom qhov yuam kev raws li cov cai ntawm MISRA C, MISRA C ++, MITER/CWE thiab CERT Kev Ruaj Ntseg Coding Standards programming qauv. Nws tseem tuaj yeem lees paub qhov yuam kev los ntawm OWASP Top 10 thiab CWE / SANS Top 25 cov npe yuam kev.
Txawm tias muaj tseeb tias lub platform siv ntau yam kev npaj ua tiav, SonarQube txo cov txiaj ntsig mus rau ib lub dashboard, khaws keeb kwm ntawm kev khiav thiab yog li tso cai rau koj pom cov kev hloov pauv ntawm software zoo thaum lub sijhawm txhim kho.

Xav paub ntau ntxiv tuaj yeem nrhiav tau ntawm official website

Muaj ntau hom lus programming tau txais kev txhawb nqa. Kev txiav txim los ntawm cov ntaub ntawv los ntawm qhov txuas saum toj no, cov no muaj ntau dua 25 hom lus. Txhawm rau txhawb cov lus tshwj xeeb, koj yuav tsum nruab lub plugin tsim nyog. Lub zej zog version suav nrog lub plugin rau kev ua haujlwm nrog Javascript (xws li homсript), txawm hais tias wiki hais qhov txawv. Qab Javascript plugin teb SonarJS, rau Typescript SonarTS feem.

Tus neeg siv khoom raug siv los xa cov ntaub ntawv pov thawj sonarqube-scanner, uas, siv cov kev teeb tsa los ntawm config-file, xa cov ntaub ntawv no mus rau lub server soundQube rau ntxiv consolidation thiab aggregation.

rau Javascript yog npm wrap. Yog li, cia peb pib ua ib kauj ruam zuj zus soundQube в Vue- qhov project siv Cov ntawv sau.

Txhawm rau xa ib lub server soundQube cia peb ua kom zoo dua docker-compose.

sonar. yaml:

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

Tua tawm:

docker-compose -f sonar.yml up

Tom qab ntawv soundQube yuav muaj nyob rau ntawm: http://localhost:9001 .

Tsis muaj tej yaam num nyob rau hauv nws tseem thiab qhov ncaj ncees. Peb yuav kho qhov teeb meem no. Kuv coj tus qauv piv txwv project rau VueJS+TS+Jest. Cia peb khoov nws rau peb tus kheej:

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

Ua ntej peb yuav tsum nruab tus neeg siv khoom soundQube, uas hu ua sonar-scannerrau npm muaj ib tug wrapper:

yarn add sonarqube-scanner

Thiab tam sim ntawd ntxiv cov lus txib rau Scripts ua hauj lwm nrog nws.

package.json:

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

Tom ntej no, kom lub scanner ua haujlwm, koj yuav tsum teeb tsa qhov project hauv cov ntaub ntawv tshwj xeeb. Cia peb pib nrog cov hauv paus.

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 - chaw nyob Tub Yaj'A;
• sonar.projectKey - tus cim qhov project tshwj xeeb ntawm lub server Tub Yaj'A;
• sonar.projectNpe - Nws lub npe, nws tuaj yeem hloov tau txhua lub sijhawm, txij li qhov project tau txheeb xyuas los ntawm projectKey;
• sonar.sources - folder nrog cov chaw, feem ntau qhov no Src, tab sis yuav ua tau dab tsi. Cov nplaub tshev no tau teeb tsa txheeb ze rau lub hauv paus nplaub tshev, uas yog lub nplaub tshev los ntawm lub scanner tau pib;
• sonar.tests - parameter uas mus nyob rau hauv tandem nrog rau yav dhau los. Qhov no yog lub nplaub tshev uas cov kev xeem nyob. Hauv qhov project no, tsis muaj cov ntawv tais ceev tseg, thiab qhov kev sim no nyob ib sab ntawm cov khoom raug kuaj hauv daim nplaub tshev 'xeem', yog li peb yuav tsis quav ntsej nws tam sim no thiab siv qhov ntsuas tom ntej;
• sonar.test.inclusions - txoj hauv kev rau kev sim siv lub npog ntsej muag, tej zaum yuav muaj ntau lub ntsiab lus sib cais los ntawm commas;
• sonar.sourceEncoding - encoding rau cov ntaub ntawv qhov chaw.

Rau thawj qhov kev tso tawm ntawm lub scanner, txhua yam yog npaj txhij, tshwj tsis yog rau qhov tseem ceeb ua ntej: tso lub cav ntsuas nws tus kheej, kom nws tuaj yeem tsim cov ntaub ntawv hais txog qhov kev pab cuam, uas lub scanner yuav siv tom qab.

Tab sis ua qhov no, koj yuav tsum teeb tsa lub cav ntsuas kom tsim cov ntaub ntawv no. Nyob rau hauv qhov project no, lub xeem cav yog muaj. Thiab nws cov kev teeb tsa yog nyob rau hauv qhov sib thooj ntawm cov ntaub ntawv pob.json.

Cia peb ntxiv cov kev teeb tsa no:

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

Ntawd yog, peb teeb tsa tus chij nws tus kheej rau qhov yuav tsum tau suav cov kev pab them nqi thiab qhov chaw (nrog rau kev zam) ntawm lub hauv paus uas nws yuav raug tsim.

Tam sim no cia peb khiav qhov kev xeem:

yarn test

Peb yuav pom cov hauv qab no:

Yog vim li cas yog tias tsis muaj code nyob rau hauv nws tus kheej. Cia peb kho qhov no.

HelloWorld.vue:

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

Qhov no yuav txaus los xam cov kev pab them nqi.

Tom qab rov pib qhov kev xeem, peb yuav ua kom paub tseeb tias qhov no:

Ntawm qhov screen peb yuav tsum pom cov ntaub ntawv hais txog qhov kev pab them nqi, thiab ib daim nplaub tshev yuav raug tsim nyob rau hauv qhov project folder kev pab them nqi nrog cov ntaub ntawv ntsuas kev pov hwm hauv ib hom universal LCOV (LTP GCOV extension).

Gcov yog ib qho khoom siv pub dawb pub dawb rau kev kuaj xyuas cov cai. Gcov tsim kom muaj pes tsawg qhov kev ua tiav rau txhua nqe lus hauv ib qho kev pab cuam thiab tso cai rau koj ntxiv cov lus piav qhia rau lub hauv paus code. Gcov los ua tus qauv siv hluav taws xob ua ib feem ntawm GCC pob.
Lcov - graphical interface rau gcov. Nws sib sau ua ke gcov ntaub ntawv rau ntau qhov chaw cov ntaub ntawv thiab tsim ib txheej ntawm nplooj ntawv HTML nrog cov lej thiab cov ntaub ntawv pov thawj. Cov nplooj ntawv kuj raug tsim los ua kom yooj yim dua. Lcov txhawb nqa cov hlua, kev ua haujlwm, thiab cov ceg ntoo.

Tom qab kev xeem tiav lawm, cov ntaub ntawv pov thawj yuav raug muab tso rau hauv coverage/lcov.info.
Peb yuav tsum hais Tub Yaj'Kuv tuaj yeem tau nws los ntawm qhov twg? Yog li ntawd, cia peb ntxiv cov kab hauv qab no rau nws cov ntaub ntawv teeb tsa. Tab sis muaj ib lub ntsiab lus: tej yaam num yuav ua tau ntau yam lus, uas yog, nyob rau hauv daim nplaub tshev Src muaj cov lis dej num rau ntau hom lus programming thiab koom nrog ib lossis lwm qhov, thiab nyob rau hauv lem, siv ib los yog lwm plugin yog txiav txim los ntawm nws extension. Thiab cov ntaub ntawv pov thawj tuaj yeem muab khaws cia rau hauv qhov chaw sib txawv rau cov lus programming sib txawv, yog li txhua hom lus muaj nws tus kheej ntu rau kev teeb tsa qhov no. Peb qhov project siv Cov ntawv sau, yog li peb xav tau ib qho chaw seem rau nws:

sonar-project.properties:

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

Txhua yam yog npaj txhij rau thawj zaug tso lub scanner. Kuv xav kom nco ntsoov tias qhov project yog Tub Yaj'e yog tsim tau thawj zaug koj khiav lub scanner rau ib qhov project. Nyob rau lub sijhawm tom ntej, cov ntaub ntawv yuav raug sau kom pom cov kev hloov pauv ntawm qhov kev hloov pauv hauv qhov project tsis dhau sijhawm.

Yog li, cia peb siv cov lus txib tsim ua ntej hauv pob.json:

yarn run sonar 

Nco ntsoov: koj tuaj yeem siv qhov parameter -X rau kev sau kom ntxaws ntxiv.

Yog hais tias lub scanner twb launched thawj zaug, ces lub binary ntawm lub scanner nws tus kheej yuav tsum downloaded ua ntej. Tom qab ntawd nws pib thiab pib scanning lub server Tub Yaj'a rau ntsia plugins, yog li xam cov lus txhawb. Ntau lwm yam tsis ua haujlwm rau nws txoj haujlwm kuj tseem thauj khoom: zoo profiles, active cov cai, metrics repository, server rules.

Nco ntsoov: Peb yuav tsis nyob ntawm lawv kom meej nyob rau hauv lub moj khaum ntawm tsab xov xwm no, tab sis koj yeej ib txwm hu rau official qhov chaw.

Tom ntej no, qhov kev txheeb xyuas folder pib Src rau qhov muaj cov ntaub ntawv los ntawm txhua tus (yog tias ib qho tshwj xeeb tsis tau hais meej meej) cov lus txhawb nqa, nrog rau lawv cov kev ntsuas tom ntej.

Tom ntej no tuaj ntau yam kev txheeb xyuas, uas peb tsis tsom rau hauv tsab xov xwm no (piv txwv li, xws li linting, nrhiav kom pom cov lej duplication, thiab lwm yam).

Thaum kawg ntawm lub scanner txoj haujlwm, tag nrho cov ntaub ntawv khaws tseg tau muab sau ua ke, khaws cia thiab xa mus rau lub server.

Tom qab ntawd, peb tuaj yeem pom dab tsi tshwm sim hauv lub vev xaib interface:

Raws li peb tuaj yeem pom, qee yam ua haujlwm, thiab tseem qhia tau qee yam kev pabcuam, tab sis nws tsis phim peb li muaj- qhia.

Cia peb xav txog nws. Cia peb saib ntawm qhov project kom nthuav dav ntxiv, nyem rau ntawm qhov kev pab them nqi, thiab "poob dhau" rau hauv cov ntaub ntawv qhia ntxaws:

Ntawm no peb pom, ntxiv rau lub ntsiab, tshuaj xyuas cov ntaub ntawv HelloWorld.vue, kuj muaj ntaub ntawv loj.ts, uas spoils tag nrho cov duab ntawm kev pab them nqi. Tab sis yuav ua li cas los peb tshem tawm nws los ntawm kev xam cov kev pab them nqi. Yog, txhua yam yog qhov tseeb, tab sis nws yog nyob rau theem muaj, tab sis lub scanner indexed nws, yog li nws xaus rau hauv nws cov kev suav.

Cia peb kho qhov no:

sonar-project.properties:

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

Kuv xav ua kom meej: ntxiv rau cov folders uas tau teev tseg hauv qhov ntsuas no, tag nrho cov folders teev nyob rau hauv parameter kuj ntxiv sonar.test.inclusions.

Tom qab tso lub scanner, peb pom cov ntaub ntawv raug:

Cia peb saib lub ntsiab lus tom ntej - Zoo profiles. Kuv tham saum toj no txog kev txhawb nqa Tub Yaj'om ob peb hom lus tib lub sijhawm. Qhov no yog qhov peb tab tom pom. Tab sis peb paub tias peb qhov project tau sau rau hauv TS, yog vim li cas strain lub scanner nrog tsis tsim nyog manipulations thiab checks. Peb yuav teeb tsa hom lus rau kev txheeb xyuas los ntawm kev ntxiv ib qho ntxiv rau cov ntaub ntawv teeb tsa Tub Yaj'A:

sonar-project.properties:

...
sonar.language=ts
...

Cia peb khiav lub scanner dua thiab pom qhov tshwm sim:

Qhov kev pov hwm tau ploj mus tag.

Yog tias peb saib ntawm lub tshuab scanner, peb tuaj yeem pom cov kab hauv qab no:

Ntawd yog, peb cov ntaub ntawv qhov project tsuas yog tsis tau indexed.

Qhov xwm txheej yog raws li nram no: kev txhawb nqa VueJs yog nyob rau hauv lub plugin SonarJSleej twg yog tus lav Javascript.

Tab sis qhov kev txhawb nqa no tsis nyob hauv lub plugin SonarTS rau TS, hais txog qhov twg daim pib official tau qhib nyob rau hauv tus kab mob tracker Tub Yaj'A:

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

Nov yog qee cov lus teb los ntawm ib tus neeg sawv cev los ntawm SonarQube tus tsim tawm, lees paub qhov tseeb no.

Tab sis txhua yam ua haujlwm rau peb, koj tawm tsam. Yog lawm, cia peb sim me ntsis “hack”.
Yog muaj kev txhawb nqa .vue- cov ntaub ntawv Tub Yaj'Auj, cia peb sim qhia nws kom xav txog lawv li Cov ntawv sau.

Cia peb ntxiv ib qho parameter:

sonar-project.properties:

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

Cia peb pib lub scanner:

Thiab, voila, txhua yam rov qab mus rau qhov qub, thiab nrog ib qho profile nkaus xwb rau Cov ntawv sau. Ntawd yog, peb tau tswj los daws qhov teeb meem hauv kev txhawb nqa VueJs+TS rau soundQube.

Cia peb sim mus ntxiv thiab txhim kho cov ntaub ntawv pov thawj me ntsis.

Qhov peb tau ua tam sim no:

• ntxiv rau qhov project Tub Yaj- tshuab luam ntawv;
• teeb tsa muaj tsim cov ntaub ntawv pov thawj;
• teeb tsa Tub Yaj- tshuab luam ntawv;
• daws qhov teeb meem kev txhawb nqa .vue-cov ntaub ntawv + Cov ntawv sau.

Ntxiv nrog rau kev ntsuas kev ntsuas, muaj lwm cov txheej txheem tseem ceeb rau kev ua lej zoo, piv txwv li, cov lej theej thiab cov lej ntawm cov kab (sib koom hauv kev suav cov coefficients ntsig txog code complexity) ntawm qhov project.

Hauv kev siv tam sim no ntawm lub plugin rau kev ua haujlwm nrog TS (SonarTS) yuav tsis ua haujlwm CPD (Copy Paste Detector) thiab suav cov kab code .vue- cov ntaub ntawv.

Txhawm rau tsim cov teeb meem hluavtaws ntawm cov lej theej, tsuas yog luam tawm cov ntaub ntawv tivthaiv nrog lub npe sib txawv thiab ntxiv rau nws rau cov lej. loj.ts ib tug dummy muaj nuj nqi thiab duplicate nws nrog ib tug txawv lub npe. Xyuas kom duplication raws li nyob rau hauv .vue, thiab nyob rau hauv .ts - cov ntaub ntawv.

main.ts:

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

Txhawm rau ua qhov no, koj yuav tsum tau hais tawm ib ntus tawm ntawm kab teeb tsa:

sonar-project.properties:

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

Cia peb rov pib lub scanner nrog rau kev sim:

yarn test && yarn run sonar

Tau kawg, peb qhov kev pab cuam yuav poob, tab sis tam sim no peb tsis txaus siab rau qhov ntawd.

Nyob rau hauv cov nqe lus ntawm duplicating kab ntawm code, peb yuav pom:

Mus xyuas peb yuav siv CPD- siv - jscpd ua:

npx jscpd src

Rau kab code:

Tej zaum qhov no yuav daws tau rau yav tom ntej plugins versions SonarJS (TS). Kuv xav kom nco ntsoov tias lawv maj mam pib ua ke ob lub plugins rau hauv ib qho SonarJS, uas kuv xav tias yog lawm.

Tam sim no kuv xav xav txog qhov kev xaiv ntawm kev txhim kho cov ntaub ntawv pov thawj.

Txog tam sim no peb tuaj yeem pom qhov ntsuas qhov ntsuas hauv feem pua ​​​​ntawm tag nrho qhov project, thiab rau cov ntaub ntawv tshwj xeeb. Tab sis nws muaj peev xwm nthuav qhov ntsuas no nrog cov ntaub ntawv hais txog qhov ntau chav tsev-tests rau qhov project, nrog rau cov ntsiab lus ntawm cov ntaub ntawv.

Muaj ib lub tsev qiv ntawv uas tuaj yeem ua tau muaj-hloov daim ntawv qhia ua hom rau Tub Yaj'A:
cov ntaub ntawv xeem generic - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Cia peb nruab lub tsev qiv ntawv hauv peb qhov project:

yarn add jest-sonar-reporter

Thiab ntxiv rau qhov kev teeb tsa muaj:

package.json:

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

Tam sim no cia peb khiav qhov kev xeem:

yarn test

Tom qab ntawd cov ntaub ntawv yuav raug tsim nyob rau hauv lub hauv paus ntawm qhov project test-report.xml.

Cia peb siv nws hauv kev teeb tsa Tub Yaj'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Thiab rov pib lub scanner:

yarn run sonar

Cia peb pom dab tsi tau hloov pauv hauv lub interface Tub Yaj'A:

Thiab tsis muaj dab tsi hloov. Qhov tseeb yog tias Sonar tsis xav txog cov ntaub ntawv tau piav qhia hauv Jest daim ntawv qhia ua cov ntaub ntawv chav tsev- kuaj. Txhawm rau kho qhov teeb meem no, peb siv cov kev teeb tsa kev teeb tsa Tub Yaj sonar.tests, nyob rau hauv uas peb yuav qhia meej meej cov folders nrog kev ntsuam xyuas (peb tsuas muaj ib qho rau tam sim no):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Cia peb rov pib lub scanner:

yarn run sonar

Cia peb pom dab tsi tau hloov pauv hauv lub interface:

Tam sim no peb tau pom tus naj npawb ntawm peb chav tsev-tests thiab, tau ua tsis tiav los ntawm txhaj rau hauv, peb tuaj yeem pom kev faib tawm ntawm tus lej no ntawm cov ntaub ntawv hauv qhov project:

xaus

Yog li, peb tau saib ib qho cuab yeej rau kev tshuaj xyuas tas li soundQube. Peb ua tiav integrated rau hauv nws ib qhov project sau nyob rau hauv VueJs+TS. Kho qee qhov teeb meem kev sib raug zoo. Peb tau nce cov ntsiab lus ntawm qhov ntsuas qhov ntsuas qhov ntsuas. Hauv tsab xov xwm no peb tau tshuaj xyuas tsuas yog ib qho ntawm cov txheej txheem zoo (tej zaum yog ib qho tseem ceeb), tab sis soundQube txhawb nqa lwm yam kev ua tau zoo, suav nrog kev kuaj kev nyab xeeb. Tab sis tsis yog tag nrho cov nta no muaj nyob rau hauv lub zej lub zos-versions. Ib qho ntawm qhov nthuav thiab muaj txiaj ntsig zoo yog kev sib koom ua ke soundQube nrog rau ntau yam kev tswj hwm kev tswj hwm, xws li GitLab thiab BitBucket. Tiv thaiv merge rub (merge) thov'a mus rau lub ntsiab ceg ntawm lub repository thaum cov kev pab them nqi yog degraded. Tab sis qhov no yog ib zaj dab neeg rau ib tsab xov xwm sib txawv kiag li.

PS: Txhua yam piav nyob rau hauv tsab xov xwm nyob rau hauv daim ntawv ntawm code yog muaj nyob rau hauv kuv fork.

Tsuas yog cov neeg siv sau npe tuaj yeem koom nrog hauv daim ntawv ntsuam xyuas. Kos npe rau hauvthov.

Koj puas siv SonarQube platform:

• 26,3%Yog 5

• 15,8%Nr 3

• 15,8%Kuv hnov ​​​​txog lub platform no thiab xav siv 3

• 10,5%kuv twb hnov ​​lub platform no thiab tsis xav siv2

• 0,0%Kuv tab tom siv lwm lub platform0

• 31,6%Thawj zaug kuv hnov ​​txog nws6

19 cov neeg siv pov npav. 3 cov neeg siv tau txwv.

Tau qhov twg los: www.hab.com