🔙 🐵 🙏🏼 VueJS + TS项目与SonarQube集成 🐭 🎞️ 🤽🏽

在我们的工作中，我们积极使用SonarQube平台来维护高质量的代码。集成用VueJs + Typescript编写的项目之一时出现问题。因此，我想更详细地介绍我们如何解决这些问题。

正如我在上面所写，本文将讨论SonarQube平台。一点理论-对于第一次听说它的人有什么意义：

SonarQube（以前的Sonar）是一个开源平台，用于连续分析（英语连续检查）和代码质量测量。
根据编程标准MISRA C，MISRA C ++，MITRE / CWE和CERT安全编码标准的规则，支持代码分析和错误搜索。它还可以从OWASP Top-10和CWE / SANS Top-25编程错误列表中识别错误。
尽管平台使用了各种现成的工具，但SonarQube将结果减少到单个信息面板（仪表板）中，保留了运行历史，从而使您可以看到软件质量在开发过程中总体变化的趋势。

更多信息可以在官方网站上找到

. — 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项目与SonarQube集成

More articles: