अपने काम में, हम उच्च गुणवत्ता वाले कोड को बनाए रखने के लिए सोनारक्यूब मंच का सक्रिय रूप से उपयोग करते हैं । VueJs + टाइपस्क्रिप्ट में लिखी गई परियोजनाओं में से एक को एकीकृत करने में समस्याएं थीं । इसलिए, मैं और अधिक विस्तार से बताना चाहूंगा कि हम उन्हें कैसे हल करने में कामयाब रहे।

यह लेख चर्चा करेगा, जैसा कि मैंने ऊपर लिखा है, सोनारक्यूब मंच। थोड़ा सा सिद्धांत - यह उन लोगों के लिए क्या है जो पहली बार इसके बारे में सुनते हैं:

सोनारक्यूब (पूर्व में सोनार ) निरंतर विश्लेषण (अंग्रेजी निरंतर निरीक्षण) और कोड गुणवत्ता के मापन के लिए एक खुला स्रोत मंच है।
प्रोग्रामिंग मानकों MISRA C, MISRA C ++, MITER / CWE और CERT सुरक्षित कोडिंग मानकों के नियमों के अनुसार खोज करने में कोड विश्लेषण और त्रुटि का समर्थन करता है। यह OWASP टॉप -10 और CWE / SANS टॉप -25 की प्रोग्रामिंग त्रुटियों की त्रुटियों को पहचानने में भी सक्षम है।
इस तथ्य के बावजूद कि प्लेटफ़ॉर्म विभिन्न तैयार उपकरणों का उपयोग करता है, सोनारक्यूब परिणामों को एक सूचना पैनल (डैशबोर्ड) तक ले जाता है, जो रनों का इतिहास रखता है और इस तरह आपको विकास के दौरान सॉफ्टवेयर गुणवत्ता परिवर्तनों के सामान्य रुझान को देखने की अनुमति देता है।

अधिक जानकारी आधिकारिक वेबसाइट पर देखी जा सकती है

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