ഞങ്ങളുടെ ജോലിയിൽ ഞങ്ങൾ പ്ലാറ്റ്ഫോം സജീവമായി ഉപയോഗിക്കുന്നു സോനാർക്യൂബ് ഉയർന്ന തലത്തിൽ കോഡ് ഗുണനിലവാരം നിലനിർത്താൻ. എഴുതിയിരിക്കുന്ന പ്രോജക്ടുകളിലൊന്ന് സംയോജിപ്പിക്കുമ്പോൾ VueJs+ ടൈപ്പ്സ്ക്രിപ്റ്റ്, പ്രശ്നങ്ങൾ ഉയർന്നു. അതിനാൽ, അവ എങ്ങനെ പരിഹരിക്കാൻ ഞങ്ങൾക്ക് കഴിഞ്ഞുവെന്ന് കൂടുതൽ വിശദമായി പറയാൻ ഞാൻ ആഗ്രഹിക്കുന്നു.

ഈ ലേഖനത്തിൽ, ഞാൻ മുകളിൽ എഴുതിയതുപോലെ, സോനാർക്യൂബ് പ്ലാറ്റ്‌ഫോമിനെക്കുറിച്ച് ഞങ്ങൾ സംസാരിക്കും. ഒരു ചെറിയ സിദ്ധാന്തം - ഇത് പൊതുവെ എന്താണ്, അതിനെക്കുറിച്ച് ആദ്യമായി കേൾക്കുന്നവർക്ക്:

സോനാർക്യൂബ് (മുൻ സോനാർ) തുടർച്ചയായ പരിശോധനയ്ക്കും കോഡ് ഗുണനിലവാരം അളക്കുന്നതിനുമുള്ള ഒരു ഓപ്പൺ സോഴ്‌സ് പ്ലാറ്റ്‌ഫോമാണ്.
MISRA C, MISRA C++, MITER/CWE, CERT സെക്യൂർ കോഡിംഗ് സ്റ്റാൻഡേർഡ് പ്രോഗ്രാമിംഗ് സ്റ്റാൻഡേർഡുകൾ എന്നിവയുടെ നിയമങ്ങൾക്കനുസൃതമായി കോഡ് വിശകലനവും പിശക് കണ്ടെത്തലും പിന്തുണയ്ക്കുന്നു. ഇതിന് OWASP ടോപ്പ് 10, CWE/SANS ടോപ്പ് 25 പ്രോഗ്രാമിംഗ് പിശകുകളുടെ ലിസ്റ്റുകളിൽ നിന്നുള്ള പിശകുകൾ തിരിച്ചറിയാനും കഴിയും.
പ്ലാറ്റ്‌ഫോം വിവിധ റെഡിമെയ്‌ഡ് ടൂളുകൾ ഉപയോഗിക്കുന്നുണ്ടെങ്കിലും, സോണാർക്യൂബ് ഫലങ്ങൾ ഒരൊറ്റ ഡാഷ്‌ബോർഡിലേക്ക് ചുരുക്കുന്നു, റണ്ണുകളുടെ ചരിത്രം സൂക്ഷിക്കുകയും അതുവഴി വികസന സമയത്ത് സോഫ്റ്റ്‌വെയർ ഗുണനിലവാരത്തിലെ മാറ്റങ്ങളുടെ പൊതുവായ പ്രവണത കാണാൻ നിങ്ങളെ അനുവദിക്കുകയും ചെയ്യുന്നു.

കൂടുതൽ വിശദാംശങ്ങൾ ഇവിടെ കാണാം ഔദ്യോഗിക വെബ്സൈറ്റ്

ധാരാളം പ്രോഗ്രാമിംഗ് ഭാഷകൾ പിന്തുണയ്ക്കുന്നു. മുകളിലെ ലിങ്കിൽ നിന്നുള്ള വിവരങ്ങൾ വിലയിരുത്തിയാൽ, ഇവ 25-ലധികം ഭാഷകളാണ്. ഒരു നിർദ്ദിഷ്ട ഭാഷയെ പിന്തുണയ്ക്കുന്നതിന്, നിങ്ങൾ ഉചിതമായ പ്ലഗിൻ ഇൻസ്റ്റാൾ ചെയ്യണം. കമ്മ്യൂണിറ്റി പതിപ്പിൽ പ്രവർത്തിക്കുന്നതിനുള്ള ഒരു പ്ലഗിൻ ഉൾപ്പെടുന്നു ഏണാബ്ലെ (ടൈപ്പ്സ്ക്രിപ്റ്റ് ഉൾപ്പെടെ), വിക്കി പറയുന്നത് വിപരീതമാണ്. പിന്നിൽ ഏണാബ്ലെ പ്ലഗിൻ ഉത്തരങ്ങൾ സോനാർജെഎസ്, ടൈപ്പ്സ്ക്രിപ്റ്റിന് സോണാർടിഎസ് യഥാക്രമം

കവറേജ് വിവരങ്ങൾ അയയ്ക്കാൻ ഔദ്യോഗിക ക്ലയന്റ് ഉപയോഗിക്കുന്നു sonarqube-സ്കാനർ, ഇതിൽ നിന്നുള്ള ക്രമീകരണങ്ങൾ ഉപയോഗിക്കുന്നു config-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+Jest. നമുക്ക് അത് നമ്മിലേക്ക് വളയ്ക്കാം:

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

ആദ്യം നമ്മൾ ക്ലയന്റ് ഇൻസ്റ്റാൾ ചെയ്യണം സോനാർക്യൂബ്, വിളിക്കപ്പെടുന്ന സോണാർ-സ്കാനർകാരണം 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 - വിലാസം സോനാർ'എ;
• sonar.projectKey - സെർവറിലെ അദ്വിതീയ പ്രോജക്റ്റ് ഐഡന്റിഫയർ സോനാർ'എ;
• sonar.projectName - അതിന്റെ പേര്, അത് എപ്പോൾ വേണമെങ്കിലും മാറ്റാവുന്നതാണ്, കാരണം പ്രോജക്റ്റ് തിരിച്ചറിഞ്ഞിട്ടുണ്ട് പ്രോജക്റ്റ്കീ;
• സോണാർ.ഉറവിടങ്ങൾ - ഉറവിടങ്ങളുള്ള ഫോൾഡർ, സാധാരണയായി ഇത് ഉറവിട, എന്നാൽ എന്തും ആകാം. റൂട്ട് ഫോൾഡറുമായി ബന്ധപ്പെട്ട് ഈ ഫോൾഡർ സജ്ജീകരിച്ചിരിക്കുന്നു, അത് സ്കാനർ ലോഞ്ച് ചെയ്ത ഫോൾഡറാണ്;
• സോണാർ.ടെസ്റ്റുകൾ - മുമ്പത്തേതിനൊപ്പം പോകുന്ന ഒരു പരാമീറ്റർ. ടെസ്റ്റുകൾ സ്ഥിതി ചെയ്യുന്ന ഫോൾഡറാണിത്. ഈ പ്രോജക്റ്റിൽ, അത്തരമൊരു ഫോൾഡർ ഇല്ല, കൂടാതെ 'ഫോൾഡറിൽ പരീക്ഷിക്കുന്ന ഘടകത്തിന് അടുത്താണ് ടെസ്റ്റ് സ്ഥിതി ചെയ്യുന്നത്.പരിശോധന', അതിനാൽ ഞങ്ങൾ അത് ഇപ്പോൾ അവഗണിക്കുകയും അടുത്ത പാരാമീറ്റർ ഉപയോഗിക്കുകയും ചെയ്യും;
• 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 സൃഷ്ടിക്കുകയും സോഴ്സ് കോഡിലേക്ക് വ്യാഖ്യാനങ്ങൾ ചേർക്കാൻ നിങ്ങളെ അനുവദിക്കുകയും ചെയ്യുന്നു. GCC പാക്കേജിന്റെ ഭാഗമായി Gcov ഒരു സാധാരണ യൂട്ടിലിറ്റി ആയി വരുന്നു.
Lcov - gcov-നുള്ള ഗ്രാഫിക്കൽ ഇന്റർഫേസ്. ഇത് ഒന്നിലധികം ഉറവിട ഫയലുകൾക്കായി gcov ഫയലുകൾ കൂട്ടിച്ചേർക്കുകയും കോഡും കവറേജ് വിവരങ്ങളും ഉള്ള ഒരു കൂട്ടം HTML പേജുകൾ നിർമ്മിക്കുകയും ചെയ്യുന്നു. നാവിഗേഷൻ എളുപ്പമാക്കുന്നതിന് പേജുകളും സൃഷ്ടിക്കപ്പെടുന്നു. സ്ട്രിംഗുകൾ, പ്രവർത്തനങ്ങൾ, ശാഖകൾ എന്നിവയുടെ കവറേജിനെ Lcov പിന്തുണയ്ക്കുന്നു.

പരിശോധനകൾ പൂർത്തിയാക്കിയ ശേഷം, കവറേജ് വിവരങ്ങൾ കണ്ടെത്തും കവറേജ്/lcov.info.
നമുക്ക് പറയേണ്ടതുണ്ട് സോനാർ'എനിക്ക് അത് എവിടെ നിന്ന് ലഭിക്കും? അതിനാൽ, അതിന്റെ കോൺഫിഗറേഷൻ ഫയലിലേക്ക് ഇനിപ്പറയുന്ന വരികൾ ചേർക്കാം. എന്നാൽ ഒരു പോയിന്റ് ഉണ്ട്: പ്രോജക്റ്റുകൾ ബഹുഭാഷാ ആകാം, അതായത്, ഫോൾഡറിൽ ഉറവിട നിരവധി പ്രോഗ്രാമിംഗ് ഭാഷകൾക്കുള്ള സോഴ്സ് കോഡുകളും ഒന്നോ അല്ലെങ്കിൽ മറ്റൊന്നുമായി അഫിലിയേഷനും ഉണ്ട്, അതാകട്ടെ, ഒന്നോ അല്ലെങ്കിൽ മറ്റൊരു പ്ലഗിന്റെ ഉപയോഗം അതിന്റെ വിപുലീകരണത്തിലൂടെ നിർണ്ണയിക്കപ്പെടുന്നു. വ്യത്യസ്ത പ്രോഗ്രാമിംഗ് ഭാഷകൾക്കായി കവറേജ് വിവരങ്ങൾ വ്യത്യസ്ത സ്ഥലങ്ങളിൽ സംഭരിക്കാൻ കഴിയും, അതിനാൽ ഇത് സജ്ജീകരിക്കുന്നതിന് ഓരോ ഭാഷയ്ക്കും അതിന്റേതായ വിഭാഗമുണ്ട്. ഞങ്ങളുടെ പ്രോജക്റ്റ് ഉപയോഗിക്കുന്നു ടൈപ്പ്സ്ക്രിപ്റ്റ്, അതിനാൽ ഞങ്ങൾക്ക് അതിനായി ഒരു ക്രമീകരണ വിഭാഗം ആവശ്യമാണ്:

സോണാർ-പ്രോജക്ട്.പ്രോപ്പർട്ടീസ്:

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

സ്കാനറിന്റെ ആദ്യ വിക്ഷേപണത്തിന് എല്ലാം തയ്യാറാണ്. പദ്ധതിയാണെന്ന് ഞാൻ ശ്രദ്ധിക്കാൻ ആഗ്രഹിക്കുന്നു സോനാർതന്നിരിക്കുന്ന പ്രോജക്റ്റിനായി നിങ്ങൾ ആദ്യമായി സ്കാനർ പ്രവർത്തിപ്പിക്കുമ്പോൾ 'e സ്വയമേവ സൃഷ്ടിക്കപ്പെടും. തുടർന്നുള്ള സമയങ്ങളിൽ, കാലക്രമേണ പ്രോജക്റ്റ് പാരാമീറ്ററുകളിലെ മാറ്റങ്ങളുടെ ചലനാത്മകത കാണുന്നതിന് വിവരങ്ങൾ ശേഖരിക്കപ്പെടും.

അതിനാൽ, നേരത്തെ സൃഷ്ടിച്ച കമാൻഡ് ഉപയോഗിക്കാം package.json:

yarn run sonar 

കുറിപ്പ്: നിങ്ങൾക്ക് പരാമീറ്ററും ഉപയോഗിക്കാം -X കൂടുതൽ വിശദമായ ലോഗിംഗിനായി.

സ്കാനർ ആദ്യമായി സമാരംഭിച്ചതാണെങ്കിൽ, സ്കാനറിന്റെ ബൈനറി തന്നെ ആദ്യം ഡൗൺലോഡ് ചെയ്യും. അതിനുശേഷം അത് ആരംഭിക്കുകയും സെർവർ സ്കാൻ ചെയ്യുകയും ചെയ്യുന്നു സോനാർഇൻസ്റ്റാൾ ചെയ്ത പ്ലഗിനുകൾക്കായി 'a, അതുവഴി പിന്തുണയുള്ള ഭാഷ കണക്കാക്കുന്നു. അതിന്റെ പ്രവർത്തനത്തിനായുള്ള മറ്റ് വിവിധ പാരാമീറ്ററുകളും ലോഡ് ചെയ്തിട്ടുണ്ട്: ഗുണമേന്മയുള്ള പ്രൊഫൈലുകൾ, സജീവ നിയമങ്ങൾ, മെട്രിക്സ് റിപ്പോസിറ്ററി, സെർവർ നിയമങ്ങൾ.

കുറിപ്പ്: ഈ ലേഖനത്തിന്റെ ചട്ടക്കൂടിനുള്ളിൽ ഞങ്ങൾ അവയിൽ വിശദമായി വസിക്കില്ല, എന്നാൽ നിങ്ങൾക്ക് എല്ലായ്പ്പോഴും ഔദ്യോഗിക ഉറവിടങ്ങളുമായി ബന്ധപ്പെടാം.

അടുത്തതായി, ഫോൾഡർ വിശകലനം ആരംഭിക്കുന്നു ഉറവിട എല്ലാത്തിനും സോഴ്സ് ഫയലുകളുടെ ലഭ്യതയ്ക്കായി (ഒരു നിർദ്ദിഷ്ട ഒന്ന് വ്യക്തമായി വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ) പിന്തുണയ്ക്കുന്ന ഭാഷ, അവയുടെ തുടർന്നുള്ള സൂചിക.

ഈ ലേഖനത്തിൽ ഞങ്ങൾ ശ്രദ്ധ കേന്ദ്രീകരിക്കാത്ത മറ്റ് വിവിധ വിശകലനങ്ങൾ അടുത്തതായി വരുന്നു (ഉദാഹരണത്തിന്, ലിന്റിംഗ്, കോഡ് ഡ്യൂപ്ലിക്കേഷൻ കണ്ടെത്തൽ മുതലായവ).

സ്കാനറിന്റെ പ്രവർത്തനത്തിന്റെ അവസാനത്തിൽ, ശേഖരിച്ച എല്ലാ വിവരങ്ങളും സമാഹരിക്കുകയും ആർക്കൈവ് ചെയ്യുകയും സെർവറിലേക്ക് അയയ്ക്കുകയും ചെയ്യുന്നു.

ഇതിനുശേഷം, വെബ് ഇന്റർഫേസിൽ എന്താണ് സംഭവിച്ചതെന്ന് നമുക്ക് ഇതിനകം കാണാൻ കഴിയും:

നമുക്ക് കാണാനാകുന്നതുപോലെ, എന്തെങ്കിലും പ്രവർത്തിച്ചു, ചിലതരം കവറേജ് കാണിക്കുന്നു, പക്ഷേ അത് നമ്മുടേതുമായി പൊരുത്തപ്പെടുന്നില്ല ഇല്ല-റിപ്പോർട്ട്.

നമുക്ക് അത് കണ്ടുപിടിക്കാം. പ്രോജക്റ്റ് കൂടുതൽ വിശദമായി നോക്കാം, കവറേജ് മൂല്യത്തിൽ ക്ലിക്ക് ചെയ്യുക, കൂടാതെ വിശദമായ ഫയൽ റിപ്പോർട്ടിലേക്ക് "ഫാൾ ത്രൂ" ചെയ്യുക:

പ്രധാന, പരിശോധിച്ച ഫയലിന് പുറമേ ഇവിടെ കാണാം HelloWorld.vue, ഒരു ഫയലും ഉണ്ട് main.ts, ഇത് കവറേജിന്റെ മുഴുവൻ ചിത്രത്തെയും നശിപ്പിക്കുന്നു. എന്നാൽ കവറേജിന്റെ കണക്കുകൂട്ടലിൽ നിന്ന് ഞങ്ങൾ അത് എങ്ങനെ ഒഴിവാക്കി. അതെ, എല്ലാം ശരിയാണ്, പക്ഷേ അത് തലത്തിലായിരുന്നു ഇല്ല, എന്നാൽ സ്കാനർ അത് സൂചികയിലാക്കി, അതിനാൽ അത് അതിന്റെ കണക്കുകൂട്ടലുകളിൽ അവസാനിച്ചു.

നമുക്ക് ഇത് ശരിയാക്കാം:

സോണാർ-പ്രോജക്ട്.പ്രോപ്പർട്ടീസ്:

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

ഞാൻ ഒരു വ്യക്തത വരുത്താൻ ആഗ്രഹിക്കുന്നു: ഈ പരാമീറ്ററിൽ വ്യക്തമാക്കിയിരിക്കുന്ന ഫോൾഡറുകൾക്ക് പുറമേ, പരാമീറ്ററിൽ ലിസ്റ്റുചെയ്തിരിക്കുന്ന എല്ലാ ഫോൾഡറുകളും ചേർക്കുന്നു sonar.test.inclusions.

സ്കാനർ സമാരംഭിച്ചതിന് ശേഷം, ഞങ്ങൾ ശരിയായ വിവരങ്ങൾ കാണുന്നു:

നമുക്ക് അടുത്ത പോയിന്റ് നോക്കാം - ഗുണനിലവാരമുള്ള പ്രൊഫൈലുകൾ. പിന്തുണയെക്കുറിച്ച് ഞാൻ മുകളിൽ സംസാരിച്ചു സോനാർഒരേ സമയം നിരവധി ഭാഷകൾ. ഇതുതന്നെയാണ് നമ്മൾ കാണുന്നത്. എന്നാൽ ഞങ്ങളുടെ പ്രോജക്റ്റ് എഴുതിയിട്ടുണ്ടെന്ന് ഞങ്ങൾക്കറിയാം TS, പിന്നെ എന്തിനാണ് അനാവശ്യമായ കൃത്രിമത്വങ്ങളും പരിശോധനകളും ഉപയോഗിച്ച് സ്കാനറിനെ ബുദ്ധിമുട്ടിക്കുന്നത്. കോൺഫിഗറേഷൻ ഫയലിലേക്ക് ഒരു പാരാമീറ്റർ കൂടി ചേർത്തുകൊണ്ട് ഞങ്ങൾ വിശകലനത്തിനായി ഭാഷ സജ്ജമാക്കും സോനാർ'എ:

സോണാർ-പ്രോജക്ട്.പ്രോപ്പർട്ടീസ്:

...
sonar.language=ts
...

നമുക്ക് സ്കാനർ വീണ്ടും പ്രവർത്തിപ്പിച്ച് ഫലം നോക്കാം:

കവറേജ് പൂർണ്ണമായും ഇല്ലാതായി.

സ്കാനർ ലോഗ് നോക്കുകയാണെങ്കിൽ, നമുക്ക് ഇനിപ്പറയുന്ന വരി കാണാം:

അതായത്, ഞങ്ങളുടെ പ്രോജക്റ്റ് ഫയലുകൾ സൂചികയിലാക്കിയിട്ടില്ല.

സാഹചര്യം ഇപ്രകാരമാണ്: ഔദ്യോഗികമായി പിന്തുണയ്ക്കുന്നു VueJs പ്ലഗിനിലാണ് സോനാർജെഎസ്ആരാണ് ഉത്തരവാദി ഏണാബ്ലെ.

എന്നാൽ ഈ പിന്തുണ പ്ലഗിനിൽ ഇല്ല സോണാർടിഎസ് വേണ്ടി TS, ബഗ് ട്രാക്കറിൽ ഔദ്യോഗിക ടിക്കറ്റ് തുറന്നു സോനാർ'എ:

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

ഈ വസ്തുത സ്ഥിരീകരിക്കുന്ന SonarQube ഡവലപ്പർമാരിൽ നിന്നുള്ള ഒരു പ്രതിനിധിയിൽ നിന്നുള്ള ചില ഉത്തരങ്ങൾ ഇതാ.

എന്നാൽ എല്ലാം ഞങ്ങൾക്ക് വേണ്ടി പ്രവർത്തിച്ചു, നിങ്ങൾ എതിർക്കുന്നു. അതെ, നമുക്ക് അൽപ്പം ശ്രമിക്കാം "ഹാക്ക്".
പിന്തുണ ഉണ്ടെങ്കിൽ .vue-ഫയലുകൾ സോനാർ'ഓ, അപ്പോൾ നമുക്ക് അവനോട് അവരെ പരിഗണിക്കാൻ പറയാൻ ശ്രമിക്കാം ടൈപ്പ്സ്ക്രിപ്റ്റ്.

നമുക്ക് ഒരു പാരാമീറ്റർ ചേർക്കാം:

സോണാർ-പ്രോജക്ട്.പ്രോപ്പർട്ടീസ്:

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

നമുക്ക് സ്കാനർ സമാരംഭിക്കാം:

ഒപ്പം, voila, എല്ലാം സാധാരണ നിലയിലായി, ഒരു പ്രൊഫൈൽ മാത്രം ടൈപ്പ്സ്ക്രിപ്റ്റ്. അതായത്, പിന്തുണയിൽ പ്രശ്നം പരിഹരിക്കാൻ ഞങ്ങൾക്ക് കഴിഞ്ഞു VueJs+TS വേണ്ടി സോനാർക്യൂബ്.

കൂടുതൽ മുന്നോട്ട് പോയി കവറേജ് വിവരങ്ങൾ കുറച്ച് മെച്ചപ്പെടുത്താൻ ശ്രമിക്കാം.

ഞങ്ങൾ ഇതുവരെ ചെയ്തത്:

• പദ്ധതിയിൽ ചേർത്തു സോനാർ- സ്കാനർ;
• സജ്ജമാക്കുക ഇല്ല കവറേജ് വിവരങ്ങൾ സൃഷ്ടിക്കാൻ;
• ക്രമീകരിച്ചത് സോനാർ- സ്കാനർ;
• പിന്തുണ പ്രശ്നം പരിഹരിച്ചു .vue-ഫയലുകൾ + ടൈപ്പ്സ്ക്രിപ്റ്റ്.

ടെസ്റ്റ് കവറേജിന് പുറമേ, കോഡ് ഗുണനിലവാരത്തിന് മറ്റ് രസകരമായ ഉപയോഗപ്രദമായ മാനദണ്ഡങ്ങളുണ്ട്, ഉദാഹരണത്തിന്, കോഡ് ഡ്യൂപ്ലിക്കേഷൻ, പ്രോജക്റ്റിന്റെ ലൈനുകളുടെ എണ്ണം (കോഡ് സങ്കീർണ്ണതയുമായി ബന്ധപ്പെട്ട ഗുണകങ്ങളുടെ കണക്കുകൂട്ടലിൽ ഉൾപ്പെടുന്നു).

പ്രവർത്തിക്കുന്നതിനുള്ള പ്ലഗിൻ നിലവിലെ നടപ്പാക്കലിൽ TS (സോണാർടിഎസ്) പ്രവർത്തിക്കില്ല CPD (കോപ്പി പേസ്റ്റ് ഡിറ്റക്ടർ) കൂടാതെ കോഡിന്റെ വരികൾ എണ്ണുന്നു .vue-ഫയലുകൾ.

കോഡ് ഡ്യൂപ്ലിക്കേഷന്റെ ഒരു സിന്തറ്റിക് സാഹചര്യം സൃഷ്ടിക്കാൻ, മറ്റൊരു പേരിൽ ഘടക ഫയൽ തനിപ്പകർപ്പാക്കി കോഡിലേക്ക് ചേർക്കുക. main.ts ഒരു ഡമ്മി ഫംഗ്‌ഷൻ, അത് മറ്റൊരു പേരിൽ ഡ്യൂപ്ലിക്കേറ്റ് ചെയ്യുക. എന്നതുപോലെ തനിപ്പകർപ്പുണ്ടോയെന്ന് പരിശോധിക്കാൻ .vue, കൂടാതെ .ts -ഫയലുകൾ.

main.ts:

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

ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ കോൺഫിഗറേഷൻ ലൈൻ താൽക്കാലികമായി അഭിപ്രായമിടേണ്ടതുണ്ട്:

സോണാർ-പ്രോജക്ട്.പ്രോപ്പർട്ടീസ്:

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

പരിശോധനയ്‌ക്കൊപ്പം സ്കാനർ പുനരാരംഭിക്കാം:

yarn test && yarn run sonar

തീർച്ചയായും, ഞങ്ങളുടെ കവറേജ് കുറയും, പക്ഷേ ഇപ്പോൾ ഞങ്ങൾക്ക് അതിൽ താൽപ്പര്യമില്ല.

കോഡിന്റെ ഡ്യൂപ്ലിക്കേറ്റ് ലൈനുകളുടെ കാര്യത്തിൽ, നമ്മൾ കാണും:

പരിശോധിക്കാൻ ഞങ്ങൾ ഉപയോഗിക്കും സി.പി.ഡി.-യുട്ടിലിറ്റി - jscpd:

npx jscpd src

കോഡിന്റെ വരികൾക്കായി:

ഒരുപക്ഷേ ഇത് ഭാവിയിലെ പ്ലഗിൻ പതിപ്പുകളിൽ പരിഹരിക്കപ്പെടും SonarJS(TS). അവർ ക്രമേണ ഈ രണ്ട് പ്ലഗിനുകളും ഒന്നായി ലയിപ്പിക്കാൻ തുടങ്ങുന്നു എന്നത് ഞാൻ ശ്രദ്ധിക്കാൻ ആഗ്രഹിക്കുന്നു സോനാർജെഎസ്, അത് ശരിയാണെന്ന് ഞാൻ കരുതുന്നു.

ഇപ്പോൾ കവറേജ് വിവരങ്ങൾ മെച്ചപ്പെടുത്തുന്നതിനുള്ള ഓപ്ഷൻ പരിഗണിക്കാൻ ഞാൻ ആഗ്രഹിച്ചു.

ഇതുവരെ, മുഴുവൻ പ്രോജക്റ്റിനും പ്രത്യേകിച്ച് ഫയലുകൾക്കും ടെസ്റ്റ് കവറേജ് ശതമാനത്തിൽ കാണാൻ കഴിയും. എന്നാൽ അളവിനെക്കുറിച്ചുള്ള വിവരങ്ങൾ ഉപയോഗിച്ച് ഈ സൂചകം വികസിപ്പിക്കുന്നത് സാധ്യമാണ് യൂണിറ്റ്പ്രോജക്റ്റിന് വേണ്ടിയുള്ള ടെസ്റ്റുകൾ, അതുപോലെ ഫയലുകളുടെ പശ്ചാത്തലത്തിലും.

അതിനുള്ള ഒരു ലൈബ്രറിയുണ്ട് ഇല്ലറിപ്പോർട്ട് ഫോർമാറ്റിലേക്ക് പരിവർത്തനം ചെയ്യുക സോനാർ'എ:
പൊതുവായ ടെസ്റ്റ് ഡാറ്റ - 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.testExecutionReportPaths=test-report.xml
…

കൂടാതെ സ്കാനർ പുനരാരംഭിക്കുക:

yarn run sonar

ഇന്റർഫേസിൽ എന്താണ് മാറിയതെന്ന് നോക്കാം സോനാർ'എ:

പിന്നെ ഒന്നും മാറിയിട്ടില്ല. ജെസ്റ്റ് റിപ്പോർട്ടിൽ വിവരിച്ച ഫയലുകൾ ഫയലുകളായി സോനാർ പരിഗണിക്കുന്നില്ല എന്നതാണ് വസ്തുത യൂണിറ്റ്- ടെസ്റ്റുകൾ. ഈ സാഹചര്യം ശരിയാക്കാൻ, ഞങ്ങൾ കോൺഫിഗറേഷൻ പാരാമീറ്റർ ഉപയോഗിക്കുന്നു സോനാർ സോണാർ.ടെസ്റ്റുകൾ, അതിൽ ഞങ്ങൾ ടെസ്റ്റുകൾ ഉള്ള ഫോൾഡറുകൾ വ്യക്തമായി സൂചിപ്പിക്കും (ഞങ്ങൾക്ക് ഇപ്പോൾ ഒരെണ്ണം മാത്രമേയുള്ളൂ):

സോണാർ-പ്രോജക്ട്.പ്രോപ്പർട്ടീസ്:

…
sonar.tests=src/components/__tests__
…

നമുക്ക് സ്കാനർ പുനരാരംഭിക്കാം:

yarn run sonar

ഇന്റർഫേസിൽ എന്താണ് മാറിയതെന്ന് നോക്കാം:

ഇപ്പോൾ നമ്മുടെ എണ്ണം കണ്ടു യൂണിറ്റ്-ടെസ്റ്റുകൾ കൂടാതെ, ഉള്ളിൽ ക്ലിക്കുചെയ്യുന്നതിലൂടെ പരാജയപ്പെട്ടതിനാൽ, പ്രോജക്റ്റ് ഫയലുകൾക്കിടയിൽ ഈ നമ്പറിന്റെ വിതരണം നമുക്ക് കാണാൻ കഴിയും:

തീരുമാനം

അതിനാൽ, തുടർച്ചയായ വിശകലനത്തിനുള്ള ഒരു ഉപകരണം ഞങ്ങൾ നോക്കി സോനാർക്യൂബ്. അതിൽ എഴുതിയിരിക്കുന്ന ഒരു പ്രോജക്റ്റ് ഞങ്ങൾ അതിൽ വിജയകരമായി സംയോജിപ്പിച്ചു VueJs+TS. ചില അനുയോജ്യത പ്രശ്നങ്ങൾ പരിഹരിച്ചു. ടെസ്റ്റ് കവറേജ് ഇൻഡിക്കേറ്ററിന്റെ വിവര ഉള്ളടക്കം ഞങ്ങൾ വർദ്ധിപ്പിച്ചു. ഈ ലേഖനത്തിൽ ഞങ്ങൾ കോഡ് ഗുണനിലവാര മാനദണ്ഡങ്ങളിൽ ഒന്ന് മാത്രമാണ് പരിശോധിച്ചത് (ഒരുപക്ഷേ പ്രധാനമായ ഒന്ന്), പക്ഷേ സോനാർക്യൂബ് സുരക്ഷാ പരിശോധന ഉൾപ്പെടെയുള്ള മറ്റ് ഗുണനിലവാര മാനദണ്ഡങ്ങളെ പിന്തുണയ്ക്കുന്നു. എന്നാൽ ഈ സവിശേഷതകളെല്ലാം പൂർണ്ണമായും ലഭ്യമല്ല സമൂഹം- പതിപ്പുകൾ. രസകരവും ഉപയോഗപ്രദവുമായ സവിശേഷതകളിൽ ഒന്ന് സംയോജനമാണ് സോനാർക്യൂബ് GitLab, BitBucket പോലുള്ള വിവിധ കോഡ് റിപ്പോസിറ്ററി മാനേജ്മെന്റ് സിസ്റ്റങ്ങൾക്കൊപ്പം. തടയാൻ ലയിപ്പിക്കുക പുൾ (ലയിപ്പിക്കുക) അഭ്യർത്ഥന'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