Aktibo namong gigamit ang plataporma sa among trabaho soundQube aron mapadayon ang kalidad sa code sa taas nga lebel. Kung gihiusa ang usa sa mga proyekto nga gisulat sa VueJs+Typescript, mitungha ang mga problema. Busa, gusto nakong isulti kanimo sa mas detalyado kung giunsa namo kini pagsulbad.

Niini nga artikulo maghisgot kita, sama sa akong gisulat sa ibabaw, bahin sa plataporma sa SonarQube. Usa ka gamay nga teorya - kung unsa kini sa kinatibuk-an, alang sa mga nakadungog bahin niini sa unang higayon:

soundQube (kanhi Sonar) usa ka open source nga plataporma alang sa padayon nga inspeksyon ug pagsukod sa kalidad sa code.
Nagsuporta sa pagtuki sa code ug pag-ila sa sayup sumala sa mga lagda sa MISRA C, MISRA C++, MITER/CWE ug CERT Secure Coding Standards programming standards. Makaila usab kini sa mga sayop gikan sa OWASP Top 10 ug CWE/SANS Top 25 programming errors lists.
Bisan pa sa kamatuoran nga ang plataporma naggamit sa nagkalain-laing andam nga mga himan, ang SonarQube nagpamenos sa mga resulta ngadto sa usa ka dashboard, nga nagtipig sa usa ka kasaysayan sa pagdagan ug sa ingon nagtugot kanimo nga makita ang kinatibuk-ang uso sa mga pagbag-o sa kalidad sa software sa panahon sa pag-uswag.

Dugang detalye makita sa opisyal nga website

Daghang gidaghanon sa mga programming language ang gisuportahan. Sa paghukom sa impormasyon gikan sa link sa ibabaw, kini labaw pa sa 25 ka mga pinulongan. Aron masuportahan ang usa ka piho nga sinultian, kinahanglan nimo nga i-install ang angay nga plugin. Ang bersyon sa komunidad naglakip sa usa ka plugin alang sa pagtrabaho uban Javascript (lakip ang mga typeсript), bisan kung ang wiki nagsulti nga sukwahi. Sa luyo Javascript mga tubag sa plugin SonarJS, para sa Typescript SonarTS sumala niana.

Ang opisyal nga kliyente gigamit sa pagpadala sa impormasyon sa coverage sonarqube-scanner, nga, gamit ang mga setting gikan sa config-file, nagpadala niini nga datos ngadto sa server soundQube para sa dugang nga konsolidasyon ug paghugpong.

Sa Javascript mao npm wrapper. Busa, magsugod kita sa sunod-sunod nga pagpatuman soundQube в Vue-proyekto gamit Mga Sinulat.

Aron i-deploy ang usa ka server soundQube atong pahimuslan docker-compose.

sonar.yaml:

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

Paglusad:

docker-compose -f sonar.yml up

Human niini soundQube magamit sa: http://localhost:9001 .

Wala pa’y mga proyekto niini ug patas kana. Atong tul-iron kini nga sitwasyon. Gikuha nako ang opisyal nga pananglitan nga proyekto alang sa VueJS+TS+Jest. Atong iduko kini sa atong kaugalingon:

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

Una kinahanglan naton i-install ang kliyente soundQube, nga gitawag sonar-scannerpara npm naay wrapper:

yarn add sonarqube-scanner

Ug dayon idugang ang sugo sa skrip sa pagtrabaho uban niini.

package.json:

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

Sunod, aron magtrabaho ang scanner, kinahanglan nimo nga ibutang ang mga setting sa proyekto sa usa ka espesyal nga file. Magsugod ta sa mga sukaranan.

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 - adres Sonar'A;
• sonar.projectKey – talagsaon nga project identifier sa server Sonar'A;
• sonar.projectName – ang ngalan niini, kini mahimong usbon bisan unsang orasa, tungod kay ang proyekto giila ni yawe sa proyekto;
• sonar.mga tinubdan – folder nga adunay mga tinubdan, kasagaran kini src, apan mahimong bisan unsa. Kini nga folder gitakda nga may kalabotan sa root folder, nga mao ang folder diin gilusad ang scanner;
• sonar.mga pagsulay - usa ka parameter nga nahiuyon sa nauna. Kini ang folder diin nahimutang ang mga pagsulay. Sa kini nga proyekto, wala’y ingon nga folder, ug ang pagsulay nahimutang tapad sa sangkap nga gisulayan sa folder 'pagsulay', mao nga dili nato kini ibaliwala sa pagkakaron ug gamiton ang sunod nga parameter;
• sonar.test.inclusions - dalan alang sa mga pagsulay gamit ang maskara, mahimong adunay daghang mga elemento nga gilista nga gibulag sa mga koma;
• sonar.sourceEncoding - pag-encode alang sa gigikanan nga mga file.

