ကျွန်ုပ်တို့၏လုပ်ငန်းတွင် ပလပ်ဖောင်းကို တက်ကြွစွာအသုံးပြုပါသည်။ SonarQube ကုဒ်အရည်အသွေးကို မြင့်မားသောအဆင့်တွင် ထိန်းသိမ်းရန်။ ရေးထားတဲ့ ပရောဂျက်တွေထဲက တစ်ခုကို ပေါင်းစည်းလိုက်တာ VueJs+ စာစီစာရိုက်၊ ပြဿနာတွေ ပေါ်လာတယ်။ ထို့ကြောင့် ၎င်းတို့ကို မည်သို့ဖြေရှင်းရမည်ကို အသေးစိတ်ပြောပြလိုပါသည်။

ဤဆောင်းပါးတွင်ကျွန်ုပ်တို့အထက်တွင်ရေးခဲ့သည့်အတိုင်း SonarQube ပလပ်ဖောင်းအကြောင်းပြောပါမည်။ သီအိုရီအနည်းငယ် - ယေဘုယျအားဖြင့် ၎င်းအကြောင်းကို ပထမဆုံးအကြိမ် ကြားသိသူများအတွက်၊

SonarQube (ဟောင်း Sonar) သည် စဉ်ဆက်မပြတ်စစ်ဆေးခြင်းနှင့် ကုဒ်အရည်အသွေးတိုင်းတာခြင်းအတွက် open source platform တစ်ခုဖြစ်သည်။
MISRA C၊ MISRA C++၊ MITER/CWE နှင့် CERT Secure Coding Standards ပရိုဂရမ်းမင်းစံချိန်စံညွှန်းများနှင့်အညီ ကုဒ်ခွဲခြမ်းစိတ်ဖြာခြင်းနှင့် အမှားအယွင်းရှာဖွေခြင်းတို့ကို ပံ့ပိုးပေးပါသည်။ ၎င်းသည် OWASP ထိပ်တန်း 10 နှင့် CWE/SANS ထိပ်တန်း ပရိုဂရမ်းမင်းအမှား 25 ခုစာရင်းမှ အမှားများကို အသိအမှတ်ပြုနိုင်သည်။
ပလပ်ဖောင်းသည် အဆင်သင့်လုပ်ထားသော ကိရိယာမျိုးစုံကို အသုံးပြုထားသော်လည်း SonarQube သည် ရလဒ်များကို ဒက်ရှ်ဘုတ်တစ်ခုတည်းသို့ လျှော့ချပေးကာ လည်ပတ်မှုမှတ်တမ်းကို ထိန်းသိမ်းကာ ဖွံ့ဖြိုးတိုးတက်မှုကာလအတွင်း ဆော့ဖ်ဝဲအရည်အသွေးပြောင်းလဲမှုများ၏ ယေဘုယျလမ်းကြောင်းကို မြင်နိုင်စေမည်ဖြစ်သည်။

အသေးစိတ်အချက်အလက်များကို တွင် ကြည့်ရှုနိုင်ပါသည်။ တရားဝင်ဝက်ဘ်ဆိုက်

ပရိုဂရမ်းမင်းဘာသာစကား အများအပြားကို ပံ့ပိုးပေးသည်။ အထက်ဖော်ပြပါ လင့်ခ်မှ အချက်အလက်များကို ကြည့်ပြီး၊ ၎င်းတို့သည် ဘာသာစကား 25 မျိုးကျော်ရှိသည်။ သီးခြားဘာသာစကားတစ်ခုကို ပံ့ပိုးရန်၊ သင့်လျော်သော plugin ကို ထည့်သွင်းရပါမည်။ ကွန်မြူနတီဗားရှင်းတွင် အလုပ်လုပ်ရန် ပလပ်အင်တစ်ခု ပါဝင်သည်။ Javascript ကို (typesсript အပါအဝင်) ဝီကီက ဆန့်ကျင်ဘက်ဟု ဆိုသော်လည်း၊ နောက်ကွယ် Javascript ကို plugin အဖြေများ SonarJSTypescript အတွက် SonarTS အသီးသီး။

အကျုံးဝင်သော အချက်အလက်များကို ပေးပို့ရန် တရားဝင် သုံးစွဲသူကို အသုံးပြုသည်။ sonarqube-စကင်နာ, which, setting from ကိုအသုံးပြုခြင်း။ config ကို-file၊ ဤဒေတာကို ဆာဗာသို့ ပို့ပေးသည်။ SonarQube နောက်ထပ် စုစည်းမှုနှင့် စုစည်းမှုအတွက်။

အတွက် Javascript ကို ဖြစ် npm ထုပ်ပိုးခြင်း။. ဒီတော့ တစ်ဆင့်ပြီးတစ်ဆင့် အကောင်အထည်ဖော်ကြရအောင် SonarQube в Vue- ပရောဂျက်ကိုအသုံးပြုခြင်း။ လက်ကမ်းစာစောင်.

ဆာဗာကို အသုံးချရန် 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

အရင်ဆုံး client ကို install လုပ်ရပါမယ်။ SonarQubeဟုခေါ်သည်။ ဆိုနာ-စကင်နာအတွက် npm wrapper ရှိပါတယ်

yarn add sonarqube-scanner

ပြီးတာနဲ့ ချက်ချင်း command ကိုထည့်လိုက်ပါ။ script များ ၎င်းနှင့်အတူအလုပ်လုပ်ရန်။

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'A;
• sonar.projectKey - ဆာဗာပေါ်တွင် ထူးခြားသော ပရောဂျက်အမှတ်အသား Sonar'A;
• sonar.projectName - ပရောဂျက်ကိုသတ်မှတ်ထားသောကြောင့်၎င်း၏အမည်ကိုအချိန်မရွေးပြောင်းလဲနိုင်သည်။ ပရောဂျက်ကီး;
• sonar.sources – များသောအားဖြင့် ဤအရာသည် အရင်းအမြစ်များပါရှိသော ဖိုင်တွဲ srcဒါပေမယ့် ဘာမဆိုဖြစ်နိုင်ပါတယ်။ ဤဖိုင်တွဲကို စကင်နာဖွင့်ထားသည့် ဖိုင်တွဲဖြစ်သည့် root ဖိုဒါနှင့် ဆက်စပ်သတ်မှတ်ထားသည်။
• sonar.tests - ယခင်တစ်ခုနှင့် ယှဉ်တွဲနေသော ဘောင်တစ်ခု။ ဤသည်မှာ စမ်းသပ်မှုများ တည်ရှိရာ ဖိုင်တွဲဖြစ်သည်။ ဤပရောဂျက်တွင်၊ ထိုကဲ့သို့သောဖိုင်တွဲမရှိပါ၊ နှင့် စစ်ဆေးမှုသည် ဖိုဒါတွင် စမ်းသပ်နေသည့် အစိတ်အပိုင်း၏ဘေးတွင် တည်ရှိသည်၊စမ်းသပ်'၊ ထို့ကြောင့် ကျွန်ုပ်တို့သည် ၎င်းကို ယခုလောလောဆယ် လျစ်လျူရှုပြီး နောက် parameter ကို အသုံးပြုပါမည်။
• sonar.test.inclusions - မျက်နှာဖုံးကို အသုံးပြု၍ စမ်းသပ်မှုများအတွက် လမ်းကြောင်း၊ ကော်မာဖြင့် ခွဲခြားဖော်ပြထားသော အစိတ်အပိုင်းများစွာ ရှိနိုင်သည်;
• sonar.sourceEncoding - အရင်းအမြစ်ဖိုင်များအတွက် ကုဒ်လုပ်ခြင်း။

စကင်နာကို ပထမဆုံး လွှင့်တင်ခြင်းအတွက်၊ အဓိက ရှေ့လုပ်ဆောင်ချက်မှလွဲ၍ ကျန်အရာအားလုံးသည် အဆင်သင့်ဖြစ်နေပါပြီ- စမ်းသပ်အင်ဂျင်ကို စတင်ခြင်းဖြင့်၊ နောက်ပိုင်းတွင် စကင်နာကို အသုံးပြုမည့် လွှမ်းခြုံမှုဆိုင်ရာ အချက်အလက်များကို ထုတ်ပေးနိုင်စေရန်၊

ဒါပေမယ့် ဒါကိုလုပ်ဖို့၊ ဒီအချက်အလက်ကိုထုတ်ပေးဖို့အတွက် စမ်းသပ်အင်ဂျင်ကို configure လုပ်ဖို့လိုအပ်ပါတယ်။ ဤပရောဂျက်တွင် အင်ဂျင်စမ်းသပ်မှု ပြုလုပ်သည်။ ရှိ. ၎င်း၏ဆက်တင်များသည် ဖိုင်၏သက်ဆိုင်ရာကဏ္ဍတွင်ရှိသည်။ မြတ်စွာဘုရား.

ဤဆက်တင်များကို ထည့်ကြပါစို့။

"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);
},
...

လွှမ်းခြုံတွက်ချက်ရန် လုံလောက်မည်ဖြစ်သည်။

စမ်းသပ်မှုကို ပြန်လည်စတင်ပြီးနောက်၊ ကျွန်ုပ်တို့သည် ဤအရာကို သေချာစေပါမည်-

မျက်နှာပြင်ပေါ်တွင် ကျွန်ုပ်တို့သည် အကျုံးဝင်မှုဆိုင်ရာ အချက်အလက်ကို မြင်တွေ့ရမည်ဖြစ်ပြီး၊ ပရောဂျက်ဖိုင်တွဲတွင် ဖိုင်တွဲတစ်ခုကို ဖန်တီးမည်ဖြစ်သည်။ လွှမ်းခြုံ စမ်းသပ်လွှမ်းခြုံသတင်းအချက်အလက်နှင့်အတူ universal format နဲ့ LCOV (LTP GCOV တိုးချဲ့မှု).

Gcov ကုဒ်အကျုံးဝင်မှုကို စစ်ဆေးရန် အခမဲ့ဖြန့်ဝေသည့် အသုံးဝင်မှုတစ်ခုဖြစ်သည်။ Gcov သည် ပရိုဂရမ်တစ်ခုရှိ ထုတ်ပြန်ချက်တစ်ခုစီအတွက် တိကျသောလုပ်ဆောင်မှုအရေအတွက်ကို ထုတ်ပေးပြီး အရင်းအမြစ်ကုဒ်တွင် မှတ်ချက်များကို ထည့်သွင်းနိုင်စေပါသည်။ Gcov သည် GCC ပက်ကေ့ချ်၏ တစ်စိတ်တစ်ပိုင်းအဖြစ် စံအသုံးပြုမှုတစ်ခုအဖြစ် လာပါသည်။
Lcov - gcov အတွက် ဂရပ်ဖစ် အင်တာဖေ့စ်။ ၎င်းသည် အရင်းအမြစ်ဖိုင်များစွာအတွက် gcov ဖိုင်များကို စုစည်းပြီး ကုဒ်နှင့် လွှမ်းခြုံအချက်အလက်များပါရှိသော HTML စာမျက်နှာအစုံကို ထုတ်လုပ်ပေးပါသည်။ လမ်းညွှန်မှုပိုမိုလွယ်ကူစေရန် စာမျက်နှာများကိုလည်း ထုတ်လုပ်ထားပါသည်။ Lcov သည် ကြိုးများ၊ လုပ်ဆောင်ချက်များနှင့် အကိုင်းအခက်များကို လွှမ်းခြုံပေးသည်။

စစ်ဆေးမှုများ ပြီးပါက အကျုံးဝင်သော အချက်အလက်များကို တွေ့ရှိရမည်ဖြစ်ပါသည်။ လွှမ်းခြုံ/lcov.info.
ပြောဖို့လိုတယ်။ Sonar'ဘယ်ကရနိုင်မလဲ။ ထို့ကြောင့်၊ ၎င်း၏ configuration file တွင် အောက်ပါစာကြောင်းများကို ထည့်ကြပါစို့။ သို့သော် အချက်တစ်ချက်ရှိပါသည်- ပရောဂျက်များသည် ဖိုင်တွဲတွင် ဘာသာစကားမျိုးစုံရှိနိုင်သည်။ src ပရိုဂရမ်းမင်းဘာသာစကားများစွာအတွက် ရင်းမြစ်ကုဒ်များရှိပြီး တစ်ခု သို့မဟုတ် တစ်ခုနှင့် ဆက်နွယ်မှုရှိကာ၊ တစ်ဖန် ပလပ်အင်တစ်ခု သို့မဟုတ် အခြားပလပ်အင်အသုံးပြုမှုကို ၎င်း၏ extension ဖြင့် ဆုံးဖြတ်သည်။ နှင့် လွှမ်းခြုံအချက်အလက်များကို မတူညီသော ပရိုဂရမ်းမင်းဘာသာစကားများအတွက် မတူညီသောနေရာများတွင် သိမ်းဆည်းထားနိုင်သည်၊ ထို့ကြောင့် ဘာသာစကားတစ်ခုစီတွင် ၎င်းကိုစတင်သတ်မှတ်ရန်အတွက် ၎င်း၏ကိုယ်ပိုင်ကဏ္ဍရှိသည်။ ကျွန်ုပ်တို့၏ပရောဂျက်ကိုအသုံးပြုသည်။ လက်ကမ်းစာစောင်ထို့ကြောင့် ၎င်းအတွက်သာ ဆက်တင်ကဏ္ဍတစ်ခု လိုအပ်သည်-

sonar-project.properties:

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

စကင်နာကို ပထမဆုံး စတင်ခြင်းအတွက် အရာအားလုံး အဆင်သင့်ဖြစ်နေပါပြီ။ ပရောဂျက်ဆိုတာ သတိပြုစေချင်ပါတယ်။ Sonarပေးထားသော ပရောဂျက်တစ်ခုအတွက် စကင်နာကို သင်ပထမဆုံးလုပ်ဆောင်သောအခါ e ကို အလိုအလျောက် ဖန်တီးပါသည်။ နောက်ပိုင်းအချိန်များတွင်၊ အချိန်နှင့်အမျှ ပရောဂျက်ပါရာမီတာများတွင် အပြောင်းအလဲများ၏ ဒိုင်းနမစ်များကို မြင်တွေ့နိုင်ရန် အချက်အလက်များကို စုဆောင်းပါမည်။

ဒီတော့ စောစောက ဖန်တီးထားတဲ့ command ကို သုံးကြည့်ရအောင် မြတ်စွာဘုရား:

yarn run sonar 

မှတ်ချက်: parameter ကိုလည်းသင်သုံးနိုင်သည်။ -X ပိုမိုအသေးစိတ်အချက်အလက်များအတွက်

စကင်နာကို ပထမဆုံးအကြိမ် စတင်အသုံးပြုပါက၊ စကင်နာ၏ binary ကို ဦးစွာ ဒေါင်းလုဒ်လုပ်ပါမည်။ ၎င်းသည်စတင်ပြီးဆာဗာကိုစကင်န်ဖတ်ပါ။ Sonarထည့်သွင်းထားသော ပလပ်အင်များအတွက် 'a သည် ပံ့ပိုးပေးထားသော ဘာသာစကားကို တွက်ချက်ပေးသည်။ ၎င်း၏ လုပ်ဆောင်ချက်အတွက် အခြားသော ဘောင်များ အမျိုးမျိုးကိုလည်း တင်ဆောင်ထားပါသည်။ အရည်အသွေးပရိုဖိုင်များ၊ အသက်ဝင်သောစည်းမျဉ်းများ၊ မက်ထရစ်များသိုလှောင်မှု၊ ဆာဗာစည်းမျဉ်းများ.

မှတ်ချက်: ကျွန်ုပ်တို့သည် ဤဆောင်းပါး၏ဘောင်အတွင်းတွင် ၎င်းတို့အပေါ်တွင် အသေးစိတ်နေမည်မဟုတ်သော်လည်း တရားဝင်အရင်းအမြစ်များကို သင်အမြဲဆက်သွယ်နိုင်ပါသည်။

ထို့နောက် ဖိုဒါခွဲခြမ်းစိတ်ဖြာမှု စတင်သည်။ src ၎င်းတို့အားလုံးအတွက် အရင်းအမြစ်ဖိုင်များ ရရှိနိုင်မှုအတွက် (တိကျသောတစ်ခုအား အတိအလင်းဖော်ပြထားခြင်းမရှိပါက) ၎င်းတို့၏နောက်ဆက်တွဲ အညွှန်းကိန်းများဖြင့် ပံ့ပိုးပေးထားသော ဘာသာစကား။

ဤဆောင်းပါးတွင် ကျွန်ုပ်တို့အာရုံစိုက်ခြင်းမရှိသော အခြားသော ခွဲခြမ်းစိတ်ဖြာမှုများ (ဥပမာ၊ linting၊ ကုဒ်ပွားမှုကို ရှာဖွေတွေ့ရှိခြင်းစသည်) ကဲ့သို့သော အမျိုးမျိုးသော ခွဲခြမ်းစိတ်ဖြာမှုများ ထွက်ပေါ်လာပါသည်။

စကင်နာ၏ အလုပ်အဆုံးတွင်၊ စုဆောင်းထားသော အချက်အလက်အားလုံးကို စုစည်း၊ သိမ်းဆည်းပြီး ဆာဗာသို့ ပေးပို့သည်။

၎င်းပြီးနောက်၊ ဝဘ်အင်တာဖေ့စ်တွင် ဖြစ်ပျက်ခဲ့သည်များကို ကျွန်ုပ်တို့ မြင်တွေ့နိုင်သည်-

