Біз өз жұмысымызда платформаны белсенді түрде қолданамыз SonarQube код сапасын жоғары деңгейде ұстау. Жазылған жобалардың бірін біріктіру кезінде VueJs+Typescript, проблемалар туындады. Сондықтан мен оларды қалай шешкенімізді толығырақ айтып өткім келеді.

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

SonarQube (бұрынғы Сонар) үздіксіз тексеруге және код сапасын өлшеуге арналған ашық бастапқы платформа болып табылады.
MISRA C, MISRA C++, MITER/CWE және CERT Secure Coding Standards бағдарламалау стандарттарының ережелеріне сәйкес кодты талдауды және қателерді анықтауды қолдайды. Ол сондай-ақ OWASP Top 10 және CWE/SANS Top 25 бағдарламалау қателерінің тізімдеріндегі қателерді тани алады.
Платформаның әртүрлі дайын құралдарды пайдаланғанына қарамастан, SonarQube нәтижелерді бір бақылау тақтасына дейін азайтады, орындалу тарихын сақтайды және осылайша әзірлеу кезінде бағдарламалық жасақтама сапасының өзгеруінің жалпы тенденциясын көруге мүмкіндік береді.

Толық ақпаратты мына жерден табуға болады ресми сайт

Бағдарламалау тілдерінің үлкен санына қолдау көрсетіледі. Жоғарыдағы сілтемедегі ақпаратқа қарағанда, бұл 25-тен астам тіл. Белгілі бір тілді қолдау үшін сәйкес плагинді орнату керек. Қауымдастық нұсқасында жұмыс істеуге арналған плагин бар Javascript (соның ішінде typeсript), дегенмен вики керісінше. Артында Javascript плагин жауаптары SonarJS, Typescript үшін SonarTS тиісінше.

Ресми клиент қамту туралы ақпаратты жіберу үшін пайдаланылады sonarqube-сканер, оның параметрлерін пайдаланып config-файл, бұл деректерді серверге жібереді SonarQube одан әрі шоғырландыру және біріктіру үшін.

үшін Javascript болып табылады npm орауыш. Сонымен, кезең-кезеңімен жүзеге асыруды бастайық SonarQube в Vue- жобаны қолдану Мәтін жазу.

Серверді орналастыру үшін 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, деп аталады сонар-сканер, үшін 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.sources – көздері бар қалта, әдетте бұл 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 толығырақ тіркеу үшін.

Егер сканер бірінші рет іске қосылса, алдымен сканердің екілік нұсқасы жүктеледі. Осыдан кейін ол серверді сканерлеуді бастайды және бастайды Сонар'a орнатылған плагиндер үшін, осылайша қолдау көрсетілетін тілді есептейді. Оның жұмысына арналған басқа да әртүрлі параметрлер жүктеледі: сапа профильдері, белсенді ережелер, метрика репозиторийі, сервер ережелері.

Ескертпе: Біз осы мақаланың аясында оларға егжей-тегжейлі тоқталмаймыз, бірақ сіз әрқашан ресми дереккөздерге хабарласа аласыз.

Содан кейін қалтаны талдау басталады SRC Бастапқы файлдардың барлығына (егер нақтысы нақты көрсетілмесе) қолдау көрсетілетін тілге қол жетімділігі үшін, оларды кейіннен индекстеу.

Одан кейін біз осы мақалада назар аудармайтын әртүрлі басқа талдаулар келеді (мысалы, линтинг, кодтың қайталануын анықтау және т.б.).

Сканер жұмысының соңында барлық жиналған ақпарат жинақталады, мұрағатталады және серверге жіберіледі.

Осыдан кейін біз веб-интерфейсте не болғанын көре аламыз:

Көріп отырғанымыздай, бірдеңе жұмыс істеді, тіпті қандай да бір қамтуды көрсетеді, бірақ ол біздікіне сәйкес келмейді Ия-есеп.

Оны анықтап көрейік. Жобаны толығырақ қарастырайық, қамту мәнін басыңыз және егжей-тегжейлі файл есебіне «өтіңіз»:

Мұнда біз негізгі тексерілген файлдан басқа көреміз HelloWorld.vue, сонымен қатар файл бар негізгі.ц, бұл қамтудың бүкіл бейнесін бұзады. Бірақ біз оны қамту есебінен қалай алып тастадық. Иә, бәрі дұрыс, бірақ өз деңгейінде болды Ия, бірақ сканер оны индекстеген, сондықтан ол өз есептеулерінде аяқталды.

Мұны түзетейік:

sonar-project.properties:

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

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

Сканерді іске қосқаннан кейін біз дұрыс ақпаратты көреміз:

Келесі тармақты қарастырайық - Сапалы профильдер. Мен жоғарыда қолдау туралы айттым Сонар'бір уақытта бірнеше тілде. Дәл осыны көріп отырмыз. Бірақ біз жобамыздың жазылғанын білеміз TS, сондықтан сканерді қажетсіз манипуляциялар мен тексерулермен не үшін қажет етеді. Конфигурация файлына тағы бір параметрді қосу арқылы талдау тілін орнатамыз Сонар'A:

sonar-project.properties:

...
sonar.language=ts
...

Сканерді қайта іске қосып, нәтижені көрейік:

Қамту толығымен жойылды.

Егер сканер журналына қарасақ, келесі жолды көре аламыз:

Яғни, біздің жоба файлдары жай ғана индекстелмеген.

Жағдай келесідей: ресми түрде қолдау көрсетіледі VueJs плагинде бар SonarJSкімге жауапты Javascript.

Бірақ бұл қолдау плагинде жоқ SonarTS үшін TS, ол туралы қате трекерде ресми билет ашылды Сонар'A:

Міне, осы фактіні растайтын SonarQube әзірлеушілерінің өкілдерінің бірінің жауаптары.

Бірақ бәрі біз үшін жұмыс істеді, сіз қарсысыз. Иә, солай, аздап сынап көрейік «бұзу».
Қолдау болса .vue-файлдар Сонар'Ой, онда оған оларды деп санауды айтайық Мәтін жазу.

Параметрді қосамыз:

sonar-project.properties:

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

Сканерді іске қосайық:

Және, вуила, бәрі қалыпты жағдайға оралды және тек бір профиль үшін Мәтін жазу. Яғни, қолдау көрсетуде мәселені шеше алдық VueJs+TS үшін SonarQube.

Әрі қарай жүріп, қамту туралы ақпаратты аздап жақсартуға тырысайық.

Осы уақытқа дейін не істедік:

жобаға қосылды Сонар- сканер;
орнату Ия қамту туралы ақпаратты қалыптастыру;
конфигурацияланған Сонар- сканер;
қолдау мәселесін шешті .vue-файлдар + Мәтін жазу.

Сынақ қамтуынан басқа, код сапасының басқа да қызықты пайдалы критерийлері бар, мысалы, кодты қайталау және жобаның жолдар саны (кодтың күрделілігіне байланысты коэффициенттерді есептеуге қатысты).

Ағымдағы іске асыруда плагинмен жұмыс істеуге арналған TS (SonarTS) жұмыс істемейді CPD (Көшіру қою детекторы) және код жолдарын санау .vue-файлдар.

Кодты қайталаудың синтетикалық жағдайын жасау үшін жай ғана басқа атаумен құрамдас файлды көшіріңіз және оны кодқа қосыңыз. негізгі.ц жалған функция және оны басқа атпен көшіріңіз. Төмендегідей қайталануды тексеру үшін .vue, және .тс -файлдар.

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, бұл дұрыс деп ойлаймын.

Енді мен қамту туралы ақпаратты жақсарту нұсқасын қарастырғым келді.

Әзірге біз бүкіл жоба үшін, атап айтқанда файлдар үшін пайыздық қатынаста сынақ қамтуын көре аламыз. Бірақ бұл көрсеткішті саны туралы ақпаратпен кеңейтуге болады бірлік-жобаға арналған тесттер, сонымен қатар файлдар контекстінде.

Мүмкін болатын кітапхана бар Ия-есепті форматқа түрлендіру Сонар'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.

Оны конфигурацияда қолданайық Сонар'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Және сканерді қайта іске қосыңыз:

yarn run sonar

Интерфейсте не өзгергенін көрейік Сонар'A:

Және ештеңе өзгерген жоқ. Өйткені, Sonar Jest есебінде сипатталған файлдарды файлдар ретінде қарастырмайды бірлік-тесттер. Бұл жағдайды түзету үшін біз конфигурация параметрін қолданамыз Сонар sonar.tests, онда біз сынақтары бар қалталарды нақты көрсететін боламыз (әзірше бізде тек біреуі бар):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Сканерді қайта іске қосайық:

yarn run sonar

Интерфейсте не өзгергенін көрейік:

Енді біз өзіміздің нөмірімізді көрдік бірлік-тесттер және ішке басу арқылы сәтсіздікке ұшыраған кезде, біз бұл санның жоба файлдары арасында таралуын көре аламыз:

қорытынды

Сонымен, біз үздіксіз талдау құралын қарастырдық SonarQube. Біз оған жазылған жобаны сәтті біріктірдік VueJs+TS. Кейбір үйлесімділік мәселелері түзетілді. Біз тестілеуді қамту көрсеткішінің ақпараттық мазмұнын арттырдық. Бұл мақалада біз код сапасы критерийлерінің біреуін ғана қарастырдық (мүмкін негізгілерінің бірі), бірақ SonarQube басқа сапа критерийлерін, соның ішінде қауіпсіздік сынақтарын қолдайды. Бірақ бұл мүмкіндіктердің барлығы толығымен қол жетімді емес қауым-нұсқалар. Қызықты және пайдалы мүмкіндіктердің бірі - интеграция SonarQube GitLab және BitBucket сияқты әртүрлі код репозиторийлерін басқару жүйелерімен. Алдын алу біріктіру (біріктіру) сұрауы'a қамту нашарлаған кезде репозиторийдің негізгі тармағына. Бірақ бұл мүлдем басқа мақалаға арналған әңгіме.

PS: Мақалада код түрінде сипатталғанның бәрі қол жетімді менің шанышқым.

Сауалнамаға тек тіркелген пайдаланушылар қатыса алады. Кіру, өтінемін.

SonarQube платформасын пайдаланасыз ба:

26,3%Иә5
15,8%№3
15,8%Мен бұл платформа туралы естідім және пайдаланғым келеді3
10,5%Мен бұл платформа туралы естідім және пайдаланғым келмейді2
0,0%Мен басқа платформа0 пайдаланамын
31,6%Мен ол туралы бірінші рет естідім6

19 пайдаланушы дауыс берді. 3 пайдаланушы қалыс қалды.

Ақпарат көзі: www.habr.com

VueJS+TS жобасын SonarQube бағдарламасымен біріктіру

қорытынды

SonarQube платформасын пайдаланасыз ба:

пікір қалдыру Жауапты болдырмау