Dalam pekerjaan kami, kami secara aktif menggunakan platform SonarQube untuk mempertahankan kode berkualitas tinggi. Ada masalah dalam mengintegrasikan salah satu proyek yang ditulis dalam VueJs + Typescript . Karena itu, saya ingin menceritakan secara lebih rinci tentang bagaimana kami berhasil menyelesaikannya.

Artikel ini akan membahas, seperti yang saya tulis di atas, platform SonarQube. Sedikit teori - apa artinya bagi mereka yang mendengarnya untuk pertama kali:

SonarQube (sebelumnya Sonar ) adalah platform sumber terbuka untuk analisis berkelanjutan (inspeksi berkelanjutan bahasa Inggris) dan pengukuran kualitas kode.
Mendukung analisis kode dan pencarian kesalahan sesuai dengan aturan standar pemrograman MISRA C, MISRA C ++, MITER / CWE dan CERT Secure Coding Standards. Hal ini juga dapat mengenali kesalahan dari daftar kesalahan pemrograman OWASP Top-10 dan CWE / SANS Top-25.
Terlepas dari kenyataan bahwa platform menggunakan berbagai alat yang siap pakai, SonarQube mengurangi hasilnya menjadi panel informasi tunggal (dasbor), menjaga sejarah berjalan dan dengan demikian memungkinkan Anda untuk melihat kecenderungan umum untuk kualitas perangkat lunak berubah selama pengembangan.

Informasi lebih lanjut dapat ditemukan di situs web resmi

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