ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

យើងប្រើប្រាស់វេទិកាយ៉ាងសកម្មក្នុងការងាររបស់យើង។ សូណារុប ដើម្បីរក្សាគុណភាពកូដនៅកម្រិតខ្ពស់។ នៅពេលរួមបញ្ចូលគម្រោងមួយក្នុងចំណោមគម្រោងដែលបានសរសេរនៅក្នុង VueJs+Typescript, បញ្ហាបានកើតឡើង។ ដូច្នេះ ខ្ញុំ​ចង់​ប្រាប់​អ្នក​ឱ្យ​លម្អិត​បន្ថែម​ទៀត​ពី​របៀប​ដែល​យើង​បាន​ដោះស្រាយ​បញ្ហា​ទាំងនោះ។

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

នៅក្នុងអត្ថបទនេះយើងនឹងនិយាយដូចដែលខ្ញុំបានសរសេរខាងលើអំពីវេទិកា SonarQube ។ ទ្រឹស្តីតិចតួច - ជាទូទៅសម្រាប់អ្នកដែលកំពុងឮអំពីវាជាលើកដំបូង:

សូណារុប (អតីត សូណា) គឺជាវេទិកាប្រភពបើកចំហសម្រាប់ការត្រួតពិនិត្យជាបន្តបន្ទាប់ និងការវាស់វែងគុណភាពកូដ។
គាំទ្រការវិភាគកូដ និងការរកឃើញកំហុសដោយយោងទៅតាមច្បាប់នៃ MISRA C, MISRA C++, MITER/CWE និង CERT Secure Coding Standards programming Standards។ វាក៏អាចទទួលស្គាល់កំហុសពី OWASP Top 10 និង CWE/SANS Top 25 បញ្ជីកំហុសក្នុងការសរសេរកម្មវិធីផងដែរ។
ទោះបីជាការពិតដែលថាវេទិកានេះប្រើឧបករណ៍ដែលត្រៀមរួចជាស្រេចជាច្រើនក៏ដោយ SonarQube កាត់បន្ថយលទ្ធផលទៅជាផ្ទាំងគ្រប់គ្រងតែមួយដោយរក្សាប្រវត្តិនៃការដំណើរការហើយដោយហេតុនេះអនុញ្ញាតឱ្យអ្នកមើលឃើញនិន្នាការទូទៅនៃការផ្លាស់ប្តូរគុណភាពកម្មវិធីអំឡុងពេលអភិវឌ្ឍន៍។

ព័ត៌មានលម្អិតបន្ថែមអាចរកបាននៅ គេហទំព័រផ្លូវការ

មួយចំនួនធំនៃភាសាសរសេរកម្មវិធីត្រូវបានគាំទ្រ។ វិនិច្ឆ័យដោយព័ត៌មានពីតំណខាងលើ ទាំងនេះមានច្រើនជាង 25 ភាសា។ ដើម្បីគាំទ្រភាសាជាក់លាក់មួយ អ្នកត្រូវតែដំឡើងកម្មវិធីជំនួយសមរម្យ។ កំណែសហគមន៍រួមបញ្ចូលកម្មវិធីជំនួយសម្រាប់ធ្វើការជាមួយ javascript (រួមទាំងប្រភេទсript) ទោះបីជាវីគីនិយាយផ្ទុយពីនេះក៏ដោយ។ នៅខាងក្រោយ javascript កម្មវិធីជំនួយឆ្លើយតប SonarJSសម្រាប់ Typescript SonarTS រៀងគ្នា។

អតិថិជនផ្លូវការត្រូវបានប្រើដើម្បីផ្ញើព័ត៌មានគ្របដណ្តប់ ម៉ាស៊ីនស្កេន sonarqubeដោយប្រើការកំណត់ពី config-file ផ្ញើទិន្នន័យនេះទៅម៉ាស៊ីនមេ សូណារុប សម្រាប់ការបង្រួបបង្រួម និងការប្រមូលផ្តុំបន្ថែមទៀត។

សម្រាប់ javascript គឺ npm រុំ. ដូច្នេះសូមចាប់ផ្តើមការអនុវត្តជាជំហាន ៗ សូណារុប в មើល- ការប្រើប្រាស់គម្រោង ប្រភេទអក្សរ.

ដើម្បីដាក់ពង្រាយម៉ាស៊ីនមេ សូណារុប តោះទាញយកប្រយោជន៍ docker- តែង.

sonar.yaml:

version: '1'
    services:
        simplesample-sonar:
            image: sonarqube:lts
            ports:
                - 9001:9000
                - 9092:9092
            network_mode: bridge

បើកដំណើរការ៖

docker-compose -f sonar.yml up

បន្ទាប់ពីនោះ សូណារុប នឹងមាននៅ៖ http://localhost:9001 .

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube
មិនទាន់មានគម្រោងណាមួយនៅក្នុងវានៅឡើយទេ ហើយវាពិតជាយុត្តិធម៌។ យើងនឹងកែតម្រូវស្ថានភាពនេះ។ ខ្ញុំបានយកគម្រោងគំរូផ្លូវការសម្រាប់ VueJS+TS+Jest. ចូរ​ពត់​វា​មក​រក​ខ្លួន​យើង​៖

git clone https://github.com/vuejs/vue-test-utils-typescript-example.git

ដំបូងយើងត្រូវដំឡើងម៉ាស៊ីនភ្ញៀវ សូណារុបដែលត្រូវបានគេហៅថា ម៉ាស៊ីនស្កេនសូណាសម្រាប់ ម៉ោងងង មានរុំ៖

yarn add sonarqube-scanner

ហើយភ្លាមៗបន្ថែមពាក្យបញ្ជាទៅ ស្គ្រីប ដើម្បីធ្វើការជាមួយវា។

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.projectKey - ការកំណត់អត្តសញ្ញាណគម្រោងតែមួយគត់នៅលើម៉ាស៊ីនមេ សូណា'ក;
  • sonar.projectName - ឈ្មោះរបស់វា វាអាចត្រូវបានផ្លាស់ប្តូរនៅពេលណាក៏បាន ចាប់តាំងពីគម្រោងត្រូវបានកំណត់អត្តសញ្ញាណដោយ កូនសោគម្រោង;
  • sonar.ប្រភព - ថតឯកសារដែលមានប្រភពជាធម្មតា srcប៉ុន្តែអាចជាអ្វីក៏បាន។ ថតនេះត្រូវបានកំណត់ទាក់ទងទៅនឹងថត root ដែលជាថតដែលម៉ាស៊ីនស្កេនត្រូវបានបើកដំណើរការ។
  • sonar.tests - ប៉ារ៉ាម៉ែត្រ​ដែល​ស្រប​ជាមួយ​នឹង​មួយ​មុន​។ នេះគឺជាថតដែលការធ្វើតេស្តមានទីតាំងនៅ។ នៅក្នុងគម្រោងនេះ មិនមានថតឯកសារបែបនេះទេ ហើយការធ្វើតេស្តមានទីតាំងនៅជាប់នឹងសមាសធាតុដែលកំពុងត្រូវបានសាកល្បងនៅក្នុងថតឯកសារការធ្វើតេស្ត' ដូច្នេះយើងនឹងមិនអើពើវាសម្រាប់ពេលនេះ ហើយប្រើប៉ារ៉ាម៉ែត្របន្ទាប់។
  • sonar.test.inclusions - ផ្លូវសម្រាប់ការធ្វើតេស្តដោយប្រើរបាំង អាចមានធាតុជាច្រើនដែលបានរាយបញ្ជីបំបែកដោយសញ្ញាក្បៀស។
  • sonar.sourceEncoding - ការអ៊ិនកូដសម្រាប់ឯកសារប្រភព។

សម្រាប់ការបើកដំណើរការដំបូងនៃម៉ាស៊ីនស្កេន អ្វីគ្រប់យ៉ាងគឺរួចរាល់ លើកលែងតែសកម្មភាពមុនចម្បង៖ ការបើកដំណើរការម៉ាស៊ីនសាកល្បងដោយខ្លួនឯង ដើម្បីឱ្យវាអាចបង្កើតព័ត៌មានអំពីការគ្របដណ្តប់ ដែលម៉ាស៊ីនស្កេននឹងប្រើប្រាស់ជាបន្តបន្ទាប់។

ប៉ុន្តែដើម្បីធ្វើដូច្នេះ អ្នកត្រូវកំណត់រចនាសម្ព័ន្ធម៉ាស៊ីនសាកល្បងដើម្បីបង្កើតព័ត៌មាននេះ។ នៅក្នុងគម្រោងនេះម៉ាស៊ីនសាកល្បងគឺ គឺមាន. ហើយការកំណត់របស់វាស្ថិតនៅក្នុងផ្នែកដែលត្រូវគ្នានៃឯកសារ កញ្ចប់.

តោះបន្ថែមការកំណត់ទាំងនេះ៖

"collectCoverage": true,
"collectCoverageFrom": [
      "src/**/*",
      "!src/main.ts",
      "!src/App.vue",
      "!src/**/*.d.*",
      "!src/**/*__tests__*"
],

នោះគឺយើងកំណត់ទង់ដោយខ្លួនឯងសម្រាប់តម្រូវការក្នុងការគណនាការគ្របដណ្តប់និងប្រភព (រួមជាមួយនឹងករណីលើកលែង) នៅលើមូលដ្ឋានដែលវានឹងត្រូវបានបង្កើតឡើង។

ឥឡូវតោះដំណើរការតេស្ត៖

yarn test

យើងនឹងឃើញដូចខាងក្រោម៖

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

ហេតុផលគឺថាមិនមានកូដនៅក្នុងសមាសធាតុខ្លួនឯង។ តោះជួសជុលរឿងនេះ។

HelloWorld.vue៖

...
methods: {
    calc(n) {
      return n + 1;
    }
  },
mounted() {
  this.msg1 = this.msg + this.calc(1);
},
...

នេះនឹងគ្រប់គ្រាន់ដើម្បីគណនាការគ្របដណ្តប់។

បន្ទាប់ពីចាប់ផ្តើមការសាកល្បងឡើងវិញ យើងនឹងធ្វើឱ្យប្រាកដថានេះ៖

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

នៅលើអេក្រង់ យើងគួរតែឃើញព័ត៌មានអំពីការគ្របដណ្តប់ ហើយថតឯកសារនឹងត្រូវបានបង្កើតនៅក្នុងថតគម្រោង គ្រប​ដ​ណ្ត​ប់ ជាមួយនឹងព័ត៌មានគ្របដណ្តប់សាកល្បងក្នុងទម្រង់ជាសកល LCOV (ផ្នែកបន្ថែម LTP GCOV).

Gcov គឺជាឧបករណ៍ប្រើប្រាស់ដែលចែកចាយដោយសេរីសម្រាប់ពិនិត្យមើលការគ្របដណ្តប់កូដ។ Gcov បង្កើតចំនួនពិតប្រាកដនៃការប្រតិបត្តិសម្រាប់សេចក្តីថ្លែងការណ៍នីមួយៗនៅក្នុងកម្មវិធី និងអនុញ្ញាតឱ្យអ្នកបន្ថែមចំណារពន្យល់ទៅកាន់កូដប្រភព។ Gcov មកជាឧបករណ៍ប្រើប្រាស់ស្តង់ដារដែលជាផ្នែកមួយនៃកញ្ចប់ GCC ។
Lcov - ចំណុចប្រទាក់ក្រាហ្វិកសម្រាប់ gcov ។ វាប្រមូលផ្តុំឯកសារ gcov សម្រាប់ឯកសារប្រភពជាច្រើន និងបង្កើតសំណុំនៃទំព័រ HTML ដែលមានលេខកូដ និងព័ត៌មានគ្របដណ្តប់។ ទំព័រក៏ត្រូវបានបង្កើតឡើងផងដែរ ដើម្បីធ្វើឱ្យការរុករកកាន់តែងាយស្រួល។ Lcov គាំទ្រការគ្របដណ្តប់នៃខ្សែ មុខងារ និងសាខា។

បន្ទាប់ពីការធ្វើតេស្តត្រូវបានបញ្ចប់ ពត៌មានគ្របដណ្តប់នឹងមានទីតាំងនៅ coverage/lcov.info.
យើងត្រូវនិយាយ សូណា'តើខ្ញុំអាចយកវាពីណា? ដូច្នេះ ចូរយើងបន្ថែមបន្ទាត់ខាងក្រោមទៅឯកសារកំណត់រចនាសម្ព័ន្ធរបស់វា។ ប៉ុន្តែមានចំណុចមួយ៖ គម្រោងអាចនិយាយបានច្រើនភាសា ពោលគឺនៅក្នុងថតឯកសារ src មានកូដប្រភពសម្រាប់ភាសាសរសេរកម្មវិធីជាច្រើន និងការជាប់ទាក់ទងជាមួយមួយ ឬមួយផ្សេងទៀត ហើយនៅក្នុងវេន ការប្រើប្រាស់កម្មវិធីជំនួយមួយ ឬមួយផ្សេងទៀតត្រូវបានកំណត់ដោយផ្នែកបន្ថែមរបស់វា។ ហើយព័ត៌មានគ្របដណ្តប់អាចត្រូវបានរក្សាទុកនៅកន្លែងផ្សេងៗគ្នាសម្រាប់ភាសាសរសេរកម្មវិធីផ្សេងៗគ្នា ដូច្នេះភាសានីមួយៗមានផ្នែកផ្ទាល់ខ្លួនសម្រាប់រៀបចំវា។ គម្រោងរបស់យើងប្រើ ប្រភេទអក្សរដូច្នេះយើងត្រូវការផ្នែកការកំណត់សម្រាប់វា៖

sonar-project.properties:

sonar.typescript.coveragePlugin=lcov
sonar.typescript.lcov.reportPaths=coverage/lcov.info

អ្វីគ្រប់យ៉ាងគឺត្រៀមខ្លួនជាស្រេចសម្រាប់ការបើកដំណើរការដំបូងនៃម៉ាស៊ីនស្កេន។ ខ្ញុំចង់កត់សម្គាល់ថាគម្រោងនេះគឺ សូណា'e ត្រូវបានបង្កើតដោយស្វ័យប្រវត្តិជាលើកដំបូងដែលអ្នកដំណើរការម៉ាស៊ីនស្កេនសម្រាប់គម្រោងដែលបានផ្តល់ឱ្យ។ នៅ​ពេល​បន្តបន្ទាប់ ព័ត៌មាន​នឹង​ត្រូវ​បាន​បង្គរ​ដើម្បី​មើល​ឃើញ​ថាមវន្ត​នៃ​ការ​ផ្លាស់​ប្តូរ​ប៉ារ៉ាម៉ែត្រ​គម្រោង​តាម​ពេលវេលា។

ដូច្នេះ ចូរយើងប្រើពាក្យបញ្ជាដែលបានបង្កើតពីមុនមក កញ្ចប់:

yarn run sonar 

ចំណាំ: អ្នកក៏អាចប្រើប៉ារ៉ាម៉ែត្រផងដែរ។ -X សម្រាប់ការកត់ត្រាលម្អិតបន្ថែម។

ប្រសិនបើម៉ាស៊ីនស្កេនត្រូវបានដាក់ឱ្យដំណើរការជាលើកដំបូងនោះប្រព័ន្ធគោលពីរនៃម៉ាស៊ីនស្កេនខ្លួនឯងនឹងត្រូវបានទាញយកជាមុនសិន។ បន្ទាប់ពីនោះវាចាប់ផ្តើមហើយចាប់ផ្តើមស្កេនម៉ាស៊ីនមេ សូណា'a សម្រាប់កម្មវិធីជំនួយដែលបានដំឡើង ដោយហេតុនេះគណនាភាសាដែលគាំទ្រ។ ប៉ារ៉ាម៉ែត្រផ្សេងទៀតជាច្រើនសម្រាប់ប្រតិបត្តិការរបស់វាត្រូវបានផ្ទុកផងដែរ: ទម្រង់គុណភាព ច្បាប់សកម្ម ឃ្លាំងម៉ែត្រ ច្បាប់ម៉ាស៊ីនមេ.

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

ចំណាំ: យើងនឹងមិនរស់នៅលើពួកវាដោយលំអិតក្នុងក្របខ័ណ្ឌនៃអត្ថបទនេះទេ ប៉ុន្តែអ្នកតែងតែអាចទាក់ទងប្រភពផ្លូវការបាន។

បន្ទាប់មកការវិភាគថតចាប់ផ្តើម src សម្រាប់​ភាព​អាច​រក​បាន​នៃ​ឯកសារ​ប្រភព​សម្រាប់​ទាំង​អស់ (ប្រសិន​បើ​មួយ​ជាក់លាក់​មិន​ត្រូវ​បាន​បញ្ជាក់​ច្បាស់​លាស់) ភាសា​ដែល​បាន​គាំទ្រ ដោយ​មាន​ការ​ធ្វើ​លិបិក្រម​ជា​បន្តបន្ទាប់​របស់​ពួកគេ។

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

បន្ទាប់មកការវិភាគផ្សេងៗ ដែលយើងមិនផ្តោតលើអត្ថបទនេះ (ឧទាហរណ៍ ដូចជា linting, ការរកឃើញនៃការចម្លងកូដ។ល។)។

នៅចុងបញ្ចប់នៃការងាររបស់ម៉ាស៊ីនស្កេន ព័ត៌មានដែលប្រមូលបានទាំងអស់ត្រូវបានប្រមូលផ្តុំ ទុកក្នុងប័ណ្ណសារ និងផ្ញើទៅកាន់ម៉ាស៊ីនមេ។

បន្ទាប់​ពី​នេះ យើង​អាច​ឃើញ​អ្វី​ដែល​បាន​កើត​ឡើង​នៅ​ក្នុង​ចំណុច​ប្រទាក់​បណ្ដាញ៖

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

ដូចដែលយើងអាចមើលឃើញ អ្វីមួយដែលដំណើរការ ហើយថែមទាំងបង្ហាញប្រភេទនៃការគ្របដណ្តប់មួយចំនួន ប៉ុន្តែវាមិនត្រូវគ្នានឹងរបស់យើងទេ។ គឺមាន- របាយការណ៍។

ចូរយើងដោះស្រាយវា។ សូមក្រឡេកមើលគម្រោងឱ្យកាន់តែលម្អិត ចុចលើតម្លៃគ្របដណ្តប់ និង "ឆ្លងកាត់" ទៅក្នុងរបាយការណ៍ឯកសារលម្អិត៖

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

នៅទីនេះយើងឃើញបន្ថែមលើឯកសារសំខាន់ដែលបានពិនិត្យ HelloWorld.vueមានឯកសារផងដែរ។ main.tsដែលធ្វើឱ្យខូចរូបភាពទាំងមូលនៃការគ្របដណ្តប់។ ប៉ុន្តែ​តើ​យើង​បាន​ដក​វា​ចេញ​ពី​ការ​គណនា​នៃ​ការ​រ៉ាប់រង​ដោយ​របៀប​ណា។ បាទ អ្វីគ្រប់យ៉ាងគឺត្រឹមត្រូវ ប៉ុន្តែវាស្ថិតនៅលើកម្រិត គឺមានប៉ុន្តែម៉ាស៊ីនស្កេនបានធ្វើលិបិក្រមវា ដូច្នេះវាបានបញ្ចប់ក្នុងការគណនារបស់វា។

តោះជួសជុលវា៖

sonar-project.properties:

...
sonar.exclusions=src/main.ts
...

ខ្ញុំចង់ធ្វើការបញ្ជាក់៖ បន្ថែមពីលើថតឯកសារដែលបានបញ្ជាក់ក្នុងប៉ារ៉ាម៉ែត្រនេះ ថតទាំងអស់ដែលបានរាយក្នុងប៉ារ៉ាម៉ែត្រក៏ត្រូវបានបន្ថែមផងដែរ។ sonar.test.inclusions.

បន្ទាប់ពីបើកដំណើរការម៉ាស៊ីនស្កេន យើងឃើញព័ត៌មានត្រឹមត្រូវ៖

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

សូមក្រឡេកមើលចំណុចបន្ទាប់ - ទម្រង់គុណភាព. ខ្ញុំបាននិយាយខាងលើអំពីការគាំទ្រ សូណា'om ភាសាជាច្រើនក្នុងពេលតែមួយ។ នេះគឺជាអ្វីដែលយើងកំពុងឃើញ។ ប៉ុន្តែយើងដឹងថាគម្រោងរបស់យើងត្រូវបានសរសេរនៅក្នុង TSដូច្នេះ ហេតុអ្វីត្រូវច្របាច់ម៉ាស៊ីនស្កេនជាមួយនឹងឧបាយកល និងការត្រួតពិនិត្យដែលមិនចាំបាច់។ យើងនឹងកំណត់ភាសាសម្រាប់ការវិភាគដោយបន្ថែមប៉ារ៉ាម៉ែត្រមួយទៀតទៅឯកសារកំណត់រចនាសម្ព័ន្ធ សូណា'A:

sonar-project.properties:

...
sonar.language=ts
...

តោះដំណើរការម៉ាស៊ីនស្កេនម្តងទៀតហើយមើលលទ្ធផល៖

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

ការគ្របដណ្តប់បានបាត់បង់ទាំងស្រុង។

ប្រសិនបើយើងក្រឡេកមើលកំណត់ហេតុស្កែន យើងអាចឃើញបន្ទាត់ខាងក្រោម៖

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

នោះគឺឯកសារគម្រោងរបស់យើងជាធម្មតាមិនត្រូវបានធ្វើលិបិក្រមទេ។

ស្ថានភាពមានដូចខាងក្រោម៖ គាំទ្រជាផ្លូវការ VueJs គឺនៅក្នុងកម្មវិធីជំនួយ SonarJSអ្នកណាទទួលខុសត្រូវ javascript.

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

ប៉ុន្តែការគាំទ្រនេះមិនមាននៅក្នុងកម្មវិធីជំនួយទេ។ SonarTS សម្រាប់ TSដែលសំបុត្រផ្លូវការត្រូវបានបើកនៅក្នុងកម្មវិធីតាមដានកំហុស សូណា'A:

  1. https://jira.sonarsource.com/browse/MMF-1441
  2. https://github.com/SonarSource/SonarJS/issues/1281

នេះគឺជាចម្លើយមួយចំនួនរបស់អ្នកតំណាងម្នាក់មកពីអ្នកអភិវឌ្ឍន៍ SonarQube ដោយបញ្ជាក់ពីការពិតនេះ។

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

ប៉ុន្តែ​អ្វី​គ្រប់​យ៉ាង​បាន​ធ្វើ​ការ​សម្រាប់​យើង, អ្នក​ជំទាស់។ មែនហើយ តោះសាកល្បងបន្តិច "លួច".
ប្រសិនបើមានការគាំទ្រ .vue- ឯកសារ សូណា'អូ៎ អញ្ចឹងតោះ​យើង​ព្យាយាម​ប្រាប់​គាត់​ឲ្យ​ចាត់​ទុក​ពួកគេ​ថា​ជា ប្រភេទអក្សរ.

តោះបន្ថែមប៉ារ៉ាម៉ែត្រ៖

sonar-project.properties:

...
sonar.typescript.file.suffixes=.ts,.tsx,.vue
...

តោះបើកដំណើរការម៉ាស៊ីនស្កេន៖

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

ហើយ voila អ្វីគ្រប់យ៉ាងគឺត្រលប់ទៅធម្មតាវិញហើយជាមួយនឹងទម្រង់មួយសម្រាប់តែ ប្រភេទអក្សរ. នោះគឺយើងបានដោះស្រាយបញ្ហាក្នុងការគាំទ្រ VueJs+TS សម្រាប់ សូណារុប.

សូមព្យាយាមបន្ត និងកែលម្អព័ត៌មាននៃការគ្របដណ្តប់បន្តិច។

អ្វីដែលយើងបានធ្វើកន្លងមក៖

  • បានបន្ថែមទៅគម្រោង សូណា- ម៉ាស៊ីនស្កេន;
  • រៀបចំ គឺមាន បង្កើតព័ត៌មានគ្របដណ្តប់;
  • បានកំណត់រចនាសម្ព័ន្ធ សូណា- ម៉ាស៊ីនស្កេន;
  • បានដោះស្រាយបញ្ហាការគាំទ្រ .vue- ឯកសារ + ប្រភេទអក្សរ.

បន្ថែមពីលើការគ្របដណ្តប់លើការសាកល្បង មានលក្ខណៈវិនិច្ឆ័យមានប្រយោជន៍គួរឱ្យចាប់អារម្មណ៍ផ្សេងទៀតសម្រាប់គុណភាពកូដ ឧទាហរណ៍ ការចម្លងកូដ និងចំនួនបន្ទាត់ (ពាក់ព័ន្ធនឹងការគណនាមេគុណដែលទាក់ទងនឹងភាពស្មុគស្មាញនៃកូដ) នៃគម្រោង។

នៅក្នុងការអនុវត្តបច្ចុប្បន្ននៃកម្មវិធីជំនួយសម្រាប់ធ្វើការជាមួយ TS (SonarTS) នឹងមិនដំណើរការទេ។ CPD (ឧបករណ៍ចាប់ចម្លងបិទភ្ជាប់) និងរាប់បន្ទាត់នៃកូដ .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

ជាការពិតណាស់ ការគ្របដណ្តប់របស់យើងនឹងធ្លាក់ចុះ ប៉ុន្តែឥឡូវនេះយើងមិនចាប់អារម្មណ៍នឹងរឿងនោះទេ។

នៅក្នុងលក្ខខណ្ឌនៃការចម្លងបន្ទាត់នៃកូដយើងនឹងឃើញ:

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

ដើម្បីពិនិត្យមើលយើងនឹងប្រើ ស៊ី។ ស៊ី។ ឌី- ឧបករណ៍ប្រើប្រាស់ - jscpd:

npx jscpd src

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

សម្រាប់បន្ទាត់កូដ៖

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

ប្រហែលជាវានឹងត្រូវបានដោះស្រាយនៅក្នុងកំណែកម្មវិធីជំនួយនាពេលអនាគត SonarJS(TS). ខ្ញុំ​ចង់​កត់​សម្គាល់​ថា ពួក​គេ​កំពុង​ចាប់​ផ្តើម​បញ្ចូល​កម្មវិធី​ជំនួយ​ទាំង​ពីរ​នេះ​ជា​បណ្តើរៗ​ទៅ​ជា​មួយ។ SonarJSដែលខ្ញុំគិតថាត្រឹមត្រូវ។

ឥឡូវនេះខ្ញុំចង់ពិចារណាជម្រើសនៃការកែលម្អព័ត៌មានគ្របដណ្តប់។

រហូតមកដល់ពេលនេះ យើងអាចមើលឃើញការគ្របដណ្តប់លើការធ្វើតេស្តជាភាគរយសម្រាប់គម្រោងទាំងមូល និងជាពិសេសសម្រាប់ឯកសារ។ ប៉ុន្តែវាអាចធ្វើទៅបានដើម្បីពង្រីកសូចនាករនេះជាមួយនឹងព័ត៌មានអំពីបរិមាណ អង្គភាព-tests សម្រាប់គម្រោង ក៏ដូចជានៅក្នុងបរិបទនៃឯកសារ។

មានបណ្ណាល័យដែលអាចធ្វើបាន គឺមាន- បំប្លែងរបាយការណ៍ទៅជាទម្រង់សម្រាប់ សូណា'A:
ទិន្នន័យសាកល្បងទូទៅ - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

តោះដំឡើងបណ្ណាល័យនេះនៅក្នុងគម្រោងរបស់យើង៖

yarn add jest-sonar-reporter

ហើយបន្ថែមវាទៅការកំណត់ គឺមាន:

package.json៖

…
"testResultsProcessor": "jest-sonar-reporter"
…

ឥឡូវតោះដំណើរការតេស្ត៖

yarn test

បន្ទាប់ពីនោះឯកសារមួយនឹងត្រូវបានបង្កើតនៅក្នុងឫសនៃគម្រោង test-report.xml.

តោះប្រើវាក្នុងការកំណត់ សូណា'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

ហើយចាប់ផ្តើមម៉ាស៊ីនស្កេនឡើងវិញ៖

yarn run sonar

តោះមើលអ្វីដែលបានផ្លាស់ប្តូរនៅក្នុងចំណុចប្រទាក់ សូណា'A:

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

ហើយគ្មានអ្វីផ្លាស់ប្តូរទេ។ ការពិតគឺថា Sonar មិនចាត់ទុកឯកសារដែលបានពិពណ៌នានៅក្នុងរបាយការណ៍ Jest ជាឯកសារនោះទេ។ អង្គភាព- ការធ្វើតេស្ត។ ដើម្បីកែតម្រូវស្ថានភាពនេះ យើងប្រើប៉ារ៉ាម៉ែត្រកំណត់រចនាសម្ព័ន្ធ សូណា sonar.testsដែលក្នុងនោះយើងនឹងបង្ហាញយ៉ាងច្បាស់នូវថតជាមួយនឹងការធ្វើតេស្ត (យើងមានតែមួយសម្រាប់ពេលនេះ)៖

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

តោះចាប់ផ្តើមម៉ាស៊ីនស្កេនឡើងវិញ៖

yarn run sonar

តោះមើលអ្វីដែលបានផ្លាស់ប្តូរនៅក្នុងចំណុចប្រទាក់៖

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

ឥឡូវនេះយើងបានឃើញចំនួនរបស់យើង។ អង្គភាព-tests ហើយដោយបានបរាជ័យដោយការចុចនៅខាងក្នុង យើងអាចមើលឃើញការចែកចាយលេខនេះក្នុងចំណោមឯកសារគម្រោង៖

ការរួមបញ្ចូលគម្រោង VueJS+TS ជាមួយ SonarQube

សេចក្តីសន្និដ្ឋាន

ដូច្នេះ យើងបានពិនិត្យមើលឧបករណ៍សម្រាប់ការវិភាគជាបន្តបន្ទាប់ សូណារុប. យើង​បាន​បញ្ចូល​ទៅ​ក្នុង​វា​ដោយ​ជោគជ័យ​នូវ​គម្រោង​ដែល​បាន​សរសេរ​នៅ​ក្នុង VueJs+TS. ដោះស្រាយបញ្ហាភាពឆបគ្នាមួយចំនួន។ យើងបានបង្កើនមាតិកាព័ត៌មាននៃសូចនាករគ្របដណ្តប់លើការធ្វើតេស្ត។ នៅក្នុងអត្ថបទនេះ យើងបានពិនិត្យតែលក្ខណៈវិនិច្ឆ័យគុណភាពកូដមួយប៉ុណ្ណោះ (ប្រហែលជាមួយសំខាន់) ប៉ុន្តែ សូណារុប គាំទ្រលក្ខណៈវិនិច្ឆ័យគុណភាពផ្សេងទៀត រួមទាំងការធ្វើតេស្តសុវត្ថិភាព។ ប៉ុន្តែ​មិនមែន​លក្ខណៈ​ពិសេស​ទាំង​អស់​នេះ​អាច​ប្រើ​បាន​ពេញលេញ​នៅ​ក្នុង​ទេ។ សហគមន៍- កំណែ។ លក្ខណៈពិសេសគួរឱ្យចាប់អារម្មណ៍ និងមានប្រយោជន៍មួយគឺការរួមបញ្ចូល សូណារុប ជាមួយនឹងប្រព័ន្ធគ្រប់គ្រងឃ្លាំងកូដផ្សេងៗដូចជា GitLab និង BitBucket ។ ដើម្បី​ការពារ ការរួមបញ្ចូលគ្នាទាញ (បញ្ចូលគ្នា) សំណើ'a ទៅសាខាសំខាន់នៃឃ្លាំង នៅពេលដែលការគ្របដណ្តប់ត្រូវបានបន្ទាបបន្ថោក។ ប៉ុន្តែនេះគឺជារឿងសម្រាប់អត្ថបទខុសគ្នាទាំងស្រុង។

PS: អ្វីគ្រប់យ៉ាងដែលបានពិពណ៌នានៅក្នុងអត្ថបទនៅក្នុងទម្រង់នៃកូដគឺអាចរកបាននៅក្នុង សមរបស់ខ្ញុំ.

មានតែអ្នកប្រើប្រាស់ដែលបានចុះឈ្មោះប៉ុណ្ណោះដែលអាចចូលរួមក្នុងការស្ទង់មតិនេះ។ ចូលសូម។

តើអ្នកប្រើវេទិកា SonarQube៖

  • 26,3%បាទ 5

  • 15,8%លេខ 3

  • 15,8%ខ្ញុំបានលឺអំពីវេទិកានេះ ហើយចង់ប្រើ3

  • 10,5%ខ្ញុំបានលឺអំពីវេទិកានេះហើយមិនចង់ប្រើ2

  • 0,0%ខ្ញុំកំពុងប្រើវេទិកាផ្សេងគ្នា 0

  • 31,6%លើកទីមួយដែលខ្ញុំបានលឺអំពីនាង ៦

អ្នកប្រើប្រាស់ 19 នាក់បានបោះឆ្នោត។ អ្នកប្រើប្រាស់ ៦៣ នាក់ត្រូវបានហាមឃាត់។

ប្រភព: www.habr.com

បន្ថែមមតិយោបល់