Mmekọrịta VueJS+TS na SonarQube

Anyị na-eji ikpo okwu na-arụsi ọrụ ike ụdaQube iji nọgide na-enwe àgwà koodu na ọkwa dị elu. Mgbe ị na-ejikọta otu n'ime ọrụ ndị edere na VueJs+ Ụdị edemede, nsogbu bilitere. Ya mere, m ga-achọ ịgwa gị n'ụzọ zuru ezu otú anyị jisiri ike dozie ha.

Mmekọrịta VueJS+TS na SonarQube

N'isiokwu a, anyị ga-ekwu okwu, dịka m dere n'elu, gbasara ikpo okwu SonarQube. Obere tiori - ihe ọ bụ n'ozuzu ya, maka ndị na-anụ banyere ya maka oge mbụ:

ụdaQube (bụbu Sonar) bụ ikpo okwu mepere emepe maka nyocha na-aga n'ihu na nha ogo koodu.
Na-akwado nyocha koodu na nchọpụta njehie dịka iwu nke MISRA C, MISRA C++, MITER/CWE na CERT Secure Coding Standards mmemme. Ọ nwekwara ike ịmata mperi site na ndepụta njehie mmemme OWASP Top 10 na CWE/SANS Top 25.
N'agbanyeghị eziokwu ahụ bụ na ikpo okwu na-eji ngwaọrụ dị iche iche emebere emebere, SonarQube na-ebelata nsonaazụ ya na otu dashboard, na-edobe akụkọ ihe mere eme nke na-agba ọsọ ma si otú a na-enye gị ohere ịhụ mgbanwe n'ozuzu mgbanwe na àgwà ngwanrọ n'oge mmepe.

Enwere ike ịchọta nkọwa ndị ọzọ na ebe nrụọrụ weebụ gọọmentị

A na-akwado ọnụ ọgụgụ buru ibu nke asụsụ mmemme. N'ikpe ikpe site na ozi sitere na njikọ dị n'elu, ndị a karịrị asụsụ 25. Iji kwado otu asụsụ, ị ga-etinyerịrị ngwa mgbakwunye kwesịrị ekwesị. Ụdị obodo gụnyere ngwa mgbakwunye maka ịrụ ọrụ na ya Javascript (gụnyere ụdịSript), ọ bụ ezie na wiki na-ekwu ihe dị iche. N'azụ Javascript ngwa mgbakwunye azịza SonarJS, maka Typescript SonarTS kwekọrọ.

A na-eji onye ahịa gọọmentị zipụ ozi mkpuchi sonarqube-nyocha, nke, na-eji ntọala si config-file, na-eziga data a na ihe nkesa ụdaQube maka inwekwu nkwado na mkpokọta.

Iji Javascript bụ ihe npm. Yabụ, ka anyị bido mmejuputa iwu site na nzọụkwụ ụdaQube в Anya-project iji Ihe ederede.

Iji tinye ihe nkesa ụdaQube ka anyị were ohere docker-ide.

sonar.yaml:

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

Mmalite:

docker-compose -f sonar.yml up

Mgbe nke a gasịrị ụdaQube ga-adị na: http://localhost:9001 .

Mmekọrịta VueJS+TS na SonarQube
Enweghị ọrụ ọ bụla na ya ma nke ahụ dị mma. Anyị ga-edozi ọnọdụ a. Ewere m ọrụ ihe atụ gọọmentị maka VueJS+TS+Jest. Ka anyị gbadaa ya n'onwe anyị:

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

Mbụ anyị kwesịrị ịwụnye onye ahịa ụdaQube, nke a na-akpọ sonar-nyocha, n'ihi na npm enwere ihe mkpuchi:

yarn add sonarqube-scanner

Ma tinye iwu ozugbo na ederede iji ya rụọ ọrụ.

ngwugwu.json:

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

Na-esote, ka nyocha ahụ rụọ ọrụ, ịkwesịrị ịtọ ntọala ọrụ na faịlụ pụrụ iche. Ka anyị malite na ihe ndị bụ isi.

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 - adreesị Sonar'A;
  • sonar.projectKey – ihe nchọpụta ọrụ pụrụ iche na sava Sonar'A;
  • sonar.projectAha - aha ya, enwere ike ịgbanwe ya n'oge ọ bụla, ebe ọ bụ na a na-achọpụta ọrụ ahụ igodo project;
  • sonar.isi mmalite – nchekwa na isi mmalite, na-emekarị nke a src, ma ọ nwere ike ịbụ ihe ọ bụla. A na-edobe nchekwa a n'ihe gbasara nchekwa mgbọrọgwụ, nke bụ nchekwa ebe e si malite nyocha nyocha;
  • sonar.nnwale - oke nke na-agakọ na nke gara aga. Nke a bụ nchekwa ebe ule dị. N'ime ọrụ a, enweghị folda dị otú ahụ, ule ahụ dịkwa n'akụkụ akụrụngwa a na-anwale na folda 'ule', yabụ anyị ga-eleghara ya anya ugbu a wee jiri paramita ọzọ;
  • sonar.ule.ngụnye - ụzọ maka ule na-eji ihe nkpuchi, enwere ike ịnwe ọtụtụ ihe ndị e depụtara site na rịkọm;
  • sonar.sourceEncoding - ngbanwe maka faịlụ isi mmalite.

Maka mmalite mbụ nke nyocha, ihe niile dị njikere, ma e wezụga maka isi ihe mbụ: ịmalite engine test n'onwe ya, ka o wee nwee ike ịmepụta ozi gbasara mkpuchi ahụ, nke nyocha ahụ ga-eji ya eme ihe.

Mana iji mee nke a, ịkwesịrị ịhazi igwe nyocha iji mepụta ozi a. N'ime oru ngo a, igwe nyocha bụ Jest. Na ntọala ya dị na ngalaba kwekọrọ na faịlụ ahụ ngwugwu.json.

Ka anyị tinye ntọala ndị a:

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

Nke ahụ bụ, anyị na-edobe ọkọlọtọ n'onwe ya maka mkpa ịgbakọ mkpuchi na isi iyi (tinyere ndị ọzọ) na ndabere nke a ga-etolite.

Ugbu a, ka anyị gbaa ule:

yarn test

Anyị ga-ahụ ihe ndị a:

Mmekọrịta VueJS+TS na SonarQube

Ihe kpatara ya bụ na enweghị koodu na akụrụngwa n'onwe ya. Ka anyị dozie nke a.

NdewoWorld.vue:

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

Nke a ga-ezuru iji gbakọọ mkpuchi.

Mgbe ịmalitegharịa ule ahụ, anyị ga-ahụ nke a:

Mmekọrịta VueJS+TS na SonarQube

Na ihuenyo anyị kwesịrị ịhụ ozi gbasara mkpuchi ahụ, a ga-emepụta nchekwa na nchekwa ọrụ mkpuchi na ozi mkpuchi ule na usoro zuru ụwa ọnụ LCOV (LTP GCOV ndọtị).

Gcov bụ akụrụngwa ekesara n'efu maka inyocha mkpuchi koodu. Gcov na-ewepụta ọnụ ọgụgụ ogbugbu maka nkwupụta ọ bụla na mmemme ma na-enye gị ohere itinye nkọwa na koodu isi mmalite. Gcov na-abịa dị ka ọkọlọtọ ọkọlọtọ dị ka akụkụ nke ngwugwu GCC.
Lcov - interface eserese maka gcov. Ọ na-achịkọta faịlụ gcov maka ọtụtụ faịlụ isi mmalite wee mepụta otu ibe HTML nwere koodu na ozi mkpuchi. A na-emepụtakwa ibe iji mee ka igodo dị mfe. Lcov na-akwado mkpuchi nke eriri, ọrụ, na alaka.

Mgbe emechara ule ndị a, ozi mkpuchi ga-adị na mkpuchi/lcov.info.
Anyị kwesịrị ikwu Sonar'Olee ebe m ga-esi nweta ya? Ya mere, ka anyị tinye ahịrị ndị a na faịlụ nhazi ya. Ma e nwere otu isi ihe: oru ngo nwere ike ịbụ multilingualism, ya bụ, na nchekwa src enwere koodu isi mmalite maka ọtụtụ asụsụ mmemme yana njikọ ya na otu ma ọ bụ ọzọ, n'aka nke ya, ejiri otu ma ọ bụ ihe mgbakwunye ọzọ kpebisie ike site na ndọtị ya. Enwere ike ịchekwa ozi mkpuchi n'ebe dị iche iche maka asụsụ mmemme dị iche iche, yabụ asụsụ ọ bụla nwere ngalaba nke ya maka ịtọlite ​​​​a. Ọrụ anyị na-eji Ihe ederede, yabụ anyị chọrọ ngalaba ntọala naanị maka ya:

sonar-project.properties:

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

Ihe niile dị njikere maka mbido mbụ nke nyocha. Ọ ga-amasị m ịmara na ọrụ a bụ Sonar'e na-emepụta na-akpaghị aka oge mbụ ị na-agba ọsọ nyocha maka ọrụ enyere. N'oge ndị na-esote, a ga-akwakọba ozi iji hụ mgbanwe mgbanwe na paramita ọrụ n'ime oge.

Yabụ, ka anyị jiri iwu emepụtara na mbụ n'ime ngwugwu.json:

yarn run sonar 

Cheta na: ị nwekwara ike iji paramita -X maka nkọwa nkọwa zuru ezu.

Ọ bụrụ na ewepụtara nyocha ahụ maka oge mbụ, mgbe ahụ, ọnụọgụ abụọ nke nyocha ahụ n'onwe ya ga-ebu ụzọ budata ya. Mgbe nke ahụ gasịrị, ọ na-amalite wee malite nyocha ihe nkesa Sonar'a maka plugins arụnyere, si otú a na-agbakọ asụsụ akwadoro. A na-ebukwa parampat ndị ọzọ dị iche iche maka ọrụ ya: profaịlụ dị mma, iwu arụ ọrụ, ebe nchekwa metrik, iwu nkesa.

Mmekọrịta VueJS+TS na SonarQube

Mmekọrịta VueJS+TS na SonarQube

Cheta na: Anyị agaghị ebi na ha n'ụzọ zuru ezu n'ime kpuchie nke isiokwu a, ma ị nwere ike mgbe ọ bụla ịkpọtụrụ ukara isi mmalite.

Na-esote, nyocha nke nchekwa na-amalite src maka nnweta faịlụ isi iyi maka mmadụ niile (ma ọ bụrụ na akọwapụtaghị nke ọma) asụsụ akwadoro, yana ntinye ntinye ha na-esote.

Mmekọrịta VueJS+TS na SonarQube

Na-esote nyocha ndị ọzọ dị iche iche, nke anyị na-elekwasịghị anya na ya n'isiokwu a (dịka ọmụmaatụ, dị ka linting, nchọpụta nke mbiputegharị koodu, wdg).

Na njedebe nke ọrụ nyocha, a na-achịkọta ozi niile anakọtara, chekwaa ma ziga ya na ihe nkesa.

Mgbe nke a gasịrị, anyị nwere ike ịhụ ihe mere na interface weebụ:

Mmekọrịta VueJS+TS na SonarQube

Dị ka anyị nwere ike ịhụ, ihe na-arụ ọrụ, na ọbụna na-egosi ụfọdụ ụdị mkpuchi, ma ọ dịghị dakọtara anyị Jest-akụkọ.

Ka anyị chọpụta ya. Ka anyị leba anya n'ọrụ a n'ụzọ zuru ezu, pịa uru mkpuchi, wee "daba" n'ime mkpesa faịlụ zuru ezu:

Mmekọrịta VueJS+TS na SonarQube

N'ebe a, anyị na-ahụ, na mgbakwunye na isi, faịlụ nyocha NdewoWorld.vue, enwekwara faịlụ isi.ts, nke na-emebi foto niile nke mkpuchi ahụ. Ma olee otú anyị si wepụrụ ya na ngụkọta nke mkpuchi. Ee, ihe niile ziri ezi, ma ọ bụ na larịị Jest, ma ihe nyocha ahụ depụtara ya, ya mere ọ kwụsịrị na ngụkọ ya.

Ka anyị dozie nke a:

sonar-project.properties:

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

Ọ ga-amasị m ịkọwapụta: na mgbakwunye na nchekwa ndị akọwapụtara na paramita a, a na-agbakwunye folda niile edepụtara na paramita ahụ. sonar.ule.ngụnye.

Mgbe ịmalitechara nyocha, anyị na-ahụ ozi ziri ezi:

Mmekọrịta VueJS+TS na SonarQube

Mmekọrịta VueJS+TS na SonarQube

Ka anyị leba anya n'isi ihe ọzọ - Profaịlụ dị mma. M kwuru n'elu banyere nkwado Sonar'om ọtụtụ asụsụ n'otu oge. Nke a bụ kpọmkwem ihe anyị na-ahụ. Mana anyị maara na e dere ọrụ anyị n'ime ya TS, yabụ kedu ihe kpatara iji jiri aghụghọ na nyocha na-enweghị isi mee ka nyocha nyocha. Anyị ga-edobe asụsụ maka nyocha site na ịgbakwunye otu paramita ọzọ na faịlụ nhazi Sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

Ka anyị mee ihe nyocha ọzọ wee hụ nsonaazụ ya:

Mmekọrịta VueJS+TS na SonarQube

Mkpuchi ahụ kpamkpam.

Ọ bụrụ na anyị leba anya na ndekọ nyocha, anyị nwere ike ịhụ ahịrị ndị a:

Mmekọrịta VueJS+TS na SonarQube

Ya bụ, e deghị aha faịlụ ọrụ anyị naanị.

Ọnọdụ a dị ka ndị a: kwadoro nkwado VueJs dị na ngwa mgbakwunye SonarJSonye na-ahụ maka ya Javascript.

Mmekọrịta VueJS+TS na SonarQube

Mana nkwado a adịghị na ngwa mgbakwunye SonarTS n'ihi na TS, nke emepere tiketi gọọmentị na ihe nchọta ahụhụ Sonar'A:

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

Nke a bụ ụfọdụ azịza sitere n'aka otu n'ime ndị nnọchiteanya sitere na ndị mmepe SonarQube, na-akwado eziokwu a.

Mmekọrịta VueJS+TS na SonarQube

Mmekọrịta VueJS+TS na SonarQube

Mana ihe niile na-arụ ọrụ maka anyị, ị jụrụ. Ee ọ bụ, ka anyị nwaa ya ntakịrị "mbanye anataghị ikike".
Ọ bụrụ na enwere nkwado .vue- faịlụ Sonar'Oh, ka anyị gbalịa ịgwa ya ka ọ tụlee ha dị ka Ihe ederede.

Ka anyị tinye paramita:

sonar-project.properties:

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

Ka anyị malite nyocha nyocha:

Mmekọrịta VueJS+TS na SonarQube

Na, voila, ihe niile alaghachila na nkịtị, yana otu profaịlụ naanị maka Ihe ederede. Ya bụ, anyị jisiri ike dozie nsogbu ahụ na nkwado VueJs+TS n'ihi na ụdaQube.

Ka anyị gbalịa ịga n'ihu ma melite ozi mkpuchi ntakịrị.

Ihe anyị mere ugbu a:

  • agbakwunyere na oru ngo Sonar-nyocha;
  • melite Jest iji mepụta ozi mkpuchi;
  • ahaziri Sonar-nyocha;
  • dozie nsogbu nkwado .vue- faịlụ + Ihe ederede.

Na mgbakwunye na mkpuchi ule, enwere njirisi ndị ọzọ na-adọrọ mmasị bara uru maka àgwà koodu, dịka ọmụmaatụ, mbiputegharị koodu na ọnụ ọgụgụ nke ahịrị (na-etinye aka na ngụkọta nke ọnụọgụgụ metụtara koodu mgbagwoju anya) nke oru ngo.

Na ugbu a mmejuputa iwu nke ngwa mgbakwunye maka ịrụ ọrụ na TS (SonarTS) agaghị arụ ọrụ CPD (Detuo ihe nchọta mado) na agụta ahịrị koodu .vue- faịlụ.

Iji mepụta ọnọdụ sịntetik nke ndegharị koodu, jiri aha dị iche mepụta faịlụ akụrụngwa ma tinye ya na koodu ahụ. isi.ts a dummy ọrụ na oyiri ya na ọzọ aha. Ka ịlele maka mbiputegharị ka ọ dị na .vue, na na .ts - faịlụ.

main.ts:

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

Iji mee nke a, ịkwesịrị ikwupụta ahịrị nhazi ahụ nwa oge:

sonar-project.properties:

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

Ka anyị malitegharịa nyocha ahụ yana nnwale:

yarn test && yarn run sonar

N'ezie, mkpuchi anyị ga-ada, ma ugbu a, anyị enweghị mmasị na nke ahụ.

N'ihe gbasara ahịrị koodu oyiri, anyị ga-ahụ:

Mmekọrịta VueJS+TS na SonarQube

Iji lelee anyị ga-eji CPD-ike - jscpd:

npx jscpd src

Mmekọrịta VueJS+TS na SonarQube

Maka ahịrị koodu:

Mmekọrịta VueJS+TS na SonarQube

Ikekwe a ga-edozi nke a na ụdị ngwa mgbakwunye n'ọdịnihu SonarJS (TS). Ọ ga-amasị m ịmara na ha na-eji nwayọọ nwayọọ na-amalite ijikọta plugins abụọ a n'ime otu SonarJS, nke m chere na ọ bụ eziokwu.

Ugbu a, achọrọ m ịtụle nhọrọ nke melite ozi mkpuchi.

Ka ọ dị ugbu a, anyị nwere ike ịhụ mkpuchi ule na pasent pasent maka ọrụ ahụ dum, yana maka faịlụ karịsịa. Ma ọ ga-ekwe omume ịgbasa ihe ngosi a na ozi gbasara oke unit-nnwale maka oru ngo, yana na onodu nke faịlụ.

Enwere ụlọ akwụkwọ nwere ike Jest-tụgharịa akụkọ ka ọ bụrụ usoro maka Sonar'A:
data ule izugbe - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Ka anyị tinye ọba akwụkwọ a n'ọrụ anyị:

yarn add jest-sonar-reporter

Ma tinye ya na nhazi Jest:

ngwugwu.json:

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

Ugbu a, ka anyị gbaa ule:

yarn test

Mgbe nke ahụ gasịrị, a ga-emepụta faịlụ na mgbọrọgwụ nke ọrụ ahụ test-akụkọ.xml.

Ka anyị jiri ya na nhazi Sonar'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Ma malitegharịa nyocha ahụ:

yarn run sonar

Ka anyị hụ ihe gbanwere na interface Sonar'A:

Mmekọrịta VueJS+TS na SonarQube

Ọ dịghịkwa ihe gbanwere. Nke bụ eziokwu bụ na Sonar anaghị ewere faịlụ ndị akọwara na akụkọ Jest dị ka faịlụ unit-nnwale. Iji dozie ọnọdụ a, anyị na-eji nhazi nhazi Sonar sonar.nnwale, nke anyị ga-egosi n'ụzọ doro anya folda nwere ule (naanị otu anyị nwere ugbu a):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Ka anyị malitegharịa nyocha ahụ:

yarn run sonar

Ka anyị hụ ihe gbanwere na interface:

Mmekọrịta VueJS+TS na SonarQube

Ugbu a, anyị ahụla ọnụ ọgụgụ nke anyị unit-nnwale na, ebe ọ dara site na ịpị n'ime, anyị nwere ike ịhụ nkesa nke nọmba a n'etiti faịlụ ọrụ:

Mmekọrịta VueJS+TS na SonarQube

nkwubi

Ya mere, anyị lere anya na ngwá ọrụ maka nyocha na-aga n'ihu ụdaQube. Anyị jikọtara nke ọma n'ime ya ọrụ edere na ya VueJs+TS. Edoziri ụfọdụ nsogbu ndakọrịta. Anyị mụbara ọdịnaya ozi nke egosi mkpuchi mkpuchi ule. N'isiokwu a, anyị na-enyocha nanị otu n'ime koodu àgwà njirisi (ikekwe otu n'ime ndị bụ isi), ma ụdaQube na-akwado njirisi mma ndị ọzọ, gụnyere nyocha nchekwa. Mana ọ bụghị atụmatụ ndị a niile dị na ya obodo-ụdị. Otu n'ime ihe ndị na-adọrọ mmasị ma bara uru bụ ntinye ụdaQube nwere usoro njikwa nchekwa koodu dị iche iche, dị ka GitLab na BitBucket. Iji gbochie arịrịọ jikota pull(jikota).'a na ngalaba isi nke ebe nchekwa mgbe mkpuchi ahụ mebiri emebi. Mana nke a bụ akụkọ maka akụkọ dị iche kpamkpam.

PS: Ihe niile akọwara n'isiokwu n'ụdị koodu dị na ndụdụ m.

Naanị ndị ọrụ edebanyere aha nwere ike isonye na nyocha a. banye, Biko.

Ị na-eji ikpo okwu SonarQube:

  • 26,3%Ee5

  • 15,8%Mba3

  • 15,8%Anụrụ m maka ikpo okwu a ma chọọ iji3

  • 10,5%Anụla m maka ikpo okwu a ma achọghị m iji2

  • 0,0%Ana m eji ikpo okwu dị iche0

  • 31,6%Oge mbụ m nụrụ gbasara ya6

Ndị ọrụ 19 tụrụ vootu. Ndị ọrụ 3 anabataghị.

isi: www.habr.com

Tinye a comment