Nou aktivman itilize platfòm la nan travay nou an soundQube pou kenbe bon jan kalite kòd nan yon wo nivo. Lè w entegre youn nan pwojè yo ekri nan VueJs+Typescript, pwoblèm te parèt. Se poutèt sa, mwen ta renmen di w an plis detay ki jan nou jere yo rezoud yo.

Nan atik sa a nou pral pale, jan mwen te ekri pi wo a, sou platfòm SonarQube. Yon ti teyori - ki sa li ye an jeneral, pou moun ki tande pale de li pou premye fwa:

soundQube (ansyen Sonar) se yon platfòm sous louvri pou enspeksyon kontinyèl ak mezi bon jan kalite kòd.
Sipòte analiz kòd ak deteksyon erè dapre règleman yo nan estanda pwogramasyon MISRA C, MISRA C++, MITRE/CWE ak CERT Secure Coding Standards. Li kapab rekonèt tou erè nan lis OWASP Top 10 ak CWE/SANS Top 25 erè pwogramasyon.
Malgre lefèt ke platfòm la sèvi ak divès kalite zouti pare, SonarQube diminye rezilta yo nan yon sèl tablodbò, kenbe yon istwa nan kouri ak kidonk pèmèt ou wè tandans jeneral chanjman nan kalite lojisyèl pandan devlopman.

Ou ka jwenn plis detay nan ofisyèl sou sit wèb

Yon gwo kantite langaj pwogramasyon yo sipòte. Jije pa enfòmasyon ki soti nan lyen ki anwo a, sa yo se plis pase 25 lang. Pou sipòte yon lang espesifik, ou dwe enstale Plugin ki apwopriye a. Vèsyon kominote a gen ladann yon plugin pou travay avèk JavaScript (ki gen ladan typeсript), byenke wiki a di opoze a. Dèyè JavaScript repons plugin SonarJS, pou Typescript SonarTS respektivman.

Yo itilize kliyan ofisyèl la pou voye enfòmasyon sou kouvèti a sonarqube-eskanè, ki, lè l sèvi avèk anviwònman yo soti nan config-file, voye done sa yo bay sèvè a soundQube pou plis konsolidasyon ak agrégation.

Pou JavaScript gen npm wrapper. Se konsa, ann kòmanse aplikasyon etap pa etap soundQube в Vue-pwojè itilize tape ekri.

Pou deplwaye yon sèvè soundQube ann pwofite docker-konpoze.

sonar.yaml:

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

Lanse:

docker-compose -f sonar.yml up

Apre sa soundQube ap disponib nan: http://localhost:9001 .

Pa gen okenn pwojè nan li ankò e sa jis. Nou pral korije sitiyasyon sa a. Mwen te pran pwojè egzanp ofisyèl la pou VueJS+TS+Jest. Ann pliye li nan direksyon tèt nou:

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

Premye nou bezwen enstale kliyan an soundQube, ki rele sonar-eskanèpou npm gen yon anbalaj:

yarn add sonarqube-scanner

Epi imedyatman ajoute kòmandman an nan Scripts pou travay avèk li.

package.json:

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

Apre sa, pou eskanè a travay, ou bezwen mete anviwònman pwojè yo nan yon dosye espesyal. Ann kòmanse ak Basics yo.

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 - adrès Sonar'A;
sonar.projectKey - idantifyan pwojè inik sou sèvè a Sonar'A;
sonar.projectName – non li, li ka chanje nenpòt ki lè, depi pwojè a idantifye pa projectKey;
sonar.sources – Katab ak sous, anjeneral sa a src, men li kapab anyen. Katab sa a mete parapò ak katab rasin lan, ki se katab kote eskanè a te lanse;
sonar.tès – yon paramèt ki ale nan tandem ak youn anvan an. Sa a se katab kote tès yo ye. Nan pwojè sa a, pa gen okenn katab sa yo, epi tès la sitiye akote eleman yo te teste nan katab la 'tès', kidonk nou pral inyore li pou kounye a epi sèvi ak pwochen paramèt la;
sonar.test.inclusions – chemen pou tès yo lè l sèvi avèk yon mask, ka gen plizyè eleman ki nan lis separe pa vigil;
sonar.sourceEncoding - kodaj pou dosye sous.

Pou premye lansman eskanè a, tout bagay pare, eksepte aksyon prensipal anvan an: lanse motè tès la tèt li, pou li ka jenere enfòmasyon sou pwoteksyon an, ki scanner la pral itilize imedyatman.

Men, pou fè sa, ou bezwen konfigirasyon motè tès la pou jenere enfòmasyon sa a. Nan pwojè sa a, motè tès la se Plè. Ak paramèt li yo nan seksyon ki koresponn nan dosye a package.json.

Ann ajoute paramèt sa yo:

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

Sa vle di, nou mete drapo a tèt li pou bezwen an kalkile pwoteksyon ak sous la (ansanm ak eksepsyon) sou baz ki li pral fòme.

Koulye a, ann kouri tès la:

yarn test

Nou pral wè sa ki annapre yo:

Rezon ki fè la se ke pa gen okenn kòd nan eleman nan tèt li. Ann ranje sa.

HelloWorld.vue:

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

Sa a pral ase pou kalkile pwoteksyon.

Apre rekòmanse tès la, nou pral asire w ke sa a:

Sou ekran an nou ta dwe wè enfòmasyon sou pwoteksyon an, epi yo pral kreye yon katab nan katab pwojè a pwoteksyon ak enfòmasyon sou kouvèti tès la nan yon fòma inivèsèl LCOV (ektansyon LTP GCOV).

Gcov se yon sèvis piblik lib pou egzamine kouvèti kòd. Gcov jenere kantite egzak egzekisyon pou chak deklarasyon nan yon pwogram epi li pèmèt ou ajoute annotasyon nan kòd sous la. Gcov vini kòm yon sèvis piblik estanda kòm yon pati nan pake GCC la.
Lcov - koòdone grafik pou gcov. Li rasanble fichye gcov pou plizyè fichye sous epi li pwodui yon seri paj HTML ak enfòmasyon sou kòd ak pwoteksyon. Paj yo tou pwodwi pou fè navigasyon pi fasil. Lcov sipòte pwoteksyon nan fisèl, fonksyon, ak branch.

Apre tès yo fin ranpli, enfòmasyon sou kouvèti a pral jwenn nan coverage/lcov.info.
Nou bezwen di Sonar'Ki kote mwen ka jwenn li? Se poutèt sa, an n ajoute liy sa yo nan dosye konfigirasyon li yo. Men, gen yon pwen: pwojè yo ka plizyè lang, se sa ki nan katab la src gen kòd sous pou plizyè lang pwogramasyon ak afilyasyon ak youn oswa yon lòt, ak nan vire, itilizasyon youn oswa yon lòt Plugin detèmine pa ekstansyon li yo. Epi enfòmasyon sou kouvèti yo ka estoke nan diferan kote pou diferan lang pwogramasyon, kidonk chak lang gen pwòp seksyon li pou mete kanpe sa a. Pwojè nou an itilize tape ekri, kidonk nou bezwen yon seksyon anviwònman jis pou li:

sonar-project.properties:

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

Tout bagay pare pou premye lansman eskanè a. Mwen ta renmen sonje ke pwojè a se Sonar'e se kreye otomatikman premye fwa ou kouri eskanè a pou yon pwojè bay yo. Nan tan ki vin apre yo, enfòmasyon yo pral akimile yo nan lòd yo wè dinamik yo nan chanjman nan paramèt pwojè sou tan.

Se konsa, ann itilize kòmandman ki te kreye pi bonè nan package.json:

yarn run sonar

Remak: ou kapab tou itilize paramèt la -X pou enregistrement plis detay.

Si yo te lanse eskanè a pou premye fwa, yo pral telechaje binè eskanè a li menm an premye. Apre sa, li kòmanse epi li kòmanse tcheke sèvè a Sonar'a pou grefon enstale, kidonk kalkile langaj sipòte. Plizyè lòt paramèt pou operasyon li yo chaje tou: Des bon jan kalite, règ aktif, depo mezi, règ sèvè.

Remak: Nou pa pral rete sou yo an detay nan kad atik sa a, men ou ka toujou kontakte sous ofisyèl yo.

Apre sa, analiz katab la kòmanse src pou disponiblite fichye sous pou tout lang ki sipòte (si yo pa espesifye yon sèl espesifik), ak endèks ki vin apre yo.

Apre sa, vini divès lòt analiz, ke nou pa konsantre sou nan atik sa a (pa egzanp, tankou liting, deteksyon nan duplication kòd, elatriye).

