Ho kopanya morero oa VueJS+TS le SonarQube

Re sebelisa sethala ka mafolofolo mosebetsing oa rona soundQube ho boloka boleng ba khoutu maemong a hodimo. Ha o kopanya e 'ngoe ea merero e ngotsoeng ka VueJs+Typescript, mathata a ile a hlaha. Ka hona, ke rata ho u bolella ka botlalo hore na re khonne ho li rarolla joang.

Ho kopanya morero oa VueJS+TS le SonarQube

Sehloohong sena re tla bua, joalo ka ha ke ngotse ka holimo, ka sethala sa SonarQube. Khopolo e nyane - hore na ke eng ka kakaretso, bakeng sa ba utloang ka lekhetlo la pele:

soundQube (ea pele Sonar) ke sethala sa mohloli o bulehileng bakeng sa tlhahlobo e tsoelang pele le tekanyo ea boleng ba khoutu.
E ts'ehetsa tlhahlobo ea khoutu le ho lemoha liphoso ho latela melao ea MISRA C, MISRA C++, MITER/CWE le CERT Secure Coding Standards programming standards. E ka boela ea lemoha liphoso ho tsoa lethathamong la liphoso tsa mananeo a OWASP Top 10 le CWE/SANS Top 25.
Leha taba ea hore sethala se sebelisa lisebelisoa tse fapaneng tse lokiselitsoeng, SonarQube e fokotsa liphetho ho dashboard e le 'ngoe, ho boloka nalane ea ho matha mme ka hona e u lumella ho bona mokhoa o akaretsang oa liphetoho tsa boleng ba software nakong ea nts'etsopele.

Lintlha tse ling li ka fumanoa ho websaete ea molao

Palo e kholo ea lipuo tsa mananeo e tšehetsoa. Ho latela boitsebiso bo tsoang sehokelong se ka holimo, tsena ke lipuo tse fetang 25. Ho tšehetsa puo e itseng, o tlameha ho kenya plugin e loketseng. Mofuta oa sechaba o kenyelletsa plugin bakeng sa ho sebetsa le Javascript (ho kenyeletsoa typeсript), leha wiki e bua se fapaneng. Ka morao Javascript plugin likarabo SonarJS, bakeng sa Typescript SonarTS ho latela.

Moreki oa semmuso o sebelisoa ho romella litaba tsa litaba sonarqube-scanner, e leng, ho sebelisa li-setting ho tloha config-file, e romella data ena ho seva soundQube bakeng sa ho kopanya le ho kopanya ho eketsehileng.

etsoe Javascript ke sekoahelo sa npm. Kahoo, ha re qaleng ho kenya ts'ebetsong mohato ka mohato soundQube в Vue- morero ka ho sebelisa Mofuta oa mongolo.

Ho tsamaisa seva soundQube ha re nke monyetla qobella.

sonar.yaml:

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

Qala:

docker-compose -f sonar.yml up

Ka mor'a sena soundQube e tla fumaneha ho: http://localhost:9001 .

Ho kopanya morero oa VueJS+TS le SonarQube
Ha ho na merero ho eona hajoale mme ho lokile. Re tla lokisa boemo bona. Ke nkile morero oa mohlala oa semmuso bakeng sa VueJS+TS+Jest. Ha re e inahanele ho rona:

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

Pele re hloka ho kenya mofani soundQube, e bitsoang sonar-scannerbakeng sa npm ho na le sekoahelo:

yarn add sonarqube-scanner

'Me hang-hang eketsa taelo ho litokomane ho sebetsa le yona.

package.json:

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

Ka mor'a moo, hore scanner e sebetse, o hloka ho beha litlhophiso tsa morero ka faele e khethehileng. A re qaleng ka lintho tsa motheo.

porojeke.mehaho:

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 - aterese Sonar'A;
  • sonar.projectKey - sekhetho se ikhethileng sa morero ho seva Sonar'A;
  • sonar.projectName - lebitso la eona, le ka fetoloa ka nako leha e le efe, kaha morero o khetholloa ke projectKey;
  • mehlodi.mehlodi - foldara e nang le mehloli, hangata sena Src, empa e ka ba eng kapa eng. Foldara ena e behiloe mabapi le foldara ea motso, e leng foldara eo scanner e qalisoang ho eona;
  • sonar.liteko - paramethara e tsamaellanang le e fetileng. Ena ke foldara moo liteko li leng teng. Morerong ona, ha ho na foldara e joalo, 'me tlhahlobo e haufi le karolo e ntseng e lekoa foldareng'mamella teko', kahoo re tla e hlokomoloha hajoale mme re sebelise paramente e latelang;
  • sonar.test.inclusions - tsela ea liteko u sebelisa mask, ho ka ba le lintlha tse 'maloa tse thathamisitsoeng tse arotsoeng ke lifehelo;
  • sonar.mohloli oa khouto - khouto bakeng sa lifaele tsa mohloli.

