A lo pẹpẹ ti o ṣiṣẹ ni iṣẹ wa ohunQube lati ṣetọju didara koodu ni ipele giga. Nigbati o ba ṣepọ ọkan ninu awọn iṣẹ akanṣe ti a kọ sinu VueJs + Typescript, awọn iṣoro dide. Nitorinaa, Emi yoo fẹ lati sọ fun ọ ni alaye diẹ sii bi a ṣe ṣakoso lati yanju wọn.

Ninu nkan yii a yoo sọrọ, bi Mo ti kọ loke, nipa pẹpẹ SonarQube. Imọran kekere kan - kini o jẹ ni gbogbogbo, fun awọn ti o gbọ nipa rẹ fun igba akọkọ:

ohunQube (tele Sonar) jẹ ipilẹ orisun ṣiṣi fun ayewo igbagbogbo ati wiwọn didara koodu.
Ṣe atilẹyin itupalẹ koodu ati wiwa aṣiṣe ni ibamu si awọn ofin ti MISRA C, MISRA C++, MITER/CWE ati awọn iṣedede siseto Awọn Iṣeduro koodu CERT. O tun le ṣe idanimọ awọn aṣiṣe lati OWASP Top 10 ati CWE/SANS Top 25 awọn atokọ aṣiṣe siseto.
Paapaa otitọ pe pẹpẹ naa nlo ọpọlọpọ awọn irinṣẹ ti a ti ṣetan, SonarQube dinku awọn abajade si dasibodu ẹyọkan, titọju itan-akọọlẹ ti awọn ṣiṣe ati nitorinaa gbigba ọ laaye lati wo aṣa gbogbogbo ti awọn ayipada ninu didara sọfitiwia lakoko idagbasoke.

Awọn alaye diẹ sii ni a le rii ni aaye ayelujara osise

Nọmba nla ti awọn ede siseto ni atilẹyin. Ni idajọ nipasẹ alaye lati ọna asopọ loke, iwọnyi ju awọn ede 25 lọ. Lati ṣe atilẹyin ede kan pato, o gbọdọ fi ohun itanna ti o yẹ sori ẹrọ. Ẹya agbegbe pẹlu ohun itanna kan fun ṣiṣẹ pẹlu JavaScript (pẹlu orisiсript), biotilejepe wiki wi idakeji. Lẹhin JavaScript itanna idahun SonarJS, fun Typescript SonarTS awọn atẹle.

Oṣiṣẹ alabara ni a lo lati firanṣẹ alaye agbegbe sonarqube-scanner, eyi ti, lilo awọn eto lati konfigi-file, firanṣẹ data yii si olupin naa ohunQube fun siwaju adapo ati akojọpọ.

fun JavaScript ni npm murasilẹ. Nitorinaa, jẹ ki a bẹrẹ imuse igbese-nipasẹ-igbesẹ ohunQube в Wo-ise agbese lilo Iruwe.

Lati ran olupin naa lọ ohunQube jẹ ki a gba anfani docker-ṣajọ.

sonar.yaml:

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

Ifilọlẹ:

docker-compose -f sonar.yml up

Lẹhinna ohunQube yoo wa ni: http://localhost:9001 .

Ko si awọn iṣẹ akanṣe ninu rẹ sibẹsibẹ ati pe o tọ. A yoo ṣe atunṣe ipo yii. Mo si mu awọn osise apẹẹrẹ ise agbese fun VueJS + TS + Jest. Jẹ ki a tẹ si ara wa:

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

Ni akọkọ a nilo lati fi sori ẹrọ alabara ohunQube, ti a npe ni sonar-scanner, fun npm murasilẹ wa:

yarn add sonarqube-scanner

Ati lẹsẹkẹsẹ fi aṣẹ naa kun si awọn iwe afọwọkọ lati ṣiṣẹ pẹlu rẹ.

package.json:

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

Nigbamii, fun ọlọjẹ lati ṣiṣẹ, o nilo lati ṣeto awọn eto ise agbese ni faili pataki kan. Jẹ ká bẹrẹ pẹlu awọn ipilẹ.

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 - adirẹsi Sonar'A;
• sonar.projectKey - idamo ise agbese alailẹgbẹ lori olupin naa Sonar'A;
• sonar.project Name – awọn oniwe-orukọ, o le wa ni yipada ni eyikeyi akoko, niwon ise agbese ti wa ni damo nipa projectKey;
• sonar.awọn orisun - folda pẹlu awọn orisun, nigbagbogbo eyi srcṣugbọn o le jẹ ohunkohun. A ṣeto folda yii ni ibatan si folda root, eyiti o jẹ folda lati eyiti a ti ṣe ifilọlẹ ọlọjẹ naa;
• sonar.idanwo - paramita kan ti o lọ ni tandem pẹlu ọkan ti tẹlẹ. Eyi ni folda nibiti awọn idanwo wa. Ninu iṣẹ akanṣe yii, ko si iru folda bẹẹ, ati pe idanwo naa wa lẹgbẹẹ paati labẹ idanwo ninu folda 'igbeyewo', nitorinaa a yoo foju rẹ fun bayi ati lo paramita atẹle;
• sonar.idanwo.awọn ifisi - ọna fun awọn idanwo nipa lilo iboju-boju, ọpọlọpọ awọn eroja le jẹ ti a ṣe akojọ niya nipasẹ awọn aami idẹsẹ;
• sonar.orisunEncoding - fifi koodu fun awọn faili orisun.

Fun ifilọlẹ akọkọ ti scanner, ohun gbogbo ti ṣetan, ayafi fun iṣe akọkọ ti iṣaaju: ifilọlẹ ẹrọ idanwo funrararẹ, ki o le ṣe alaye alaye nipa agbegbe, eyiti ọlọjẹ naa yoo lo nigbamii.

Ṣugbọn lati ṣe eyi, o nilo lati tunto ẹrọ idanwo lati ṣe agbekalẹ alaye yii. Ninu iṣẹ akanṣe yii, ẹrọ idanwo jẹ Jest. Ati awọn eto rẹ wa ni apakan ti o baamu ti faili naa package.json.

Jẹ ki a ṣafikun awọn eto wọnyi:

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

Iyẹn ni, a ṣeto asia funrararẹ fun iwulo lati ṣe iṣiro agbegbe ati orisun (pẹlu awọn imukuro) lori ipilẹ eyiti yoo ṣẹda.

Bayi jẹ ki a ṣiṣẹ idanwo naa:

yarn test

A yoo rii atẹle naa:

Idi ni pe ko si koodu ninu paati funrararẹ. Jẹ ki a ṣatunṣe eyi.

HelloWorld.vue:

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

Eyi yoo to lati ṣe iṣiro agbegbe.

Lẹhin atunbere idanwo naa, a yoo rii daju eyi:

Lori iboju a yẹ ki o wo alaye nipa agbegbe, ati pe folda kan yoo ṣẹda ninu folda agbese agbegbe pẹlu alaye agbegbe idanwo ni ọna kika gbogbo agbaye LCOV (LTP GCOV itẹsiwaju).

Gcov jẹ ohun elo pinpin larọwọto fun ayẹwo agbegbe koodu. Gcov ṣe ipilẹṣẹ nọmba gangan ti awọn ipaniyan fun alaye kọọkan ninu eto kan ati gba ọ laaye lati ṣafikun awọn alaye si koodu orisun. Gcov wa bi ohun elo boṣewa gẹgẹbi apakan ti package GCC.
Lcov - ayaworan ni wiwo fun gcov. O ṣe apejọ awọn faili gcov fun awọn faili orisun pupọ ati ṣe agbejade akojọpọ awọn oju-iwe HTML pẹlu koodu ati alaye agbegbe. Awọn oju-iwe tun jẹ ipilẹṣẹ lati jẹ ki lilọ kiri rọrun. Lcov ṣe atilẹyin agbegbe ti awọn okun, awọn iṣẹ, ati awọn ẹka.

Lẹhin ti awọn idanwo naa ti pari, alaye agbegbe yoo wa ninu agbegbe/lcov.info.
A nilo lati sọ Sonar'Nibo ni MO le gba? Nitorinaa, jẹ ki a ṣafikun awọn laini atẹle si faili iṣeto rẹ. Ṣugbọn aaye kan wa: awọn iṣẹ akanṣe le jẹ multilingual, iyẹn ni, ninu folda src Awọn koodu orisun wa fun ọpọlọpọ awọn ede siseto ati ibatan pẹlu ọkan tabi omiiran, ati ni ọna, lilo ọkan tabi ohun itanna miiran jẹ ipinnu nipasẹ itẹsiwaju rẹ. Ati pe alaye agbegbe le wa ni ipamọ ni awọn aaye oriṣiriṣi fun awọn ede siseto oriṣiriṣi, nitorinaa ede kọọkan ni apakan tirẹ fun siseto eyi. Ise agbese wa nlo Iruwe, nitorinaa a nilo apakan eto kan fun rẹ:

sonar-project.properties:

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

Ohun gbogbo ti ṣetan fun ifilọlẹ akọkọ ti scanner naa. Emi yoo fẹ lati ṣe akiyesi pe iṣẹ naa jẹ SonarA ṣẹda laifọwọyi ni igba akọkọ ti o ṣe ifilọlẹ ọlọjẹ fun iṣẹ akanṣe kan. Ni awọn akoko atẹle, alaye yoo wa ni akojo lati le rii awọn agbara ti awọn ayipada ninu awọn aye iṣẹ akanṣe lori akoko.

Nitorinaa, jẹ ki a lo aṣẹ ti a ṣẹda tẹlẹ ninu package.json:

yarn run sonar 

akiyesi: o tun le lo paramita -X fun alaye diẹ gedu.

Ti o ba ti ṣe ifilọlẹ ọlọjẹ naa fun igba akọkọ, lẹhinna alakomeji ti scanner funrararẹ yoo ṣe igbasilẹ ni akọkọ. Lẹhin iyẹn o bẹrẹ ati bẹrẹ ọlọjẹ olupin naa Sonar'a fun awọn afikun ti a fi sori ẹrọ, nitorinaa ṣe iṣiro ede atilẹyin. Orisirisi awọn paramita miiran fun iṣiṣẹ rẹ tun ti kojọpọ: awọn profaili didara, awọn ofin ti nṣiṣe lọwọ, ibi ipamọ metiriki, awọn ofin olupin.

akiyesi: A kii yoo gbe lori wọn ni awọn alaye laarin ilana ti nkan yii, ṣugbọn o le kan si awọn orisun osise nigbagbogbo.

Nigbamii, itupalẹ folda bẹrẹ src fun wiwa awọn faili orisun fun gbogbo (ti o ba jẹ pe kan pato ko ni pato ni pato) ede atilẹyin, pẹlu itọka atẹle wọn.

Nigbamii ti ọpọlọpọ awọn itupalẹ miiran wa, eyiti a ko dojukọ ninu nkan yii (fun apẹẹrẹ, bii linting, wiwa ti ẹda koodu, ati bẹbẹ lọ).

Ni ipari pupọ ti iṣẹ ọlọjẹ naa, gbogbo alaye ti a gba ni akopọ, ti wa ni ipamọ ati firanṣẹ si olupin naa.

Lẹhin eyi, a le rii tẹlẹ ohun ti o ṣẹlẹ ni wiwo wẹẹbu:

Bi a ti le ri, nkankan sise, ati paapa fihan diẹ ninu awọn Iru agbegbe, sugbon o ko ni ko baramu tiwa Jest-iroyin.

Jẹ ká ro ero o jade. Jẹ ki a wo iṣẹ akanṣe ni awọn alaye diẹ sii, tẹ lori iye agbegbe, ati “ṣubu nipasẹ” sinu ijabọ faili alaye kan:

Nibi a rii, ni afikun si akọkọ, faili ti a ṣe ayẹwo HelloWorld.vue, faili tun wa akọkọ.ts, eyi ti o bajẹ gbogbo aworan ti agbegbe naa. Ṣugbọn bawo ni a ṣe yọkuro kuro ninu iṣiro ti agbegbe. Bẹẹni, ohun gbogbo tọ, ṣugbọn o wa lori ipele naa Jest, ṣugbọn scanner ṣe atọka rẹ, nitorina o pari ni awọn iṣiro rẹ.

Jẹ ki a ṣatunṣe eyi:

sonar-project.properties:

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

Emi yoo fẹ lati ṣe alaye: ni afikun si awọn folda ti o wa ni pato ninu paramita yii, gbogbo awọn folda ti a ṣe akojọ si paramita naa ni a tun ṣafikun sonar.idanwo.awọn ifisi.

Lẹhin ifilọlẹ ọlọjẹ naa, a rii alaye to pe:

