👩🏽‍🏫 🎂 🛵 VueJS + TS Projektintegration mit SonarQube 🤞 ❇️ 👸🏻

In unserer Arbeit nutzen wir aktiv die SonarQube- Plattform , um qualitativ hochwertigen Code zu erhalten. Es gab Probleme bei der Integration eines der in VueJs + Typescript geschriebenen Projekte . Daher möchte ich ausführlicher erläutern, wie wir es geschafft haben, sie zu lösen.

In diesem Artikel wird, wie oben beschrieben, die SonarQube-Plattform erläutert. Ein bisschen Theorie - worum geht es für diejenigen, die zum ersten Mal davon hören:

SonarQube (ehemals Sonar ) ist eine Open-Source-Plattform für die kontinuierliche Analyse (englische kontinuierliche Inspektion) und Messung der Codequalität.
Unterstützt die Codeanalyse und Fehlersuche gemäß den Regeln der Programmierstandards MISRA C, MISRA C ++, MITRE / CWE und CERT Secure Coding Standards. Es ist auch in der Lage, Fehler aus den OWASP Top-10- und CWE / SANS Top-25-Listen von Programmierfehlern zu erkennen.
Trotz der Tatsache, dass die Plattform verschiedene vorgefertigte Tools verwendet, reduziert SonarQube die Ergebnisse auf ein einziges Informationsfeld (Dashboard), wodurch ein Verlauf der Läufe gespeichert wird und Sie die allgemeine Tendenz erkennen können, dass sich die Softwarequalität während der Entwicklung ändert.

Weitere Informationen finden Sie auf der offiziellen Website

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

VueJS + TS Projektintegration mit SonarQube

More articles: