យើងប្រើប្រាស់វេទិកាយ៉ាងសកម្មក្នុងការងាររបស់យើង។ សូណារុប ដើម្បីរក្សាគុណភាពកូដនៅកម្រិតខ្ពស់។ នៅពេលរួមបញ្ចូលគម្រោងមួយក្នុងចំណោមគម្រោងដែលបានសរសេរនៅក្នុង VueJs+Typescript, បញ្ហាបានកើតឡើង។ ដូច្នេះ ខ្ញុំចង់ប្រាប់អ្នកឱ្យលម្អិតបន្ថែមទៀតពីរបៀបដែលយើងបានដោះស្រាយបញ្ហាទាំងនោះ។
នៅក្នុងអត្ថបទនេះយើងនឹងនិយាយដូចដែលខ្ញុំបានសរសេរខាងលើអំពីវេទិកា 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 គឺ
ដើម្បីដាក់ពង្រាយម៉ាស៊ីនមេ សូណារុប តោះទាញយកប្រយោជន៍ 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
បន្ទាប់ពីនោះ សូណារុប នឹងមាននៅ៖
មិនទាន់មានគម្រោងណាមួយនៅក្នុងវានៅឡើយទេ ហើយវាពិតជាយុត្តិធម៌។ យើងនឹងកែតម្រូវស្ថានភាពនេះ។ ខ្ញុំបានយកគម្រោងគំរូផ្លូវការសម្រាប់ 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
យើងនឹងឃើញដូចខាងក្រោម៖
ហេតុផលគឺថាមិនមានកូដនៅក្នុងសមាសធាតុខ្លួនឯង។ តោះជួសជុលរឿងនេះ។
HelloWorld.vue៖
...
methods: {
calc(n) {
return n + 1;
}
},
mounted() {
this.msg1 = this.msg + this.calc(1);
},
...
នេះនឹងគ្រប់គ្រាន់ដើម្បីគណនាការគ្របដណ្តប់។
បន្ទាប់ពីចាប់ផ្តើមការសាកល្បងឡើងវិញ យើងនឹងធ្វើឱ្យប្រាកដថានេះ៖
នៅលើអេក្រង់ យើងគួរតែឃើញព័ត៌មានអំពីការគ្របដណ្តប់ ហើយថតឯកសារនឹងត្រូវបានបង្កើតនៅក្នុងថតគម្រោង គ្របដណ្តប់ ជាមួយនឹងព័ត៌មានគ្របដណ្តប់សាកល្បងក្នុងទម្រង់ជាសកល 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 សម្រាប់កម្មវិធីជំនួយដែលបានដំឡើង ដោយហេតុនេះគណនាភាសាដែលគាំទ្រ។ ប៉ារ៉ាម៉ែត្រផ្សេងទៀតជាច្រើនសម្រាប់ប្រតិបត្តិការរបស់វាត្រូវបានផ្ទុកផងដែរ: ទម្រង់គុណភាព ច្បាប់សកម្ម ឃ្លាំងម៉ែត្រ ច្បាប់ម៉ាស៊ីនមេ.
ចំណាំ: យើងនឹងមិនរស់នៅលើពួកវាដោយលំអិតក្នុងក្របខ័ណ្ឌនៃអត្ថបទនេះទេ ប៉ុន្តែអ្នកតែងតែអាចទាក់ទងប្រភពផ្លូវការបាន។
បន្ទាប់មកការវិភាគថតចាប់ផ្តើម src សម្រាប់ភាពអាចរកបាននៃឯកសារប្រភពសម្រាប់ទាំងអស់ (ប្រសិនបើមួយជាក់លាក់មិនត្រូវបានបញ្ជាក់ច្បាស់លាស់) ភាសាដែលបានគាំទ្រ ដោយមានការធ្វើលិបិក្រមជាបន្តបន្ទាប់របស់ពួកគេ។
បន្ទាប់មកការវិភាគផ្សេងៗ ដែលយើងមិនផ្តោតលើអត្ថបទនេះ (ឧទាហរណ៍ ដូចជា linting, ការរកឃើញនៃការចម្លងកូដ។ល។)។
នៅចុងបញ្ចប់នៃការងាររបស់ម៉ាស៊ីនស្កេន ព័ត៌មានដែលប្រមូលបានទាំងអស់ត្រូវបានប្រមូលផ្តុំ ទុកក្នុងប័ណ្ណសារ និងផ្ញើទៅកាន់ម៉ាស៊ីនមេ។
បន្ទាប់ពីនេះ យើងអាចឃើញអ្វីដែលបានកើតឡើងនៅក្នុងចំណុចប្រទាក់បណ្ដាញ៖
ដូចដែលយើងអាចមើលឃើញ អ្វីមួយដែលដំណើរការ ហើយថែមទាំងបង្ហាញប្រភេទនៃការគ្របដណ្តប់មួយចំនួន ប៉ុន្តែវាមិនត្រូវគ្នានឹងរបស់យើងទេ។ គឺមាន- របាយការណ៍។
ចូរយើងដោះស្រាយវា។ សូមក្រឡេកមើលគម្រោងឱ្យកាន់តែលម្អិត ចុចលើតម្លៃគ្របដណ្តប់ និង "ឆ្លងកាត់" ទៅក្នុងរបាយការណ៍ឯកសារលម្អិត៖
នៅទីនេះយើងឃើញបន្ថែមលើឯកសារសំខាន់ដែលបានពិនិត្យ HelloWorld.vueមានឯកសារផងដែរ។ main.tsដែលធ្វើឱ្យខូចរូបភាពទាំងមូលនៃការគ្របដណ្តប់។ ប៉ុន្តែតើយើងបានដកវាចេញពីការគណនានៃការរ៉ាប់រងដោយរបៀបណា។ បាទ អ្វីគ្រប់យ៉ាងគឺត្រឹមត្រូវ ប៉ុន្តែវាស្ថិតនៅលើកម្រិត គឺមានប៉ុន្តែម៉ាស៊ីនស្កេនបានធ្វើលិបិក្រមវា ដូច្នេះវាបានបញ្ចប់ក្នុងការគណនារបស់វា។
តោះជួសជុលវា៖
sonar-project.properties:
...
sonar.exclusions=src/main.ts
...
ខ្ញុំចង់ធ្វើការបញ្ជាក់៖ បន្ថែមពីលើថតឯកសារដែលបានបញ្ជាក់ក្នុងប៉ារ៉ាម៉ែត្រនេះ ថតទាំងអស់ដែលបានរាយក្នុងប៉ារ៉ាម៉ែត្រក៏ត្រូវបានបន្ថែមផងដែរ។ sonar.test.inclusions.
បន្ទាប់ពីបើកដំណើរការម៉ាស៊ីនស្កេន យើងឃើញព័ត៌មានត្រឹមត្រូវ៖
សូមក្រឡេកមើលចំណុចបន្ទាប់ - ទម្រង់គុណភាព. ខ្ញុំបាននិយាយខាងលើអំពីការគាំទ្រ សូណា'om ភាសាជាច្រើនក្នុងពេលតែមួយ។ នេះគឺជាអ្វីដែលយើងកំពុងឃើញ។ ប៉ុន្តែយើងដឹងថាគម្រោងរបស់យើងត្រូវបានសរសេរនៅក្នុង TSដូច្នេះ ហេតុអ្វីត្រូវច្របាច់ម៉ាស៊ីនស្កេនជាមួយនឹងឧបាយកល និងការត្រួតពិនិត្យដែលមិនចាំបាច់។ យើងនឹងកំណត់ភាសាសម្រាប់ការវិភាគដោយបន្ថែមប៉ារ៉ាម៉ែត្រមួយទៀតទៅឯកសារកំណត់រចនាសម្ព័ន្ធ សូណា'A:
sonar-project.properties:
...
sonar.language=ts
...
តោះដំណើរការម៉ាស៊ីនស្កេនម្តងទៀតហើយមើលលទ្ធផល៖
ការគ្របដណ្តប់បានបាត់បង់ទាំងស្រុង។
ប្រសិនបើយើងក្រឡេកមើលកំណត់ហេតុស្កែន យើងអាចឃើញបន្ទាត់ខាងក្រោម៖
នោះគឺឯកសារគម្រោងរបស់យើងជាធម្មតាមិនត្រូវបានធ្វើលិបិក្រមទេ។
ស្ថានភាពមានដូចខាងក្រោម៖ គាំទ្រជាផ្លូវការ VueJs គឺនៅក្នុងកម្មវិធីជំនួយ SonarJSអ្នកណាទទួលខុសត្រូវ javascript.
ប៉ុន្តែការគាំទ្រនេះមិនមាននៅក្នុងកម្មវិធីជំនួយទេ។ SonarTS សម្រាប់ TSដែលសំបុត្រផ្លូវការត្រូវបានបើកនៅក្នុងកម្មវិធីតាមដានកំហុស សូណា'A:
នេះគឺជាចម្លើយមួយចំនួនរបស់អ្នកតំណាងម្នាក់មកពីអ្នកអភិវឌ្ឍន៍ SonarQube ដោយបញ្ជាក់ពីការពិតនេះ។
ប៉ុន្តែអ្វីគ្រប់យ៉ាងបានធ្វើការសម្រាប់យើង, អ្នកជំទាស់។ មែនហើយ តោះសាកល្បងបន្តិច "លួច".
ប្រសិនបើមានការគាំទ្រ .vue- ឯកសារ សូណា'អូ៎ អញ្ចឹងតោះយើងព្យាយាមប្រាប់គាត់ឲ្យចាត់ទុកពួកគេថាជា ប្រភេទអក្សរ.
តោះបន្ថែមប៉ារ៉ាម៉ែត្រ៖
sonar-project.properties:
...
sonar.typescript.file.suffixes=.ts,.tsx,.vue
...
តោះបើកដំណើរការម៉ាស៊ីនស្កេន៖
ហើយ 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
ជាការពិតណាស់ ការគ្របដណ្តប់របស់យើងនឹងធ្លាក់ចុះ ប៉ុន្តែឥឡូវនេះយើងមិនចាប់អារម្មណ៍នឹងរឿងនោះទេ។
នៅក្នុងលក្ខខណ្ឌនៃការចម្លងបន្ទាត់នៃកូដយើងនឹងឃើញ:
ដើម្បីពិនិត្យមើលយើងនឹងប្រើ ស៊ី។ ស៊ី។ ឌី- ឧបករណ៍ប្រើប្រាស់ - jscpd:
npx jscpd src
សម្រាប់បន្ទាត់កូដ៖
ប្រហែលជាវានឹងត្រូវបានដោះស្រាយនៅក្នុងកំណែកម្មវិធីជំនួយនាពេលអនាគត SonarJS(TS). ខ្ញុំចង់កត់សម្គាល់ថា ពួកគេកំពុងចាប់ផ្តើមបញ្ចូលកម្មវិធីជំនួយទាំងពីរនេះជាបណ្តើរៗទៅជាមួយ។ SonarJSដែលខ្ញុំគិតថាត្រឹមត្រូវ។
ឥឡូវនេះខ្ញុំចង់ពិចារណាជម្រើសនៃការកែលម្អព័ត៌មានគ្របដណ្តប់។
រហូតមកដល់ពេលនេះ យើងអាចមើលឃើញការគ្របដណ្តប់លើការធ្វើតេស្តជាភាគរយសម្រាប់គម្រោងទាំងមូល និងជាពិសេសសម្រាប់ឯកសារ។ ប៉ុន្តែវាអាចធ្វើទៅបានដើម្បីពង្រីកសូចនាករនេះជាមួយនឹងព័ត៌មានអំពីបរិមាណ អង្គភាព-tests សម្រាប់គម្រោង ក៏ដូចជានៅក្នុងបរិបទនៃឯកសារ។
មានបណ្ណាល័យដែលអាចធ្វើបាន គឺមាន- បំប្លែងរបាយការណ៍ទៅជាទម្រង់សម្រាប់ សូណា'A:
ទិន្នន័យសាកល្បងទូទៅ -
តោះដំឡើងបណ្ណាល័យនេះនៅក្នុងគម្រោងរបស់យើង៖
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:
ហើយគ្មានអ្វីផ្លាស់ប្តូរទេ។ ការពិតគឺថា Sonar មិនចាត់ទុកឯកសារដែលបានពិពណ៌នានៅក្នុងរបាយការណ៍ Jest ជាឯកសារនោះទេ។ អង្គភាព- ការធ្វើតេស្ត។ ដើម្បីកែតម្រូវស្ថានភាពនេះ យើងប្រើប៉ារ៉ាម៉ែត្រកំណត់រចនាសម្ព័ន្ធ សូណា sonar.testsដែលក្នុងនោះយើងនឹងបង្ហាញយ៉ាងច្បាស់នូវថតជាមួយនឹងការធ្វើតេស្ត (យើងមានតែមួយសម្រាប់ពេលនេះ)៖
sonar-project.properties:
…
sonar.tests=src/components/__tests__
…
តោះចាប់ផ្តើមម៉ាស៊ីនស្កេនឡើងវិញ៖
yarn run sonar
តោះមើលអ្វីដែលបានផ្លាស់ប្តូរនៅក្នុងចំណុចប្រទាក់៖
ឥឡូវនេះយើងបានឃើញចំនួនរបស់យើង។ អង្គភាព-tests ហើយដោយបានបរាជ័យដោយការចុចនៅខាងក្នុង យើងអាចមើលឃើញការចែកចាយលេខនេះក្នុងចំណោមឯកសារគម្រោង៖
សេចក្តីសន្និដ្ឋាន
ដូច្នេះ យើងបានពិនិត្យមើលឧបករណ៍សម្រាប់ការវិភាគជាបន្តបន្ទាប់ សូណារុប. យើងបានបញ្ចូលទៅក្នុងវាដោយជោគជ័យនូវគម្រោងដែលបានសរសេរនៅក្នុង 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