Alang sa una nga paglansad sa scanner, andam na ang tanan, gawas sa panguna nga nag-una nga aksyon: paglansad sa makina sa pagsulay mismo, aron makamugna kini kasayuran bahin sa sakup, nga gamiton sa ulahi.

Apan aron mahimo kini, kinahanglan nimo nga i-configure ang makina sa pagsulay aron makamugna kini nga kasayuran. Niini nga proyekto, ang makina sa pagsulay mao ang adunay. Ug ang mga setting niini anaa sa katugbang nga seksyon sa file package.json.

Atong idugang kini nga mga setting:

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

Kana mao, gibutang namon ang bandila mismo alang sa panginahanglan sa pagkalkulo sa sakup ug ang gigikanan (uban ang mga eksepsiyon) nga gibase sa kung diin kini maporma.

Karon atong buhaton ang pagsulay:

yarn test

Atong makita ang mosunod:

Ang rason mao nga walay code sa component mismo. Ayuhon nato ni.

HelloWorld.vue:

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

Kini igo na aron makalkulo ang coverage.

Human sa pagsugod pag-usab sa pagsulay, atong sigurohon kini:

Sa screen kinahanglan natong makita ang impormasyon mahitungod sa coverage, ug usa ka folder ang pagabuhaton sa project folder coverage nga adunay kasayuran sa pagsakup sa pagsulay sa usa ka unibersal nga pormat LCOV (LTP GCOV extension).

Si Gcov usa ka libre nga gipang-apod-apod nga utility para sa pagsusi sa code coverage. Ang Gcov nagmugna sa eksaktong gidaghanon sa mga pagpatay alang sa matag pahayag sa usa ka programa ug nagtugot kanimo sa pagdugang sa mga anotasyon sa source code. Ang Gcov moabut isip usa ka standard utility isip kabahin sa GCC package.
Si Lcov - graphical nga interface alang sa gcov. Nag-assemble kini og mga gcov files para sa daghang source files ug naggama og set sa HTML nga mga panid nga adunay code ug impormasyon sa coverage. Ang mga panid gihimo usab aron mapadali ang pag-navigate. Gisuportahan sa Lcov ang pagsakup sa mga kuwerdas, mga gimbuhaton, ug mga sanga.

Human makompleto ang mga pagsulay, ang impormasyon sa coverage mahimutang sa coverage/lcov.info.
Kinahanglan natong isulti Sonar'Diin ko kini makuha? Busa, atong idugang ang mosunod nga mga linya sa configuration file niini. Apan adunay usa ka punto: ang mga proyekto mahimong multilinggwal, nga mao, sa folder src adunay mga source code alang sa daghang mga programming language ug kalambigitan sa usa o lain, ug sa baylo, ang paggamit sa usa ka partikular nga plugin gitino pinaagi sa extension niini. Ug ang impormasyon sa coverage mahimong tipigan sa lain-laing mga dapit alang sa lain-laing mga programming language, mao nga ang matag pinulongan adunay kaugalingong seksyon alang sa pag-set up niini. Gigamit sa among proyekto Mga Sinulat, mao nga nanginahanglan kami og seksyon sa mga setting para lang niini:

sonar-project.properties:

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

Andam na ang tanan alang sa unang paglansad sa scanner. Gusto nakong timan-an nga ang proyekto mao Sonar'e awtomatik nga gihimo sa unang higayon nga imong gipadagan ang scanner alang sa gihatag nga proyekto. Sa sunod nga mga panahon, ang impormasyon matigom aron makita ang dynamics sa mga kausaban sa mga parameter sa proyekto sa paglabay sa panahon.

Busa, atong gamiton ang sugo nga gihimo sa sayo pa package.json:

yarn run sonar 

Mubo nga sulat: mahimo usab nimo gamiton ang parameter -X para sa mas detalyado nga pag-log.

Kung ang scanner gilunsad sa unang higayon, nan ang binary sa scanner mismo ang una nga ma-download. Human niana kini magsugod ug magsugod sa pag-scan sa server Sonar'a para sa na-install nga mga plugins, sa ingon pagkalkulo sa suportadong pinulongan. Ang lainlaing uban pang mga parameter alang sa operasyon niini gikarga usab: kalidad nga mga profile, aktibo nga mga lagda, metrics repository, mga lagda sa server.

Mubo nga sulat: Dili kami maghisgot bahin niini sa detalye sa sulud sa kini nga artikulo, apan mahimo nimo kanunay nga makontak ang opisyal nga mga gigikanan.

Sunod, magsugod ang pagtuki sa folder src alang sa pagkaanaa sa tinubdan nga mga payl alang sa tanan (kon ang usa ka espesipiko dili klaro nga espesipiko) gisuportahan nga pinulongan, uban sa ilang sunod nga pag-indeks.

Sunod moabut ang lain-laing mga pag-analisar, nga wala namo gipunting sa kini nga artikulo (pananglitan, sama sa linting, pag-ila sa pagdoble sa code, ug uban pa).

Sa katapusan sa trabaho sa scanner, ang tanan nga nakolekta nga kasayuran giipon, gi-archive ug gipadala sa server.

Pagkahuman niini, makita na nato kung unsa ang nahitabo sa web interface:

Ingon sa atong makita, adunay usa ka butang nga nagtrabaho, ug bisan nagpakita sa usa ka matang sa coverage, apan kini dili mohaum sa atoa adunay-report.

Atong hisgotan kini. Atong tan-awon ang proyekto sa dugang nga detalye, i-klik ang kantidad sa pagsakup, ug "mahulog" sa usa ka detalyado nga taho sa file:

Dinhi atong makita, dugang pa sa nag-unang, gisusi nga file HelloWorld.vue, adunay usa usab ka file main.ts, nga makadaut sa tibuok nga hulagway sa coverage. Apan unsaon nga wala man nato kini iapil sa kalkulasyon sa coverage. Oo, ang tanan husto, apan kini anaa sa lebel adunay, apan gi-indeks kini sa scanner, mao nga natapos kini sa mga kalkulasyon niini.

Ayuhon nato kini:

sonar-project.properties:

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

Gusto ko nga maghimo usa ka pagpatin-aw: dugang sa mga folder nga gitakda sa kini nga parameter, ang tanan nga mga folder nga gilista sa parameter gidugang usab sonar.test.inclusions.

Pagkahuman sa paglansad sa scanner, nakita namon ang husto nga kasayuran:

Atong tan-awon ang sunod nga punto - Mga kalidad nga profile. Naghisgot ko sa ibabaw bahin sa suporta Sonarsa daghang mga pinulongan sa samang higayon. Mao gyud kini ang atong nakita. Apan nahibal-an namon nga ang among proyekto nahisulat sa TS, busa nganong piliton ang scanner sa wala kinahanglana nga mga manipulasyon ug mga pagsusi. Atong ibutang ang pinulongan alang sa pagtuki pinaagi sa pagdugang og usa pa ka parameter sa configuration file Sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

Atong padagan pag-usab ang scanner ug tan-awa ang resulta:

Ang coverage hingpit nga nawala.

Kung atong tan-awon ang log sa scanner, atong makita ang mosunod nga linya:

Sa ato pa, ang among mga file sa proyekto wala gi-index.

Ang sitwasyon mao ang mosunod: opisyal nga gisuportahan Mga VueJs naa sa plugin SonarJSkinsay responsable Javascript.

Apan kini nga suporta wala sa plugin SonarTS alang sa TS, mahitungod diin ang usa ka opisyal nga tiket giablihan sa bug tracker Sonar'A:

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

Ania ang pipila ka mga tubag gikan sa usa sa mga representante gikan sa mga developer sa SonarQube, nga nagpamatuod niini nga kamatuoran.

Apan ang tanan nagtrabaho alang kanamo, mosupak ka. Oo mao na, sulayan nato kini gamay "hack".
Kung adunay suporta .vue- mga file Sonar'oh, unya atong sulayan nga sultihan siya nga isipon sila ingon Mga Sinulat.

Atong idugang ang usa ka parameter:

sonar-project.properties:

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

Atong ilunsad ang scanner:

Ug, voila, ang tanan mibalik sa normal, ug sa usa ka profile lamang alang sa Mga Sinulat. Sa ato pa, nasulbad namo ang problema sa suporta VueJs+TS alang sa soundQube.

Atong sulayan ang pagpadayon ug pagpauswag gamay sa kasayuran sa pagsakup.

Unsa ang among nahimo hangtod karon:

• gidugang sa proyekto Sonar- scanner;
• gipahimutang adunay aron makamugna og impormasyon sa coverage;
• gi-configure Sonar- scanner;
• nasulbad ang problema sa suporta .vue-mga file + Mga Sinulat.

Dugang sa pagsakup sa pagsulay, adunay uban pang makapaikag nga mapuslanon nga pamatasan alang sa kalidad sa code, pananglitan, pagdoble sa code ug ang gidaghanon sa mga linya (nalambigit sa pagkalkula sa mga coefficient nga may kalabotan sa pagkakomplikado sa code) sa proyekto.

Sa kasamtangan nga pagpatuman sa plugin alang sa pagtrabaho uban sa TS (SonarTS) dili molihok CPD (Copy Paste Detector) ug pag-ihap sa mga linya sa code .vue- mga file.

Aron makahimo og sintetikong sitwasyon sa pagdoble sa code, i-duplicate lang ang component file nga adunay lain nga ngalan ug idugang usab kini sa code main.ts usa ka dummy function ug i-duplicate kini sa lain nga ngalan. Aron masusi ang pagdoble sama sa .vue, ug sa .ts - mga file.

