Við notum vettvanginn virkan í starfi okkar hljóðQube að viðhalda gæðum kóðans á háu stigi. Þegar samþætt er eitt af verkefnunum sem skrifuð eru inn VueJs+Typescript, vandamál komu upp. Þess vegna langar mig að segja þér nánar hvernig okkur tókst að leysa þau.

Í þessari grein munum við tala, eins og ég skrifaði hér að ofan, um SonarQube vettvang. Smá kenning - hvað það er almennt, fyrir þá sem eru að heyra um það í fyrsta skipti:

hljóðQube (fyrrverandi Sonar) er opinn uppspretta vettvangur fyrir stöðuga skoðun og gæðamælingar kóða.
Styður kóðagreiningu og villugreiningu samkvæmt reglum MISRA C, MISRA C++, MITER/CWE og CERT Secure Coding Standards forritunarstaðla. Það getur líka greint villur frá OWASP Top 10 og CWE/SANS Top 25 forritunarvillulistanum.
Þrátt fyrir þá staðreynd að pallurinn notar ýmis tilbúin verkfæri, minnkar SonarQube niðurstöðurnar í eitt mælaborð, heldur sögu keyrslu og gerir þér kleift að sjá almenna þróun breytinga á gæðum hugbúnaðar meðan á þróun stendur.

Nánari upplýsingar má finna á opinber vefsíða

Mikill fjöldi forritunarmála er studdur. Miðað við upplýsingarnar í hlekknum hér að ofan eru þetta meira en 25 tungumál. Til að styðja tiltekið tungumál verður þú að setja upp viðeigandi viðbót. Samfélagsútgáfan inniheldur viðbót til að vinna með Javascript (þar á meðal typesсript), þó að wiki segir hið gagnstæða. Fyrir aftan Javascript svör við viðbótum SonarJS, fyrir leturrit SonarTS sig.

Opinberi viðskiptavinurinn er notaður til að senda upplýsingar um umfjöllun sonarqube-skanni, sem, með því að nota stillingarnar frá config-skrá, sendir þessi gögn til netþjónsins hljóðQube til frekari samþjöppunar og sameiningar.

Fyrir Javascript есть npm umbúðir. Svo, við skulum byrja skref-fyrir-skref framkvæmd hljóðQube в Vue-verkefni með því að nota Ritgerð.

Til að dreifa þjóninum hljóðQube nýtum okkur skipuleggjari.

sonar.yaml:

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

Ræsa:

docker-compose -f sonar.yml up

Eftir hljóðQube verður í boði á: http://localhost:9001 .

Það eru engin verkefni í henni ennþá og það er sanngjarnt. Við munum leiðrétta þessa stöðu. Ég tók opinbera dæmi verkefnið fyrir VueJS+TS+Jest. Við skulum beygja það að okkur sjálfum:

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

Fyrst þurfum við að setja upp viðskiptavininn hljóðQube, sem heitir sónarskannifyrir npm það er umbúðir:

yarn add sonarqube-scanner

Og strax bæta skipuninni við forskriftir að vinna með það.

package.json:

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

Næst, til að skanninn virki, þarftu að stilla verkefnisstillingarnar í sérstakri skrá. Byrjum á grunnatriðum.

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 - heimilisfang Sonar'A;
• sonar.projectKey – einstakt verkefnisauðkenni á þjóninum Sonar'A;
• sonar.projectName – nafn þess, það er hægt að breyta því hvenær sem er, þar sem verkefnið er auðkennt með verkefnislykill;
• sónar.heimildir – mappa með heimildum, venjulega þetta src, en getur verið hvað sem er. Þessi mappa er sett miðað við rótarmöppuna, sem er mappan sem skanninn er ræstur úr;
• sónar.próf – færibreyta sem fer í takt við þá fyrri. Þetta er mappan þar sem prófin eru staðsett. Í þessu verkefni er engin slík mappa og prófið er staðsett við hliðina á íhlutnum sem verið er að prófa í möppunni 'próf', svo við munum hunsa það í bili og nota næstu færibreytu;
• sonar.test.includes - slóð fyrir prófanir sem nota grímu, það geta verið nokkrir þættir skráðir aðskildir með kommum;
• sonar.sourceEncoding - kóðun fyrir upprunaskrár.

Fyrir fyrstu ræsingu skanna er allt tilbúið, nema aðalaðgerðin á undan: að ræsa prófunarvélina sjálfa, svo að hún geti búið til upplýsingar um umfangið, sem skanninn mun síðan nota.

En til að gera þetta þarftu að stilla prófunarvélina til að búa til þessar upplýsingar. Í þessu verkefni er prófunarvélin það er. Og stillingar þess eru í samsvarandi hluta skráarinnar pakki.json.

Við skulum bæta þessum stillingum við:

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

Það er að segja að við setjum sjálfan fánann fyrir þörfina á að reikna út umfang og uppruna (ásamt undantekningum) sem hann verður til á grundvelli.

Nú skulum við keyra prófið:

yarn test

Við munum sjá eftirfarandi:

Ástæðan er sú að það er enginn kóði í íhlutnum sjálfum. Við skulum laga þetta.

HelloWorld.vue:

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

Þetta mun duga til að reikna út þekju.

Eftir að hafa endurræst prófið munum við ganga úr skugga um þetta:

Á skjánum ættum við að sjá upplýsingar um umfjöllunina og mappa verður búin til í verkefnamöppunni umfjöllun með upplýsingum um prófun á alhliða sniði LCOV (LTP GCOV viðbót).

Gcov er frjálst dreift tól til að skoða kóðaþekju. Gcov býr til nákvæman fjölda framkvæmda fyrir hverja setningu í forriti og gerir þér kleift að bæta athugasemdum við frumkóðann. Gcov kemur sem staðlað tól sem hluti af GCC pakkanum.
Lcov - grafískt viðmót fyrir gcov. Það setur saman gcov skrár fyrir margar frumskrár og framleiðir sett af HTML síðum með kóða og umfangsupplýsingum. Síður eru einnig búnar til til að auðvelda leiðsögn. Lcov styður umfjöllun um strengi, aðgerðir og greinar.

Eftir að prófunum er lokið verða upplýsingar um umfang staðsettar í coverage/lcov.info.
Við þurfum að segja Sonar'Hvaðan get ég fengið það? Þess vegna skulum við bæta eftirfarandi línum við stillingarskrána. En það er einn punktur: verkefni geta verið fjöltyngd, það er að segja í möppunni src það eru frumkóðar fyrir nokkur forritunarmál og tengsl við eitt eða annað, og aftur á móti ræðst notkun eins eða annars viðbætur af framlengingu þess. Og umfangsupplýsingar geta verið geymdar á mismunandi stöðum fyrir mismunandi forritunarmál, þannig að hvert tungumál hefur sinn hluta til að setja þetta upp. Verkefnið okkar notar Ritgerð, svo við þurfum stillingarhluta bara fyrir það:

sonar-project.properties:

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

Allt er tilbúið fyrir fyrstu ræsingu skanna. Ég vil taka það fram að verkefnið er Sonar'e er búið til sjálfkrafa í fyrsta skipti sem þú keyrir skanna fyrir tiltekið verkefni. Í síðari tímum verður upplýsingum safnað til að sjá gangverk breytinga á breytum verkefnisins með tímanum.

Svo, við skulum nota skipunina sem var búin til fyrr í pakki.json:

yarn run sonar 

Ath: þú getur líka notað færibreytuna -X fyrir nánari skráningu.

Ef skanninn var ræstur í fyrsta skipti, þá verður tvöfaldur skannisins sjálfs hlaðinn niður fyrst. Eftir það byrjar það og byrjar að skanna netþjóninn Sonar'a fyrir uppsett viðbætur og reiknar þar með studd tungumál. Ýmsar aðrar breytur fyrir rekstur þess eru einnig hlaðnar: gæðasnið, virkar reglur, mælingageymsla, netþjónareglur.

Ath: Við munum ekki fjalla um þau í smáatriðum innan ramma þessarar greinar, en þú getur alltaf haft samband við opinberar heimildir.

Næst hefst möppugreiningin src fyrir framboð á frumskrám fyrir öll (ef tiltekið er ekki sérstaklega tilgreint) studd tungumál, með síðari flokkun þeirra.

Næst koma ýmsar aðrar greiningar, sem við einblínum ekki á í þessari grein (til dæmis, svo sem fóðrun, uppgötvun á tvíverkun kóða o.s.frv.).

Í lok vinnu skannarsins er öllum söfnuðum upplýsingum safnað saman, settar í geymslu og sendar á netþjóninn.

Eftir þetta getum við nú þegar séð hvað gerðist í vefviðmótinu:

Eins og við sjáum virkaði eitthvað og sýnir jafnvel einhverja umfjöllun, en það passar ekki við okkar það er-skýrsla.

Við skulum reikna það út. Við skulum skoða verkefnið nánar, smella á þekjugildið og „falla í gegnum“ í ítarlega skráarskýrslu:

Hér sjáum við, til viðbótar við aðal, skoðaða skrá HelloWorld.vue, það er líka skrá aðal.ts, sem spillir heildarmynd umfjöllunarinnar. En hvernig stendur á því að við höfum útilokað það frá útreikningi á umfjöllun. Já, allt er rétt, en það var á stigi það er, en skanninn skráði það, svo það endaði í útreikningum þess.

Við skulum laga þetta:

sonar-project.properties:

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

Mig langar til að gera skýringar: til viðbótar við möppurnar sem eru tilgreindar í þessari færibreytu er öllum möppum sem skráðar eru í færibreytunni einnig bætt við sonar.test.includes.

Eftir að hafa ræst skannann sjáum við réttar upplýsingar:

Við skulum líta á næsta atriði - Gæða snið. Ég talaði hér að ofan um stuðning Sonará mörgum tungumálum á sama tíma. Þetta er einmitt það sem við erum að sjá. En við vitum að verkefnið okkar er skrifað inn TS, svo hvers vegna þenja skannann með óþarfa meðhöndlun og eftirliti. Við munum stilla tungumálið fyrir greiningu með því að bæta einni færibreytu í viðbót við stillingarskrána Sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

Við skulum keyra skannann aftur og sjá niðurstöðuna:

Umfjöllunin var alveg horfin.

Ef við skoðum skannaskrána getum við séð eftirfarandi línu:

Það er, verkefnaskrár okkar voru einfaldlega ekki verðtryggðar.

Staðan er sem hér segir: opinberlega studd VueJs er í viðbótinni SonarJShver ber ábyrgð á Javascript.

En þessi stuðningur er ekki í viðbótinni SonarTS í TS, sem opinber miði var opnaður um í villurekki Sonar'A:

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

Hér eru nokkur svör frá einum af fulltrúum SonarQube forritara, sem staðfesta þessa staðreynd.

En allt virkaði fyrir okkur, þú mótmælir. Já það er það, við skulum reyna það aðeins "hakk".
Ef það er stuðningur .vue-skrár Sonar'Ó, þá skulum við reyna að segja honum að líta á þá sem Ritgerð.

Við skulum bæta við færibreytu:

sonar-project.properties:

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

Við skulum ræsa skannann:

Og, voila, allt er aftur í eðlilegt horf, og með einum prófíl aðeins fyrir Ritgerð. Það er að segja, okkur tókst að leysa vandamálið í stuðningi VueJs+TS í hljóðQube.

Reynum að ganga lengra og bæta umfjöllunarupplýsingarnar aðeins.

Það sem við höfum gert hingað til:

• bætt við verkefnið Sonar-skanni;
• sett upp það er að búa til umfjöllunarupplýsingar;
• stillt Sonar-skanni;
• leysti stuðningsvandann .vue-skrár + Ritgerð.

Til viðbótar við prófumfjöllun eru aðrar áhugaverðar gagnlegar viðmiðanir fyrir kóðagæði, til dæmis tvíföldun kóða og fjölda lína (sem taka þátt í útreikningi á stuðlum sem tengjast flækjustigi kóða) verkefnisins.

Í núverandi útfærslu viðbótarinnar til að vinna með TS (SonarTS) mun ekki virka CPD (Copy Paste Detector) og telja línur af kóða .vue-skrár.

Til að búa til tilbúið ástand af tvíverkun kóða, einfaldlega afritaðu íhlutaskrána með öðru nafni og bættu henni einnig við kóðann aðal.ts dummy fall og afritaðu það með öðru nafni. Til að athuga með tvíverknað eins og í .vue, og í .ts -skrár.

main.ts:

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

Til að gera þetta þarftu tímabundið að gera athugasemdir við stillingarlínuna:

sonar-project.properties:

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

Við skulum endurræsa skannann ásamt prófunum:

yarn test && yarn run sonar

Auðvitað mun umfjöllun okkar falla en núna höfum við ekki áhuga á því.

Hvað varðar afrit af kóðalínum munum við sjá:

Til að athuga munum við nota CPD-gagnsemi - jscpd:

npx jscpd src

Fyrir kóðalínur:

Kannski verður þetta leyst í síðari viðbótaútgáfum SonarJS(TS). Ég vil taka það fram að þeir eru smám saman að byrja að sameina þessar tvær viðbætur í eitt SonarJS, sem ég held að sé rétt.

Nú vildi ég íhuga þann möguleika að bæta upplýsingar um umfjöllun.

Hingað til getum við séð prófun í prósentum fyrir allt verkefnið, og sérstaklega fyrir skrár. En það er hægt að stækka þennan vísi með upplýsingum um magnið eining-próf ​​fyrir verkefnið, sem og í samhengi við skrár.

Það er bókasafn sem getur það er-breyta skýrslunni í snið fyrir Sonar'A:
almenn prófunargögn - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Við skulum setja upp þetta bókasafn í verkefninu okkar:

yarn add jest-sonar-reporter

Og bættu því við uppsetninguna það er:

package.json:

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

Nú skulum við keyra prófið:

yarn test

Eftir það verður búið til skrá í rót verkefnisins test-report.xml.

Við skulum nota það í uppsetningunni Sonar'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Og endurræstu skannann:

yarn run sonar

Við skulum sjá hvað hefur breyst í viðmótinu Sonar'A:

Og ekkert hefur breyst. Staðreyndin er sú að Sonar lítur ekki á skrárnar sem lýst er í Jest skýrslunni sem skrár eining-próf. Til þess að leiðrétta þetta ástand notum við stillingarbreytu Sonar sónar.próf, þar sem við munum beinlínis tilgreina möppurnar með prófunum (við höfum aðeins eina í bili):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Endurræsum skannann:

yarn run sonar

Við skulum sjá hvað hefur breyst í viðmótinu:

Nú höfum við séð fjölda okkar eining-próf ​​og, eftir að hafa mistekist með því að smella inni, getum við séð dreifingu þessa númers meðal verkefnaskránna:

Ályktun

Svo skoðuðum við tæki til stöðugrar greiningar hljóðQube. Við fléttum inn í það verkefni sem skrifað var inn í VueJs+TS. Lagaði nokkur samhæfnisvandamál. Við aukum upplýsingainnihald prófunarvísis. Í þessari grein skoðuðum við aðeins eitt af gæðaviðmiðunum kóða (kannski eitt af þeim helstu), en hljóðQube styður önnur gæðaviðmið, þar á meðal öryggisprófanir. En ekki eru allir þessir eiginleikar að fullu tiltækir í samfélag-útgáfur. Einn af áhugaverðu og gagnlegu eiginleikum er samþætting hljóðQube með ýmsum kóðageymslustjórnunarkerfum, svo sem GitLab og BitBucket. Til að koma í veg fyrir sameina draga (sameina) beiðni'a til aðalútibús geymslunnar þegar þekjan er skert. En þetta er saga fyrir allt aðra grein.

PS: Allt sem lýst er í greininni í formi kóða er fáanlegt í gafflinn minn.

Aðeins skráðir notendur geta tekið þátt í könnuninni. Skráðu þig inn, takk.

Notar þú SonarQube vettvang:

• 26,3%Já5

• 15,8%No3

• 15,8%Ég heyrði um þennan vettvang og langar að nota3

• 10,5%Ég hef heyrt um þennan vettvang og vil ekki nota2

• 0,0%Ég er að nota annan vettvang0

• 31,6%Í fyrsta skipti sem ég hef heyrt um hana6

19 notendur greiddu atkvæði. 3 notendur sátu hjá.

Heimild: www.habr.com