Aktibong ginagamit namin ang platform sa aming trabaho soundQube upang mapanatili ang kalidad ng code sa isang mataas na antas. Kapag isinasama ang isa sa mga proyektong nakasulat sa VueJs+Typescript, lumitaw ang mga problema. Samakatuwid, nais kong sabihin sa iyo nang mas detalyado kung paano namin nalutas ang mga ito.

Sa artikulong ito ay pag-uusapan natin, tulad ng isinulat ko sa itaas, tungkol sa platform ng SonarQube. Isang maliit na teorya - kung ano ito sa pangkalahatan, para sa mga nakakarinig tungkol dito sa unang pagkakataon:

soundQube (dating Sonar) ay isang open source na platform para sa tuluy-tuloy na inspeksyon at pagsukat ng kalidad ng code.
Sinusuportahan ang pagsusuri ng code at pagtuklas ng error ayon sa mga panuntunan ng MISRA C, MISRA C++, MITER/CWE at CERT Secure Coding Standards programming standards. Maaari din itong makilala ang mga error mula sa OWASP Top 10 at CWE/SANS Top 25 programming errors lists.
Sa kabila ng katotohanan na ang platform ay gumagamit ng iba't ibang mga handa na tool, ang SonarQube ay binabawasan ang mga resulta sa isang solong dashboard, pinapanatili ang isang kasaysayan ng mga pagtakbo at sa gayon ay nagpapahintulot sa iyo na makita ang pangkalahatang trend ng mga pagbabago sa kalidad ng software sa panahon ng pag-unlad.

Higit pang mga detalye ay matatagpuan sa opisyal na website

Ang isang malaking bilang ng mga programming language ay suportado. Sa paghusga sa impormasyon mula sa link sa itaas, ang mga ito ay higit sa 25 mga wika. Upang suportahan ang isang partikular na wika, dapat mong i-install ang naaangkop na plugin. Ang bersyon ng komunidad ay may kasamang plugin para sa pagtatrabaho Javascript (kabilang ang mga typeсript), bagama't kabaligtaran ang sinasabi ng wiki. Sa likod Javascript sagot ng plugin SonarJS, para sa Typescript SonarTS ayon sa pagkakabanggit.

Ang opisyal na kliyente ay ginagamit upang magpadala ng impormasyon sa saklaw sonarqube-scanner, na, gamit ang mga setting mula sa config-file, nagpapadala ng data na ito sa server soundQube para sa karagdagang pagsasama-sama at pagsasama-sama.

Para sa Javascript mayroon npm wrapper. Kaya, simulan natin ang sunud-sunod na pagpapatupad soundQube в Vue-proyekto gamit Mga Uri ng teksto.

Upang mag-deploy ng isang server soundQube samantalahin natin docker-compose.

sonar.yaml:

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

Ilunsad:

docker-compose -f sonar.yml up

Pagkatapos noon soundQube ay makukuha sa: http://localhost:9001 .

Wala pang mga proyekto dito at patas iyon. Itatama natin ang sitwasyong ito. Kinuha ko ang opisyal na halimbawang proyekto para sa VueJS+TS+Jest. Ibaluktot natin ito sa ating sarili:

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

Una kailangan nating i-install ang kliyente soundQubena tinawag sonar-scannerpara sa npm may wrapper:

yarn add sonarqube-scanner

At agad na idagdag ang utos sa script upang magtrabaho kasama nito.

package.json:

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

Susunod, para gumana ang scanner, kailangan mong itakda ang mga setting ng proyekto sa isang espesyal na file. Magsimula tayo sa mga pangunahing kaalaman.

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 - address Sonar'A;
• sonar.projectKey – natatanging project identifier sa server Sonar'A;
• sonar.projectName – ang pangalan nito, maaari itong baguhin anumang oras, dahil ang proyekto ay kinilala ng projectKey;
• sonar.pinagmumulan – folder na may mga mapagkukunan, kadalasan ito SRC, ngunit maaaring maging anuman. Ang folder na ito ay nakatakda kaugnay sa root folder, na kung saan ay ang folder kung saan inilunsad ang scanner;
• sonar.mga pagsubok – isang parameter na kasabay ng nauna. Ito ang folder kung saan matatagpuan ang mga pagsubok. Sa proyektong ito, walang ganoong folder, at ang pagsubok ay matatagpuan sa tabi ng sangkap na sinusuri sa folder 'pagsusulit', kaya hindi namin ito papansinin sa ngayon at gamitin ang susunod na parameter;
• sonar.test.inclusions – landas para sa mga pagsubok gamit ang isang maskara, maaaring mayroong ilang mga elemento na nakalista na pinaghihiwalay ng mga kuwit;
• sonar.sourceEncoding – pag-encode para sa mga source file.

Para sa unang paglulunsad ng scanner, handa na ang lahat, maliban sa pangunahing naunang aksyon: paglulunsad ng test engine mismo, upang makabuo ito ng impormasyon tungkol sa saklaw, na pagkatapos ay gagamitin ng scanner.

Ngunit para magawa ito, kailangan mong i-configure ang test engine para mabuo ang impormasyong ito. Sa proyektong ito, ang test engine ay Jest. At ang mga setting nito ay nasa kaukulang seksyon ng file package.json.

Idagdag natin ang mga setting na ito:

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

Iyon ay, itinakda namin ang bandila mismo para sa pangangailangan na kalkulahin ang saklaw at ang pinagmulan (kasama ang mga pagbubukod) sa batayan kung saan ito mabubuo.

Ngayon, patakbuhin natin ang pagsubok:

yarn test

Makikita natin ang mga sumusunod:

Ang dahilan ay walang code sa mismong bahagi. Ayusin natin ito.

HelloWorld.vue:

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

Ito ay sapat na upang makalkula ang saklaw.

Pagkatapos i-restart ang pagsubok, titiyakin namin ito:

Sa screen dapat nating makita ang impormasyon tungkol sa saklaw, at isang folder ang gagawin sa folder ng proyekto coverage na may impormasyon sa saklaw ng pagsubok sa isang unibersal na format LCOV (LTP GCOV extension).

Gcov ay isang malayang ipinamahagi na utility para sa pagsusuri sa saklaw ng code. Binubuo ng Gcov ang eksaktong bilang ng mga execution para sa bawat statement sa isang program at pinapayagan kang magdagdag ng mga anotasyon sa source code. Dumating ang Gcov bilang isang karaniwang utility bilang bahagi ng GCC package.
Lcov - graphical na interface para sa gcov. Nag-iipon ito ng mga gcov file para sa maraming source file at gumagawa ng isang set ng mga HTML page na may code at impormasyon sa saklaw. Binubuo din ang mga pahina upang gawing mas madali ang pag-navigate. Sinusuportahan ng Lcov ang saklaw ng mga string, function, at branch.

Pagkatapos makumpleto ang mga pagsusulit, ang impormasyon sa saklaw ay makikita sa coverage/lcov.info.
Kailangan nating sabihin Sonar'Saan ko ito makukuha? Samakatuwid, idagdag natin ang mga sumusunod na linya sa configuration file nito. Ngunit mayroong isang punto: ang mga proyekto ay maaaring multilinggwal, iyon ay, sa folder SRC mayroong mga source code para sa ilang mga programming language at kaakibat sa isa o sa isa pa, at sa turn, ang paggamit ng isa o isa pang plugin ay tinutukoy ng extension nito. At ang impormasyon sa saklaw ay maaaring maimbak sa iba't ibang lugar para sa iba't ibang mga programming language, kaya ang bawat wika ay may sariling seksyon para sa pag-set up nito. Ginagamit ng aming proyekto Mga Uri ng teksto, kaya kailangan namin ng seksyon ng mga setting para lang dito:

sonar-project.properties:

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

Handa na ang lahat para sa unang paglulunsad ng scanner. Gusto kong tandaan na ang proyekto ay Sonar'e ay awtomatikong nilikha sa unang pagkakataon na patakbuhin mo ang scanner para sa isang partikular na proyekto. Sa mga susunod na pagkakataon, maiipon ang impormasyon upang makita ang dynamics ng mga pagbabago sa mga parameter ng proyekto sa paglipas ng panahon.

Kaya, gamitin natin ang utos na ginawa kanina package.json:

yarn run sonar 

Tandaan: maaari mo ring gamitin ang parameter -X para sa mas detalyadong pag-log.

Kung ang scanner ay inilunsad sa unang pagkakataon, pagkatapos ay ang binary ng scanner mismo ang unang mada-download. Pagkatapos nito ay magsisimula ito at magsisimulang i-scan ang server Sonar'a para sa mga naka-install na plugin, sa gayon ay kinakalkula ang sinusuportahang wika. Ang iba't ibang mga parameter para sa pagpapatakbo nito ay na-load din: mga profile ng kalidad, aktibong panuntunan, imbakan ng mga sukatan, mga panuntunan sa server.

Tandaan: Hindi namin tatalakayin ang mga ito nang detalyado sa loob ng balangkas ng artikulong ito, ngunit maaari kang palaging makipag-ugnay sa mga opisyal na mapagkukunan.

Susunod, magsisimula ang pagsusuri sa folder SRC para sa pagkakaroon ng mga source file para sa lahat (kung ang isang partikular ay hindi tahasang tinukoy) na sinusuportahang wika, kasama ang kanilang kasunod na pag-index.

Susunod ang iba't ibang mga pagsusuri, na hindi namin pinagtutuunan ng pansin sa artikulong ito (halimbawa, tulad ng linting, pagtuklas ng pagdoble ng code, atbp.).

Sa pinakadulo ng trabaho ng scanner, ang lahat ng nakolektang impormasyon ay pinagsama-sama, naka-archive at ipinadala sa server.

Pagkatapos nito, makikita na natin kung ano ang nangyari sa web interface:

Gaya ng nakikita natin, may gumana, at nagpapakita pa nga ng ilang uri ng coverage, ngunit hindi ito tumutugma sa atin Jest-ulat.

Alamin natin ito. Tingnan natin ang proyekto nang mas detalyado, mag-click sa halaga ng saklaw, at "mahulog" sa isang detalyadong ulat ng file:

Dito nakikita natin, bilang karagdagan sa pangunahing, sinuri na file HelloWorld.vue, mayroon ding file pangunahing.ts, na sumisira sa buong larawan ng coverage. Pero paano naman namin ibinukod ito sa kalkulasyon ng coverage. Oo, lahat ay tama, ngunit ito ay nasa antas Jest, ngunit na-index ito ng scanner, kaya napunta ito sa mga kalkulasyon nito.

Ayusin natin ito:

sonar-project.properties:

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

Gusto kong gumawa ng paglilinaw: bilang karagdagan sa mga folder na tinukoy sa parameter na ito, ang lahat ng mga folder na nakalista sa parameter ay idinagdag din sonar.test.inclusions.

Pagkatapos ilunsad ang scanner, nakikita namin ang tamang impormasyon:

Tingnan natin ang susunod na punto - Mga profile ng kalidad. Nakipag-usap ako sa itaas tungkol sa suporta Sonarsa ilang mga wika sa parehong oras. Ito talaga ang nakikita natin. Ngunit alam namin na ang aming proyekto ay nakasulat sa TS, kaya bakit pilitin ang scanner sa mga hindi kinakailangang manipulasyon at pagsusuri. Itatakda namin ang wika para sa pagsusuri sa pamamagitan ng pagdaragdag ng isa pang parameter sa configuration file Sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

Patakbuhin natin muli ang scanner at tingnan ang resulta:

Ang coverage ay ganap na nawala.

Kung titingnan natin ang log ng scanner, makikita natin ang sumusunod na linya:

Ibig sabihin, hindi lang na-index ang aming mga file ng proyekto.

Ang sitwasyon ay ang mga sumusunod: opisyal na suportado Mga VueJ ay nasa plugin SonarJSkung sino ang may pananagutan Javascript.

Ngunit ang suportang ito ay wala sa plugin SonarTS para sa TS, tungkol sa kung saan binuksan ang isang opisyal na tiket sa bug tracker Sonar'A:

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

Narito ang ilang mga sagot mula sa isa sa mga kinatawan mula sa mga developer ng SonarQube, na nagpapatunay sa katotohanang ito.

Ngunit lahat ay nagtrabaho para sa amin, tumutol ka. Oo nga, subukan natin ito ng kaunti “hack”.
Kung may suporta .vue-mga file Sonar'oh, pagkatapos ay subukan nating sabihin sa kanya na isaalang-alang sila bilang Mga Uri ng teksto.

Magdagdag tayo ng parameter:

sonar-project.properties:

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

Ilunsad natin ang scanner:

At, voila, bumalik sa normal ang lahat, at may isang profile lang para sa Mga Uri ng teksto. Ibig sabihin, nagawa naming lutasin ang problema sa suporta VueJs+TS para sa soundQube.

Subukan nating pumunta pa at pagbutihin ng kaunti ang impormasyon sa saklaw.

Ano ang nagawa namin sa ngayon:

• idinagdag sa proyekto Sonar-scanner;
• set up Jest upang makabuo ng impormasyon sa saklaw;
• naka-configure Sonar-scanner;
• nalutas ang problema sa suporta .vue-mga file + Mga Uri ng teksto.

Bilang karagdagan sa saklaw ng pagsubok, may iba pang mga kawili-wiling kapaki-pakinabang na pamantayan para sa kalidad ng code, halimbawa, pagdoble ng code at ang bilang ng mga linya (kasangkot sa pagkalkula ng mga coefficient na nauugnay sa pagiging kumplikado ng code) ng proyekto.

Sa kasalukuyang pagpapatupad ng plugin para sa pagtatrabaho sa TS (SonarTS) ayaw gumana CPD (Copy Paste Detector) at pagbibilang ng mga linya ng code .vue-mga file.

Para gumawa ng sintetikong sitwasyon ng pagdoble ng code, i-duplicate lang ang component file na may ibang pangalan at idagdag din ito sa code pangunahing.ts isang dummy function at i-duplicate ito sa ibang pangalan. Para tingnan kung may duplikasyon gaya ng sa .vue, at sa .ts -mga file.

main.ts:

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

Upang gawin ito, kailangan mong pansamantalang magkomento sa linya ng pagsasaayos:

sonar-project.properties:

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

I-restart natin ang scanner kasama ng pagsubok:

yarn test && yarn run sonar

Siyempre, babagsak ang coverage namin, pero ngayon hindi kami interesado diyan.

Sa mga tuntunin ng pagdodoble ng mga linya ng code, makikita natin ang:

Upang suriin ay gagamitin namin CPD-kagamitan - jscpd:

npx jscpd src

Para sa mga linya ng code:

Marahil ito ay malulutas sa hinaharap na mga bersyon ng plugin SonarJS(TS). Gusto kong tandaan na unti-unti nilang sinisimulan na pagsamahin ang dalawang plugin na ito sa isa SonarJS, na sa tingin ko ay tama.

Ngayon gusto kong isaalang-alang ang opsyon ng pagpapabuti ng impormasyon sa saklaw.

Sa ngayon ay makikita natin ang saklaw ng pagsubok sa mga termino ng porsyento, para sa buong proyekto, at para sa mga file sa partikular. Ngunit posible na palawakin ang tagapagpahiwatig na ito na may impormasyon tungkol sa dami yunit-mga pagsubok para sa proyekto, pati na rin sa konteksto ng mga file.

May library na pwede Jest-convert ang ulat sa format para sa Sonar'A:
generic na data ng pagsubok - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

I-install natin ang library na ito sa ating proyekto:

yarn add jest-sonar-reporter

At idagdag ito sa pagsasaayos Jest:

package.json:

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

Ngayon, patakbuhin natin ang pagsubok:

yarn test

Pagkatapos kung saan ang isang file ay malilikha sa ugat ng proyekto test-report.xml.

Gamitin natin ito sa pagsasaayos Sonar'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

At i-restart ang scanner:

yarn run sonar

Tingnan natin kung ano ang nagbago sa interface Sonar'A:

At walang nagbago. Ang katotohanan ay hindi isinasaalang-alang ng Sonar ang mga file na inilarawan sa ulat ng Jest bilang mga file yunit-mga pagsubok. Upang maitama ang sitwasyong ito, ginagamit namin ang parameter ng pagsasaayos Sonar sonar.mga pagsubok, kung saan tahasan naming ipahiwatig ang mga folder na may mga pagsubok (mayroon lang kami sa ngayon):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

I-restart natin ang scanner:

yarn run sonar

Tingnan natin kung ano ang nagbago sa interface:

Ngayon nakita namin ang numero ng aming yunit-tests at, na nabigo sa pamamagitan ng pag-click sa loob, makikita natin ang pamamahagi ng numerong ito sa mga file ng proyekto:

Konklusyon

Kaya, tumingin kami sa isang tool para sa patuloy na pagsusuri soundQube. Matagumpay naming isinama dito ang isang proyektong nakasulat VueJs+TS. Inayos ang ilang isyu sa compatibility. Dinagdagan namin ang nilalaman ng impormasyon ng tagapagpahiwatig ng saklaw ng pagsubok. Sa artikulong ito sinuri namin ang isa lamang sa mga pamantayan sa kalidad ng code (marahil isa sa mga pangunahing), ngunit soundQube sumusuporta sa iba pang pamantayan sa kalidad, kabilang ang pagsubok sa kaligtasan. Ngunit hindi lahat ng mga tampok na ito ay ganap na magagamit sa komunidad-mga bersyon. Ang isa sa mga kawili-wili at kapaki-pakinabang na tampok ay ang pagsasama soundQube na may iba't ibang sistema ng pamamahala ng imbakan ng code, tulad ng GitLab at BitBucket. Iwasan merge pull(merge) request'a sa pangunahing sangay ng repositoryo kapag ang saklaw ay nasira. Ngunit ito ay isang kuwento para sa isang ganap na naiibang artikulo.

PS: Lahat ng inilarawan sa artikulo sa anyo ng code ay magagamit sa aking tinidor.

Ang mga rehistradong user lamang ang maaaring lumahok sa survey. Mag-sign in, pakiusap

Ginagamit mo ba ang SonarQube platform:

• 26,3%Oo5

• 15,8%No3

• 15,8%Narinig ko ang tungkol sa platform na ito at gusto kong gamitin3

• 10,5%Narinig ko ang tungkol sa platform na ito at ayaw kong gamitin2

• 0,0%Gumagamit ako ng ibang platform0

• 31,6%Unang beses kong narinig ang tungkol sa kanya6

19 mga gumagamit ang bumoto. 3 user ang umiwas.

Pinagmulan: www.habr.com