موږ په فعاله توګه زموږ په کار کې پلیټ فارم کاروو سونار کیوب د کوډ کیفیت په لوړه کچه ساتل. کله چې په کې لیکل شوي د یوې پروژې یوځای کول VueJs+Typescript، ستونزې رامنځته شوې. له همدې امله، زه غواړم تاسو ته په تفصیل سره ووایم چې موږ څنګه د دوی د حل کولو اداره کوله.

پدې مقاله کې به موږ خبرې وکړو، لکه څنګه چې ما پورته لیکلي، د سونار کیوب پلیټ فارم په اړه. یو کوچنی تیوری - دا په عمومي توګه څه شی دی، د هغو کسانو لپاره چې د لومړي ځل لپاره یې اوریدلي دي:

سونار کیوب (پخوانی سونار) د دوامداره تفتیش او کوډ کیفیت اندازه کولو لپاره د خلاصې سرچینې پلیټ فارم دی.
د MISRA C، MISRA C++، MITER/CWE او CERT د خوندي کوډ کولو معیارونو پروګرام کولو معیارونو سره سم د کوډ تحلیل او غلطۍ موندلو ملاتړ کوي. دا کولی شي د OWASP ټاپ 10 او CWE/SANS ټاپ 25 برنامه کولو غلطیتونو لیست څخه غلطی هم پیژني.
د دې حقیقت سره سره چې پلیټ فارم مختلف چمتو شوي وسیلې کاروي ، سونار کیوب پایلې یو واحد ډشبورډ ته کموي ، د منډو تاریخ ساتي او پدې توګه تاسو ته اجازه درکوي د پراختیا پرمهال د سافټویر کیفیت کې د بدلون عمومي رجحان وګورئ.

نور جزیات په کې موندلی شئ رسمي ویب پاڼه

د پروګرام کولو ژبې لوی شمیر ملاتړ کیږي. د پورته لینک څخه د معلوماتو له مخې قضاوت کول، دا له 25 څخه ډیر ژبې دي. د یوې ځانګړې ژبې ملاتړ کولو لپاره، تاسو باید مناسب پلگ ان نصب کړئ. د ټولنې نسخه کې د کار کولو لپاره یو پلگ ان شامل دی Javascript (د ډولونو په شمول)، که څه هم ويکي برعکس وايي. شاته Javascript پلگ ان ځوابونه سونار جي ایسد ټایپ سکریپټ لپاره سونارټس په ترتیب سره.

رسمي پیرودونکي د پوښښ معلوماتو لیږلو لپاره کارول کیږي سونارکوب سکینر، کوم چې، د ترتیباتو په کارولو سره کښته کول- فایل، دا ډاټا سرور ته لیږي سونار کیوب د نورو ادغام او راټولولو لپاره.

لپاره Javascript ده npm ریپر. نو، راځئ چې ګام په ګام پلي کول پیل کړو سونار کیوب в پیشنهاد- د پروژې کارول ډول.

د سرور د ځای پرځای کولو لپاره سونار کیوب راځئ چې ګټه ترې واخلو ډاکر - بڼه.

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+Jest. راځئ چې دا د ځان په لور واړوو:

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

لومړی موږ اړتیا لرو چې پیرودونکي نصب کړو سونار کیوب، کوم چې ویل کیږي سونار سکینرلپاره npm یو پوښ دی:

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.project نوم - د دې نوم، دا په هر وخت کې بدلیدلی شي، ځکه چې د پروژې لخوا پیژندل شوی پروژه کی;
• سونار.سرچینې - د سرچینو سره فولډر، معمولا دا سرچینه، مګر هر څه کیدی شي. دا فولډر د روټ فولډر سره تړاو لري، کوم چې هغه فولډر دی چې سکینر یې پیل کړی؛
• sonar.tests - یو پیرامیټر چې د تیر سره یوځای کیږي. دا هغه فولډر دی چیرې چې ازموینې موقعیت لري. په دې پروژه کې، داسې هیڅ فولډر شتون نلري، او ازموینه د هغه برخې په څنګ کې موقعیت لري چې په فولډر کې ازموینه کیږي.ازموینه'، نو موږ به دا د اوس لپاره له پامه غورځوو او راتلونکی پیرامیټر به وکاروو؛
• sonar.test.inclusions - د ماسک په کارولو سره د ازموینو لپاره لاره ، ممکن ډیری عناصر وي چې د کوما لخوا جلا شوي لیست شوي وي؛
• sonar.source Encoding - د سرچینې فایلونو لپاره کوډ کول.