ကျွန်ုပ်တို့မြင်နိုင်သည်အတိုင်း၊ တစ်စုံတစ်ခုလုပ်ဆောင်ပြီးသည်နှင့်ပင် လွှမ်းခြုံမှုအချို့ကို ပြသသော်လည်း ကျွန်ုပ်တို့နှင့် မကိုက်ညီပါ။ ရှိ- အစီရင်ခံစာ။

အဖြေရှာကြည့်ရအောင်။ ပရောဂျက်ကို ပိုမိုအသေးစိတ်ကြည့်ရအောင်၊ လွှမ်းခြုံမှုတန်ဖိုးကို ကလစ်နှိပ်ပြီး အသေးစိတ်ဖိုင်အစီရင်ခံစာတစ်ခုသို့ “ဖြတ်သွားသည်”

ဤနေရာတွင်၊ ပင်မစစ်ဆေးထားသောဖိုင်အပြင်၊ HelloWorld.vueဖိုင်တစ်ခုလည်းရှိပါတယ်။ main.tsလွှမ်းခြုံပုံတစ်ခုလုံးကို ပျက်စီးစေသော၊ ဒါပေမယ့် အကျုံးဝင်မှု တွက်ချက်မှုကနေ ဘယ်လို ဖယ်ထုတ်လိုက်တာလဲ။ ဟုတ်ကဲ့၊ အားလုံးမှန်ပါတယ်၊ ဒါပေမယ့် အဆင့်မှာရှိပါတယ်။ ရှိသို့သော် စကင်နာက ၎င်းကို အညွှန်းပြုထားသောကြောင့် ၎င်း၏ တွက်ချက်မှုများတွင် အဆုံးသတ်ခဲ့သည်။

ဒါကို ပြင်ရအောင်။

sonar-project.properties:

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

ရှင်းလင်းချက်တစ်ခု ပြုလုပ်လိုသည်- ဤကန့်သတ်ဘောင်အတွင်း သတ်မှတ်ထားသည့် ဖိုင်တွဲများအပြင်၊ ကန့်သတ်ဘောင်အတွင်း ဖော်ပြထားသော ဖိုင်တွဲများအားလုံးကိုလည်း ပေါင်းထည့်ထားသည်။ sonar.test.inclusions.

စကင်နာကို စတင်ပြီးနောက်၊ ကျွန်ုပ်တို့သည် မှန်ကန်သော အချက်အလက်ကို တွေ့ရသည်-

နောက်အချက်ကို ကြည့်ရအောင်- အရည်အသွေးပရိုဖိုင်များ. အထက်ကပြောခဲ့တဲ့ အထောက်အပံ့အကြောင်းပါ။ Sonar'om တစ်ချိန်တည်းမှာဘာသာစကားများစွာ။ ဒါက ကျနော်တို့ မြင်နေရတာ အတိအကျပါပဲ။ ဒါပေမယ့် ငါတို့ရဲ့ ပရောဂျက်ကို ရေးထားတာကို ငါတို့သိတယ်။ TSထို့ကြောင့် မလိုအပ်သော ခြယ်လှယ်မှုများနှင့် စစ်ဆေးမှုများဖြင့် စကင်နာကို အဘယ်ကြောင့် တင်းကျပ်စေသနည်း။ configuration file တွင် နောက်ထပ် parameter တစ်ခုထည့်ခြင်းဖြင့် ခွဲခြမ်းစိတ်ဖြာမှုအတွက် ဘာသာစကားကို သတ်မှတ်ပါမည်။ Sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

စကင်နာကို ပြန်ဖွင့်ပြီး ရလဒ်ကို ကြည့်ကြပါစို့။

လွှမ်းခြုံမှု လုံးဝမရှိတော့ပါ။

Scanner မှတ်တမ်းကို ကြည့်လျှင် အောက်ပါစာကြောင်းကို တွေ့နိုင်ပါသည်။

ဆိုလိုသည်မှာ၊ ကျွန်ုပ်တို့၏ ပရောဂျက်ဖိုင်များကို ရိုးရိုးရှင်းရှင်း ညွှန်းမထားပါ။

အခြေအနေမှာ အောက်ပါအတိုင်းဖြစ်သည်- တရားဝင် ထောက်ခံထားသည်။ VueJs plugin တွင်ရှိသည်။ SonarJSဘယ်သူက တာဝန်ရှိလဲ။ Javascript ကို.

သို့သော် ဤပံ့ပိုးမှုသည် plugin တွင်မရှိပါ။ SonarTS အတွက် TSbug tracker တွင်တရားဝင်လက်မှတ်ကိုဖွင့်ထားသည့်အကြောင်း Sonar'A:

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

