ما به طور فعال از پلت فرم در کار خود استفاده می کنیم soundQube برای حفظ کیفیت کد در سطح بالا. هنگام ادغام یکی از پروژه های نوشته شده در VueJs+Typescript، مشکلاتی به وجود آمد. بنابراین، من می خواهم با جزئیات بیشتری به شما بگویم که چگونه توانستیم آنها را حل کنیم.

در این مقاله همانطور که در بالا نوشتم در مورد پلتفرم SonarQube صحبت خواهیم کرد. یک نظریه کوچک - به طور کلی چیست، برای کسانی که برای اولین بار در مورد آن می شنوند:

soundQube (سابق هر چیزیکه صدا میکند) یک پلت فرم منبع باز برای بازرسی مداوم و اندازه گیری کیفیت کد است.
پشتیبانی از تجزیه و تحلیل کد و تشخیص خطا طبق قوانین استانداردهای برنامه نویسی MISRA C، MISRA C++، MITER/CWE و CERT Secure Coding Standards. همچنین می تواند خطاها را از لیست خطاهای برنامه نویسی برتر 10 و CWE/SANS تشخیص دهد.
علیرغم این واقعیت که این پلتفرم از ابزارهای آماده مختلفی استفاده می کند، SonarQube نتایج را به یک داشبورد کاهش می دهد و تاریخچه ای از اجراها را حفظ می کند و در نتیجه به شما امکان می دهد روند کلی تغییرات کیفیت نرم افزار را در طول توسعه مشاهده کنید.

جزئیات بیشتر را می توان در یافت سایت رسمی

تعداد زیادی از زبان های برنامه نویسی پشتیبانی می شوند. با قضاوت بر اساس اطلاعات لینک بالا، اینها بیش از 25 زبان هستند. برای پشتیبانی از یک زبان خاص، باید افزونه مناسب را نصب کنید. نسخه انجمن شامل یک افزونه برای کار با جاوا اسکریپت (از جمله typeсript)، اگرچه ویکی خلاف این را می گوید. پشت جاوا اسکریپت پاسخ های افزونه SonarJS، برای تایپ اسکریپت SonarTS بود.

مشتری رسمی برای ارسال اطلاعات پوشش استفاده می شود سونارقوب-اسکنر، که با استفاده از تنظیمات از پیکربندی-file، این داده ها را به سرور ارسال می کند soundQube برای تجمیع و تجمیع بیشتر

برای جاوا اسکریپت وجود دارد بسته بندی npm. بنابراین، اجازه دهید اجرای گام به گام را آغاز کنیم soundQube в VUE-استفاده از پروژه حروفچینی.

برای استقرار سرور soundQube بیایید استفاده کنیم کامیون.

sonar.yaml:

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

راه اندازی:

docker-compose -f sonar.yml up

بعد از آن soundQube در دسترس خواهد بود در: http://localhost:9001 .

هنوز هیچ پروژه ای در آن وجود ندارد و این عادلانه است. ما این وضعیت را اصلاح خواهیم کرد. من پروژه نمونه رسمی را برای VueJS+TS+Jest. بیایید آن را به سمت خودمان خم کنیم:

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

ابتدا باید کلاینت را نصب کنیم soundQube، که نامیده می شود سونار-اسکنربرای 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.projectName - نام آن، می توان آن را در هر زمان تغییر داد، زیرا پروژه توسط شناسایی می شود پروژه کلید;
• sonar.sources – پوشه با منابع، معمولاً این "، اما می تواند هر چیزی باشد. این پوشه نسبت به پوشه ریشه تنظیم شده است، که پوشه ای است که اسکنر از آن راه اندازی می شود.
• سونار.تست ها - پارامتری که با پارامتر قبلی همراه است. این پوشه ای است که تست ها در آن قرار دارند. در این پروژه چنین پوشه ای وجود ندارد و تست در کنار مؤلفه در حال آزمایش در پوشه قرار دارد.آزمون'، بنابراین فعلاً آن را نادیده می گیریم و از پارامتر بعدی استفاده می کنیم.
• sonar.test.inclusions - مسیر آزمایش‌ها با استفاده از ماسک، ممکن است چندین عنصر وجود داشته باشد که با کاما از هم جدا شده‌اند.
• sonar.sourceEncoding - رمزگذاری برای فایل های منبع

برای اولین راه اندازی اسکنر، همه چیز آماده است، به جز اقدام اصلی قبلی: راه اندازی خود موتور آزمایشی، به طوری که بتواند اطلاعاتی در مورد پوشش تولید کند، که اسکنر متعاقباً از آن استفاده خواهد کرد.

اما برای انجام این کار، باید موتور تست را برای تولید این اطلاعات پیکربندی کنید. در این پروژه موتور تست می باشد جادوگری. و تنظیمات آن در قسمت مربوطه فایل می باشد pack.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 به طور خودکار ایجاد می شود. در زمان های بعدی، اطلاعات به منظور مشاهده پویایی تغییرات در پارامترهای پروژه در طول زمان انباشته می شود.

بنابراین، بیایید از دستوری که قبلا ایجاد شده است استفاده کنیم pack.json:

yarn run sonar 

توجه: شما همچنین می توانید از پارامتر استفاده کنید -X برای ثبت جزئیات بیشتر

اگر اسکنر برای اولین بار راه اندازی شد، ابتدا باینری خود اسکنر دانلود می شود. پس از آن شروع می شود و شروع به اسکن سرور می کند هر چیزیکه صدا میکندبرای پلاگین های نصب شده، در نتیجه زبان پشتیبانی شده محاسبه می شود. پارامترهای مختلف دیگر برای عملکرد آن نیز بارگیری می شود: پروفایل های کیفیت، قوانین فعال، مخزن معیارها، قوانین سرور.

توجه: ما در چارچوب این مقاله به جزئیات آنها نمی پردازیم، اما همیشه می توانید با منابع رسمی تماس بگیرید.

سپس، تجزیه و تحلیل پوشه آغاز می شود " برای در دسترس بودن فایل‌های منبع برای همه زبان‌های پشتیبانی شده (اگر یک مورد خاص به صراحت مشخص نشده باشد)، همراه با فهرست‌بندی بعدی.

در مرحله بعد، تحلیل‌های مختلف دیگری قرار می‌گیرند که در این مقاله روی آنها تمرکز نمی‌کنیم (مثلاً، تشخیص تکرار کد، و غیره).

در پایان کار اسکنر، تمام اطلاعات جمع آوری شده جمع آوری، بایگانی شده و به سرور ارسال می شود.

پس از این، ما قبلاً می توانیم آنچه را که در رابط وب رخ داده است مشاهده کنیم:

همانطور که می بینیم، چیزی کار کرد، و حتی نوعی پوشش را نشان می دهد، اما با ما مطابقت ندارد جادوگری-گزارش.

بیایید آن را بفهمیم. بیایید پروژه را با جزئیات بیشتری بررسی کنیم، روی مقدار پوشش کلیک کنید، و در یک گزارش پرونده مفصل "افت کنید":

در اینجا علاوه بر فایل اصلی بررسی شده می بینیم HelloWorld.vue، یک فایل نیز وجود دارد main.ts، که کل تصویر پوشش را خراب می کند. اما چگونه آن را از محاسبه پوشش حذف کردیم. بله، همه چیز درست است، اما در سطح بود جادوگری، اما اسکنر آن را نمایه کرد، بنابراین در محاسبات خود قرار گرفت.

بیایید این را درست کنیم:

sonar-project.properties:

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

من می خواهم یک توضیح بدهم: علاوه بر پوشه هایی که در این پارامتر مشخص شده است، تمام پوشه های لیست شده در پارامتر نیز اضافه می شوند. sonar.test.inclusions.

پس از راه اندازی اسکنر، اطلاعات صحیح را مشاهده می کنیم:

بیایید به نکته بعدی نگاه کنیم - پروفایل های با کیفیت. من در بالا در مورد پشتیبانی صحبت کردم هر چیزیکه صدا میکنداز چندین زبان به طور همزمان. این دقیقاً همان چیزی است که ما می بینیم. اما ما می دانیم که پروژه ما در نوشته شده است TS، پس چرا اسکنر را با دستکاری ها و بررسی های غیر ضروری فشار دهید. با افزودن یک پارامتر دیگر به فایل پیکربندی، زبان را برای آنالیز تنظیم می کنیم هر چیزیکه صدا میکند'آ:

sonar-project.properties:

...
sonar.language=ts
...

بیایید دوباره اسکنر را اجرا کنیم و نتیجه را ببینیم:

پوشش کاملاً از بین رفته بود.

اگر به گزارش اسکنر نگاه کنیم، خط زیر را می بینیم:

یعنی فایل های پروژه ما به سادگی ایندکس نشدند.

وضعیت به شرح زیر است: به طور رسمی پشتیبانی می شود VueJs در افزونه است SonarJSکه مسئول است جاوا اسکریپت.

اما این پشتیبانی در افزونه نیست SonarTS برای TS، که در مورد آن یک بلیط رسمی در ردیاب اشکال باز شد هر چیزیکه صدا میکند'آ:

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

در اینجا برخی از پاسخ های یکی از نمایندگان توسعه دهندگان SonarQube وجود دارد که این واقعیت را تأیید می کند.

اما همه چیز برای ما کار کرد، شما اعتراض می کنید. بله همینطور است، بیایید کمی آن را امتحان کنیم "هک".
اگر حمایت وجود داشته باشد vue-فایل ها هر چیزیکه صدا میکنداوه، پس بیایید سعی کنیم به او بگوییم که آنها را در نظر بگیرد حروفچینی.

بیایید یک پارامتر اضافه کنیم:

sonar-project.properties:

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

بیایید اسکنر را راه اندازی کنیم:

و، voila، همه چیز به حالت عادی بازگشته است، و تنها با یک نمایه برای حروفچینی. یعنی در پشتیبانی موفق شدیم مشکل را حل کنیم VueJs+TS برای soundQube.

بیایید سعی کنیم بیشتر پیش برویم و اطلاعات پوشش را کمی بهبود ببخشیم.

کارهایی که تاکنون انجام داده ایم:

• به پروژه اضافه شد هر چیزیکه صدا میکند-اسکنر؛
• برپایی جادوگری برای تولید اطلاعات پوشش؛
• پیکربندی شده است هر چیزیکه صدا میکند-اسکنر؛
• مشکل پشتیبانی حل شد vue-فایل + حروفچینی.

علاوه بر پوشش تست، معیارهای مفید دیگری نیز برای کیفیت کد وجود دارد، به عنوان مثال، تکرار کد و تعداد خطوط (درگیر در محاسبه ضرایب مربوط به پیچیدگی کد) پروژه.

در اجرای فعلی افزونه برای کار با 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، که به نظر من درست است.

اکنون می‌خواهم گزینه بهبود اطلاعات پوشش را در نظر بگیرم.

تاکنون می‌توانیم پوشش آزمایشی را بر حسب درصد برای کل پروژه و به‌ویژه برای فایل‌ها ببینیم. اما می توان این شاخص را با اطلاعات مربوط به کمیت گسترش داد واحد-تست های پروژه و همچنین در زمینه فایل ها.

یک کتابخانه وجود دارد که می تواند جادوگری-تبدیل گزارش به فرمت برای هر چیزیکه صدا میکند'آ:
داده های آزمایش عمومی - 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-project.properties:

…
sonar.tests=src/components/__tests__
…

بیایید اسکنر را دوباره راه اندازی کنیم:

yarn run sonar

بیایید ببینیم چه چیزی در رابط کاربری تغییر کرده است:

حالا تعداد ما را دیدیم واحد-تست می شود و در صورت عدم موفقیت با کلیک کردن در داخل، می توانیم توزیع این عدد را در بین فایل های پروژه مشاهده کنیم:

نتیجه

بنابراین، ما به ابزاری برای تحلیل مستمر نگاه کردیم soundQube. ما با موفقیت یک پروژه نوشته شده در آن را ادغام کردیم VueJs+TS. رفع برخی از مشکلات سازگاری. ما محتوای اطلاعاتی شاخص پوشش آزمون را افزایش دادیم. در این مقاله تنها یکی از معیارهای کیفیت کد (شاید یکی از اصلی ترین آنها) را بررسی کردیم، اما soundQube سایر معیارهای کیفیت از جمله تست ایمنی را پشتیبانی می کند. اما همه این ویژگی ها به طور کامل در دسترس نیستند انجمن-نسخه ها یکی از ویژگی های جالب و مفید یکپارچه سازی است soundQube با سیستم های مدیریت مخزن کد مختلف، مانند GitLab و BitBucket. برای جلوگیری از درخواست ادغام کشش (ادغام).'a به شاخه اصلی مخزن زمانی که پوشش کاهش می یابد. اما این داستان برای یک مقاله کاملا متفاوت است.

PS: هر آنچه در مقاله به صورت کد توضیح داده شده است در دسترس است چنگال من.

فقط کاربران ثبت نام شده می توانند در نظرسنجی شرکت کنند. ورود، لطفا.

آیا از پلتفرم SonarQube استفاده می کنید:

• ٪۱۰۰بله 5

• ٪۱۰۰شماره 3

• ٪۱۰۰من در مورد این پلت فرم شنیدم و می خواهم از آن استفاده کنم

• ٪۱۰۰من در مورد این پلتفرم شنیده ام و نمی خواهم از آن استفاده کنم

• ٪۱۰۰من از یک platform0 متفاوت استفاده می کنم

• ٪۱۰۰اولین بار است که در مورد او می شنوم 6

19 کاربر رای دادند. 3 کاربر رای ممتنع دادند.

منبع: www.habr.com