Dans notre travail, nous utilisons activement la plate-forme SonarQube pour maintenir un code de haute qualité. Il y a eu des problèmes d' intégration d'un des projets écrits dans VueJs + Typescript . Par conséquent, je voudrais expliquer plus en détail comment nous avons réussi à les résoudre.

Cet article traitera, comme je l'ai écrit ci-dessus, de la plate-forme SonarQube. Un peu de théorie - de quoi s'agit-il pour ceux qui en entendent parler pour la première fois:

SonarQube (anciennement Sonar ) est une plateforme open source pour l'analyse continue (inspection continue en anglais) et la mesure de la qualité du code.
Prend en charge l'analyse de code et la recherche d'erreurs selon les règles des normes de programmation MISRA C, MISRA C ++, MITRE / CWE et CERT Secure Coding Standards. Il est également capable de reconnaître les erreurs des listes OWASP Top-10 et CWE / SANS Top-25 des erreurs de programmation.
Malgré le fait que la plate-forme utilise divers outils prêts à l'emploi, SonarQube réduit les résultats à un seul panneau d'informations (tableau de bord), conservant un historique des exécutions et vous permettant ainsi de voir la tendance générale de la qualité du logiciel à changer pendant le développement.

Plus d'informations peuvent être trouvées sur le site officiel

. — 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’:

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

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: , .