Nan fen travay eskanè a, tout enfòmasyon kolekte yo rasanble, achiv epi voye sou sèvè a.

Apre sa, nou ka deja wè sa ki te pase nan koòdone entènèt la:

Kòm nou ka wè, yon bagay te travay, e menm montre kèk kalite pwoteksyon, men li pa matche ak nou an Plè-rapò.

Ann kalkile li. Ann gade pwojè a an plis detay, klike sou valè kouvèti a, epi "tonbe nan" nan yon rapò dosye detaye:

Isit la nou wè, nan adisyon a prensipal la, dosye egzamine HelloWorld.vue, gen yon dosye tou main.ts, ki gate foto an antye nan pwoteksyon an. Men, ki jan fè nou eskli li nan kalkil la nan pwoteksyon. Wi, tout bagay kòrèk, men li te sou nivo a Plè, men eskanè a endis li, kidonk li te fini nan kalkil li yo.

Ann ranje sa a:

sonar-project.properties:

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

Mwen ta renmen fè yon klarifikasyon: anplis dosye yo ki espesifye nan paramèt sa a, yo ajoute tout dosye ki nan lis nan paramèt la. sonar.test.inclusions.

Apre lanse eskanè a, nou wè enfòmasyon ki kòrèk la:

Ann gade nan pwochen pwen an - Des kalite. Mwen te pale pi wo a sou sipò Sonar'Om plizyè lang an menm tan. Sa a se egzakteman sa nou ap wè. Men, nou konnen ke pwojè nou an ekri nan TS, Se konsa, poukisa souch eskanè a ak manipilasyon nesesè ak chèk. Nou pral mete lang pou analiz la lè nou ajoute yon lòt paramèt nan fichye konfigirasyon an Sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

Ann kouri eskanè a ankò epi wè rezilta a:

Kouvèti a te konplètman ale.

Si nou gade nan jounal eskanè a, nou ka wè liy sa a:

Sa vle di, dosye pwojè nou yo tou senpleman pa te endèks.

Sitiyasyon an se jan sa a: ofisyèlman sipòte VueJs se nan plugin a SonarJSki moun ki responsab JavaScript.

Men, sipò sa a pa nan plugin a SonarTS pou TS, sou ki yon tikè ofisyèl yo te louvri nan tracker la ensèk Sonar'A:

Men kèk repons nan men youn nan reprezantan devlopè SonarQube yo, ki konfime reyalite sa a.

Men, tout bagay te travay pou nou, ou objet. Wi li ye, ann eseye li yon ti kras "pirate".
Si gen sipò .vue-fichye Sonar'O, Lè sa a, ann eseye di l' konsidere yo kòm tape ekri.

Ann ajoute yon paramèt:

sonar-project.properties:

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

Ann lanse eskanè a:

Epi, vwala, tout bagay tounen nan nòmal, ak yon sèl pwofil sèlman pou tape ekri. Sa se, nou jere yo rezoud pwoblèm nan nan sipò VueJs+TS pou soundQube.

Ann eseye ale pi lwen epi amelyore enfòmasyon sou kouvèti a yon ti kras.

Sa nou fè jiskaprezan:

ajoute nan pwojè a Sonar-eskanè;
mete kanpe Plè jenere enfòmasyon sou kouvèti;
configuré Sonar-eskanè;
rezoud pwoblèm sipò a .vue-fichye + tape ekri.

Anplis pwoteksyon tès la, gen lòt kritè enteresan ki itil pou bon jan kalite kòd, pou egzanp, kopi kòd ak kantite liy (ki enplike nan kalkil koyefisyan ki gen rapò ak konpleksite kòd) nan pwojè a.

Nan aplikasyon aktyèl la nan Plugin la pou travay avèk yo TS (SonarTS) pa pral travay CPD (Kopi kole detektè) ak konte liy kòd .vue-fichye.

Pou kreye yon sitiyasyon sentetik nan duplication kòd, tou senpleman kopi fichye a eleman ak yon non diferan epi tou ajoute li nan kòd la. main.ts yon fonksyon egare epi kopi li ak yon non diferan. Pou tcheke pou kopi tankou nan .vue, ak nan .ts -fichye.

main.ts:

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

Pou fè sa, ou bezwen tanporèman kòmantè liy konfigirasyon an:

