ჩვენ აქტიურად ვიყენებთ პლატფორმას ჩვენს საქმიანობაში soundQube კოდის ხარისხის მაღალ დონეზე შენარჩუნება. დაწერილი ერთ-ერთი პროექტის ინტეგრირებისას VueJs+Typescript, პრობლემები წარმოიშვა. ამიტომ, უფრო დეტალურად მინდა გითხრათ, როგორ მოვახერხეთ მათი მოგვარება.

ამ სტატიაში ვისაუბრებთ, როგორც ზემოთ დავწერე, SonarQube პლატფორმაზე. პატარა თეორია - რა არის ზოგადად, მათთვის, ვინც პირველად ესმის ამის შესახებ:

soundQube (ყოფილი სონარი) არის ღია კოდის პლატფორმა უწყვეტი შემოწმებისა და კოდის ხარისხის გაზომვისთვის.
მხარს უჭერს კოდის ანალიზს და შეცდომების გამოვლენას MISRA C, MISRA C++, MITER/CWE და CERT Secure Coding Standards პროგრამირების სტანდარტების წესების მიხედვით. მას ასევე შეუძლია შეცდომების ამოცნობა OWASP ტოპ 10 და CWE/SANS პროგრამირების ტოპ 25 შეცდომების სიიდან.
იმისდა მიუხედავად, რომ პლატფორმა იყენებს სხვადასხვა მზა ინსტრუმენტებს, SonarQube ამცირებს შედეგებს ერთ დაფაზე, ინახავს გაშვების ისტორიას და ამით საშუალებას გაძლევთ ნახოთ პროგრამული უზრუნველყოფის ხარისხის ცვლილებების ზოგადი ტენდენცია განვითარების დროს.

დამატებითი დეტალები შეგიძლიათ იხილოთ აქ ოფიციალურ საიტზე

პროგრამირების ენების დიდი რაოდენობა მხარდაჭერილია. ვიმსჯელებთ ზემოთ მოცემული ბმულიდან მიღებული ინფორმაციის მიხედვით, ეს არის 25-ზე მეტი ენა. კონკრეტული ენის მხარდასაჭერად, თქვენ უნდა დააინსტალიროთ შესაბამისი დანამატი. საზოგადოების ვერსია მოიცავს დანამატს სამუშაოდ Javascript (მათ შორის typeсript), თუმცა ვიკი საპირისპიროს ამბობს. უკან Javascript მოდულის პასუხები SonarJS, Typescript-ისთვის SonarTS შესაბამისად.

ოფიციალური კლიენტი გამოიყენება დაფარვის ინფორმაციის გასაგზავნად sonarqube-სკანერი, რომელიც, პარამეტრების გამოყენებით config-ფაილი, აგზავნის ამ მონაცემებს სერვერზე soundQube შემდგომი კონსოლიდაციისა და აგრეგაციისთვის.

იყიდება Javascript არსებობს npm შეფუთვა. ასე რომ, დავიწყოთ ეტაპობრივი განხორციელება soundQube в Vue-პროექტის გამოყენებით ტიპაჟი.

სერვერის განსათავსებლად soundQube ვისარგებლოთ დოკერი-კომპოზიცია.

სონარი.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.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 - მისამართი სონარი'A;
• sonar.projectKey - უნიკალური პროექტის იდენტიფიკატორი სერვერზე სონარი'A;
• sonar.projectName – მისი სახელი, ის შეიძლება შეიცვალოს ნებისმიერ დროს, ვინაიდან პროექტი იდენტიფიცირებულია პროექტის გასაღები;
• სონარი.წყაროები – საქაღალდე წყაროებით, ჩვეულებრივ ეს src, მაგრამ შეიძლება იყოს ყველაფერი. ეს საქაღალდე დაყენებულია root საქაღალდესთან შედარებით, რომელიც არის საქაღალდე, საიდანაც სკანერი გაშვებულია;
• სონარი.ტესტები - პარამეტრი, რომელიც მიდის წინა პარამეტრთან. ეს არის საქაღალდე, სადაც ტესტებია განთავსებული. ამ პროექტში ასეთი საქაღალდე არ არსებობს და ტესტი მდებარეობს საქაღალდეში შესამოწმებელი კომპონენტის გვერდით.ტესტი', ასე რომ, ჩვენ ამ დროისთვის უგულებელყოფთ და გამოვიყენებთ შემდეგ პარამეტრს;
• სონარი.ტესტი.ჩანართები – ნიღბის გამოყენებით ტესტების გზა, შეიძლება იყოს რამდენიმე ელემენტი, რომლებიც გამოყოფილია მძიმეებით;
• sonar.sourceEncoding - კოდირება წყარო ფაილებისთვის.

სკანერის პირველი გაშვებისთვის ყველაფერი მზად არის, გარდა მთავარი წინა მოქმედებისა: თავად სატესტო ძრავის გაშვება, რათა მან შეძლოს ინფორმაციის გენერირება დაფარვის შესახებ, რომელსაც სკანერი შემდგომ გამოიყენებს.

მაგრამ ამისათვის თქვენ უნდა დააკონფიგურიროთ სატესტო ძრავა ამ ინფორმაციის გენერირებისთვის. ამ პროექტში სატესტო ძრავაა არ არის. და მისი პარამეტრები არის ფაილის შესაბამის განყოფილებაში პაკეტი.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 მოდის როგორც სტანდარტული პროგრამა, როგორც GCC პაკეტის ნაწილი.
ლკოვ - გრაფიკული ინტერფეისი gcov-სთვის. ის აგროვებს gcov ფაილებს მრავალი წყაროს ფაილებისთვის და აწარმოებს HTML გვერდების ერთობლიობას კოდით და დაფარვის ინფორმაციით. გვერდები ასევე იქმნება ნავიგაციის გასაადვილებლად. Lcov მხარს უჭერს სტრიქონების, ფუნქციების და ტოტების დაფარვას.

ტესტების დასრულების შემდეგ, დაფარვის ინფორმაცია განთავსდება გაშუქება/lcov.info.
უნდა ვთქვათ სონარი'საიდან შემიძლია მისი მიღება? ამიტომ, მოდით დავამატოთ შემდეგი სტრიქონები მის კონფიგურაციის ფაილში. მაგრამ არის ერთი წერტილი: პროექტები შეიძლება იყოს მრავალენოვანი, ანუ საქაღალდეში src არსებობს რამდენიმე პროგრამირების ენის წყაროს კოდი და ამა თუ იმ ენებთან კუთვნილება და თავის მხრივ, ამა თუ იმ მოდულის გამოყენება განისაზღვრება მისი გაფართოებით. და დაფარვის შესახებ ინფორმაციის შენახვა შესაძლებელია სხვადასხვა ადგილას სხვადასხვა პროგრამირების ენებისთვის, ამიტომ თითოეულ ენას აქვს საკუთარი განყოფილება ამის დასაყენებლად. ჩვენი პროექტი იყენებს ტიპაჟიასე რომ, ჩვენ გვჭირდება პარამეტრების განყოფილება მხოლოდ ამისთვის:

სონარ-პროექტი.თვისებები:

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

ყველაფერი მზად არის სკანერის პირველი გაშვებისთვის. მინდა აღვნიშნო, რომ პროექტი არის სონარი'e იქმნება ავტომატურად, როდესაც პირველად აწარმოებთ სკანერს მოცემული პროექტისთვის. შემდგომში ინფორმაცია დაგროვდება, რათა დროთა განმავლობაში დაინახოს პროექტის პარამეტრების ცვლილებების დინამიკა.

მაშ ასე, გამოვიყენოთ ადრე შექმნილი ბრძანება პაკეტი.json:

yarn run sonar 

შენიშვნა: თქვენ ასევე შეგიძლიათ გამოიყენოთ პარამეტრი -X უფრო დეტალური შესვლისთვის.

თუ სკანერი პირველად ამოქმედდა, მაშინ პირველ რიგში ჩამოიტვირთება თავად სკანერის ბინარი. ამის შემდეგ ის იწყება და იწყებს სერვერის სკანირებას სონარიდაინსტალირებული დანამატებისთვის, რითაც გამოითვლება მხარდაჭერილი ენა. ასევე დატვირთულია მისი მუშაობის სხვადასხვა პარამეტრი: ხარისხის პროფილები, აქტიური წესები, მეტრიკის საცავი, სერვერის წესები.