Jẹ ki a wo aaye ti o tẹle - Awọn profaili didara. Mo ti sọrọ loke nipa support SonarAwọn ede pupọ ni akoko kanna. Eyi ni pato ohun ti a n rii. Ṣugbọn a mọ pe a kọ iṣẹ akanṣe wa sinu TS, ki idi ti igara awọn scanner pẹlu kobojumu ifọwọyi ati awọn sọwedowo. A yoo ṣeto ede fun itupalẹ nipa fifi paramita kan kun si faili iṣeto ni Sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

Jẹ ki a tun ṣiṣẹ ọlọjẹ naa lẹẹkansi ki o wo abajade:

Agbegbe naa ti lọ patapata.

Ti a ba wo log scanner, a le rii laini atẹle:

Iyẹn ni, awọn faili iṣẹ akanṣe wa lasan ko ṣe atọka.

Awọn ipo jẹ bi wọnyi: ifowosi atilẹyin VueJs jẹ ninu awọn itanna SonarJSti o jẹ lodidi fun JavaScript.

Ṣugbọn atilẹyin yii ko si ninu ohun itanna naa SonarTS fun TS, nipa eyiti a ṣii tikẹti osise ni olutọpa kokoro Sonar'A:

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

Eyi ni diẹ ninu awọn idahun lati ọkan ninu awọn aṣoju lati ọdọ awọn olupilẹṣẹ SonarQube, ti n jẹrisi otitọ yii.

Ṣugbọn ohun gbogbo ṣiṣẹ fun wa, o tako. Bẹẹni o jẹ, jẹ ki a gbiyanju diẹ diẹ "gige".
Ti atilẹyin ba wa .vue- awọn faili Sonar'om, lẹhinna jẹ ki a gbiyanju lati sọ fun u lati ro wọn bi Iruwe.

Jẹ ki a fi paramita kan kun:

sonar-project.properties:

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

Jẹ ki a ṣe ifilọlẹ ọlọjẹ naa:

Ati, voila, ohun gbogbo ti pada si deede, ati pẹlu profaili kan nikan fun Iruwe. Iyẹn ni, a ṣakoso lati yanju iṣoro naa ni atilẹyin VueJs+TS fun ohunQube.

Jẹ ki a gbiyanju lati lọ siwaju ati ilọsiwaju alaye agbegbe diẹ.

Ohun ti a ti ṣe titi di isisiyi:

• kun si ise agbese Sonar-ayẹwo;
• ṣeto Jest lati ṣe ipilẹṣẹ alaye agbegbe;
• tunto Sonar-ayẹwo;
• yanju iṣoro atilẹyin .vue- awọn faili + Iruwe.

Ni afikun si agbegbe idanwo, awọn iwulo iwulo miiran ti o nifẹ fun didara koodu, fun apẹẹrẹ, pipọ koodu ati nọmba awọn laini (ti o kan si iṣiro ti awọn iyeida ti o ni ibatan si idiju koodu) ti iṣẹ akanṣe.

Ninu imuse lọwọlọwọ ti itanna fun ṣiṣẹ pẹlu TS (SonarTS) kii yoo ṣiṣẹ CPD (Daakọ Oluwari Lẹẹmọ) ati kika awọn ila ti koodu .vue- awọn faili.

Lati ṣẹda ipo sintetiki ti ẹda koodu, nìkan ṣe pidánpidán faili paati pẹlu orukọ ti o yatọ ati tun ṣafikun si koodu naa akọkọ.ts a ni idinwon iṣẹ ati pidánpidán o pẹlu kan yatọ si orukọ. Lati ṣayẹwo fun išẹpo bi ninu .vueati ninu .ts - awọn faili.

main.ts:

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

Lati ṣe eyi, o nilo lati ṣalaye laini iṣeto ni igba diẹ:

sonar-project.properties:

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

Jẹ ki a tun bẹrẹ ọlọjẹ naa pẹlu idanwo:

yarn test && yarn run sonar

Nitoribẹẹ, agbegbe wa yoo ṣubu, ṣugbọn ni bayi a ko nifẹ ninu iyẹn.

Ni awọn ofin ti awọn laini pidánpidán ti koodu, a yoo rii:

Lati ṣayẹwo a yoo lo CPD-ohun elo - jscpd:

npx jscpd src

Fun awọn ila ti koodu:

Boya eyi yoo jẹ ipinnu ni awọn ẹya itanna iwaju SonarJS(TS). Emi yoo fẹ lati ṣe akiyesi pe wọn n bẹrẹ diẹdiẹ lati dapọ awọn afikun meji wọnyi sinu ọkan SonarJS, eyiti Mo ro pe o tọ.

Bayi Mo fẹ lati ronu aṣayan ti imudarasi alaye agbegbe.

Nitorinaa a le rii agbegbe idanwo ni awọn ofin ipin fun gbogbo iṣẹ akanṣe, ati fun awọn faili ni pataki. Ṣugbọn o ṣee ṣe lati faagun atọka yii pẹlu alaye nipa iwọn kuro-igbeyewo fun ise agbese, bi daradara bi ni o tọ ti awọn faili.

Nibẹ ni a ìkàwé ti o le Jest-iyipada iroyin sinu kika fun Sonar'A:
jeneriki igbeyewo data - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Jẹ ki a fi ile-ikawe yii sori iṣẹ akanṣe wa:

yarn add jest-sonar-reporter

Ki o si fi si awọn iṣeto ni Jest:

package.json:

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

Bayi jẹ ki a ṣiṣẹ idanwo naa:

yarn test

Lẹhin eyi faili kan yoo ṣẹda ni gbongbo iṣẹ naa igbeyewo-iroyin.xml.

Jẹ ki a lo ninu iṣeto naa Sonar'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Ati tun bẹrẹ ọlọjẹ naa:

yarn run sonar

Jẹ ká wo ohun ti yi pada ni wiwo Sonar'A:

Ati pe ko si ohun ti o yipada. Otitọ ni pe Sonar ko ṣe akiyesi awọn faili ti a ṣalaye ninu ijabọ Jest bi awọn faili kuro-awọn idanwo. Lati ṣe atunṣe ipo yii, a lo paramita iṣeto ni Sonar sonar.idanwo, ninu eyiti a yoo ṣe afihan awọn folda pẹlu awọn idanwo (a nikan ni ọkan fun bayi):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Jẹ ki a tun bẹrẹ ọlọjẹ naa:

yarn run sonar

Jẹ ki a wo ohun ti o yipada ni wiwo:

Bayi a ti rii nọmba ti wa kuro-awọn idanwo ati, ti kuna nipa titẹ si inu, a le rii pinpin nọmba yii laarin awọn faili iṣẹ akanṣe:

ipari

Nitorinaa, a wo ohun elo kan fun itupalẹ igbagbogbo ohunQube. A ṣe aṣeyọri ṣaṣeyọri sinu rẹ iṣẹ akanṣe ti a kọ sinu rẹ VueJs+TS. Ti o wa titi diẹ ninu awọn ọran ibamu. A pọ si akoonu alaye ti itọkasi agbegbe idanwo. Ninu nkan yii a ṣe ayẹwo ọkan ninu awọn ibeere didara koodu (boya ọkan ninu awọn akọkọ), ṣugbọn ohunQube ṣe atilẹyin awọn ibeere didara miiran, pẹlu idanwo ailewu. Ṣugbọn kii ṣe gbogbo awọn ẹya wọnyi wa ni kikun ninu awujo-awọn ẹya. Ọkan ninu awọn ẹya ti o nifẹ ati iwulo jẹ isọpọ ohunQube pẹlu ọpọlọpọ awọn eto iṣakoso ibi ipamọ koodu, gẹgẹbi GitLab ati BitBucket. Lati ṣe idiwọ dapọ fa (dapọ) ìbéèrè'a si ẹka akọkọ ti ibi ipamọ nigbati agbegbe ti bajẹ. Ṣugbọn eyi jẹ itan kan fun nkan ti o yatọ patapata.

PS: Ohun gbogbo ti a ṣalaye ninu nkan naa ni irisi koodu wa ninu orita mi.

Awọn olumulo ti o forukọsilẹ nikan le kopa ninu iwadi naa. wọle, Jowo.

Ṣe o lo pẹpẹ SonarQube:

• 26,3%Bẹẹni5

• 15,8%No3

• 15,8%Mo ti gbọ nipa yi Syeed ati ki o fẹ lati lo3

• 10,5%Mo ti gbọ nipa pẹpẹ yii ati pe ko fẹ lati lo2

• 0,0%Mo n lo o yatọ si Syeed0

• 31,6%Ni igba akọkọ ti Mo ti gbọ nipa rẹ6

19 olumulo dibo. 3 olumulo abstained.

orisun: www.habr.com