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

Бул макалада биз жогоруда жазганымдай, SonarQube платформасы жөнүндө сүйлөшөбүз. Бир аз теория - бул эмне, бул жөнүндө биринчи жолу угуп жаткандар үчүн:

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

Кененирээк маалымат бул жерден тапса болот расмий сайты

Көптөгөн программалоо тилдери колдоого алынат. Жогорудагы шилтемеден алынган маалыматка караганда, булар 25тен ашык тил. Белгилүү бир тилди колдоо үчүн, тиешелүү плагинди орнотуу керек. Коомчулуктун версиясында иштөө үчүн плагин бар Javascript (анын ичинде typeсript), бирок вики тескерисин айтат. Артында Javascript плагин жооптору SonarJS, Typescript үчүн SonarTS тиешелүүлүгүнө жараша.

Расмий кардар камтуу маалыматын жөнөтүү үчүн колдонулат sonarqube-сканер, бул, келген орнотууларды колдонуу болбо-файл, бул маалыматты серверге жөнөтөт SonarQube андан ары консолидациялоо жана бириктируу учун.

үчүн Javascript болуп саналат npm орогуч. Ошентип, этап-этабы менен ишке ашырууну баштайлы SonarQube в көрүнүшү- долбоорду колдонуу Typeccript.

Серверди жайгаштыруу үчүн SonarQube пайда көрөлү докер-композитор.

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, кайсынысы аталат сонар-сканерүчүн КЭУБ орогуч бар:

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'A;
• sonar.projectKey – сервердеги уникалдуу долбоордун идентификатору Sonar'A;
• sonar.projectName – анын аталышы, аны каалаган убакта өзгөртүүгө болот, анткени долбоор тарабынан аныкталган projectKey;
• sonar.sources – булактары бар папка, адатта бул СИБ, бирок баары болушу мүмкүн. Бул папка сканер ишке киргизилген папка болгон түпкү папкага салыштырмалуу орнотулган;
• sonar.tests – мурунку менен тандемде бара турган параметр. Бул тесттер жайгашкан папка. Бул долбоордо мындай папка жок жана тест ' папкасында текшерилип жаткан компоненттин жанында жайгашкан.текшерүү', ошондуктан биз буга көңүл бурбайбыз жана кийинки параметрди колдонобуз;
• sonar.test.inclusions – масканы колдонуу менен тесттер үчүн жол, үтүр менен бөлүнгөн бир нече элементтер болушу мүмкүн;
• sonar.sourceEncoding – баштапкы файлдар үчүн коддоо.

Сканерди биринчи ишке киргизүү үчүн бардык нерсе даяр, буга чейинки негизги иш-аракеттерден башкасы: текшерүү кыймылдаткычынын өзүн ишке киргизүү, ал сканер кийин колдоно турган камтуу жөнүндө маалыматты жаратышы үчүн.

Бирок бул үчүн, бул маалыматты түзүү үчүн сыноо кыймылдаткычын конфигурациялашыңыз керек. Бул долбоордо, сыноо кыймылдаткычы болуп саналат жок. Жана анын орнотуулары файлдын тиешелүү бөлүмүндө 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'Кайда мен аны кайдан алсак болот? Ошондуктан, анын конфигурация файлына төмөнкү саптарды кошолу. Бирок бир жагдай бар: долбоорлор көп тилдүү болушу мүмкүн, башкача айтканда, папкада СИБ бир нече программалоо тилдеринин баштапкы коддору жана тигил же бул же тигил менен байланышы бар жана өз кезегинде тигил же бул плагинди колдонуу анын кеңейтилиши менен аныкталат. Жана камтуу маалыматы ар кандай программалоо тилдери үчүн ар кайсы жерлерде сакталышы мүмкүн, андыктан ар бир тилде муну орнотуу үчүн өз бөлүмү бар. Биздин долбоор колдонот Typeccript, ошондуктан бизге жөндөөлөр бөлүмү керек:

sonar-project.properties:

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

Сканердин биринчи ишке киришине баары даяр. Долбоор экенин белгилеп кетким келет Sonar'e белгилүү бир долбоор үчүн сканерди биринчи жолу ишке киргизгениңизде автоматтык түрдө түзүлөт. Кийинки мезгилдерде убакыттын өтүшү менен долбоордун параметрлеринин өзгөрүү динамикасын көрүү үчүн маалымат топтолот.

Ошентип, мурун түзүлгөн команданы колдонолу package.json:

yarn run sonar 

Эскертүү: параметрин да колдоно аласыз -X деталдуу каттоо үчүн.

Эгерде сканер биринчи жолу ишке киргизилген болсо, анда сканердин бинардык өзү биринчи жүктөлөт. Андан кийин ал серверди сканерлеп баштайт Sonar'a орнотулган плагиндер үчүн, ошону менен колдоого алынган тилди эсептөө. Анын иштеши үчүн ар кандай башка параметрлер да жүктөлөт: сапат профилдери, активдүү эрежелер, метрика репозиторийлери, сервер эрежелери.

Эскертүү: Биз бул макаланын алкагында аларга майда-чүйдөсүнө чейин токтолбойбуз, бирок сиз ар дайым расмий булактар ​​менен байланыша аласыз.

Андан кийин, папканы талдоо башталат СИБ бардыгы үчүн баштапкы файлдардын болушу үчүн (эгер конкреттүү бирөө ачык көрсөтүлбөсө) колдоого алынган тил, аларды кийинки индекстөө менен.

Андан кийин биз бул макалада көңүл бурбай турган ар кандай башка анализдер келет (мисалы, линтинг, коддун кайталанышын аныктоо ж.б.).

Сканердин ишинин аягында бардык чогултулган маалыматтар топтолуп, архивделет жана серверге жөнөтүлөт.

Андан кийин, биз веб-интерфейсте эмне болгонун көрө алабыз:

Көрүнүп тургандай, бир нерсе иштеди, ал тургай кандайдыр бир чагылдырууну көрсөтөт, бирок ал биздикиге дал келбейт жок- отчет.

Келгиле, аны аныктап көрөлү. Келгиле, долбоорду кененирээк карап көрөлү, камтуу маанисин чыкылдатыңыз жана деталдуу файл отчетуна "түшүп кетели":

Бул жерде биз негизги, текшерилген файлдан тышкары көрүп жатабыз HelloWorld.vue, ошондой эле файл бар негизги.ц, бул жабуунун бүт картинасын бузат. Бирок кантип биз аны жабуунун эсебинен чыгарып салдык. Ооба, баары туура, бирок өз деңгээлинде болду жок, бирок сканер аны индекстеди, ошондуктан ал өзүнүн эсептөөлөрүндө аяктады.

Муну оңдойлу:

sonar-project.properties:

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

Мен түшүндүрмө бергим келет: бул параметрде көрсөтүлгөн папкалардан тышкары, параметрде көрсөтүлгөн бардык папкалар да кошулат. sonar.test.inclusions.

Сканерди ишке киргизгенден кийин, биз туура маалыматты көрөбүз:

Келгиле, кийинки пунктту карап көрөлү - Сапаттуу профилдер. Мен жогоруда колдоо тууралуу айттым Sonarбир эле учурда бир нече тилде. Бул так биз көрүп жатабыз. Бирок биздин долбоор жазылганын билебиз TS, анда эмне үчүн керексиз манипуляциялар жана текшерүүлөр менен сканерди чыпкалаш керек. Конфигурация файлына дагы бир параметрди кошуу менен талдоо тилин коёбуз Sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

Келгиле, сканерди кайра иштетип, натыйжаны көрөлү:

Камтуу толугу менен жок болду.

Сканер журналын карасак, төмөнкү сапты көрө алабыз:

Башкача айтканда, биздин долбоордун файлдары жөн гана индекстелген эмес.

Жагдай мындай: официалдуу колдоого алынган VueJs плагинде бар SonarJSким жооп берет Javascript.

Бирок бул колдоо плагинде жок SonarTS үчүн TS, бул тууралуу мүчүлүштүктөрдү көзөмөлдөөчүдө расмий билет ачылган Sonar'A:

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

Бул жерде SonarQube иштеп чыгуучуларынын өкүлдөрүнүн биринин жооптору бул чындыкты тастыктайт.

Бирок баары биз үчүн иштеди, каршысыңар. Ооба, бир аз аракет кылып көрөлү "хак".
Колдоо болсо .vue-файлдар Sonar'Ом, анда келгиле, аларга аларды катары кароону айтууга аракет кылалы Typeccript.

Келгиле, параметрди кошолу:

sonar-project.properties:

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

Сканерди ишке киргизели:

Жана, voila, баары кадимки абалына кайтып келди жана бир гана профиль менен Typeccript. Башкача айтканда, колдоо көрсөтүүдө маселени чечүүгө жетиштик VueJs+TS үчүн SonarQube.

Келгиле, андан ары барууга жана камтуу маалыматты бир аз жакшыртууга аракет кылалы.

Биз буга чейин эмне кылдык:

• долбоорго кошулду Sonar-сканер;
• жайгашуу жок камтуу маалыматын түзүү;
• конфигурацияланган Sonar-сканер;
• колдоо маселесин чечти .vue-файлдар + Typeccript.

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

менен иштөө үчүн плагин учурдагы ишке ашырууда TS (SonarTS) иштебейт CPD (Көчүрүү Паста Детектору) жана коддун саптарын эсептөө .vue-файлдар.

Кодду кайталоонун синтетикалык абалын түзүү үчүн жөн гана башка аталыштагы компонент файлын кайталаңыз жана аны кодго кошуңуз негизги.ц жасалма функция жана аны башка ат менен кайталаңыз. Жогорудагыдай кайталоону текшерүү үчүн .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, бул туура деп ойлойм.

Эми мен камтуу маалыматын жакшыртуу вариантын карап көргүм келди.

Азырынча биз бүткүл долбоор үчүн, атап айтканда файлдар үчүн пайыздык мааниде тесттик камтууну көрө алабыз. Бирок бул көрсөткүчтү саны жөнүндө маалымат менен кеңейтүүгө болот бирдиги-долбоор үчүн тесттер, ошондой эле файлдардын контекстинде.

мүмкүн китепкана бар жок- отчетту форматка айландыруу Sonar'A:
жалпы тест маалыматтары - 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'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

Келгиле, интерфейсте эмне өзгөргөнүн карап көрөлү:

Эми биздин саныбызды көрдүк бирдиги-тесттер жана ичин чыкылдатуу менен ийгиликсиз болгондо, биз бул сандын долбоордук файлдар арасында бөлүштүрүлүшүн көрө алабыз:

жыйынтыктоо

Ошентип, биз үзгүлтүксүз талдоо үчүн куралды карап чыктык SonarQube. Биз ага жазылган долбоорду ийгиликтүү киргиздик VueJs+TS. Кээ бир шайкештик маселелери оңдолду. Биз тесттин камтуу көрсөткүчүнүн маалыматтык мазмунун көбөйттүк. Бул макалада биз коддун сапат критерийлеринин бирин гана карап чыктык (балким негизгилеринин бири), бирок SonarQube башка сапат критерийлерин, анын ичинде коопсуздук сыноолорун колдойт. Бирок бул функциялардын бардыгы толугу менен жеткиликтүү эмес коомчулук-версиялар. Кызыктуу жана пайдалуу өзгөчөлүктөрүнүн бири интеграция болуп саналат SonarQube GitLab жана BitBucket сыяктуу ар кандай код репозиторийлерин башкаруу системалары менен. алдын алуу үчүн бириктирүү (бириктирүү) өтүнүчү'а камтуу начарлаганда репозиторийдин негизги тармагына. Бирок бул такыр башка макала үчүн окуя.

PS: Макалада код түрүндө сүрөттөлгөн нерселердин баары бар менин айры.

Сурамжылоого катталган колдонуучулар гана катыша алышат. Кирүү, өтүнөмүн.

Сиз SonarQube платформасын колдоносузбу:

• 26,3%Ооба5

• 15,8%No3

• 15,8%Мен бул платформа жөнүндө уктум жана колдонгум келет3

• 10,5%Мен бул платформа жөнүндө уктум жана колдонгум келбейт2

• 0,0%Мен башка платформа0 колдонуп жатам

• 31,6%Мен ал жөнүндө биринчи жолу угуп жатам6

19 колдонуучу добуш берди. 3 колдонуучу добуш берүүдөн баш тартты.

Source: www.habr.com