შენიშვნა: ჩვენ მათზე დეტალურად არ ვისაუბრებთ ამ სტატიის ფარგლებში, მაგრამ ყოველთვის შეგიძლიათ დაუკავშირდეთ ოფიციალურ წყაროებს.

შემდეგი, იწყება საქაღალდის ანალიზი src წყაროს ფაილების ხელმისაწვდომობისთვის ყველა მხარდაჭერილი ენისთვის (თუ კონკრეტულად არ არის მითითებული), მათი შემდგომი ინდექსირებით.

შემდეგ მოდის სხვადასხვა სხვა ანალიზები, რომლებზეც ამ სტატიაში ყურადღებას არ ვამახვილებთ (მაგალითად, ლინტინგი, კოდის დუბლირების გამოვლენა და ა.შ.).

სკანერის მუშაობის ბოლოს, ყველა შეგროვებული ინფორმაცია გროვდება, არქივდება და იგზავნება სერვერზე.

ამის შემდეგ ჩვენ უკვე ვხედავთ რა მოხდა ვებ ინტერფეისში:

როგორც ვხედავთ, რაღაც მუშაობდა და რაღაც გაშუქებასაც კი აჩვენებს, მაგრამ ეს არ ემთხვევა ჩვენსას არ არის- მოხსენება.

მოდი გავარკვიოთ. მოდით შევხედოთ პროექტს უფრო დეტალურად, დააწკაპუნეთ დაფარვის მნიშვნელობაზე და „გადავართოთ“ ფაილის დეტალურ ანგარიშში:

აქ ჩვენ ვხედავთ, გარდა ძირითადი, განხილული ფაილისა HelloWorld.vue, არის ფაილიც მთავარი.ც, რაც აფუჭებს გაშუქების მთელ სურათს. მაგრამ როგორ გამოვრიცხეთ ეს დაფარვის გაანგარიშებიდან. დიახ, ყველაფერი სწორია, მაგრამ ეს იყო დონეზე არ არის, მაგრამ სკანერმა მოახდინა მისი ინდექსირება, ასე რომ, იგი დასრულდა მის გამოთვლებში.

გამოვასწოროთ ეს:

სონარ-პროექტი.თვისებები:

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

მინდა დავაზუსტო: ამ პარამეტრში მითითებული საქაღალდეების გარდა, პარამეტრში ჩამოთვლილი ყველა საქაღალდეც ემატება. სონარი.ტესტი.ჩანართები.

სკანერის გაშვების შემდეგ ჩვენ ვხედავთ სწორ ინფორმაციას:

მოდით გადავხედოთ შემდეგ პუნქტს - ხარისხის პროფილები. ზემოთ ვისაუბრე მხარდაჭერაზე სონარირამდენიმე ენაზე ერთდროულად. ეს არის ზუსტად ის, რასაც ჩვენ ვხედავთ. მაგრამ ჩვენ ვიცით, რომ ჩვენი პროექტი დაწერილია TSრატომ დაძაბეთ სკანერი არასაჭირო მანიპულაციებითა და შემოწმებებით. ჩვენ დავაყენებთ ანალიზის ენას კონფიგურაციის ფაილში კიდევ ერთი პარამეტრის დამატებით სონარი'A:

სონარ-პროექტი.თვისებები:

...
sonar.language=ts
...

მოდით კვლავ გავუშვათ სკანერი და ვნახოთ შედეგი:

გაშუქება მთლიანად გაქრა.

თუ გადავხედავთ სკანერის ჟურნალს, ვხედავთ შემდეგ ხაზს:

ანუ, ჩვენი პროექტის ფაილები უბრალოდ არ იყო ინდექსირებული.

სიტუაცია ასეთია: ოფიციალურად მხარდაჭერილი VueJs არის დანამატში SonarJSვინც პასუხისმგებელია Javascript.

მაგრამ ეს მხარდაჭერა არ არის დანამატში SonarTS ამისთვის TS, რომლის შესახებაც ოფიციალური ბილეთი გაიხსნა bug tracker-ში სონარი'A:

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

აქ არის რამდენიმე პასუხი SonarQube დეველოპერების ერთ-ერთი წარმომადგენლისგან, რომელიც ადასტურებს ამ ფაქტს.

მაგრამ ჩვენთან ყველაფერი მუშაობდა, თქვენ წინააღმდეგი ხართ. დიახ, ეს არის, მოდით, ცოტათი ვცადოთ "გატეხვა".
თუ არის მხარდაჭერა .ვუ- ფაილები სონარი”ოჰ, მაშინ მოდით ვცდილობთ ვუთხრათ მას, რომ განიხილოს ისინი ტიპაჟი.

მოდით დავამატოთ პარამეტრი:

სონარ-პროექტი.თვისებები:

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

მოდით გავუშვათ სკანერი:

და, ვოილა, ყველაფერი ნორმალურად დაბრუნდა და მხოლოდ ერთი პროფილით ტიპაჟი. ანუ მხარდაჭერით მოვახერხეთ პრობლემის მოგვარება VueJs + TS ამისთვის soundQube.

შევეცადოთ უფრო შორს წავიდეთ და ცოტა გავაუმჯობესოთ დაფარვის ინფორმაცია.

რაც აქამდე გავაკეთეთ:

• პროექტს დაემატა სონარი-სკანერი;
• აწყობა არ არის დაფარვის ინფორმაციის გენერირება;
• კონფიგურირებული სონარი-სკანერი;
• გადაჭრა მხარდაჭერის პრობლემა .ვუ-ფაილები + ტიპაჟი.

ტესტის გაშუქების გარდა, არსებობს სხვა საინტერესო სასარგებლო კრიტერიუმები კოდის ხარისხისთვის, მაგალითად, კოდის დუბლირება და ხაზების რაოდენობა (ჩართული კოდექსის სირთულესთან დაკავშირებული კოეფიციენტების გამოთვლაში).

მოდულის მიმდინარე განხორციელებაში მუშაობისთვის TS (SonarTS) არ იმუშავებს CPD (Copy Paste Detector) და ითვლის კოდის ხაზებს .ვუ- ფაილები.

კოდის დუბლირების სინთეზური სიტუაციის შესაქმნელად, უბრალოდ დააკოპირეთ კომპონენტის ფაილი სხვა სახელით და ასევე დაამატეთ იგი კოდში მთავარი.ც dummy ფუნქცია და დუბლიკატი სხვა სახელით. დუბლირების შესამოწმებლად, როგორც ეს .ვუ, და .წ - ფაილები.

main.ts:

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

ამისათვის საჭიროა დროებით კომენტარი გააკეთოთ კონფიგურაციის ხაზზე:

სონარ-პროექტი.თვისებები:

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

მოდით გადატვირთოთ სკანერი ტესტირებასთან ერთად:

yarn test && yarn run sonar

რა თქმა უნდა, ჩვენი გაშუქება დაეცემა, მაგრამ ახლა ეს არ გვაინტერესებს.

კოდის ხაზების დუბლირების თვალსაზრისით, ჩვენ ვნახავთ:

შესამოწმებლად გამოვიყენებთ CPD- სასარგებლო - jscpd:

npx jscpd src

კოდის ხაზებისთვის:

შესაძლოა, ეს მოგვარდეს მოდულის მომავალ ვერსიებში SonarJS (TS). მინდა აღვნიშნო, რომ ისინი თანდათან იწყებენ ამ ორი მოდულის ერთში გაერთიანებას SonarJS, რაც ჩემი აზრით სწორია.

ახლა მინდოდა განვიხილო დაფარვის ინფორმაციის გაუმჯობესების ვარიანტი.

ჯერჯერობით ჩვენ შეგვიძლია ვნახოთ ტესტის გაშუქება პროცენტული თვალსაზრისით მთელი პროექტისთვის და კერძოდ ფაილებისთვის. მაგრამ ამ ინდიკატორის გაფართოება შესაძლებელია რაოდენობის შესახებ ინფორმაციით ერთეულის-ტესტები პროექტისთვის, ასევე ფაილების კონტექსტში.

არის ბიბლიოთეკა, რომელსაც შეუძლია არ არის- მოხსენების ფორმატში გადაყვანა სონარი'A:
ზოგადი ტესტის მონაცემები - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

მოდით დავაყენოთ ეს ბიბლიოთეკა ჩვენს პროექტში:

yarn add jest-sonar-reporter

და დაამატეთ იგი კონფიგურაციაში არ არის:

package.json:

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

ახლა ჩავატაროთ ტესტი:

yarn test

რის შემდეგაც შეიქმნება ფაილი პროექტის root-ში test-report.xml.

მოდით გამოვიყენოთ იგი კონფიგურაციაში სონარი'A:

სონარ-პროექტი.თვისებები:

…
sonar.testExecutionReportPaths=test-report.xml
…

და გადატვირთეთ სკანერი:

yarn run sonar

ვნახოთ, რა შეიცვალა ინტერფეისში სონარი'A:

და არაფერი შეცვლილა. ფაქტია, რომ Sonar არ განიხილავს Jest ანგარიშში აღწერილ ფაილებს ფაილებად ერთეულის- ტესტები. ამ სიტუაციის გამოსასწორებლად, ჩვენ ვიყენებთ კონფიგურაციის პარამეტრს სონარი სონარი.ტესტები, რომელშიც ცალსახად მივუთითებთ საქაღალდეებს ტესტებით (ამჟამად მხოლოდ ერთი გვაქვს):

სონარ-პროექტი.თვისებები:

…
sonar.tests=src/components/__tests__
…

მოდით გადატვირთოთ სკანერი:

yarn run sonar

ვნახოთ, რა შეიცვალა ინტერფეისში:

ახლა ჩვენ ვნახეთ ჩვენი რიცხვი ერთეულის-ტესტები და, შიგ დაწკაპუნებით ჩავარდნის შემდეგ, ჩვენ შეგვიძლია დავინახოთ ამ რიცხვის განაწილება პროექტის ფაილებს შორის:

დასკვნა

ასე რომ, ჩვენ შევხედეთ უწყვეტი ანალიზის ინსტრუმენტს soundQube. ჩვენ წარმატებით ჩავრთეთ მასში დაწერილი პროექტი VueJs + TS. დაფიქსირდა თავსებადობის ზოგიერთი პრობლემა. ჩვენ გავზარდეთ ტესტის დაფარვის ინდიკატორის საინფორმაციო შინაარსი. ამ სტატიაში ჩვენ განვიხილეთ კოდის ხარისხის მხოლოდ ერთი კრიტერიუმი (შესაძლოა ერთ-ერთი მთავარი), მაგრამ soundQube მხარს უჭერს ხარისხის სხვა კრიტერიუმებს, მათ შორის უსაფრთხოების ტესტირებას. მაგრამ ყველა ეს ფუნქცია სრულად არ არის ხელმისაწვდომი საზოგადოების- ვერსიები. ერთ-ერთი საინტერესო და სასარგებლო ფუნქციაა ინტეგრაცია soundQube სხვადასხვა კოდის საცავის მართვის სისტემებით, როგორიცაა GitLab და BitBucket. Თავიდან ასაცილებლად შერწყმის pull (შერწყმის) მოთხოვნა'a საცავის მთავარ ფილიალში, როდესაც დაფარვა დეგრადირებულია. მაგრამ ეს არის ამბავი სრულიად განსხვავებული სტატიისთვის.

PS: ყველაფერი, რაც სტატიაში აღწერილია კოდის სახით, ხელმისაწვდომია ჩემი ჩანგალი.

გამოკითხვაში მონაწილეობა შეუძლიათ მხოლოდ დარეგისტრირებულ მომხმარებლებს. Შებრძანდითგთხოვთ

იყენებთ თუ არა SonarQube პლატფორმას:

• 26,3%დიახ 5

• 15,8%No3

• 15,8%გავიგე ამ პლატფორმის შესახებ და მინდა გამოვიყენო3

• 10,5%მე მსმენია ამ პლატფორმის შესახებ და არ მინდა გამოვიყენო2

• 0,0%მე ვიყენებ სხვა პლატფორმას0

• 31,6%პირველად გავიგე მის შესახებ6

მისცა ხმა 19 მომხმარებელმა. 3 მომხმარებელმა თავი შეიკავა.

წყარო: www.habr.com