Bakeng sa tlhahiso ea pele ea scanner, ntho e 'ngoe le e' ngoe e lokile, ntle le ketso e ka sehloohong e fetileng: ho qala enjene ea teko ka boeona, e le hore e ka hlahisa tlhahisoleseding mabapi le tšireletso, eo scanner e tla e sebelisa hamorao.

Empa ho etsa sena, o hloka ho lokisa enjene ea liteko ho hlahisa tlhahisoleseling ena. Morerong ona, enjene ea teko e ho na le. 'Me litlhophiso tsa eona li karolong e lumellanang ea faele sejana.json.

Ha re kenye litlhophiso tsena:

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

Ke hore, re beha folakha ka boeona bakeng sa tlhokahalo ea ho bala tšireletso le mohloli (hammoho le mekhelo) motheong oa hore na o tla thehoa hokae.

Joale ha re qale tlhahlobo:

yarn test

Re tla bona tse latelang:

Ho kopanya morero oa VueJS+TS le SonarQube

Lebaka ke hore ha ho na khoutu karolong ka boeona. Ha re lokiseng taba ena.

HelloWorld.vue:

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

Sena se tla lekana ho bala khaso.

Ka mor'a ho qala tlhahlobo, re tla etsa bonnete ba sena:

Ho kopanya morero oa VueJS+TS le SonarQube

Skrineng re lokela ho bona tlhahisoleseling mabapi le tšireletso, 'me foldara e tla etsoa foldareng ea projeke Boitsebiso e nang le tlhaiso-leseling ea tlhahlobo ka mokhoa o akaretsang LCOV (katoloso ea LTP GCOV).

Gcov ke sesebelisoa se ajoang ka bolokolohi bakeng sa ho hlahloba tšireletso ea khoutu. Gcov e hlahisa palo e nepahetseng ea lipolao bakeng sa polelo ka 'ngoe lenaneong mme e u lumella ho eketsa litlhaloso ho khoutu ea mohloli. Gcov e tla e le sesebelisoa se tloaelehileng e le karolo ea sephutheloana sa GCC.
Lcov - graphical interface bakeng sa gov. E bokella lifaele tsa gcov bakeng sa lifaele tse ngata tsa mohloli mme e hlahisa sete ea maqephe a HTML a nang le khoutu le tlhaiso-leseling. Maqephe a boetse a etsoa ho nolofatsa ho tsamaea. Lcov e ts'ehetsa tšireletso ea likhoele, mesebetsi le makala.

Ka mor'a hore liteko li phethoe, tlhahisoleseding ea khaso e tla fumanoa coverage/lcov.info.
Re hloka ho bua Sonar'Nka e fumana hokae? Ka hona, a re kenyeng mela e latelang faeleng ea eona ea tlhophiso. Empa ho na le ntlha e le 'ngoe: merero e ka ba lipuo tse ngata, ke hore, foldareng Src ho na le likhoutu tsa mohloli bakeng sa lipuo tse 'maloa tsa lenaneo le ho ikopanya le e' ngoe kapa e 'ngoe,' me ka lehlakoreng le leng, ts'ebeliso ea plugin e le 'ngoe e khethoa ke katoloso ea eona. 'Me tlhahisoleseding ea khaso e ka bolokoa libakeng tse fapaneng bakeng sa lipuo tse fapaneng tsa lenaneo, kahoo puo ka' ngoe e na le karolo ea eona ea ho theha sena. Morero oa rona o sebelisoa Mofuta oa mongolo, kahoo re hloka karolo ea litlhophiso bakeng sa eona feela:

porojeke.mehaho:

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

Ntho e 'ngoe le e' ngoe e se e loketse ho qala ho qala scanner. Ke rata ho hlokomela hore morero o Sonar'e e etsoa ka bo eona khetlo la pele ha u sebelisa sekena bakeng sa projeke e itseng. Linakong tse latelang, tlhaiso-leseling e tla bokelloa molemong oa ho bona matla a liphetoho methating ea projeke ka nako.

Kahoo, ha re sebeliseng taelo e entsoeng pejana ho sejana.json:

yarn run sonar 

Ela hloko: u ka sebelisa parameter hape -X bakeng sa ho rema lifate ka botlalo.

Haeba scanner e ne e qalisoa ka lekhetlo la pele, joale binary ea scanner ka boeona e tla kopitsoa pele. Ka mor'a moo e qala 'me e qala ho hlahloba seva Sonar'a bakeng sa li-plugins tse kentsoeng, ka hona ho bala puo e tšehetsoeng. Likarolo tse ling tse fapaneng tsa ts'ebetso ea eona le tsona li laetsoe: profiles tsa boleng, melao e sebetsang, polokelo ea metrics, melao ea seva.

Ho kopanya morero oa VueJS+TS le SonarQube

Ho kopanya morero oa VueJS+TS le SonarQube

Ela hloko: Re ke ke ra lula ho tsona ka botlalo ka har'a moralo oa sengoloa sena, empa u ka lula u ikopanya le mehloli ea semmuso.

E latelang, tlhahlobo ea foldara e qala Src bakeng sa ho fumaneha ha lifaele tsa mohloli bakeng sa bohle (haeba e itseng e sa hlalosoa ka ho hlaka) puo e tšehetsoeng, ka indexing ea bona e latelang.

Ho kopanya morero oa VueJS+TS le SonarQube

Ka mor'a moo ho tla litlhahlobo tse ling tse fapaneng, tseo re sa tsepamiseng maikutlo ho tsona sehloohong sena (mohlala, joalo ka ho hlakisa, ho lemoha ho pheta-pheta khoutu, joalo-joalo).

Qetellong ea mosebetsi oa sehatisi, tlhahisoleseling eohle e bokelletsoeng e bokelloa, e bolokoe, ebe e romelloa ho seva.

Ka mor'a sena, re se re ka bona se etsahetseng ho web interface:

Ho kopanya morero oa VueJS+TS le SonarQube

Joalokaha re bona, ntho e 'ngoe e ile ea sebetsa,' me e bile e bontša mofuta o itseng oa tšireletso, empa ha e lumellane le ea rona ho na le- tlaleha.

Ha re e utloisise. Ha re shebeng morero ka botlalo, tobetsa boleng ba tšireletso, 'me u "oele" tlalehong e qaqileng ea faele:

Ho kopanya morero oa VueJS+TS le SonarQube

Mona re bona, ho phaella ho file e ka sehloohong, e hlahlobiloeng HelloWorld.vue, ho boetse ho na le faele ka sehloohong.ts, e senyang setšoantšo sohle sa tšireletso. Empa ho tlile joang hore re e qhelele ka thoko ho palo ea litaba. E, ntho e 'ngoe le e' ngoe e nepahetse, empa e ne e le boemong ho na le, empa sehatisi se ile sa e indexa, kahoo e ile ea qetella e le lipalo tsa eona.

Ha re lokiseng sena:

porojeke.mehaho:

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

Ke kopa ho hlakisa: ntle le lifoldara tse boletsoeng paramenteng ena, lifoldara tsohle tse thathamisitsoeng paramenteng le tsona li kenyellelitsoe. sonar.test.inclusions.

Kamora ho qala scanner, re bona lintlha tse nepahetseng:

Ho kopanya morero oa VueJS+TS le SonarQube

Ho kopanya morero oa VueJS+TS le SonarQube

Ha re shebe ntlha e latelang - Liprofaele tsa boleng. Ke buile ka holimo ka tšehetso Sonar'om lipuo tse' maloa ka nako e le 'ngoe. Sena ke sona hantle seo re se bonang. Empa rea ​​tseba hore morero oa rona o ngotsoe ka hare TS, joale ke hobane'ng ha u seta seskena ka ho qhekella le licheke ho sa hlokahale. Re tla beha puo bakeng sa tlhahlobo ka ho eketsa parameter e le 'ngoe ho faele ea tlhophiso Sonar'A:

porojeke.mehaho:

...
sonar.language=ts
...

Ha re tsamaise scanner hape 'me re bone sephetho:

Ho kopanya morero oa VueJS+TS le SonarQube

Tšireletso e ne e felile ka ho feletseng.

Haeba re sheba lethathamong la scanner, re ka bona mola o latelang:

Ho kopanya morero oa VueJS+TS le SonarQube

Ke hore, lifaele tsa rona tsa projeke li ne li sa ngolisoe.

Boemo bo tjena: ho tšehetsoa ka molao VueJs e ka har'a plugin SonarJS, ea ikarabellang bakeng sa Javascript.

Ho kopanya morero oa VueJS+TS le SonarQube

Empa ts'ehetso ena ha e teng ho plugin SonarTS etsoe TS, eo tekete ea molao e ileng ea buloa ho tracker ea bug Sonar'A:

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

Mona ke likarabo tse tsoang ho e mong oa baemeli ba tsoang ho baetsi ba SonarQube, ba tiisang taba ena.

Ho kopanya morero oa VueJS+TS le SonarQube

Ho kopanya morero oa VueJS+TS le SonarQube

Empa ntho e 'ngoe le e 'ngoe e ile ea re sebeletsa, ua hanyetsa. E, e teng, ha re e lekeng hanyenyane "hack".
Haeba ho na le tšehetso .vue- lifaele Sonar'Oho, joale ha re leke ho mo joetsa hore a li nke joalo ka Mofuta oa mongolo.

Ha re kenye parameter:

porojeke.mehaho:

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

Ha re qalelle scanner:

Ho kopanya morero oa VueJS+TS le SonarQube

'Me, voila, ntho e' ngoe le e 'ngoe e khutlela ho tloaelehileng,' me ka profil e le 'ngoe feela bakeng sa Mofuta oa mongolo. Ke hore, re khonne ho rarolla bothata ka tšehetso VueJs+TS etsoe soundQube.

Ha re leke ho fetela pele mme re ntlafatse litaba tsa khaso hanyane.

Seo re se entseng ho fihlela joale:

  • e kenyelelitsoe morerong Sonar- scanner;
  • tlhophiso ho na le ho fana ka litaba tsa morao-rao;
  • hlophisitsoe Sonar- scanner;
  • e rarollotse bothata ba tšehetso .vue- lifaele + Mofuta oa mongolo.

Ntle le ts'ebetso ea tlhahlobo, ho na le lintlha tse ling tse thahasellisang tse sebetsang bakeng sa boleng ba khoutu, mohlala, ho pheta-pheta khoutu le palo ea mela (e kenyelletsoeng ho baloa ha li-coefficients tse amanang le ho rarahana ha khoutu) ea morero.

Ts'ebetsong ea hona joale ea plugin ea ho sebetsa le TS (SonarTS) e ke ke ea sebetsa CPD (Copy Paste Detector) le mela ea ho bala ea khoutu .vue- lifaele.

Ho theha boemo ba maiketsetso ba ho pheta-pheta khoutu, kopitsa feela faele ea karolo ka lebitso le fapaneng mme o e kenye khoutu. ka sehloohong.ts ts'ebetso ea dummy ebe o e kopitsa ka lebitso le fapaneng. Ho hlahloba phetiso joalo ka ho .vuele ho .ts - lifaele.

main.ts:

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

Ho etsa sena, o hloka ho fana ka maikutlo ka nakoana ka mohala oa tlhophiso:

porojeke.mehaho:

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

Ha re qaleng seskena bocha hammoho le liteko:

yarn test && yarn run sonar

Ehlile, litaba tsa rona li tla oa, empa joale ha re thahaselle seo.

Mabapi le ho kopitsa mela ea khoutu, re tla bona:

Ho kopanya morero oa VueJS+TS le SonarQube

Ho hlahloba re tla sebelisa CPD- lisebelisoa - jscpd:

npx jscpd src

Ho kopanya morero oa VueJS+TS le SonarQube

Bakeng sa mela ea khoutu:

Ho kopanya morero oa VueJS+TS le SonarQube

Mohlomong sena se tla rarolloa liphetolelong tsa plugin tse tlang SonarJS(TS). Ke kopa ho hlokomela hore butle-butle ba qala ho kopanya li-plugins tsena tse peli ho e le 'ngoe SonarJS, eo ke nahanang hore e nepahetse.

Joale ke ne ke batla ho nahana ka khetho ea ho ntlafatsa litaba tsa litaba.

Ho fihlela joale re khona ho bona tlhahlobo ea liteko ka liphesente tsa projeke eohle, le bakeng sa lifaele ka ho khetheha. Empa hoa khoneha ho atolosa letšoao lena ka boitsebiso bo mabapi le bongata unit-teko bakeng sa morero, hammoho le moelelong oa lifaele.

Ho na le laebrari e ka khonang ho na le-fetola tlaleho hore e be sebopeho sa Sonar'A:
lintlha tsa tlhahlobo tse akaretsang - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Ha re kenyeng laebrari ena morerong oa rona:

yarn add jest-sonar-reporter

Ebe u e eketsa ho tlhophiso ho na le:

package.json:

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

Joale ha re qale tlhahlobo:

yarn test

Ka mor'a moo faele e tla etsoa motso oa morero teko-report.xml.

Ha re e sebelise ho tlhophiso Sonar'A:

porojeke.mehaho:

…
sonar.testExecutionReportPaths=test-report.xml
…

Ebe o qala scanner hape:

yarn run sonar

A re boneng hore na ho fetohile eng ka segokanyimmediamentsi sa sebolokigolo Sonar'A:

Ho kopanya morero oa VueJS+TS le SonarQube

Mme ha ho letho le fetohileng. 'Nete ke hore Sonar ha e nke lifaele tse hlalositsoeng tlalehong ea Jest e le lifaele unit- liteko. E le ho lokisa boemo bona, re sebelisa parameter ea tlhophiso Sonar sonar.liteko, moo re tla bontša ka ho hlaka lifoldara tse nang le liteko (hona joale re na le e le 'ngoe feela):

porojeke.mehaho:

…
sonar.tests=src/components/__tests__
…

Ha re qaleng scanner hape:

yarn run sonar

Ha re bone hore na ho fetohile eng ho interface:

Ho kopanya morero oa VueJS+TS le SonarQube

Joale re bone palo ea rona unit-tests mme, ha re se re hlolehile ka ho tobetsa kahare, re ka bona ho ajoa ha palo ena har'a lifaele tsa projeke:

Ho kopanya morero oa VueJS+TS le SonarQube

fihlela qeto e

Kahoo, re ile ra sheba sesebelisoa sa tlhahlobo e tsoelang pele soundQube. Re atlehile ho kopanya ho eona morero o ngotsoeng ka VueJs+TS. Lokisa mathata a mang a litšebelisano. Re ekelitse litaba tsa tlhaiso-leseling ea sesupo sa khaso ea tlhahlobo. Sehloohong sena re hlahlobile e le 'ngoe feela ea litekanyetso tsa boleng ba khoutu (mohlomong e' ngoe ea tse ka sehloohong), empa soundQube e ts'ehetsa mekhoa e meng ea boleng, ho kenyeletsoa tlhahlobo ea polokeho. Empa ha se likarolo tsena kaofela tse fumanehang ka botlalo motsana oa heso- liphetolelo. E 'ngoe ea likarolo tse thahasellisang le tse molemo ke ho kopanya soundQube ka litsamaiso tse fapaneng tsa taolo ea polokelo ea khoutu, joalo ka GitLab le BitBucket. Ho thibela Kopanya hula (kopanya) kopo'a ho ea lekaleng le ka sehloohong la polokelo ha tšireletso e senyeha. Empa ena ke pale bakeng sa sengoloa se fapaneng ka ho felletseng.

PES: Ntho e 'ngoe le e' ngoe e hlalositsoeng sehloohong ka mokhoa oa khoutu e fumaneha ka fereko yaka.

Ke basebelisi ba ngolisitsoeng feela ba ka kenyang letsoho phuputsong. kenaka kopo.

Na u sebelisa sethala sa SonarQube:

  • 26,3%Ee5

  • 15,8%No3

  • 15,8%Ke utloile ka sethala sena mme ke batla ho sebelisa3

  • 10,5%Ke utloile ka sethala sena mme ha ke batle ho sebelisa2

  • 0,0%Ke sebelisa sethala se fapaneng0

  • 31,6%Lekhetlo la pele ha ke utloa ka eena6

Basebelisi ba 19 ba ile ba khetha. Basebelisi ba 3 ba hanne.

Source: www.habr.com

Eketsa ka tlhaloso