Utilitzem activament la plataforma en el nostre treball SonarQube per mantenir la qualitat del codi a un alt nivell. En integrar un dels projectes escrits VueJs+Typescript, van sorgir problemes. Per tant, m'agradaria explicar-vos amb més detall com hem aconseguit resoldre'ls.
En aquest article parlarem, com he escrit més amunt, de la plataforma SonarQube. Una mica de teoria: què és en general, per a aquells que en senten parlar per primera vegada:
SonarQube (anterior Sónar) és una plataforma de codi obert per a la inspecció contínua i la mesura de la qualitat del codi.
Admet l'anàlisi de codi i la detecció d'errors segons les regles dels estàndards de programació MISRA C, MISRA C++, MITRE/CWE i CERT Secure Coding Standards. També pot reconèixer errors de les llistes d'errors de programació OWASP Top 10 i CWE/SANS Top 25.
Malgrat que la plataforma utilitza diverses eines ja fetes, SonarQube redueix els resultats a un únic tauler, conservant un historial d'execucions i permetent així veure la tendència general dels canvis en la qualitat del programari durant el desenvolupament.
Podeu trobar més detalls a
S'admeten un gran nombre de llenguatges de programació. A jutjar per la informació de l'enllaç anterior, es tracta de més de 25 idiomes. Per donar suport a un idioma específic, heu d'instal·lar el connector adequat. La versió comunitària inclou un connector per treballar Javascript (incloent les escriptures de tipus), encara que la wiki diu el contrari. Darrere Javascript respostes del connector SonarJS, per a mecanografia SonarTS respectivament.
El client oficial s'utilitza per enviar informació de cobertura sonarqube-escàner, que, utilitzant la configuració de config-fitxer, envia aquestes dades al servidor SonarQube per a una posterior consolidació i agregació.
Per Javascript hi . Per tant, comencem la implementació pas a pas SonarQube в Vue-Utilització del projecte Mecanoscrit.
Per desplegar el servidor SonarQube aprofitem docker-compose.
sonar.yaml:
version: '1'
services:
simplesample-sonar:
image: sonarqube:lts
ports:
- 9001:9000
- 9092:9092
network_mode: bridgeLlançament:
docker-compose -f sonar.yml upDesprés d'això SonarQube estarà disponible a: .
Encara no hi ha projectes i això és just. Corregim aquesta situació. Vaig agafar el projecte d'exemple oficial per VueJS+TS+Jest. Inclinem-ho cap a nosaltres mateixos:
git clone https://github.com/vuejs/vue-test-utils-typescript-example.gitPrimer hem d'instal·lar el client SonarQube, que es diu sonar-escànerper npm hi ha un embolcall:
yarn add sonarqube-scannerI immediatament afegiu l'ordre a scripts per treballar-hi.
package.json:
{
…
scripts: {
...
"sonar": "sonar-scanner"
...
},
…
}A continuació, perquè l'escàner funcioni, heu d'establir la configuració del projecte en un fitxer especial. Comencem per les bases.
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 - adreça Sónar'A;
- sonar.projectKey – identificador únic del projecte al servidor Sónar'A;
- sonar.projectName – el seu nom, es pot canviar en qualsevol moment, ja que el projecte s'identifica per projectKey;
- sonar.fonts – carpeta amb fonts, normalment aquesta src, però pot ser qualsevol cosa. Aquesta carpeta s'estableix en relació a la carpeta arrel, que és la carpeta des de la qual s'inicia l'escàner;
- proves de sonar – un paràmetre que va en tàndem amb l'anterior. Aquesta és la carpeta on es troben les proves. En aquest projecte, no hi ha aquesta carpeta i la prova es troba al costat del component en prova a la carpeta "prova', així que de moment l'ignorarem i utilitzarem el paràmetre següent;
- sonar.test.inclusions – camí per a les proves utilitzant una màscara, hi pot haver diversos elements llistats separats per comes;
- sonar.sourceEncoding - codificació dels fitxers font.
Per al primer llançament de l'escàner, tot està a punt, excepte la principal acció anterior: llançar el propi motor de prova, perquè pugui generar informació sobre la cobertura, que l'escàner utilitzarà posteriorment.
Però per fer-ho, cal configurar el motor de prova per generar aquesta informació. En aquest projecte, el motor de prova és Jest. I la seva configuració es troba a la secció corresponent del fitxer paquet.json.
Afegim aquests paràmetres:
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*",
"!src/main.ts",
"!src/App.vue",
"!src/**/*.d.*",
"!src/**/*__tests__*"
],És a dir, establim la pròpia bandera per a la necessitat de calcular la cobertura i la font (juntament amb les excepcions) a partir de la qual es formarà.
Ara fem la prova:
yarn testVeurem el següent:
La raó és que no hi ha codi en el propi component. Arreglem això.
HelloWorld.vue:
...
methods: {
calc(n) {
return n + 1;
}
},
mounted() {
this.msg1 = this.msg + this.calc(1);
},
...Això serà suficient per calcular la cobertura.
Després de reiniciar la prova, ens assegurarem d'això:
A la pantalla hauríem de veure informació sobre la cobertura, i es crearà una carpeta a la carpeta del projecte cobertura amb informació de cobertura de proves en un format universal LCOV (extensió LTP GCOV).
Gcov és una utilitat de distribució gratuïta per examinar la cobertura del codi. Gcov genera el nombre exacte d'execucions per a cada instrucció d'un programa i us permet afegir anotacions al codi font. Gcov ve com una utilitat estàndard com a part del paquet GCC.
Lcov - interfície gràfica per a gcov. Reuneix fitxers gcov per a diversos fitxers font i produeix un conjunt de pàgines HTML amb informació de codi i cobertura. També es generen pàgines per facilitar la navegació. Lcov admet la cobertura de cadenes, funcions i branques.
Un cop finalitzades les proves, es trobarà la informació de cobertura cobertura/lcov.info.
Hem de dir Sónar'On puc aconseguir-ho? Per tant, afegim les següents línies al fitxer de configuració. Però hi ha un punt: els projectes poden ser multilingües, és a dir, a la carpeta src hi ha codis font per a diversos llenguatges de programació i afiliació amb un o un altre, i al seu torn, l'ús d'un o altre plugin ve determinat per la seva extensió. I la informació de cobertura es pot emmagatzemar en diferents llocs per a diferents llenguatges de programació, de manera que cada idioma té la seva pròpia secció per configurar-ho. El nostre projecte utilitza Mecanoscrit, així que necessitem una secció de configuració només per a això:
sonar-project.properties:
sonar.typescript.coveragePlugin=lcov
sonar.typescript.lcov.reportPaths=coverage/lcov.infoTot està preparat per al primer llançament de l'escàner. M'agradaria destacar que el projecte és Sónar'e es crea automàticament la primera vegada que inicieu l'escàner per a un projecte determinat. En temps posteriors s'acumularà informació per tal de veure la dinàmica dels canvis en els paràmetres del projecte al llarg del temps.
Per tant, utilitzem l'ordre creada anteriorment paquet.json:
yarn run sonar Nota: també podeu utilitzar el paràmetre -X per a un registre més detallat.
Si l'escàner es va iniciar per primera vegada, primer es baixarà el binari de l'escàner. Després d'això, s'inicia i comença a escanejar el servidor Sónar'a per als connectors instal·lats, calculant així l'idioma compatible. També es carreguen altres paràmetres per al seu funcionament: perfils de qualitat, regles actives, dipòsit de mètriques, regles de servidor.
Nota: No ens atendrem en detall en el marc d'aquest article, però sempre podeu contactar amb fonts oficials.
A continuació, comença l'anàlisi de la carpeta src per a la disponibilitat de fitxers font per a tots els llenguatges admesos (si no s'especifica un de concret) amb la seva indexació posterior.
A continuació, vénen diverses altres anàlisis, en les quals no ens centrem en aquest article (per exemple, com ara pelusa, detecció de duplicació de codi, etc.).
Al final del treball de l'escàner, tota la informació recollida s'agrega, s'arxiva i s'envia al servidor.
Després d'això, ja podem veure què va passar a la interfície web:
Com podem veure, alguna cosa va funcionar, i fins i tot mostra algun tipus de cobertura, però no coincideix amb la nostra Jest-informe.
Anem a esbrinar-ho. Vegem el projecte amb més detall, feu clic al valor de cobertura i "caure" en un informe de fitxer detallat:
Aquí veiem, a més de l'arxiu principal, examinat HelloWorld.vue, també hi ha un fitxer principal.ts, que fa malbé tota la imatge de la cobertura. Però com és que l'hem exclòs del càlcul de la cobertura? Sí, tot és correcte, però estava al nivell Jest, però l'escàner el va indexar, així que va acabar en els seus càlculs.
Arreglem això:
sonar-project.properties:
...
sonar.exclusions=src/main.ts
...M'agradaria fer un aclariment: a més de les carpetes que s'especifiquen en aquest paràmetre, també s'afegeixen totes les carpetes enumerades en el paràmetre sonar.test.inclusions.
Després d'iniciar l'escàner, veiem la informació correcta:
Mirem el següent punt - Perfils de qualitat. He parlat més amunt del suport SónarHi ha diverses llengües alhora. Això és exactament el que estem veient. Però sabem que el nostre projecte està escrit TS, per què tensar l'escàner amb manipulacions i controls innecessaris. Establirem l'idioma per a l'anàlisi afegint un paràmetre més al fitxer de configuració Sónar'A:
sonar-project.properties:
...
sonar.language=ts
...Tornem a executar l'escàner i veiem el resultat:
La cobertura havia desaparegut completament.
Si mirem el registre de l'escàner, podem veure la línia següent:
És a dir, els nostres fitxers de projecte simplement no estaven indexats.
La situació és la següent: amb suport oficial VueJs està al connector SonarJSde qui és responsable Javascript.
Però aquest suport no està al connector SonarTS per TS, sobre el qual es va obrir un bitllet oficial al rastrejador d'errors Sónar'A:
Aquí teniu algunes respostes d'un dels representants dels desenvolupadors de SonarQube, que confirmen aquest fet.
Però tot ens va funcionar, objectes. Sí, ho és, provem-ho una mica "cop de destral".
Si hi ha suport .vue-Fitxers Sónar’om, llavors intentem dir-li que els consideri com Mecanoscrit.
Afegim un paràmetre:
sonar-project.properties:
...
sonar.typescript.file.suffixes=.ts,.tsx,.vue
...Llencem l'escàner:
I, voilà, tot ha tornat a la normalitat, i amb un sol perfil Mecanoscrit. És a dir, hem aconseguit resoldre el problema en suport VueJs+TS per SonarQube.
Intentem anar més enllà i millorar una mica la informació de cobertura.
Què hem fet fins ara:
- afegit al projecte Sónar-escàner;
- configurar Jest per generar informació de cobertura;
- configurat Sónar-escàner;
- resolt el problema de suport .vue-fitxers + Mecanoscrit.
A més de la cobertura de proves, hi ha altres criteris útils interessants per a la qualitat del codi, per exemple, la duplicació del codi i el nombre de línies (implicades en el càlcul de coeficients relacionats amb la complexitat del codi) del projecte.
En la implementació actual del connector per treballar TS (SonarTS) no funcionarà CPD (Detector de còpia enganxada) i comptant línies de codi .vue-Fitxers.
Per crear una situació sintètica de duplicació de codi, simplement dupliqueu el fitxer de component amb un nom diferent i afegiu-lo també al codi. principal.ts una funció simulada i duplica-la amb un nom diferent. Per comprovar si hi ha duplicacions com en .vue, i a .ts -Fitxers.
principals:
...
function name(params:string): void {
console.log(params);
}
...Per fer-ho, heu de comentar temporalment la línia de configuració:
sonar-project.properties:
...
sonar.exclusions=src/main.ts
...Reiniciem l'escàner juntament amb la prova:
yarn test && yarn run sonarPer descomptat, la nostra cobertura caurà, però ara no ens interessa.
Pel que fa a la duplicació de línies de codi, veurem:
Per comprovar-ho farem servir CPD-utilitat- jscpd:
npx jscpd src
Per a línies de codi:
Potser això es resoldrà en futures versions de connectors SonarJS(TS). M'agradaria assenyalar que a poc a poc estan començant a fusionar aquests dos complements en un SonarJS, que crec que és correcte.
Ara volia considerar l'opció de millorar la informació de cobertura.
Fins ara podem veure la cobertura de proves en termes percentuals per a tot el projecte, i per als fitxers en particular. Però és possible ampliar aquest indicador amb informació sobre la quantitat unitat-proves per al projecte, així com en el context dels fitxers.
Hi ha una biblioteca que pot Jest-convertir l'informe en format per Sónar'A:
dades de prova genèriques - .
Instal·lem aquesta biblioteca al nostre projecte:
yarn add jest-sonar-reporterI afegiu-lo a la configuració Jest:
package.json:
…
"testResultsProcessor": "jest-sonar-reporter"
…Ara fem la prova:
yarn testDesprés es crearà un fitxer a l'arrel del projecte test-report.xml.
Utilitzem-lo a la configuració Sónar'A:
sonar-project.properties:
…
sonar.testExecutionReportPaths=test-report.xml
…I reinicieu l'escàner:
yarn run sonarVegem què ha canviat a la interfície Sónar'A:
I no ha canviat res. El cas és que Sonar no considera els fitxers descrits a l'informe de Jest com a fitxers unitat- proves. Per corregir aquesta situació, utilitzem el paràmetre de configuració Sónar proves de sonar, en què indicarem explícitament les carpetes amb proves (només en tenim una de moment):
sonar-project.properties:
…
sonar.tests=src/components/__tests__
…Reiniciem l'escàner:
yarn run sonarVegem què ha canviat a la interfície:
Ara hem vist el nombre del nostre unitat-proves i, havent fallat fent clic a dins, podem veure la distribució d'aquest número entre els fitxers del projecte:
Conclusió
Per tant, vam mirar una eina per a l'anàlisi contínua SonarQube. Hem integrat amb èxit un projecte escrit en ell VueJs+TS. S'han solucionat alguns problemes de compatibilitat. Hem augmentat el contingut d'informació de l'indicador de cobertura de la prova. En aquest article hem examinat només un dels criteris de qualitat del codi (potser un dels principals), però SonarQube admet altres criteris de qualitat, incloses les proves de seguretat. Però no totes aquestes funcions estan totalment disponibles comunitat- versions. Una de les característiques interessants i útils és la integració SonarQube amb diversos sistemes de gestió de dipòsits de codi, com GitLab i BitBucket. Prevenir fusiona la sol·licitud d'extracció (fusiona).'a a la branca principal del dipòsit quan la cobertura es degrada. Però aquesta és una història per a un article completament diferent.
PS: Tot el que es descriu a l'article en forma de codi està disponible a .
Només els usuaris registrats poden participar en l'enquesta. si us plau.
Utilitzeu la plataforma SonarQube:
-
26,3%Sí 5
-
15,8%No3
-
15,8%He sentit parlar d'aquesta plataforma i vull utilitzar3
-
10,5%He sentit parlar d'aquesta plataforma i no vull utilitzar2
-
0,0%Estic utilitzant una plataforma diferent0
-
31,6%La primera vegada que sento parlar d'ella6
Han votat 19 usuaris. 3 usuaris es van abstenir.
Font: www.habr.com