ဤအချက်ကို အတည်ပြုသည့် SonarQube developer များမှ ကိုယ်စားလှယ်တစ်ဦးထံမှ အဖြေအချို့ဖြစ်သည်။

ဒါပေမယ့် အရာအားလုံးက ငါတို့အတွက် အလုပ်လုပ်တယ်၊ မင်းကန့်ကွက်တယ်။ ဟုတ်တယ်၊ နည်းနည်းစမ်းကြည့်ရအောင် "ဟက်ကာ".
ပံ့ပိုးမှုရှိရင် .vue- ဖိုင်များ Sonar'အို၊ ဒါဆို သူတို့ကို စဉ်းစားကြည့်ရအောင်လို့ ပြောကြည့်ရအောင် လက်ကမ်းစာစောင်.

ကန့်သတ်ချက်တစ်ခု ထည့်ကြပါစို့။

sonar-project.properties:

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

စကင်နာကို စတင်လိုက်ရအောင်။

ကဲ ဒါဆိုရင်တော့ အရာအားလုံးဟာ ပုံမှန်ပြန်ဖြစ်နေပါပြီ၊ တစ်ခုတည်းသော ပရိုဖိုင်အတွက်ပဲ ဖြစ်ပါတယ်။ လက်ကမ်းစာစောင်. ဆိုလိုသည်မှာ ကျွန်ုပ်တို့သည် ပြဿနာကို ကူညီဖြေရှင်းနိုင်ခဲ့သည်။ VueJs+TS အတွက် SonarQube.

ဒီ့ထက်ပိုပြီး လွှမ်းခြုံအချက်အလက်ကို နည်းနည်းလောက် တိုးတက်အောင် ကြိုးစားကြပါစို့။

ယခုအချိန်အထိ ကျွန်ုပ်တို့ လုပ်ဆောင်ခဲ့သော အရာများ-

• ပရောဂျက်တွင် ထည့်ထားသည်။ Sonar- စကင်နာ;
• တည်ဆောက်သည် ရှိ လွှမ်းခြုံသတင်းအချက်အလက်ထုတ်လုပ်ရန်;
• ပြင်ဆင်ထားသည်။ Sonar- စကင်နာ;
• ပံ့ပိုးမှုပြဿနာကိုဖြေရှင်းခဲ့သည်။ .vue-files + လက်ကမ်းစာစောင်.

စမ်းသပ်လွှမ်းခြုံမှုအပြင်၊ ဥပမာ၊ ကုဒ်ပွားခြင်းနှင့် ပရောဂျက်၏ ကုဒ်ရှုပ်ထွေးမှုနှင့် ဆက်စပ်သော ကိန်းဂဏန်းများ တွက်ချက်ရာတွင် ပါဝင်သည့် ကုဒ်အရည်အသွေးအတွက် အခြားစိတ်ဝင်စားဖွယ်ကောင်းသော အသုံးဝင်သော စံသတ်မှတ်ချက်များလည်း ရှိသေးသည်။

လက်ရှိအကောင်အထည်ဖော်မှုတွင် plugin နှင့်အလုပ်လုပ်သည်။ TS (SonarTS) အလုပ်မဖြစ်ပါ။ CPD (Copy Paste Detector) ကုဒ်လိုင်းများကို ရေတွက်ပါ။ .vue- ဖိုင်များ။

ကုဒ်ပွားခြင်း၏ ပေါင်းစပ်မှုအခြေအနေကို ဖန်တီးရန်၊ အစိတ်အပိုင်းဖိုင်ကို အခြားအမည်တစ်ခုဖြင့် မိတ္တူပွားပြီး ကုဒ်သို့လည်း ထည့်ပါ။ main.ts dummy လုပ်ဆောင်ချက်ကို အခြားအမည်တစ်ခုဖြင့် ပွားပါ။ ပုံတူပွားခြင်းရှိမရှိ စစ်ဆေးရန် .vueနှင့် .ts - ဖိုင်များ။

main.ts:

...
function name(params:string): void {
  console.log(params);
}
...

၎င်းကိုလုပ်ဆောင်ရန်၊ configuration line ကို ယာယီမှတ်ချက်ပေးရန် လိုအပ်သည်-

sonar-project.properties:

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

စမ်းသပ်ခြင်းနှင့်အတူ စကင်နာကို ပြန်လည်စတင်ကြပါစို့။

yarn test && yarn run sonar

ဟုတ်ပါတယ်၊ ကျွန်ုပ်တို့ရဲ့ လွှမ်းခြုံမှု ကျသွားလိမ့်မယ်၊ ဒါပေမယ့် အခု ကျွန်တော်တို့ အဲဒါကို စိတ်မဝင်စားတော့ဘူး။

ကုဒ်မျဉ်းများပွားခြင်း၏ စည်းကမ်းချက်များအရ၊ ကျွန်ုပ်တို့ တွေ့ရလိမ့်မည်-

စစ်ဆေးရန် ကျွန်ုပ်တို့ အသုံးပြုပါမည်။ CPD-အသုံးဝင်မှု - jscpd:

npx jscpd src

ကုဒ်လိုင်းများအတွက်

၎င်းကို အနာဂတ် ပလပ်အင်ဗားရှင်းများတွင် ဖြေရှင်းနိုင်မည်ဖြစ်သည်။ SonarJS(TS). ၎င်းတို့သည် ဤ plugins နှစ်ခုကို တစ်ခုတည်းအဖြစ်သို့ တဖြည်းဖြည်း ပေါင်းစည်းရန် စတင်နေပြီ ဖြစ်ကြောင်း ကျွန်ုပ် သတိပြုစေလိုပါသည်။ SonarJSငါထင်တာမှန်တယ်။

ယခု ကျွန်ုပ်သည် လွှမ်းခြုံအချက်အလက်များကို တိုးတက်စေမည့် ရွေးချယ်မှုကို စဉ်းစားချင်ပါသည်။

ယခုအချိန်အထိ ပရောဂျက်တစ်ခုလုံးအတွက်နှင့် အထူးသဖြင့် ဖိုင်များအတွက် ရာခိုင်နှုန်းသတ်မှတ်ချက်များဖြင့် စမ်းသပ်မှုလွှမ်းခြုံမှုကို ကျွန်ုပ်တို့တွေ့မြင်နိုင်ပါသည်။ သို့သော် ပမာဏအကြောင်း အချက်အလက်များဖြင့် ဤညွှန်ကိန်းကို ချဲ့ထွင်ရန် ဖြစ်နိုင်သည်။ ယူနစ်ပရောဂျက်အတွက် စမ်းသပ်မှုများအပြင် ဖိုင်များ၏ ဆက်စပ်မှု။

တတ်နိုင်တဲ့ စာကြည့်တိုက်ရှိတယ်။ ရှိ- အစီရင်ခံစာကို format အဖြစ်ပြောင်းပါ။ Sonar'A:
ယေဘုယျစမ်းသပ်ဒေတာ - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

ကျွန်ုပ်တို့၏ပရောဂျက်တွင် ဤစာကြည့်တိုက်ကို ထည့်သွင်းကြပါစို့။

yarn add jest-sonar-reporter

၎င်းကို configuration တွင်ထည့်ပါ။ ရှိ:

package.json-

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

ကဲ စမ်းသပ်ကြည့်ရအောင်။

yarn test

ထို့နောက် ပရောဂျက်၏ အမြစ်တွင် ဖိုင်တစ်ခု ဖန်တီးပါမည်။ test-report.xml.

၎င်းကို configuration တွင်အသုံးပြုကြပါစို့ Sonar'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

ပြီးလျှင် စကင်နာကို ပြန်လည်စတင်ပါ။

yarn run sonar

အင်တာဖေ့စ်မှာ ဘာတွေပြောင်းလဲသွားလဲ ကြည့်ရအောင် Sonar'A:

ပြီးတော့ ဘာမှ မပြောင်းလဲပါဘူး။ အမှန်မှာ Sonar သည် Jest အစီရင်ခံစာတွင် ဖော်ပြထားသော ဖိုင်များကို ဖိုင်များအဖြစ် ထည့်သွင်းစဉ်းစားခြင်းမရှိပေ။ ယူနစ်- စမ်းသပ်မှုများ။ ဤအခြေအနေကို ပြုပြင်ရန်အတွက်၊ ကျွန်ုပ်တို့သည် ဖွဲ့စည်းမှုဘောင်ကို အသုံးပြုပါသည်။ Sonar sonar.testsစမ်းသပ်မှုများဖြင့် ဖိုင်တွဲများကို ကျွန်ုပ်တို့ အတိအလင်း ညွှန်ပြပေးမည် (ယခု ကျွန်ုပ်တို့တွင် တစ်ခုသာ ရှိသည်)။

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

စကင်နာကို ပြန်လည်စတင်ကြပါစို့။

yarn run sonar

အင်တာဖေ့စ်မှာ ဘာတွေပြောင်းလဲသွားလဲ ကြည့်ရအောင်။

ယခု ကျွန်ုပ်တို့၏ အရေအတွက်ကို တွေ့မြင်ရပြီဖြစ်သည်။ ယူနစ်-tests နှင့် အတွင်းပိုင်းကိုနှိပ်ခြင်းဖြင့် မအောင်မြင်ပါက၊ ပရောဂျက်ဖိုင်များကြားတွင် ဤနံပါတ်၏ဖြန့်ကျက်မှုကို ကျွန်ုပ်တို့တွေ့မြင်နိုင်သည်-

ကောက်ချက်

ထို့ကြောင့် စဉ်ဆက်မပြတ် ခွဲခြမ်းစိတ်ဖြာရန် ကိရိယာတစ်ခုကို ကျွန်ုပ်တို့ ကြည့်ရှုခဲ့သည်။ SonarQube. ရေးထားတဲ့ ပရောဂျက်တစ်ခုထဲကို အောင်မြင်စွာ ပေါင်းစည်းလိုက်ပါတယ်။ VueJs+TS. လိုက်ဖက်ညီမှုဆိုင်ရာ ပြဿနာအချို့ကို ဖြေရှင်းခဲ့သည်။ စမ်းသပ်မှု အကျုံးဝင်မှု ညွှန်ကိန်း၏ အချက်အလက် အကြောင်းအရာကို ကျွန်ုပ်တို့ တိုးမြှင့်ထားပါသည်။ ဤဆောင်းပါးတွင်၊ ကျွန်ုပ်တို့သည် ကုဒ်အရည်အသွေးအတွက် စံသတ်မှတ်ချက်များထဲမှ တစ်ခုကိုသာ စစ်ဆေးခဲ့သည် (အဓိကအချက်များထဲမှ တစ်ခု ဖြစ်နိုင်သည်)၊ SonarQube ဘေးကင်းမှုစမ်းသပ်ခြင်းအပါအဝင် အခြားသော အရည်အသွေးသတ်မှတ်ချက်များကို ပံ့ပိုးပေးသည်။ သို့သော် ဤအင်္ဂါရပ်များအားလုံးကို အပြည့်အဝမရနိုင်ပါ။ အသိုင်းအဝိုင်း- ဗားရှင်းများ။ စိတ်ဝင်စားစရာကောင်းပြီး အသုံးဝင်သောအင်္ဂါရပ်များထဲမှ တစ်ခုမှာ ပေါင်းစည်းခြင်းဖြစ်ပါသည်။ SonarQube GitLab နှင့် BitBucket ကဲ့သို့သော ကုဒ်သိုလှောင်မှု စီမံခန့်ခွဲမှုစနစ်အမျိုးမျိုးဖြင့်။ တားဆီးရန် merge pull(merge) တောင်းဆိုချက်'a သည် အကျုံးဝင်မှု ကျဆင်းသွားသောအခါ repository ၏ ပင်မဌာနခွဲသို့။ ဒါပေမယ့် ဒါက လုံးဝကွဲပြားတဲ့ ဆောင်းပါးတစ်ပုဒ်အတွက် ဇာတ်လမ်းတစ်ပုဒ်ပါ။

PS: ကုဒ်ပုံစံဖြင့် ဆောင်းပါးတွင် ဖော်ပြထားသည့် အရာအားလုံးကို ရရှိနိုင်ပါသည်။ ငါ့လမ်းဆုံလမ်းခွ.

စာရင်းသွင်းအသုံးပြုသူများသာ စစ်တမ်းတွင် ပါဝင်နိုင်ပါသည်။ ဆိုင်းအင်လုပ်ခြင်း, ကျေးဇူးပြု။

သင် SonarQube ပလပ်ဖောင်းကို အသုံးပြုပါသလား။

• 26,3%ဟုတ်တယ်5

• 15,8%နံပါတ် ၂၄၄

• 15,8%ဒီပလပ်ဖောင်းအကြောင်း ကြားပြီး ၃

• 10,5%ဒီပလပ်ဖောင်းအကြောင်း ကြားဖူးပြီး မသုံးချင်ဘူး။

• 0,0%မတူညီတဲ့ platform0 ကို သုံးနေပါတယ်။

• 31,6%သူ့အကြောင်းကို ပထမဆုံးကြားဖူးတာ ၆

အသုံးပြုသူ ၁၄၇ ဦး မဲပေးခဲ့သည်။ အသုံးပြုသူ 19 ဦး ကြားနေခဲ့ပါတယ်။

source: www.habr.com