د سکینر د لومړي لانچ لپاره ، هرڅه چمتو دي ، پرته له اصلي مخکیني عمل څخه: د ازموینې انجن پخپله پیل کول ، ترڅو دا د پوښښ په اړه معلومات رامینځته کړي ، کوم چې سکینر به وروسته وکاروي.

مګر د دې کولو لپاره ، تاسو اړتیا لرئ د دې معلوماتو رامینځته کولو لپاره د ازموینې انجن تنظیم کړئ. په دې پروژه کې، د ازموینې انجن دی جست. او د دې تنظیمات د فایل په اړونده برخه کې دي 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);
},
...

دا به د پوښښ محاسبه کولو لپاره کافي وي.

د ازموینې بیا پیل کولو وروسته، موږ به دا ډاډ ترلاسه کړو:

په سکرین کې موږ باید د پوښښ په اړه معلومات وګورو، او د پروژې فولډر کې به یو فولډر جوړ شي پوښښ د ازموینې پوښښ معلوماتو سره په نړیوال شکل کې LCOV (LTP GCOV توسیع).

Gcov د کوډ پوښښ معاینه کولو لپاره په آزاده توګه توزیع شوی کار دی. Gcov په برنامه کې د هرې بیان لپاره د اعدامونو دقیق شمیر رامینځته کوي او تاسو ته اجازه درکوي د سرچینې کوډ ته توضیحات اضافه کړئ. Gcov د GCC کڅوړې برخې په توګه د معیاري کارونې په توګه راځي.
Lcov - د gcov لپاره ګرافیکي انٹرفیس. دا د ډیری سرچینو فایلونو لپاره د gcov فایلونه راټولوي او د کوډ او پوښښ معلوماتو سره د HTML پاڼو سیټ تولیدوي. مخونه هم د نیویګیشن اسانه کولو لپاره رامینځته شوي. Lcov د تارونو، دندو، او څانګو پوښښ ملاتړ کوي.

وروسته له دې چې ازموینې بشپړې شي، د پوښښ معلومات به په کې موقعیت ولري coverage/lcov.info.
موږ باید ووایو سونار'زه له کوم ځای څخه ترلاسه کولی شم؟ نو، راځئ چې لاندې لینونه د دې ترتیب کولو فایل کې اضافه کړو. مګر یو ټکی شتون لري: پروژې کیدای شي څو ژبني وي، دا په فولډر کې دی سرچینه د ډیری پروګرامینګ ژبو لپاره سرچینې کوډونه شتون لري او د یو یا بل سره تړاو لري، او په پایله کې، د یو یا بل پلگ ان کارول د هغې توسیع لخوا ټاکل کیږي. او د پوښښ معلومات د مختلف پروګرامینګ ژبو لپاره په مختلفو ځایونو کې زیرمه کیدی شي، نو هره ژبه د دې ترتیب کولو لپاره خپله برخه لري. زموږ پروژه کاروي ډول، نو موږ یوازې د دې لپاره د تنظیماتو برخې ته اړتیا لرو:

sonar-project.properties:

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

د سکینر د لومړي پیل لپاره هرڅه چمتو دي. زه غواړم یادونه وکړم چې پروژه ده سونارe په اوتومات ډول رامینځته کیږي کله چې تاسو د ورکړل شوې پروژې لپاره سکینر چلوئ. په راتلونکو وختونو کې، معلومات به راټول شي ترڅو د وخت په تیریدو سره د پروژې پیرامیټونو کې د بدلونونو متحرکات وګوري.

نو، راځئ هغه کمانډ وکاروو چې مخکې جوړ شوی و package.json:

yarn run sonar 

نوټ: تاسو کولی شئ پیرامیټر هم وکاروئ -X د نورو تفصيلي ننوتلو لپاره.

که سکینر د لومړي ځل لپاره پیل شوی وي، نو د سکینر بائنری به لومړی ډاونلوډ شي. له هغې وروسته دا پیل کیږي او د سرور سکین کول پیل کوي سونارد نصب شوي پلگ انونو لپاره، په دې توګه د ملاتړ شوي ژبې حساب کول. د دې عملیاتو لپاره مختلف نور پیرامیټونه هم بار شوي دي: د کیفیت پروفایلونه، فعال قواعد، د میټریک ذخیره، د سرور قواعد.

نوټ: موږ به د دې مقالې په چوکاټ کې د دوی په اړه په تفصیل سره خبرې ونه کړو، مګر تاسو کولی شئ تل د رسمي سرچینو سره اړیکه ونیسئ.

بیا، د فولډر تحلیل پیل کیږي سرچینه د ټولو لپاره د سرچینې فایلونو شتون لپاره (که چیرې یو ځانګړی په واضح ډول مشخص شوی نه وي) ملاتړ شوې ژبه ، د دوی د تعقیبي لیست کولو سره.

بیا بیا بیلابیل نور تحلیلونه راځي، کوم چې موږ پدې مقاله کې تمرکز نه کوو (د بیلګې په توګه، لکه لیټینګ، د کوډ نقل کشف، او نور).

د سکینر د کار په پای کې، ټول راټول شوي معلومات راټول شوي، آرشیف شوي او سرور ته لیږل کیږي.

له دې وروسته ، موږ دمخه لیدلی شو چې په ویب انٹرفیس کې څه پیښ شوي:

لکه څنګه چې موږ لیدلی شو، یو څه کار کړی، او حتی یو ډول پوښښ ښیي، مګر دا زموږ سره سمون نلري جست- راپور

راځئ چې دا معلومه کړو. راځئ چې پروژې ته په ډیر تفصیل سره وګورو، د پوښښ ارزښت باندې کلیک وکړئ، او د مفصل فایل راپور کې "له لارې راښکته شئ:

دلته موږ ګورو، د اصلي، معاینه شوي فایل سربیره سلام نړۍ.vue، یو فایل هم شتون لري main.ts، کوم چې د پوښښ ټول انځور خرابوي. مګر څنګه موږ دا د پوښښ له محاسبې څخه لرې کړل. هو، هرڅه سم دي، مګر دا په سطحه وه جست، مګر سکینر دا شاخص کړی، نو دا په خپلو محاسبو کې پای ته ورسید.

راځئ چې دا سم کړو:

sonar-project.properties:

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

زه غواړم یو وضاحت وکړم: د فولډرونو سربیره چې پدې پیرامیټر کې مشخص شوي ، ټول فولډرې په پیرامیټر کې لیست شوي هم اضافه شوي sonar.test.inclusions.

د سکینر په لاره اچولو وروسته، موږ سم معلومات ګورو:

راځئ چې راتلونکی ټکی وګورو - د کیفیت پروفایلونه. ما پورته د ملاتړ په اړه خبرې وکړې سونارپه ورته وخت کې څو ژبې. دا دقیقا هغه څه دي چې موږ یې ګورو. مګر موږ پوهیږو چې زموږ پروژه لیکل شوې ده TSنو ولې سکینر د غیر ضروري لاسوهنو او چکونو سره فشار کړئ. موږ به د تشکیلاتو فایل ته د یو بل پیرامیټر په اضافه کولو سره د تحلیل لپاره ژبه تنظیم کړو سوناریو:

sonar-project.properties:

...
sonar.language=ts
...

راځئ چې سکینر بیا وګرځوو او پایله یې وګورو:

پوښښ په بشپړه توګه ورک شو.

که موږ د سکینر لاګ ته وګورو، موږ کولی شو لاندې کرښه وګورو:

دا دی، زموږ د پروژې فایلونه په ساده ډول لیست شوي ندي.

وضعیت په لاندې ډول دی: په رسمي توګه ملاتړ شوی VueJs په پلگ ان کې دی سونار جي ایسد چا لپاره مسؤل دی Javascript.

مګر دا ملاتړ په پلگ ان کې ندی سونارټس لپاره TSد کوم په اړه چې په بګ ټریکر کې رسمي ټکټ پرانستل شو سوناریو:

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

دلته د سونار کیوب پراختیا کونکو څخه یو له استازو څخه ځینې ځوابونه دي ، دا حقیقت تاییدوي.

مګر هرڅه زموږ لپاره کار کوي، تاسو اعتراض کوئ. هو دا دی، راځئ چې لږ هڅه وکړو "هیک".
که ملاتړ وي .vue- فایلونه سوناراوه، نو راځئ هڅه وکړو چې هغه ته ووایو چې دوی ورته په پام کې ونیسي ډول.

راځئ چې یو پیرامیټر اضافه کړو:

sonar-project.properties:

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

راځئ چې سکینر پیل کړو:

او، وویلا، هرڅه بیرته عادي حالت ته راځي، او یوازې د یو پروفایل سره ډول. دا دی، موږ په ملاتړ کې ستونزه حل کړه VueJs+TS لپاره سونار کیوب.

راځئ هڅه وکړو چې نور لاړ شو او د پوښښ معلومات لږ څه ښه کړو.

تر اوسه مو څه کړي دي:

• په پروژه کې اضافه شوي سونار- سکینر؛
• چمتو کول جست د پوښښ معلوماتو تولید لپاره؛
• ترتیب شوی سونار- سکینر؛
• د ملاتړ ستونزه حل کړه .vueفایلونه + ډول.

د ازموینې پوښښ سربیره، د کوډ کیفیت لپاره نور په زړه پوري ګټور معیارونه شتون لري، د بیلګې په توګه، د کوډ نقل کول او د لینونو شمیر (د کوډ پیچلتیا پورې اړوند د کوفیفینټ محاسبه کې ښکیل دي) د پروژې پروژې.

د کار کولو لپاره د پلگ ان په اوسني پلي کولو کې TS (سونارټس) به کار ونکړي 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). زه غواړم یادونه وکړم چې دوی په تدریجي ډول د دې دوه پلگ انونو یوځای کولو پیل کوي سونار جي ایس، کوم چې زما په اند سم دی.

اوس زه غواړم د پوښښ معلوماتو د ښه کولو اختیار په پام کې ونیسم.

تر دې دمه موږ د ټولې پروژې او په ځانګړي توګه د فایلونو لپاره د فیصدي شرایطو کې د ازموینې پوښښ لیدلی شو. مګر دا ممکنه ده چې دا شاخص د مقدار په اړه معلوماتو سره پراخ کړئ واحد- د پروژې لپاره ازموینې، او همدارنګه د فایلونو په شرایطو کې.

یو کتابتون شتون لري چې کولی شي جست- راپور په بڼه کې بدل کړئ سوناریو:
د عمومي ازموینې ډاټا - 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.

راځئ چې دا په ترتیب کې وکاروو سوناریو:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

او سکینر بیا پیل کړئ:

yarn run sonar

راځئ وګورو چې په انٹرفیس کې څه بدلون راغلی سوناریو:

او هیڅ شی نه دی بدل شوی. حقیقت دا دی چې سونار د جیسټ راپور کې بیان شوي فایلونه د فایلونو په توګه نه ګڼي واحد- ازمایښتونه د دې وضعیت سمولو لپاره، موږ د ترتیب کولو پیرامیټر کاروو سونار sonar.tests، په کوم کې چې موږ به په واضح ډول د ازموینو سره فولډرې په ګوته کړو (موږ د اوس لپاره یوازې یو لرو):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

راځئ چې سکینر بیا پیل کړو:

yarn run sonar

راځئ وګورو چې په انٹرفیس کې څه بدلون راغلی:

اوس موږ خپل شمیر لیدلی دی واحد- ازمایښتونه او د دننه کلیک کولو سره ناکام شوي، موږ کولی شو د پروژې فایلونو ترمنځ د دې شمیرې ویش وګورو:

پایلې

نو، موږ د دوامداره تحلیل لپاره یوه وسیله وګورله سونار کیوب. موږ په بریالیتوب سره په دې کې لیکل شوې پروژه مدغم کړه VueJs+TS. د مطابقت ځینې مسلې حل کړې. موږ د ازموینې پوښښ شاخص د معلوماتو مینځپانګه زیاته کړه. پدې مقاله کې موږ د کوډ کیفیت معیارونو څخه یوازې یو معاینه کړی (شاید یو له اصلي څخه)، مګر سونار کیوب د نورو کیفیت معیارونو ملاتړ کوي، په شمول د خوندیتوب ازموینې. مګر دا ټولې ځانګړتیاوې په بشپړ ډول شتون نلري د ټولنې د- نسخې. یو له زړه پورې او ګټورو ځانګړتیاو څخه ادغام دی سونار کیوب د مختلف کوډ ذخیره کولو مدیریت سیسټمونو سره، لکه GitLab او BitBucket. د مخنیوي لپاره د یوځای کولو غوښتنهa د ذخیره کولو اصلي څانګې ته کله چې پوښښ خراب شي. مګر دا د بشپړ مختلف مقالې لپاره کیسه ده.

PS: هرڅه چې په مقاله کې تشریح شوي د کوډ په بڼه شتون لري زما فورک.

یوازې راجستر شوي کاروونکي کولی شي په سروې کې برخه واخلي. ننوزئمهرباني وکړئ

ایا تاسو د سونار کیوب پلیټ فارم کاروئ:

• ۸۵٪هو 5

• ۸۵٪نه 3

• ۸۵٪ما د دې پلیټ فارم په اړه اوریدلي او غواړم 3 وکاروم

• ۸۵٪ما د دې پلیټ فارم په اړه اوریدلي او نه غواړم 2 وکاروم

• ۸۵٪زه یو بل پلیټ فارم 0 کاروم

• ۸۵٪د لومړي ځل لپاره ما د هغې په اړه اوریدلي دي 6

19 کاروونکو رایه ورکړه. 3 کاروونکي منع شوي.

سرچینه: www.habr.com