في عملنا ، نستخدم بنشاط منصة SonarQube للحفاظ على كود عالي الجودة. كانت هناك مشاكل في دمج أحد المشاريع المكتوبة في VueJs + Typescript . لذلك ، أود أن أقول بمزيد من التفصيل كيف تمكنا من حلها.

ستناقش هذه المقالة ، كما كتبت أعلاه ، منصة SonarQube. القليل من النظرية - ما هو كل شيء لأولئك الذين يسمعون عنه لأول مرة:

يعتبر SonarQube (المعروف سابقًا باسم Sonar ) منصة مفتوحة المصدر للتحليل المستمر (الفحص المستمر باللغة الإنجليزية) وقياس جودة الشفرة.
يدعم تحليل الشفرة والبحث عن الأخطاء وفقًا لقواعد معايير البرمجة MISRA C و MISRA C ++ و MITER / CWE و CERT Secure Coding Standards. كما أنه قادر على التعرف على الأخطاء من قوائم 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’:

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