🈸 👷🏼 ☺️ Integração do projeto VueJS + TS com o SonarQube 🖖🏽 👨🏾‍🤝‍👨🏽 💆🏽

Em nosso trabalho, usamos ativamente a plataforma SonarQube para manter um código de alta qualidade. Houve problemas ao integrar um dos projetos escritos em VueJs + Typescript . Portanto, eu gostaria de contar com mais detalhes sobre como conseguimos resolvê-los.

Este artigo discutirá, como escrevi acima, a plataforma SonarQube. Um pouco de teoria - o que é isso para quem ouve pela primeira vez:

O SonarQube (anteriormente Sonar ) é uma plataforma de código aberto para análise contínua (inspeção contínua em inglês) e medição da qualidade do código.
Oferece suporte à análise de código e detecção de erros de acordo com as regras dos padrões de programação MISRA C, MISRA C ++, MITRE / CWE e CERT Secure Coding Standards. Também é capaz de reconhecer erros das listas de erros de programação OWASP Top-10 e CWE / SANS Top-25.
Apesar do fato de a plataforma usar várias ferramentas prontas, o SonarQube reduz os resultados a um único painel de informações (painel), mantendo um histórico de execuções e, assim, permitindo que você veja a tendência geral da qualidade do software mudar durante o desenvolvimento.

Mais informações podem ser encontradas no site oficial

. — 25 . . community- Javascript ( typesript), wiki . Javascript SonarJS, Typescript SonarTS .

sonarqube-scanner, , config-, SonarQube .

Javascript npm-. , SonarQube Vue-, Typescript.

SonarQube docker-compose.

sonar.yaml:

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

docker-compose -f sonar.yml up

SonarQube – http://localhost:9001 .

. . - VueJS+TS+Jest. :

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

SonarQube, sonar-scanner, npm :

yarn add sonarqube-scanner

scripts .

package.json:

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

, , . .

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 – Sonar’;
sonar.projectKey – Sonar’;
sonar.projectName – , , projectKey;
sonar.sources – , src, . , ;
sonar.tests – , . , . , , 'test', ;
sonar.test.inclusions – , ;
sonar.sourceEncoding – .

, : , , .

. — Jest. package.json.

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

( ), .

yarn test

, , , . .

HelloWorld.vue:

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

, coverage LCOV (LTP GCOV extension).

Gcov — . Gcov . Gcov GCC.
Lcov — gcov. gcov HTML . . Lcov , , .

coverage/lcov.info.
Sonar’ . . : , src , , . , . Typescript, :

sonar-project.properties:

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

. , Sonar’ . , .

, , package.json:

yarn run sonar

: -X .

, . Sonar’ , . : quality profiles, active rules, metrics repository, server rules.

: , .

src ( - ) , .

, (, : , ).

, .

, - , - , Jest-.

. , , "" :

, HelloWorld.vue, main.ts, . , . , , Jest, , .

sonar-project.properties:

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

: , , , sonar.test.inclusions.

– Quality profiles. Sonar’ . . , TS, . Sonar’:

sonar-project.properties:

...
sonar.language=ts
...

, :

: VueJs SonarJS, Javascript.

SonarTS TS, - Sonar’:

SonarQube, .

, . , , “”.
.vue- Sonar’, Typescript.

sonar-project.properties:

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

, , , Typescript. VueJs+TS SonarQube.

Sonar-;
Jest ;
Sonar-;
.vue- + Typescript.

, , ( , ) .

TS (SonarTS) CPD (Copy Paste Detector) .vue-.

, , main.ts - . .vue, .ts -.

main.ts:

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

sonar-project.properties:

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

yarn test && yarn run sonar

, .

CPD- – jscpd:

npx jscpd src

, SonarJS(TS). , SonarJS, , , .

, , . unit- , .

, Jest- Sonar’:
generic test data — https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

yarn add jest-sonar-reporter

Jest:

package.json:

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

yarn test

test-report.xml.

Sonar’:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

yarn run sonar

, Sonar’:

. , Sonar , Jest-, unit-. , Sonar sonar.tests, ( ):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

yarn run sonar

, :

unit- , , :

, SonarQube. , VueJs+TS. . . (, ), SonarQube , . community-. — SonarQube , , GitLab BitBucket. merge pull(merge) request’ . .

PS: , .

Integração do projeto VueJS + TS com o SonarQube

More articles: