Бид ажилдаа платформыг идэвхтэй ашигладаг SonarQube кодын чанарыг өндөр түвшинд байлгах. Бичсэн төслүүдийн аль нэгийг нэгтгэх үед VueJs+Typescript, асуудал үүссэн. Тиймээс бид тэдгээрийг хэрхэн шийдэж чадсан талаар илүү дэлгэрэнгүй ярихыг хүсч байна.

Энэ нийтлэлд бид дээр бичсэнчлэн SonarQube платформын талаар ярих болно. Бяцхан онол - энэ нь ерөнхийдөө юу вэ, энэ талаар анх удаа сонсож байгаа хүмүүст:

SonarQube (хуучин Сонар) нь тасралтгүй шалгалт, кодын чанарыг хэмжих нээлттэй эхийн платформ юм.
MISRA C, MISRA C++, MITER/CWE болон CERT Secure Coding Standards програмчлалын стандартуудын дүрмийн дагуу кодын шинжилгээ, алдаа илрүүлэхийг дэмждэг. Энэ нь мөн OWASP Top 10 болон CWE/SANS шилдэг 25 програмчлалын алдааны жагсаалтаас алдааг таних боломжтой.
Платформ нь янз бүрийн бэлэн хэрэгслийг ашигладаг хэдий ч SonarQube нь үр дүнг нэг хяналтын самбар болгон бууруулж, гүйлтийн түүхийг хөтөлж, улмаар хөгжүүлэлтийн явцад програм хангамжийн чанарын өөрчлөлтийн ерөнхий хандлагыг харах боломжийг танд олгоно.

Дэлгэрэнгүй мэдээллийг эндээс авах боломжтой албан ёсны вэбсайт

Олон тооны програмчлалын хэлийг дэмждэг. Дээрх линкээс авсан мэдээллээс харахад эдгээр нь 25 гаруй хэл юм. Тодорхой хэлийг дэмжихийн тулд та тохирох залгаасыг суулгах ёстой. Нийгэмлэгийн хувилбар нь ажиллахад зориулсан залгаасыг агуулдаг Javascript (түүнд төрөлсript орно), хэдийгээр вики эсрэгээр бичсэн байдаг. Ард нь Javascript залгаасуудын хариултууд SonarJS, Typescript-д зориулсан SonarTS тус тусдаа.

Албан ёсны үйлчлүүлэгч нь хамрах хүрээний мэдээллийг илгээхэд ашиглагддаг sonarqube-сканнер, аль нь тохиргоог ашиглан config-файл, энэ өгөгдлийг сервер рүү илгээдэг SonarQube цаашид нэгтгэх, нэгтгэх зорилгоор.

Хэрэгтэй Javascript байна npm боодол. Тиймээс алхам алхмаар хэрэгжүүлж эхэлцгээе SonarQube в Vue- төсөл ашиглах Хэвлэлийн загвар.

Серверийг байрлуулахын тулд SonarQube давуу талаа ашиглацгаая 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

Үүнээс хойш SonarQube дараах хаягаар авах боломжтой: http://localhost:9001 .

Одоогоор үүнд ямар ч төсөл байхгүй бөгөөд энэ нь шударга юм. Бид энэ байдлыг засах болно. Би албан ёсны жишээ төслийг авсан VueJS+TS+Jest. Үүнийг өөрсөд рүүгээ нугалъя:

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

Эхлээд бид үйлчлүүлэгчийг суулгах хэрэгтэй SonarQubeгэж нэрлэдэг дууны аппараттөлөө 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 - хаяг Сонар'A;
• sonar.projectKey – сервер дээрх төслийн өвөрмөц танигч Сонар'A;
• sonar.projectName – Төслийг тодорхойлсон тул нэрийг нь хүссэн үедээ өөрчилж болно төслийн түлхүүр;
• sonar.эх сурвалж – эх сурвалжтай хавтас, ихэвчлэн энэ SRC, гэхдээ юу ч байж болно. Энэ хавтас нь сканнерыг эхлүүлсэн хавтас болох үндсэн хавтастай харьцуулахад тохируулагдсан;
• sonar.tests – өмнөхтэй нь таарч тохирох параметр. Энэ бол тестүүд байрладаг хавтас юм. Энэ төсөлд ийм хавтас байхгүй бөгөөд тест нь хавтсанд туршиж буй бүрэлдэхүүн хэсгийн хажууд байрладаг.туршилтын', тиймээс бид үүнийг одоогоор үл тоомсорлож, дараагийн параметрийг ашиглах болно;
• sonar.test.inclusions – маск ашиглан тест хийх зам, таслалаар тусгаарлагдсан хэд хэдэн элемент байж болно;
• 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 нь програмын мэдэгдэл тус бүрийн гүйцэтгэлийн нарийн тоог гаргаж, эх кодод тайлбар нэмэх боломжийг олгодог. 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 нь тухайн төслийн сканнерыг анх удаа ажиллуулахад автоматаар үүсгэгдэнэ. Дараагийн удаад төслийн параметрийн өөрчлөлтийн динамикийг цаг хугацааны явцад харахын тулд мэдээлэл хуримтлагдах болно.

Тиймээс, өмнө нь үүсгэсэн командыг ашиглацгаая багц.json:

yarn run sonar 

Тайлбар: Та мөн параметрийг ашиглаж болно -X илүү нарийвчилсан бүртгэл хийх.

Хэрэв скан хийгчийг анх удаа ажиллуулсан бол эхлээд сканнерын хоёртын файлыг өөрөө татаж авах болно. Үүний дараа серверийг сканнердаж эхэлнэ Сонар'а суулгасан залгаасуудад зориулагдсан бөгөөд ингэснээр дэмжигдсэн хэлийг тооцоолно. Түүний үйл ажиллагааны бусад олон параметрүүдийг мөн ачаалдаг: чанарын профайл, идэвхтэй дүрэм, хэмжүүрийн агуулах, серверийн дүрэм.

Тайлбар: Энэ нийтлэлийн хүрээнд бид тэдгээрийн талаар дэлгэрэнгүй ярихгүй, гэхдээ та албан ёсны эх сурвалжтай үргэлж холбоо барьж болно.

Дараа нь фолдерын шинжилгээ эхэлнэ SRC Бүх (тодорхой нэгийг нь тодорхой заагаагүй бол) дэмжигдсэн хэл, дараа нь тэдгээрийг индексжүүлэх эх файлуудыг ашиглах боломжтой.

Дараа нь бид энэ нийтлэлд анхаарлаа хандуулаагүй бусад янз бүрийн дүн шинжилгээ хийх болно (жишээлбэл, хөндлөвч, кодын давхардлыг илрүүлэх гэх мэт).

Сканнерийн ажлын төгсгөлд цуглуулсан бүх мэдээллийг нэгтгэж, архивлаж, сервер рүү илгээдэг.

Үүний дараа бид вэб интерфэйс дээр юу болсныг аль хэдийн харж болно:

Бидний харж байгаагаар ямар нэг зүйл ажиллаж, бүр зарим төрлийн хамрах хүрээг харуулсан боловч энэ нь биднийхтэй таарахгүй байна байна- тайлан.

Үүнийг олж мэдье. Төслийг илүү нарийвчлан авч үзье, хамрах хүрээний утгыг дарж, нарийвчилсан файлын тайланд "унана".

Энд бид үндсэн шалгаж үзсэн файлаас гадна харж байна HelloWorld.vue, бас файл байна үндсэн.ц, энэ нь хамрах хүрээний зургийг бүхэлд нь сүйтгэдэг. Гэтэл яаж бид хамрах хүрээний тооцооноос хасчихав. Тийм ээ, бүх зүйл зөв, гэхдээ энэ нь түвшинд байсан байна, гэхдээ сканнер үүнийг индексжүүлсэн тул тооцоололдоо дууссан.

Үүнийг засъя:

sonar-project.properties:

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

Би тодруулга хийхийг хүсч байна: энэ параметрт заасан фолдеруудаас гадна параметрт жагсаасан бүх хавтсыг нэмж оруулсан болно. sonar.test.inclusions.

Сканнерыг ажиллуулсны дараа бид зөв мэдээллийг харж байна:

Дараагийн цэгийг харцгаая - Чанарын профайл. Дэмжлэгийн талаар дээр ярьсан Сонарнэгэн зэрэг хэд хэдэн хэл. Энэ бол яг бидний харж байгаа зүйл юм. Гэхдээ бидний төсөл бичигдсэн гэдгийг бид мэднэ TS, тиймээс яагаад шаардлагагүй заль мэх, шалгалтаар сканнерыг чангалах ёстой гэж. Бид тохиргооны файлд өөр нэг параметр нэмэх замаар дүн шинжилгээ хийх хэлийг тохируулах болно Сонар'А:

sonar-project.properties:

...
sonar.language=ts
...

Сканнерыг дахин ажиллуулаад үр дүнг харцгаая:

Хамрах хүрээ бүрэн алга болсон.

Хэрэв бид сканнерын бүртгэлийг харвал дараах мөрийг харж болно.

Өөрөөр хэлбэл, манай төслийн файлууд индексжүүлээгүй байна.

Нөхцөл байдал дараах байдалтай байна: албан ёсоор дэмжигдсэн VueJs залгаас дотор байна SonarJSхэн хариуцах вэ Javascript.

Гэхдээ энэ дэмжлэг нь залгаас дотор байдаггүй 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 нь SonarQube.

Цаашид хамрах хүрээний мэдээллийг бага зэрэг сайжруулахыг хичээцгээе.

Өнөөг хүртэл бидний хийсэн зүйл:

• төсөлд нэмсэн Сонар- сканнер;
• тохируулах байна хамрах хүрээний мэдээллийг бий болгох;
• тохируулсан Сонар- сканнер;
• дэмжлэгийн асуудлыг шийдсэн .vue-файлууд + Хэвлэлийн загвар.

Туршилтын хамрах хүрээнээс гадна кодын чанарын бусад сонирхолтой шалгуурууд байдаг, жишээлбэл, кодын давхардал, төслийн мөрийн тоо (кодын нарийн төвөгтэй байдалтай холбоотой коэффициентийг тооцоолоход оролцдог).

Одоогийн хэрэгжилтэд залгаастай ажиллах боломжтой TS (SonarTS) ажиллахгүй CPD (Хуулбар буулгах илрүүлэгч) болон кодын мөрүүдийг тоолох .vue-файлууд.

Кодын давхардлын синтетик нөхцөл байдлыг бий болгохын тулд бүрэлдэхүүн файлыг өөр нэрээр хуулбарлаж, код руу нэмнэ үү. үндсэн.ц дамми функц болон өөр нэрээр хуулбарлана. Доорх шиг давхардсан эсэхийг шалгахын тулд .vue, ба in .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 нь Jest тайланд дурдсан файлуудыг файл гэж үздэггүй Нэгж- туршилтууд. Энэ байдлыг засахын тулд бид тохиргооны параметрийг ашигладаг Сонар sonar.tests, үүнд бид тест бүхий фолдеруудыг тодорхой зааж өгөх болно (одоохондоо бидэнд зөвхөн нэг л байна):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Сканнерыг дахин эхлүүлье:

yarn run sonar

Интерфейст юу өөрчлөгдсөнийг харцгаая:

Одоо бид өөрсдийнхөө дугаарыг харлаа Нэгж-туршилтууд ба дотор нь дарж амжилтгүй болсон тул төслийн файлуудын дунд энэ дугаарын тархалтыг харж болно.

дүгнэлт

Тиймээс бид тасралтгүй дүн шинжилгээ хийх хэрэгслийг авч үзсэн SonarQube. Бид үүнд бичигдсэн төслийг амжилттай нэгтгэсэн VueJs+TS. Зарим нийцтэй байдлын асуудлыг зассан. Бид тестийн хамрах хүрээний үзүүлэлтийн мэдээллийн агуулгыг нэмэгдүүлсэн. Энэ нийтлэлд бид кодын чанарын шалгууруудын зөвхөн нэгийг (магадгүй гол шалгууруудын нэг) авч үзсэн боловч SonarQube аюулгүй байдлын туршилт зэрэг бусад чанарын шалгуурыг дэмждэг. Гэхдээ эдгээр бүх боломжуудыг бүрэн ашиглах боломжгүй олон нийтийн- хувилбарууд. Сонирхолтой бөгөөд ашигтай шинж чанаруудын нэг нь интеграци юм SonarQube GitLab, BitBucket гэх мэт янз бүрийн кодын агуулахын удирдлагын системтэй. Урьдчилан сэргийлэх нэгтгэх татах(нэтгэх) хүсэлт'a хамрах хүрээ муудсан үед агуулахын үндсэн салбар руу. Гэхдээ энэ бол огт өөр нийтлэлийн түүх юм.

Жич: Нийтлэлд код хэлбэрээр тайлбарласан бүх зүйлийг эндээс авах боломжтой миний сэрээ.

Зөвхөн бүртгэлтэй хэрэглэгчид санал асуулгад оролцох боломжтой. Нэвтрэх, гуйя.

Та SonarQube платформ ашигладаг уу:

• 26,3%Тийм 5

• 15,8%Үгүй 3

• 15,8%Би энэ платформын талаар сонсоод ашиглахыг хүсч байна3

• 10,5%Би энэ платформын талаар сонссон бөгөөд ашиглахыг хүсэхгүй байна2

• 0,0%Би өөр платформ0 ашиглаж байна

• 31,6%Би түүний тухай анх удаа сонсож байна6

19 хэрэглэгч санал өгсөн. 3 хэрэглэгч түдгэлзсэн.

Эх сурвалж: www.habr.com