VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

எங்கள் வேலையில் நாங்கள் தளத்தை தீவிரமாகப் பயன்படுத்துகிறோம் சோனார் கியூப் குறியீட்டு தரத்தை உயர் மட்டத்தில் பராமரிக்க. எழுதப்பட்ட திட்டங்களில் ஒன்றை ஒருங்கிணைக்கும்போது VueJs+Typescript, பிரச்சினைகள் எழுந்தன. எனவே, அவற்றை நாங்கள் எவ்வாறு தீர்க்க முடிந்தது என்பதை இன்னும் விரிவாகக் கூற விரும்புகிறேன்.

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

இந்த கட்டுரையில், நான் மேலே எழுதியது போல், SonarQube இயங்குதளத்தைப் பற்றி பேசுவோம். ஒரு சிறிய கோட்பாடு - இது பொதுவாக என்ன, அதைப் பற்றி முதல் முறையாகக் கேட்பவர்களுக்கு:

சோனார் கியூப் (முன்னாள் சோனார்) என்பது தொடர்ச்சியான ஆய்வு மற்றும் குறியீட்டு தர அளவீட்டிற்கான ஒரு திறந்த மூல தளமாகும்.
MISRA C, MISRA C++, MITER/CWE மற்றும் CERT செக்யூர் கோடிங் ஸ்டாண்டர்ட்ஸ் புரோகிராமிங் தரநிலைகளின் விதிகளின்படி குறியீடு பகுப்பாய்வு மற்றும் பிழை கண்டறிதலை ஆதரிக்கிறது. இது OWASP Top 10 மற்றும் CWE/SANS டாப் 25 நிரலாக்கப் பிழைகள் பட்டியல்களிலிருந்து பிழைகளை அடையாளம் காண முடியும்.
இயங்குதளம் பல்வேறு ஆயத்த கருவிகளைப் பயன்படுத்தினாலும், SonarQube முடிவுகளை ஒரே டேஷ்போர்டாகக் குறைத்து, ரன்களின் வரலாற்றை வைத்து, அதன் மூலம் வளர்ச்சியின் போது மென்பொருள் தரத்தில் ஏற்படும் பொதுவான மாற்றங்களைப் பார்க்க அனுமதிக்கிறது.

மேலும் விவரங்களைக் காணலாம் அதிகாரப்பூர்வ வலைத்தளம்

அதிக எண்ணிக்கையிலான நிரலாக்க மொழிகள் ஆதரிக்கப்படுகின்றன. மேலே உள்ள இணைப்பில் உள்ள தகவல்களின்படி பார்த்தால், இவை 25க்கும் மேற்பட்ட மொழிகள். ஒரு குறிப்பிட்ட மொழியை ஆதரிக்க, நீங்கள் பொருத்தமான செருகுநிரலை நிறுவ வேண்டும். சமூகப் பதிப்பில் வேலை செய்வதற்கான சொருகி உள்ளது ஜாவா (typesript உட்பட), விக்கி எதிர் கூறினாலும். பின்னால் ஜாவா சொருகி பதில்கள் சோனார்ஜேஎஸ், தட்டச்சுக்கு சோனார்டிஎஸ் முறையே.

கவரேஜ் தகவலை அனுப்ப அதிகாரப்பூர்வ கிளையன்ட் பயன்படுத்தப்படுகிறது sonarqube-ஸ்கேனர், இது, அமைப்புகளைப் பயன்படுத்தி கட்டமைப்பு-file, இந்தத் தரவை சேவையகத்திற்கு அனுப்புகிறது சோனார் கியூப் மேலும் ஒருங்கிணைப்பு மற்றும் ஒருங்கிணைத்தல்.

செய்ய ஜாவா இருக்கிறது npm ரேப்பர். எனவே, படிப்படியாக செயல்படுத்தத் தொடங்குவோம் சோனார் கியூப் в வியு- திட்டம் பயன்படுத்தி தட்டச்சு.

சேவையகத்தை வரிசைப்படுத்த சோனார் கியூப் பயன்படுத்திக் கொள்வோம் கூலியாள்-கம்போஸ்.

சோனார்.யாம்ல்:

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

துவக்கு:

docker-compose -f sonar.yml up

இதற்கு பிறகு சோனார் கியூப் இதில் கிடைக்கும்: http://localhost:9001 .

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்
அதில் இன்னும் திட்டங்கள் எதுவும் இல்லை, அது நியாயமானது. இந்த நிலையை நாங்கள் சரிசெய்வோம். நான் அதிகாரப்பூர்வ உதாரண திட்டத்தை எடுத்தேன் VueJS+TS+Jest. அதை நம்மை நோக்கி வளைப்போம்:

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

முதலில் நாம் கிளையண்டை நிறுவ வேண்டும் சோனார் கியூப்இது அழைக்கப்படுகிறது சோனார் ஸ்கேனர்ஐந்து NPM ஒரு போர்வை உள்ளது:

yarn add sonarqube-scanner

உடனடியாக கட்டளையைச் சேர்க்கவும் ஸ்கிரிப்டுகள் அதனுடன் வேலை செய்ய.

pack.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 - முகவரி சோனார்'ஏ;
  • sonar.projectKey - சேவையகத்தில் தனிப்பட்ட திட்ட அடையாளங்காட்டி சோனார்'ஏ;
  • sonar.projectName - அதன் பெயர், திட்டம் அடையாளம் காணப்பட்டதால், எந்த நேரத்திலும் அதை மாற்றலாம் திட்ட விசை;
  • சோனார்.ஆதாரங்கள் - ஆதாரங்களைக் கொண்ட கோப்புறை, பொதுவாக இது மூல, ஆனால் எதுவும் இருக்கலாம். இந்த கோப்புறை ரூட் கோப்புறையுடன் தொடர்புடையதாக அமைக்கப்பட்டுள்ளது, இது ஸ்கேனர் தொடங்கப்பட்ட கோப்புறையாகும்;
  • சோனார்.சோதனைகள் - முந்தையவற்றுடன் இணைந்து செல்லும் அளவுரு. சோதனைகள் அமைந்துள்ள கோப்புறை இது. இந்த திட்டத்தில், அத்தகைய கோப்புறை இல்லை, மேலும் சோதனையானது 'கோப்புறையில் சோதிக்கப்படும் கூறுக்கு அடுத்ததாக அமைந்துள்ளது.சோதனை', எனவே இப்போதைக்கு அதை புறக்கணித்து அடுத்த அளவுருவைப் பயன்படுத்துவோம்;
  • sonar.test.incllusions - முகமூடியைப் பயன்படுத்தி சோதனைகளுக்கான பாதை, காற்புள்ளிகளால் பிரிக்கப்பட்ட பல கூறுகள் இருக்கலாம்;
  • sonar.sourceEncoding - மூல கோப்புகளுக்கான குறியாக்கம்.

ஸ்கேனரின் முதல் வெளியீட்டிற்கு, முக்கிய முந்தைய செயலைத் தவிர, அனைத்தும் தயாராக உள்ளது: சோதனை இயந்திரத்தையே தொடங்குதல், இதன் மூலம் ஸ்கேனர் பின்னர் பயன்படுத்தும் கவரேஜ் பற்றிய தகவல்களை உருவாக்க முடியும்.

ஆனால் இதைச் செய்ய, இந்தத் தகவலை உருவாக்க நீங்கள் சோதனை இயந்திரத்தை உள்ளமைக்க வேண்டும். இந்த திட்டத்தில், சோதனை இயந்திரம் உள்ளது மகிழ்ச்சியோடும். அதன் அமைப்புகள் கோப்பின் தொடர்புடைய பிரிவில் உள்ளன தொகுப்பு.ஜேசன்.

இந்த அமைப்புகளைச் சேர்ப்போம்:

"collectCoverage": true,
"collectCoverageFrom": [
      "src/**/*",
      "!src/main.ts",
      "!src/App.vue",
      "!src/**/*.d.*",
      "!src/**/*__tests__*"
],