sonar-project.properties:

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

Ann rekòmanse eskanè a ansanm ak tès la:

yarn test && yarn run sonar

Natirèlman, pwoteksyon nou an pral tonbe, men kounye a nou pa enterese nan sa.

An tèm de doub liy nan kòd, nou pral wè:

Pou tcheke nou pral sèvi ak CPD-utilite - jscpd:

npx jscpd src

Pou liy kòd:

Petèt sa a pral rezoud nan pwochen vèsyon plugin SonarJS(TS). Mwen ta renmen sonje ke yo piti piti kòmanse rantre de grefon sa yo nan yon sèl SonarJS, ki mwen panse ki kòrèk.

Koulye a, mwen te vle konsidere opsyon pou amelyore enfòmasyon sou kouvèti asirans lan.

Jiskaprezan nou ka wè pwoteksyon tès an tèm pousantaj pou tout pwojè a, ak pou dosye an patikilye. Men, li posib pou elaji endikatè sa a ak enfòmasyon sou kantite a inite-tès pou pwojè a, osi byen ke nan kontèks dosye yo.

Gen yon bibliyotèk ki kapab Plè-konvèti rapò a nan fòma pou Sonar'A:
done tès jenerik - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Ann enstale bibliyotèk sa a nan pwojè nou an:

yarn add jest-sonar-reporter

Epi ajoute li nan konfigirasyon an Plè:

package.json:

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

Koulye a, ann kouri tès la:

yarn test

Apre sa, yo pral kreye yon dosye nan rasin pwojè a tès-report.xml.

Ann sèvi ak li nan konfigirasyon an Sonar'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Epi rekòmanse eskanè a:

yarn run sonar

Ann wè sa ki chanje nan koòdone la Sonar'A:

E pa gen anyen ki chanje. Reyalite a se ke Sonar pa konsidere dosye yo dekri nan rapò Jest la kòm dosye inite-tès. Pou korije sitiyasyon sa a, nou itilize paramèt konfigirasyon an Sonar sonar.tès, nan ki nou pral klèman endike dosye yo ak tès (nou gen sèlman youn pou kounye a):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Ann rekòmanse eskanè a:

yarn run sonar

Ann wè sa ki te chanje nan koòdone a:

Koulye a, nou te wè nimewo a nan nou an inite-tès yo epi, lè nou echwe lè nou klike sou andedan, nou ka wè distribisyon nimewo sa a nan mitan dosye pwojè yo:

Konklizyon

Se konsa, nou te gade yon zouti pou analiz kontinyèl soundQube. Nou avèk siksè entegre nan li yon pwojè ekri nan li VueJs+TS. Fiks kèk pwoblèm konpatibilite. Nou ogmante kontni enfòmasyon nan endikatè kouvèti tès la. Nan atik sa a nou egzamine sèlman youn nan kritè bon jan kalite kòd (petèt youn nan prensipal yo), men soundQube sipòte lòt kritè kalite, tankou tès sekirite. Men, se pa tout karakteristik sa yo ki konplètman disponib nan kominote- vèsyon. Youn nan karakteristik yo ki enteresan ak itil se entegrasyon soundQube ak divès sistèm jesyon depo kòd, tankou GitLab ak BitBucket. Pou anpeche merge pull(fusion) demann'a nan branch prensipal la nan depo a lè pwoteksyon an degrade. Men, sa a se yon istwa pou yon atik konplètman diferan.

PS: Tout sa ki dekri nan atik la nan fòm lan nan kòd ki disponib nan fouchèt mwen an.

Se sèlman itilizatè ki anrejistre ki ka patisipe nan sondaj la. Enskri, tanpri.

Èske w itilize platfòm SonarQube a:

26,3%Wi5
15,8%Non3
15,8%Mwen tande pale sou platfòm sa a epi mwen vle itilize3
10,5%Mwen te tande pale sou platfòm sa a epi mwen pa vle itilize2
0,0%Mwen itilize yon platfòm diferan0
31,6%Premye fwa mwen tande pale de li6

19 itilizatè yo te vote. 3 itilizatè te absteni.

Sous: www.habr.com

VueJS+TS entegrasyon pwojè ak SonarQube

Konklizyon

Èske w itilize platfòm SonarQube a:

Add nouvo kòmantè Anile reply