In our work, we actively use the SonarQube platform to maintain high quality code. There were problems integrating one of the projects written in VueJs + Typescript . Therefore, I would like to tell in more detail about how we managed to solve them.

This article will discuss, as I wrote above, the SonarQube platform. A bit of theory - what is it all about for those who hear about it for the first time:

SonarQube (formerly Sonar ) is an open source platform for continuous analysis (English continuous inspection) and measurement of code quality.
Supports code analysis and error searching according to the rules of the programming standards MISRA C, MISRA C ++, MITRE / CWE and CERT Secure Coding Standards. It is also able to recognize errors from the OWASP Top-10 and CWE / SANS Top-25 lists of programming errors.
Despite the fact that the platform uses various ready-made tools, SonarQube reduces the results to a single information panel (dashboard), keeping a history of runs and thereby allowing you to see the general tendency for software quality to change during development.

More information can be found on the official 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’:

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