VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

Matou te faʻaaogaina le faʻavae i la matou galuega soundQube ia faatumauina le tulaga lelei o code i se tulaga maualuga. Pe a tuʻufaʻatasia se tasi o galuega faatino ua tusia i totonu VueJs+Typescript, na tulaʻi mai faafitauli. O le mea lea, ou te fia taʻu atili atu ia te oe le auala na mafai ai ona matou foia.

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

I lenei tusiga o le a tatou talanoa, e pei ona ou tusia i luga, e uiga i le SonarQube platform. O sina manatu - o le a le mea lautele, mo i latou o loʻo faʻalogo i ai mo le taimi muamua:

soundQube (muamua Sonar) o se fa'avae puna'oa mo le su'esu'ega faifaipea ma le fuaina o tulaga lelei.
Lagolagoina le suʻesuʻeina o tulafono ma faʻamatalaga sese e tusa ai ma tulafono ole MISRA C, MISRA C ++, MITER / CWE ma CERT Secure Coding Standards polokalame faʻatulagaina. E mafai foi ona iloa mea sese mai le OWASP Top 10 ma le CWE/SANS Top 25 polokalame lisi mea sese.
E ui lava i le mea moni e faʻaaogaina e le faʻavae meafaigaluega eseese ua saunia, e faʻaititia e SonarQube iʻuga i se dashboard se tasi, tausia se talaʻaga o tamoʻe ma faʻatagaina oe e vaʻai i le masani masani o suiga i le tulaga lelei o polokalama i le taimi o atinaʻe.

E mafai ona maua nisi fa'amatalaga ile faʻapitonuʻu aloaia

E lagolagoina le tele o gagana polokalame. A fua i faʻamatalaga mai le soʻotaga i luga, e sili atu i le 25 gagana nei. Ina ia lagolagoina se gagana patino, e tatau ona e faʻapipiʻi le plugin talafeagai. O le fa'alapotopotoga fa'alapotopotoga e aofia ai se fa'apipi'i mo le galulue fa'atasi Javascript (e aofia ai le typeсript), e ui ina fai mai le wiki o le faafeagai. tua Javascript tali plugin SonarJS, mo Tusitusi SonarTS faasologa.

O lo'o fa'aogaina le tagata fa'atau aloaia e lafo atu fa'amatalaga fa'amatalaga sonarqube-scanner, lea, e fa'aaoga ai fa'atulagaga mai config-faila, auina atu nei faʻamatalaga i le 'auʻaunaga soundQube mo le fa'amalosia atili ma le fa'aopoopoina.

mo Javascript o npm afifi. O lea la, se'i o tatou amata i lea laasaga ma lea laasaga le faatinoga soundQube в Vaʻai-poloketi fa'aaogaina Tusitusiga.

E fa'apipi'i le server soundQube ia tatou faaaoga tatau fai fai-fai.

sonar.yaml:

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

Fa'alauiloa:

docker-compose -f sonar.yml up

A maea lenei mea soundQube o le a maua ile: http://localhost:9001 .

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube
E le o iai lava ni poloketi i totonu ma e talafeagai. O le a matou faasaʻoina lea tulaga. Na ou ave le poloketi faʻataʻitaʻiga aloaʻia mo VueJS+TS+Jest. Sei o tatou punou ia i tatou lava:

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

Muamua tatou te manaʻomia faʻapipiʻi le kalani soundQube, lea ua ta'ua su'e-sonarmo npm o loʻo i ai se afifi:

yarn add sonarqube-scanner

Ma vave ona faaopoopo le poloaiga i tusitusiga e galue ai.

package.json:

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

Le isi, mo le scanner e galue, e tatau ona e setiina le faʻatulagaina o galuega i se faila faʻapitoa. Tatou amata i mea faavae.

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 - tuatusi Sonar'A;
  • sonar.projectKey – fa'ailoaina galuega fa'apitoa i luga o le 'au'aunaga Sonar'A;
  • sonar.projectName - lona igoa, e mafai ona suia i soo se taimi, talu ai o le poloketi e iloa e ProjectKey;
  • sonar.sources - faila ma punaoa, masani o lenei src, ae mafai ona avea ma soo se mea. O lenei pusa e faʻatulagaina e faʻatatau i le pusa aʻa, o le faila lea e faʻalauiloa ai le scanner;
  • sonar.suega - o se parakalafa e alu tutusa ma le muamua. O le faila lea o lo'o iai su'ega. I lenei poloketi, e leai se faila, ma o le suʻega o loʻo i tafatafa o le vaega o loʻo faʻataʻitaʻiina i totonu o le pusa 'suʻega', o lea o le a tatou le amanaʻia ai mo le taimi nei ma faʻaoga le isi parakalafa;
  • sonar.test.inclusions - auala mo suʻega e faʻaaoga ai se matapulepule, atonu e tele elemene o loʻo lisiina e vavaeeseina e koma;
  • sonar.sourceEncoding - fa'ailoga mo faila faila.

Mo le faʻalauiloaina muamua o le scanner, ua saunia mea uma, sei vagana ai le gaioiga autu muamua: faʻalauiloa le afi suʻega lava ia, ina ia mafai ai ona maua faʻamatalaga e uiga i le inisiua, lea o le a faʻaaoga mulimuli ane e le scanner.

Ae ina ia faia lenei mea, e tatau ona e faʻatulagaina le afi suʻega e faʻatupu ai lenei faʻamatalaga. I lenei poloketi, o le suʻega afi o o loo i ai. Ma o ona faatulagaga o loʻo i le vaega tutusa o le faila afifi.json.

Se'i o tatou fa'aopoopo i ai tulaga nei:

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

O lona uiga, matou te setiina le fuʻa lava ia mo le manaʻoga e fuafua le faʻasalalauga ma le puna (faʻatasi ai ma tuusaunoaga) i luga o le faʻavae o le a fausia ai.

Se'i o tatou faia le su'ega:

yarn test

O le a tatou vaʻai i mea nei:

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

O le mafuaaga ona e leai se code i totonu o le vaega lava ia. Sei o tatou faaleleia lea.

HelloWorld.vue:

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

O le a lava lea e fa'atatau ai le fa'asoa.

A maeʻa ona toe amata le suʻega, matou te mautinoa o lenei:

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

I luga o le lau e tatau ona tatou vaʻai i faʻamatalaga e uiga i le inisiua, ma o le a faia se faila i le faila o le poloketi inisiua fa'atasi ai ma fa'amatalaga fa'amatalaga o su'ega i se tulaga lautele LCOV (LTP GCOV fa'aopoopoga).

Gcov ose fa'aoga fa'asoa fa'asoa mo le su'esu'eina o tulafono fa'asinoala. Gcov fa'atupuina le numera sa'o o fa'asalaga mo fa'amatalaga ta'itasi i totonu o se polokalame ma fa'atagaina oe e fa'aopoopo fa'amatalaga i le fa'ailoga puna. O le Gcov e sau o se fa'aoga masani o se vaega o le afifi GCC.
Lcov - fa'aoga fa'akalafi mo gcov. E fa'apipi'i faila gcov mo faila fa'apogai se tele ma maua ai se seti o itulau HTML ma fa'amatalaga fa'ailoga ma fa'amatalaga. Ua fausia foi itulau e faafaigofie ai le folauga. E lagolagoina e Lcov le fa'asalalauina o manoa, galuega, ma lala.

A maeʻa suʻega, o le a maua faʻamatalaga faʻamatalaga i totonu inisiua/lcov.info.
E tatau ona tatou fai atu Sonar'O fea ou te maua mai ai? O le mea lea, se'i o tatou fa'aopoopo laina nei i lana faila fa'atulagaina. Ae e tasi le itu: o galuega faatino e mafai ona tele gagana, o lona uiga, i totonu o le faila src o loʻo i ai tulafono faʻavae mo le tele o gagana polokalame ma fesoʻotaʻiga ma le tasi poʻo le isi, ma i le isi itu, o le faʻaogaina o le tasi poʻo le isi faʻapipiʻi e fuafua i lona faʻaopoopoga. Ma o faʻamatalaga faʻamatalaga e mafai ona teuina i nofoaga eseese mo gagana polokalame eseese, o lea e tofu gagana ma lana vaega mo le faʻatulagaina o lenei mea. E fa'aaogaina e le matou poloketi Tusitusiga, o lea matou te manaʻomia se vaega faʻatulagaina mo naʻo:

sonar-project.properties:

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

Ua saunia mea uma mo le faʻalauiloaina muamua o le scanner. Ou te fia matauina o le galuega faatino Sonar'e e otometi lava ona faia i le taimi muamua e te fa'atautaia ai le scanner mo se galuega fa'atino. I taimi mulimuli ane, o faʻamatalaga o le a faʻaputuina ina ia mafai ai ona vaʻaia le malosi o suiga i faʻasologa o poloketi i le taimi.

O lea la, tatou faʻaaoga le poloaiga na faia muamua i totonu afifi.json:

yarn run sonar 

Manatua: e mafai foi ona e faaaogaina le parakalafa -X mo nisi faamatalaga logging.

Afai na faʻalauiloa le scanner mo le taimi muamua, o le binary o le scanner lava ia o le a laʻuina muamua. A maeʻa ona amata ma amata suʻesuʻe le server Sonar'a mo fa'apipi'i fa'apipi'i, fa'apea ona fa'atatauina le gagana lagolago. O isi vaega eseese mo lona faʻagaioiga o loʻo faʻapipiʻiina foi: talaaga lelei, tulafono malosi, metrics repository, tulafono server.

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

Manatua: Matou te le faʻatalanoaina i latou i auiliiliga i totonu o le faʻavae o lenei tusiga, ae e mafai ona e faʻafesoʻotaʻi i taimi uma punaoa aloaia.

Le isi, amata le suʻesuʻega o faila src mo le maua o faila fa'apogai mo tagata uma (pe afai e le o fa'ailoa manino mai) gagana lagolago, fa'atasi ai ma a latou fa'asinomaga mulimuli ane.

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

E soso'o mai isi su'esu'ega eseese, lea tatou te le taula'i i ai i lenei tusiga (mo se fa'ata'ita'iga, e pei o le linting, su'esu'eina o le kopiina o tulafono, ma isi).

I le faaiuga o le galuega a le scanner, o faʻamatalaga uma na aoina o loʻo tuʻufaʻatasia, teuina ma lafoina i le 'auʻaunaga.

A maeʻa lenei mea, ua mafai ona tatou vaʻai i le mea na tupu i luga o le upega tafaʻilagi:

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

E pei ona mafai ona tatou vaʻaia, o se mea na aoga, ma faʻaalia ai foi se ituaiga o inisiua, ae e le fetaui ma i tatou o loo i ai-lipoti.

Sei o tatou mafaufau i ai. Seʻi o tatou vaʻavaʻai atili i le poloketi, kiliki i luga o le tau o le inisiua, ma "pa'ū" i totonu o se lipoti faila faila:

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

O iinei tatou te vaʻai ai, faʻaopoopo i le autu, suʻesuʻeina faila HelloWorld.vue, e iai foʻi se faila autu.ts, lea e faʻaleagaina ai le ata atoa o le faʻasalalauga. Ae fa'afefea ona tatou le aofia ai mai le fa'atatauga o le inisiua. Ioe, e sa'o mea uma, ae sa i luga ole tulaga o loo i ai, ae na faasino mai e le scanner, o lea na iʻu ai i ana faʻatusatusaga.

Sei o tatou faaleleia lenei mea:

sonar-project.properties:

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

Ou te manaʻo e fai se faʻamalamalamaga: faʻaopoopo i faila o loʻo faʻamaonia i lenei parakalafa, o faila uma o loʻo lisiina i le parakalafa e faʻaopoopoina foi. sonar.test.inclusions.

A maeʻa ona faʻalauiloa le scanner, matou te vaʻai i faʻamatalaga saʻo:

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

Sei o tatou tilotilo i le isi vaega - Tulaga lelei. Sa ou talanoa i luga e uiga i le lagolago Sonari le tele o gagana i le taimi e tasi. O le mea tonu lava lea ua tatou va'aia. Ae matou te iloa o la matou poloketi o loʻo tusia i totonu TS, aisea la e fa'amamafa ai le su'e i togafiti ma siaki e le mana'omia. O le a matou setiina le gagana mo le auʻiliʻiliga e ala i le faʻaopoopoina o se isi faʻamaufaʻailoga i le faila faila Sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

Se'i o tatou toe ta'e le scanner ma va'ai le i'uga:

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

O le faʻasalalauga na matua leai lava.

Afai tatou te tilotilo i le scanner log, e mafai ona tatou vaʻai i le laina lea:

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

O lona uiga, e le'i fa'asinoina a matou faila o galuega.

O le tulaga e faapea: lagolago aloaia VueJs o loʻo i totonu o le plugin SonarJSo ai e nafa ma Javascript.

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

Ae o lenei lagolago e le oi totonu o le plugin SonarTS mo TS, lea na tatalaina ai se pepa aloaia aloaia i le pusa siaki Sonar'A:

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

O nisi nei o tali mai se tasi o sui mai le SonarQube developers, faʻamaonia lenei mea moni.

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

Ae sa aoga mea uma mo i matou, ua e tetee. Ioe, se'i o tatou taumafai teisi “hack”.
Afai e iai le lagolago .vue- faila Sonar'Oi, se'i o tatou taumafai e ta'u atu ia te ia e manatu ia i latou Tusitusiga.

Se'i o tatou fa'aopoopo se fa'ailoga:

sonar-project.properties:

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

Sei o tatou fa'alauiloa le scanner:

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

Ma, voila, ua toe foʻi mea uma i le masani, ma faʻatasi ai ma le tasi faʻamatalaga mo Tusitusiga. O lona uiga, na mafai ona matou foia le faafitauli i le lagolago VueJs+TS mo soundQube.

Sei o tatou taumafai e agai atili i luma ma faʻaleleia atili faʻamatalaga faʻamatalaga.

O mea na matou faia i le taimi nei:

  • faaopoopo i le poloketi Sonar-su'e;
  • seti o loo i ai fa'atupuina fa'amatalaga fa'asalalau;
  • faatulagaina Sonar-su'e;
  • fo'ia le fa'afitauli lagolago .vue-faila + Tusitusiga.

I le faaopoopo atu i le suʻega faʻataʻitaʻiga, o loʻo i ai isi taʻiala aoga aoga mo le tulaga lelei o code, mo se faʻataʻitaʻiga, faʻasologa o code ma le numera o laina (e aʻafia i le faʻatusatusaina o coefficients e fesoʻotaʻi ma le lavelave code) o le poloketi.

I le faʻatinoga o loʻo iai nei o le plugin mo le galue ma TS (SonarTS) e le aoga CPD (Copy Paste Detector) ma le faitau laina o code .vue- faila.

Ina ia fatuina se tulaga faʻapipiʻi o le faʻasologa o code, naʻo le faaluaina o le faila faila i se igoa ese ma faʻaopoopo i le code autu.ts se galuega fa'ata'ata ma fa'alua i se isi igoa. Ina ia siaki mo le toe faia e pei ona i ai .vue, ma i totonu .ts - faila.

main.ts:

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

Ina ia faia lenei mea, e tatau ona e faʻamatalaina mo sina taimi le laina faʻatulagaina:

sonar-project.properties:

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

Sei o tatou toe amata le scanner faatasi ai ma le suʻega:

yarn test && yarn run sonar

Ioe, o le a pa'ū le matou inisiua, ae o lenei matou te le fiafia i lena mea.

I tulaga o le kopiina o laina o le code, o le a tatou vaʻai:

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

Ina ia siaki o le a matou faʻaaogaina CPD-fa'aoga- jscpd:

npx jscpd src

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

Mo laina code:

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

Masalo o le a foia lenei mea i le lumanaʻi plugin versions SonarJS(TS). Ou te fia maitauina o loʻo faasolosolo malie ona latou tuʻufaʻatasia nei masini e lua i le tasi SonarJS, lea ou te manatu e sa'o.

O lea ua ou mana'o e mafaufau i le filifiliga e fa'aleleia atili ai fa'amatalaga fa'amatalaga.

E o'o mai i le taimi nei e mafai ona tatou va'ai fa'ava'a fa'ata'ita'iga ile pasene fa'atatau mo le galuega atoa, ma mo faila fa'apitoa. Ae e mafai ona faʻalauteleina lenei faʻailoga ma faʻamatalaga e uiga i le aofaʻi iunite-suʻega mo le poloketi, faʻapea foʻi ma le tulaga o faila.

E iai se faletusi e mafai o loo i ai-faaliliu le lipoti i le faatulagaga mo Sonar'A:
fa'amatalaga su'ega lautele - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Tatou fa'apipi'i le faletusi lenei i la tatou galuega faatino:

yarn add jest-sonar-reporter

Ma faaopoopo i ai i le faatulagaga o loo i ai:

package.json:

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

Se'i o tatou faia le su'ega:

yarn test

A maeʻa ona faia se faila i le aʻa o le poloketi test-report.xml.

Sei o tatou faaaogaina i le faatulagaga Sonar'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Ma toe amata le scanner:

yarn run sonar

Se'i o tatou va'ai po'o le a le suiga i le fa'aoga Sonar'A:

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

Ma e leai se mea ua suia. O le mea moni e le manatu Sonar faila o loʻo faʻamatalaina i le lipoti a Jest o faila iunite-suega. Ina ia faʻasaʻo lenei tulaga, matou te faʻaogaina le faʻasologa faʻatulagaina Sonar sonar.suega, lea o le a matou faʻaalia manino ai laupepa ma suʻega (naʻo le tasi mo le taimi nei):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Sei toe amata le scanner:

yarn run sonar

Sei o tatou va'ai po'o le a le mea ua suia i le fa'aoga:

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

O lea ua tatou vaai i le numera o tatou iunite-su'ega ma, ua le manuia e ala i le kiliki i totonu, e mafai ona tatou vaʻaia le tufatufaina o lenei numera i faila o le poloketi:

VueJS+TS tu'ufa'atasiga poloketi ma SonarQube

iʻuga

O lea, na matou vaʻavaʻai i se meafaigaluega mo suʻesuʻega faifaipea soundQube. Na matou faʻapipiʻiina ma le manuia se galuega faatino na tusia i totonu VueJs+TS. Fa'atonu nisi fa'afitauli feso'ota'iga. Na matou fa'ateleina le fa'amatalaga o lo'o i totonu o le fa'ailoga o le su'ega. I totonu o lenei tusiga na matou suʻesuʻeina naʻo le tasi o faʻatonuga tulaga lelei (atonu o se tasi o mea autu), ae soundQube lagolagoina isi tulaga lelei, e aofia ai su'ega saogalemu. Ae le o nei vaega uma o loʻo avanoa atoatoa i totonu nuu-faiga. O se tasi o mea manaia ma aoga o le tuʻufaʻatasia soundQube fa'atasi ai ma fa'atonuga fa'atonuga fa'akomepiuta, pei ole GitLab ma BitBucket. Ina ia puipuia merge toso(merge) talosaga'a i le lala autu o le faleteuoloa pe a fa'aleagaina le inisiua. Ae o se tala lenei mo se tala e matua ese lava.

PS: O mea uma o loʻo faʻamatalaina i totonu o le tusiga i le tulaga o le code o loʻo avanoa i totonu la'u tui.

Na'o tagata fa'aigoaina e mafai ona auai i le su'esu'ega. Saini ese j, faʻamolemole.

E te fa'aogaina le SonarQube platform:

  • 26,3%Ioe5

  • 15,8%Leai3

  • 15,8%Na ou faalogo e uiga i lenei tulaga ma ou te manao e faaaoga3

  • 10,5%Ua ou faalogo e uiga i lenei tulaga ma ou te le manao e faaaoga2

  • 0,0%O lo'o ou fa'aogaina se tulaga ese0

  • 31,6%O le taimi muamua na ou faalogo ai e uiga ia te ia6

19 tagata fa'aoga na palota. 3 tagata fa'aoga na fa'amama.

puna: www.habr.com

Faaopoopo i ai se faamatalaga