அதாவது, கவரேஜ் மற்றும் மூலத்தை (விதிவிலக்குகளுடன்) கணக்கிட வேண்டிய அவசியத்திற்காக கொடியை அமைக்கிறோம், அதன் அடிப்படையில் அது உருவாகும்.

இப்போது சோதனையை இயக்குவோம்:

yarn test

பின்வருவனவற்றைக் காண்போம்:

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

காரணம் கூறுவிலேயே குறியீடு இல்லை. இதை சரி செய்வோம்.

HelloWorld.vue:

...
methods: {
    calc(n) {
      return n + 1;
    }
  },
mounted() {
  this.msg1 = this.msg + this.calc(1);
},
...

கவரேஜைக் கணக்கிட இது போதுமானதாக இருக்கும்.

சோதனையை மறுதொடக்கம் செய்த பிறகு, இதை உறுதி செய்வோம்:

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

திரையில் நாம் கவரேஜ் பற்றிய தகவலைப் பார்க்க வேண்டும், மேலும் திட்ட கோப்புறையில் ஒரு கோப்புறை உருவாக்கப்படும் கவரேஜ் உலகளாவிய வடிவத்தில் சோதனை கவரேஜ் தகவலுடன் LCOV (LTP GCOV நீட்டிப்பு).

Gcov குறியீடு கவரேஜை ஆராய்வதற்காக இலவசமாக விநியோகிக்கப்படும் பயன்பாடாகும். Gcov ஒரு நிரலில் உள்ள ஒவ்வொரு அறிக்கைக்கும் சரியான எண்ணிக்கையிலான செயல்படுத்தல்களை உருவாக்குகிறது மற்றும் மூலக் குறியீட்டில் சிறுகுறிப்புகளைச் சேர்க்க உங்களை அனுமதிக்கிறது. Gcov GCC தொகுப்பின் ஒரு பகுதியாக நிலையான பயன்பாடாக வருகிறது.
Lcov - gcov க்கான வரைகலை இடைமுகம். இது பல மூல கோப்புகளுக்கான gcov கோப்புகளை ஒருங்கிணைக்கிறது மற்றும் குறியீடு மற்றும் கவரேஜ் தகவலுடன் கூடிய HTML பக்கங்களின் தொகுப்பை உருவாக்குகிறது. வழிசெலுத்தலை எளிதாக்க பக்கங்களும் உருவாக்கப்படுகின்றன. Lcov சரங்கள், செயல்பாடுகள் மற்றும் கிளைகளின் கவரேஜை ஆதரிக்கிறது.

சோதனைகள் முடிந்த பிறகு, கவரேஜ் தகவல் இருக்கும் கவரேஜ்/lcov.info.
நாம் சொல்ல வேண்டும் சோனார்'எங்கிருந்து பெறுவது? எனவே, அதன் கட்டமைப்பு கோப்பில் பின்வரும் வரிகளைச் சேர்ப்போம். ஆனால் ஒரு புள்ளி உள்ளது: திட்டங்கள் பன்மொழி இருக்க முடியும், அதாவது, கோப்புறையில் மூல பல நிரலாக்க மொழிகளுக்கான மூலக் குறியீடுகள் உள்ளன மற்றும் ஒன்று அல்லது மற்றொன்றுடன் இணைந்துள்ளன, இதையொட்டி, ஒன்று அல்லது மற்றொரு செருகுநிரலின் பயன்பாடு அதன் நீட்டிப்பால் தீர்மானிக்கப்படுகிறது. கவரேஜ் தகவல்களை வெவ்வேறு நிரலாக்க மொழிகளுக்கு வெவ்வேறு இடங்களில் சேமிக்க முடியும், எனவே ஒவ்வொரு மொழிக்கும் இதை அமைப்பதற்கு அதன் சொந்த பிரிவு உள்ளது. எங்கள் திட்டம் பயன்படுத்துகிறது தட்டச்சு, எனவே அதற்கான அமைப்புகள் பிரிவு நமக்குத் தேவை:

சொனார்-திட்டம்.பண்புகள்:

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

ஸ்கேனரின் முதல் வெளியீட்டிற்கு எல்லாம் தயாராக உள்ளது. திட்டம் என்பதை நான் கவனிக்க விரும்புகிறேன் சோனார்கொடுக்கப்பட்ட திட்டத்திற்கான ஸ்கேனரை நீங்கள் முதல் முறையாக இயக்கும் போது e தானாகவே உருவாக்கப்படும். அடுத்தடுத்த காலங்களில், காலப்போக்கில் திட்ட அளவுருக்களில் ஏற்படும் மாற்றங்களின் இயக்கவியலைக் காண தகவல் திரட்டப்படும்.

எனவே, முன்பு உருவாக்கப்பட்ட கட்டளையைப் பயன்படுத்துவோம் தொகுப்பு.ஜேசன்:

yarn run sonar 

குறிப்பு: நீங்கள் அளவுருவையும் பயன்படுத்தலாம் -X மேலும் விரிவான பதிவுக்கு.

ஸ்கேனர் முதல் முறையாக தொடங்கப்பட்டிருந்தால், ஸ்கேனரின் பைனரி முதலில் பதிவிறக்கம் செய்யப்படும். அதன் பிறகு அது தொடங்கி சேவையகத்தை ஸ்கேன் செய்யத் தொடங்குகிறது சோனார்நிறுவப்பட்ட செருகுநிரல்களுக்கான 'a, அதன் மூலம் ஆதரிக்கப்படும் மொழியைக் கணக்கிடுகிறது. அதன் செயல்பாட்டிற்கான பல்வேறு அளவுருக்கள் ஏற்றப்பட்டுள்ளன: தர சுயவிவரங்கள், செயலில் உள்ள விதிகள், அளவீடுகள் களஞ்சியம், சர்வர் விதிகள்.

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

குறிப்பு: இந்த கட்டுரையின் கட்டமைப்பிற்குள் நாங்கள் அவற்றைப் பற்றி விரிவாகப் பேச மாட்டோம், ஆனால் நீங்கள் எப்போதும் அதிகாரப்பூர்வ ஆதாரங்களைத் தொடர்பு கொள்ளலாம்.

அடுத்து, கோப்புறை பகுப்பாய்வு தொடங்குகிறது மூல அனைத்திற்கும் ஆதாரக் கோப்புகள் கிடைப்பதற்கு (குறிப்பிட்ட ஒன்று வெளிப்படையாகக் குறிப்பிடப்படவில்லை என்றால்) ஆதரிக்கப்படும் மொழி, அவற்றின் அடுத்தடுத்த அட்டவணைப்படுத்தல்.

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

இந்த கட்டுரையில் நாம் கவனம் செலுத்தாத பல்வேறு பகுப்பாய்வுகள் அடுத்து வருகின்றன (உதாரணமாக, லின்டிங், குறியீடு நகல் கண்டறிதல் போன்றவை).

ஸ்கேனரின் பணியின் முடிவில், சேகரிக்கப்பட்ட அனைத்து தகவல்களும் ஒருங்கிணைக்கப்பட்டு, காப்பகப்படுத்தப்பட்டு சேவையகத்திற்கு அனுப்பப்படும்.

இதற்குப் பிறகு, இணைய இடைமுகத்தில் என்ன நடந்தது என்பதை நாம் ஏற்கனவே பார்க்கலாம்:

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

நாம் பார்க்க முடியும் என, ஏதோ வேலை செய்தது, மற்றும் சில வகையான கவரேஜ்களைக் காட்டுகிறது, ஆனால் அது நம்முடையதுடன் பொருந்தவில்லை மகிழ்ச்சியோடும்-அறிக்கை.

அதை கண்டுபிடிக்கலாம். திட்டத்தை இன்னும் விரிவாகப் பார்ப்போம், கவரேஜ் மதிப்பைக் கிளிக் செய்து, விரிவான கோப்பு அறிக்கையை "வீழ்ந்து விடுங்கள்":

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

பிரதான, பரிசோதிக்கப்பட்ட கோப்பைத் தவிர, இங்கே நாம் பார்க்கிறோம் HelloWorld.vue, ஒரு கோப்பும் உள்ளது முக்கிய.ts, இது கவரேஜ் முழு படத்தையும் கெடுத்துவிடும். ஆனால் கவரேஜ் கணக்கீட்டில் இருந்து அதை எப்படி விலக்கினோம். ஆம், எல்லாம் சரியாக உள்ளது, ஆனால் அது மட்டத்தில் இருந்தது மகிழ்ச்சியோடும், ஆனால் ஸ்கேனர் அதை அட்டவணைப்படுத்தியது, எனவே அது அதன் கணக்கீடுகளில் முடிந்தது.

இதை சரிசெய்வோம்:

சொனார்-திட்டம்.பண்புகள்:

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

நான் ஒரு தெளிவுபடுத்த விரும்புகிறேன்: இந்த அளவுருவில் குறிப்பிடப்பட்டுள்ள கோப்புறைகளுக்கு கூடுதலாக, அளவுருவில் பட்டியலிடப்பட்டுள்ள அனைத்து கோப்புறைகளும் சேர்க்கப்பட்டுள்ளன. sonar.test.incllusions.

ஸ்கேனரைத் தொடங்கிய பிறகு, சரியான தகவலைப் பார்க்கிறோம்:

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

அடுத்த விஷயத்தைப் பார்ப்போம் - தரமான சுயவிவரங்கள். நான் ஆதரவு பற்றி மேலே பேசினேன் சோனார்ஒரே நேரத்தில் பல மொழிகள். இதைத்தான் நாம் பார்க்கிறோம். ஆனால் எங்கள் திட்டம் எழுதப்பட்டுள்ளது என்பதை நாங்கள் அறிவோம் TS, ஏன் தேவையற்ற கையாளுதல்கள் மற்றும் காசோலைகள் மூலம் ஸ்கேனரை கஷ்டப்படுத்த வேண்டும். உள்ளமைவு கோப்பில் மேலும் ஒரு அளவுருவைச் சேர்ப்பதன் மூலம் பகுப்பாய்வுக்கான மொழியை அமைப்போம் சோனார்'ஏ:

சொனார்-திட்டம்.பண்புகள்:

...
sonar.language=ts
...

ஸ்கேனரை மீண்டும் இயக்கி முடிவைப் பார்ப்போம்:

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

கவரேஜ் முற்றிலும் போய்விட்டது.

ஸ்கேனர் பதிவைப் பார்த்தால், பின்வரும் வரியைக் காணலாம்:

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

அதாவது, எங்கள் திட்டக் கோப்புகள் வெறுமனே அட்டவணைப்படுத்தப்படவில்லை.

நிலைமை பின்வருமாறு: அதிகாரப்பூர்வமாக ஆதரிக்கப்படுகிறது VueJs செருகுநிரலில் உள்ளது சோனார்ஜேஎஸ்யார் பொறுப்பு ஜாவா.

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

ஆனால் இந்த ஆதரவு செருகுநிரலில் இல்லை சோனார்டிஎஸ் செய்ய TS, பிழை டிராக்கரில் அதிகாரப்பூர்வ டிக்கெட் திறக்கப்பட்டது சோனார்'ஏ:

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

இந்த உண்மையை உறுதிப்படுத்தும் வகையில், SonarQube டெவலப்பர்களின் பிரதிநிதிகளில் ஒருவரிடமிருந்து சில பதில்கள் இங்கே உள்ளன.

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

ஆனால் எல்லாம் எங்களுக்கு வேலை செய்தது, நீங்கள் எதிர்க்கிறீர்கள். ஆம், கொஞ்சம் முயற்சிப்போம் "ஊடுருவு".
ஆதரவு இருந்தால் .vue- கோப்புகள் சோனார்'ஓ, அப்படியானால் அவற்றைக் கருத்தில் கொள்ளுமாறு அவரிடம் சொல்ல முயற்சிப்போம் தட்டச்சு.

ஒரு அளவுருவைச் சேர்ப்போம்:

சொனார்-திட்டம்.பண்புகள்:

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

ஸ்கேனரைத் தொடங்குவோம்:

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

மேலும், voila, எல்லாம் இயல்பு நிலைக்குத் திரும்பியது, மேலும் ஒரு சுயவிவரத்துடன் மட்டுமே தட்டச்சு. அதாவது, நாங்கள் ஆதரவாக சிக்கலை தீர்க்க முடிந்தது VueJs+TS செய்ய சோனார் கியூப்.

மேலும் சென்று கவரேஜ் தகவலை கொஞ்சம் மேம்படுத்த முயற்சிப்போம்.

நாங்கள் இதுவரை செய்தவை:

  • திட்டத்தில் சேர்க்கப்பட்டது சோனார்- ஸ்கேனர்;
  • அமைக்க மகிழ்ச்சியோடும் கவரேஜ் தகவலை உருவாக்க;
  • கட்டமைக்கப்பட்டது சோனார்- ஸ்கேனர்;
  • решили проблему поддержки .vue-கோப்புகள் + தட்டச்சு.

சோதனைக் கவரேஜுடன் கூடுதலாக, குறியீட்டின் தரத்திற்கான பிற சுவாரஸ்யமான பயனுள்ள அளவுகோல்கள் உள்ளன, எடுத்துக்காட்டாக, குறியீட்டு நகல் மற்றும் திட்டத்தின் கோடுகளின் எண்ணிக்கை (குறியீடு சிக்கலானது தொடர்பான குணகங்களின் கணக்கீட்டில் ஈடுபட்டுள்ளது).

வேலை செய்வதற்கான சொருகி தற்போதைய செயல்படுத்தலில் TS (சோனார்டிஎஸ்) இயங்காது CPD (காப்பி பேஸ்ட் டிடெக்டர்) மற்றும் குறியீட்டின் வரிகளை எண்ணுதல் .vue- கோப்புகள்.

குறியீட்டு நகலெடுப்பின் செயற்கை சூழ்நிலையை உருவாக்க, கூறு கோப்பை வேறு பெயரில் நகலெடுத்து குறியீட்டில் சேர்க்கவும் முக்கிய.ts ஒரு போலி செயல்பாடு மற்றும் அதை வேறு பெயருடன் நகலெடுக்கவும். உள்ளபடி நகல் உள்ளதா எனச் சரிபார்க்க .vue, மற்றும் உள்ளே .ts - கோப்புகள்.

main.ts:

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

இதைச் செய்ய, உள்ளமைவு வரியை நீங்கள் தற்காலிகமாக கருத்து தெரிவிக்க வேண்டும்:

சொனார்-திட்டம்.பண்புகள்:

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

சோதனையுடன் ஸ்கேனரை மறுதொடக்கம் செய்வோம்:

yarn test && yarn run sonar

நிச்சயமாக, எங்கள் கவரேஜ் குறையும், ஆனால் இப்போது நாங்கள் அதில் ஆர்வம் காட்டவில்லை.

குறியீட்டின் நகல் வரிகளின் அடிப்படையில், நாம் பார்ப்போம்:

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

சரிபார்க்க, நாங்கள் பயன்படுத்துவோம் சிபிடி-பயன்பாடு - jscpd:

npx jscpd src

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

குறியீட்டு வரிகளுக்கு:

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

ஒருவேளை இது எதிர்கால செருகுநிரல் பதிப்புகளில் தீர்க்கப்படும் SonarJS(TS). அவர்கள் படிப்படியாக இந்த இரண்டு செருகுநிரல்களையும் ஒன்றாக இணைக்கத் தொடங்குகிறார்கள் என்பதை நான் கவனிக்க விரும்புகிறேன் சோனார்ஜேஎஸ், இது சரியானது என்று நான் நினைக்கிறேன்.

இப்போது கவரேஜ் தகவலை மேம்படுத்துவதற்கான விருப்பத்தை நான் பரிசீலிக்க விரும்பினேன்.

இதுவரை, முழு திட்டத்திற்கும், குறிப்பாக கோப்புகளுக்கும் சதவீத அடிப்படையில் சோதனைக் கவரேஜைக் காணலாம். ஆனால் அளவு பற்றிய தகவலுடன் இந்த காட்டி விரிவாக்க முடியும் அலகுதிட்டத்திற்கான சோதனைகள், அத்துடன் கோப்புகளின் சூழலில்.