main.ts:

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

Aron mahimo kini, kinahanglan nimo nga temporaryo nga magkomento sa linya sa pag-configure:

sonar-project.properties:

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

Atong i-restart ang scanner kauban ang pagsulay:

yarn test && yarn run sonar

Siyempre, ang among coverage mahulog, apan karon dili kami interesado niana.

Sa termino sa pagdoble sa mga linya sa code, atong makita:

Sa pagsusi atong gamiton CPD-utilidad - jscpd:

npx jscpd src

Alang sa mga linya sa code:

Tingali kini masulbad sa umaabot nga mga bersyon sa plugin SonarJS(TS). Gusto nakong timan-an nga sila anam-anam nga nagsugod sa paghiusa niining duha ka mga plugins ngadto sa usa SonarJS, nga sa akong hunahuna husto.

Karon gusto nakong ikonsiderar ang kapilian sa pagpaayo sa impormasyon sa coverage.

Sa pagkakaron atong makita ang test coverage sa porsyento nga termino, alang sa tibuok nga proyekto, ug alang sa mga file sa partikular. Apan posible nga mapalapad kini nga timailhan nga adunay kasayuran bahin sa gidaghanon yunit-mga pagsulay alang sa proyekto, ingon man sa konteksto sa mga file.

Adunay usa ka librarya nga mahimo adunay-convert ang report ngadto sa format para sa Sonar'A:
generic nga datos sa pagsulay - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Atong i-install kini nga librarya sa atong proyekto:

yarn add jest-sonar-reporter

Ug idugang kini sa configuration adunay:

package.json:

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

Karon atong buhaton ang pagsulay:

yarn test

Pagkahuman usa ka file ang himuon sa gamut sa proyekto test-report.xml.

Gamiton nato sa configuration Sonar'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Ug i-restart ang scanner:

yarn run sonar

Atong tan-awon kon unsa ang nausab sa interface Sonar'A:

Ug walay nausab. Ang tinuod mao nga wala isipa sa Sonar ang mga file nga gihulagway sa Jest report isip mga file yunit- mga pagsulay. Aron matul-id kini nga sitwasyon, gigamit namon ang parameter sa pag-configure Sonar sonar.mga pagsulay, diin tin-aw namon nga ipasabut ang mga folder nga adunay mga pagsulay (adunay usa ra kami karon):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Atong i-restart ang scanner:

yarn run sonar

Atong tan-awon kung unsa ang nabag-o sa interface:

Karon atong nakita ang gidaghanon sa atong mga yunit-mga pagsulay ug, nga napakyas pinaagi sa pag-klik sa sulod, atong makita ang pag-apod-apod niini nga gidaghanon sa mga file sa proyekto:

konklusyon

Busa, nagtan-aw kami sa usa ka himan alang sa padayon nga pagtuki soundQube. Malampuson namon nga gisagol niini ang usa ka proyekto nga gisulat sa VueJs+TS. Giayo ang pipila ka mga isyu sa pagkaangay. Gidugangan namon ang sulud sa kasayuran sa timailhan sa pagsakup sa pagsulay. Niini nga artikulo, among gisusi ang usa lamang sa mga criteria alang sa kalidad sa code (tingali usa sa mga nag-unang), apan soundQube nagsuporta sa ubang kalidad nga pamatasan, lakip ang pagsulay sa kaluwasan. Apan dili tanan niini nga mga bahin hingpit nga magamit sa komunidad- mga bersyon. Usa sa makapaikag ug mapuslanon nga bahin mao ang paghiusa soundQube uban sa lain-laing mga sistema sa pagdumala sa code repository, sama sa GitLab ug BitBucket. Aron mapugngan merge pull(merge) hangyo'a ngadto sa nag-unang sanga sa repository sa diha nga ang coverage mao ang degraded. Apan kini usa ka istorya alang sa usa ka hingpit nga lahi nga artikulo.

PS: Ang tanan nga gihulagway sa artikulo sa porma sa code anaa sa akong tinidor.

Ang mga rehistradong tiggamit lamang ang makaapil sa survey. Sign in, walay sapayan.

Gigamit ba nimo ang plataporma sa SonarQube:

• 26,3%Oo5

• 15,8%Dili3

• 15,8%Nakadungog ko bahin niini nga plataporma ug gusto nakong gamiton3

• 10,5%Nakadungog ko bahin niini nga plataporma ug dili gusto nga mogamit2

• 0,0%Lain nga platform0 ang akong gigamit

• 31,6%First time nako nakabalita about sa iya6

19 ka tiggamit ang miboto. 3 ka tiggamit ang nag- abstain.

Source: www.habr.com