முடியும் நூலகம் உள்ளது மகிழ்ச்சியோடும்அறிக்கையை வடிவமைப்பிற்கு மாற்றவும் சோனார்'ஏ:
பொதுவான சோதனை தரவு - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

எங்கள் திட்டத்தில் இந்த நூலகத்தை நிறுவுவோம்:

yarn add jest-sonar-reporter

மற்றும் அதை உள்ளமைவில் சேர்க்கவும் மகிழ்ச்சியோடும்:

pack.json:

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

இப்போது சோதனையை இயக்குவோம்:

yarn test

அதன் பிறகு திட்டத்தின் மூலத்தில் ஒரு கோப்பு உருவாக்கப்படும் test-report.xml.

அதை கட்டமைப்பில் பயன்படுத்துவோம் சோனார்'ஏ:

சொனார்-திட்டம்.பண்புகள்:

…
sonar.testExecutionReportPaths=test-report.xml
…

ஸ்கேனரை மறுதொடக்கம் செய்யுங்கள்:

yarn run sonar

இடைமுகத்தில் என்ன மாறிவிட்டது என்று பார்ப்போம் சோனார்'ஏ:

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

மேலும் எதுவும் மாறவில்லை. ஜெஸ்ட் அறிக்கையில் விவரிக்கப்பட்டுள்ள கோப்புகளை சோனார் கோப்புகளாகக் கருதவில்லை என்பதே உண்மை அலகு- சோதனைகள். இந்த சூழ்நிலையை சரிசெய்ய, நாங்கள் உள்ளமைவு அளவுருவைப் பயன்படுத்துகிறோம் சோனார் சோனார்.சோதனைகள், இதில் நாம் சோதனைகளுடன் கூடிய கோப்புறைகளை வெளிப்படையாகக் குறிப்பிடுவோம் (இப்போது எங்களிடம் ஒன்று மட்டுமே உள்ளது):

சொனார்-திட்டம்.பண்புகள்:

…
sonar.tests=src/components/__tests__
…

ஸ்கேனரை மறுதொடக்கம் செய்வோம்:

yarn run sonar

இடைமுகத்தில் என்ன மாறிவிட்டது என்று பார்ப்போம்:

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

இப்போது எங்கள் எண்ணிக்கையைப் பார்த்தோம் அலகு-சோதனைகள் மற்றும், உள்ளே கிளிக் செய்வதன் மூலம் தோல்வியடைந்ததால், திட்டக் கோப்புகளில் இந்த எண்ணின் விநியோகத்தைக் காணலாம்:

VueJS+TS திட்டத்தை SonarQube உடன் ஒருங்கிணைத்தல்

முடிவுக்கு

எனவே, தொடர்ச்சியான பகுப்பாய்வுக்கான ஒரு கருவியைப் பார்த்தோம் சோனார் கியூப். அதில் எழுதப்பட்ட ஒரு திட்டத்தை வெற்றிகரமாக ஒருங்கிணைத்துள்ளோம் VueJs+TS. சில பொருந்தக்கூடிய சிக்கல்கள் சரி செய்யப்பட்டன. சோதனை கவரேஜ் குறிகாட்டியின் தகவல் உள்ளடக்கத்தை அதிகரித்துள்ளோம். இந்த கட்டுரையில் குறியீடு தர அளவுகோல்களில் ஒன்றை மட்டுமே நாங்கள் ஆய்வு செய்தோம் (ஒருவேளை முக்கிய ஒன்று), ஆனால் சோனார் கியூப் பாதுகாப்பு சோதனை உட்பட பிற தர அளவுகோல்களை ஆதரிக்கிறது. ஆனால் இந்த அம்சங்கள் அனைத்தும் முழுமையாக கிடைக்கவில்லை சமூகம்- பதிப்புகள். சுவாரஸ்யமான மற்றும் பயனுள்ள அம்சங்களில் ஒன்று ஒருங்கிணைப்பு சோனார் கியூப் 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

கருத்தைச் சேர்