సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

మేము మా పనిలో ప్లాట్‌ఫారమ్‌ను చురుకుగా ఉపయోగిస్తాము సోనార్ క్యూబ్ అధిక స్థాయిలో కోడ్ నాణ్యతను నిర్వహించడానికి. వ్రాసిన ప్రాజెక్ట్‌లలో ఒకదానిని ఏకీకృతం చేస్తున్నప్పుడు VueJs+టైప్‌స్క్రిప్ట్, సమస్యలు తలెత్తాయి. అందువల్ల, మేము వాటిని ఎలా పరిష్కరించాలో మరింత వివరంగా చెప్పాలనుకుంటున్నాను.

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

ఈ వ్యాసంలో నేను పైన వ్రాసినట్లుగా, SonarQube ప్లాట్‌ఫారమ్ గురించి మాట్లాడుతాము. ఒక చిన్న సిద్ధాంతం - ఇది సాధారణంగా ఏమిటి, దాని గురించి మొదటిసారి వింటున్న వారికి:

సోనార్ క్యూబ్ (మాజీ సోనార్) నిరంతర తనిఖీ మరియు కోడ్ నాణ్యత కొలత కోసం ఒక ఓపెన్ సోర్స్ ప్లాట్‌ఫారమ్.
MISRA C, MISRA C++, MITER/CWE మరియు CERT సెక్యూర్ కోడింగ్ స్టాండర్డ్స్ ప్రోగ్రామింగ్ ప్రమాణాల ప్రకారం కోడ్ విశ్లేషణ మరియు దోష గుర్తింపును సపోర్ట్ చేస్తుంది. ఇది OWASP టాప్ 10 మరియు CWE/SANS టాప్ 25 ప్రోగ్రామింగ్ ఎర్రర్‌ల జాబితాల నుండి లోపాలను కూడా గుర్తించగలదు.
ప్లాట్‌ఫారమ్ వివిధ రెడీమేడ్ సాధనాలను ఉపయోగిస్తున్నప్పటికీ, SonarQube ఫలితాలను ఒకే డ్యాష్‌బోర్డ్‌కు తగ్గిస్తుంది, పరుగుల చరిత్రను ఉంచుతుంది మరియు తద్వారా అభివృద్ధి సమయంలో సాఫ్ట్‌వేర్ నాణ్యతలో సాధారణ మార్పులను చూడటానికి మిమ్మల్ని అనుమతిస్తుంది.

మరిన్ని వివరాలను ఇక్కడ చూడవచ్చు అధికారిక వెబ్సైట్

పెద్ద సంఖ్యలో ప్రోగ్రామింగ్ భాషలకు మద్దతు ఉంది. పై లింక్‌లోని సమాచారాన్ని బట్టి చూస్తే, ఇవి 25 కంటే ఎక్కువ భాషలు. నిర్దిష్ట భాషకు మద్దతు ఇవ్వడానికి, మీరు తప్పనిసరిగా తగిన ప్లగిన్‌ను ఇన్‌స్టాల్ చేయాలి. కమ్యూనిటీ సంస్కరణలో పని చేయడానికి ప్లగ్ఇన్ ఉంటుంది జావాస్క్రిప్ట్ (టైప్స్‌రిప్ట్‌తో సహా), వికీ దీనికి విరుద్ధంగా చెప్పింది. వెనుక జావాస్క్రిప్ట్ ప్లగిన్ సమాధానాలు సోనార్జెఎస్, టైప్‌స్క్రిప్ట్ కోసం సోనార్టీఎస్ వరుసగా.

కవరేజ్ సమాచారాన్ని పంపడానికి అధికారిక క్లయింట్ ఉపయోగించబడుతుంది sonarqube-స్కానర్, ఇది నుండి సెట్టింగులను ఉపయోగించి config-file, ఈ డేటాను సర్వర్‌కు పంపుతుంది సోనార్ క్యూబ్ తదుపరి ఏకీకరణ మరియు సమీకరణ కోసం.

కోసం జావాస్క్రిప్ట్ ఉంది npm రేపర్. కాబట్టి, దశల వారీ అమలును ప్రారంభిద్దాం సోనార్ క్యూబ్ в వ్యూ- ప్రాజెక్ట్ ఉపయోగించి టైప్‌స్క్రిప్ట్.

సర్వర్‌ని అమలు చేయడానికి సోనార్ క్యూబ్ సద్వినియోగం చేసుకుందాం డాకర్-కూర్చండి.

sonar.yaml:

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 ప్రాజెక్ట్ ఇంటిగ్రేషన్
ఇందులో ఇంకా ప్రాజెక్ట్‌లు లేవు మరియు అది న్యాయమైనది. మేము ఈ పరిస్థితిని సరిచేస్తాము. నేను అధికారిక ఉదాహరణ ప్రాజెక్ట్‌ని తీసుకున్నాను 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 - ప్రాజెక్ట్ ద్వారా గుర్తించబడినందున దాని పేరు, ఎప్పుడైనా మార్చవచ్చు ప్రాజెక్ట్కీ;
  • సోనార్.మూలాలు - మూలాలతో ఫోల్డర్, సాధారణంగా ఇది src, కానీ ఏదైనా కావచ్చు. ఈ ఫోల్డర్ రూట్ ఫోల్డర్‌కు సంబంధించి సెట్ చేయబడింది, ఇది స్కానర్ ప్రారంభించబడిన ఫోల్డర్;
  • సోనార్.పరీక్షలు - మునుపటి దానితో సమానంగా ఉండే పరామితి. ఇది పరీక్షలు ఉన్న ఫోల్డర్. ఈ ప్రాజెక్ట్‌లో, అటువంటి ఫోల్డర్ ఏదీ లేదు మరియు పరీక్ష 'ఫోల్డర్‌లో పరీక్షించబడుతున్న భాగం పక్కన ఉంది.పరీక్ష', కాబట్టి మేము దానిని ప్రస్తుతానికి విస్మరిస్తాము మరియు తదుపరి పరామితిని ఉపయోగిస్తాము;
  • sonar.test.inclusions - ముసుగును ఉపయోగించి పరీక్షల కోసం మార్గం, కామాలతో వేరు చేయబడిన అనేక అంశాలు ఉండవచ్చు;
  • sonar.source ఎన్‌కోడింగ్ - సోర్స్ ఫైల్స్ కోసం ఎన్కోడింగ్.

స్కానర్ యొక్క మొదటి ప్రయోగానికి, ప్రధాన మునుపటి చర్య మినహా ప్రతిదీ సిద్ధంగా ఉంది: టెస్ట్ ఇంజిన్‌ను స్వయంగా ప్రారంభించడం, తద్వారా ఇది స్కానర్ తర్వాత ఉపయోగించే కవరేజ్ గురించి సమాచారాన్ని రూపొందించగలదు.

కానీ దీన్ని చేయడానికి, మీరు ఈ సమాచారాన్ని రూపొందించడానికి టెస్ట్ ఇంజిన్‌ను కాన్ఫిగర్ చేయాలి. ఈ ప్రాజెక్ట్‌లో, టెస్ట్ ఇంజిన్ జెస్ట్. మరియు దాని సెట్టింగులు ఫైల్ యొక్క సంబంధిత విభాగంలో ఉన్నాయి ప్యాకేజీ.జాసన్.

ఈ సెట్టింగ్‌లను జోడిద్దాం:

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

అంటే, కవరేజ్ మరియు మూలాన్ని (మినహాయింపులతో పాటు) లెక్కించాల్సిన అవసరం కోసం మేము ఫ్లాగ్‌ను సెట్ చేసాము, దాని ఆధారంగా అది ఏర్పడుతుంది.

ఇప్పుడు పరీక్షను అమలు చేద్దాం:

yarn test

మేము ఈ క్రింది వాటిని చూస్తాము:

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

కారణం ఏమిటంటే, కాంపోనెంట్‌లోనే కోడ్ లేదు. దీన్ని సరిచేద్దాం.

HelloWorld.vue:

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

కవరేజీని లెక్కించడానికి ఇది సరిపోతుంది.

పరీక్షను పునఃప్రారంభించిన తర్వాత, మేము దీన్ని నిర్ధారిస్తాము:

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

స్క్రీన్‌పై మనం కవరేజ్ గురించిన సమాచారాన్ని చూడాలి మరియు ప్రాజెక్ట్ ఫోల్డర్‌లో ఫోల్డర్ సృష్టించబడుతుంది కవరేజ్ సార్వత్రిక ఆకృతిలో పరీక్ష కవరేజ్ సమాచారంతో LCOV (LTP GCOV పొడిగింపు).

Gcov కోడ్ కవరేజీని పరిశీలించడానికి ఉచితంగా పంపిణీ చేయబడిన యుటిలిటీ. Gcov ప్రోగ్రామ్‌లోని ప్రతి స్టేట్‌మెంట్ కోసం ఖచ్చితమైన అమలుల సంఖ్యను రూపొందిస్తుంది మరియు సోర్స్ కోడ్‌కు ఉల్లేఖనాలను జోడించడానికి మిమ్మల్ని అనుమతిస్తుంది. GCC ప్యాకేజీలో భాగంగా Gcov ప్రామాణిక యుటిలిటీగా వస్తుంది.
Lcov - gcov కోసం గ్రాఫికల్ ఇంటర్‌ఫేస్. ఇది బహుళ సోర్స్ ఫైల్‌ల కోసం gcov ఫైల్‌లను అసెంబుల్ చేస్తుంది మరియు కోడ్ మరియు కవరేజ్ సమాచారంతో HTML పేజీల సమితిని ఉత్పత్తి చేస్తుంది. నావిగేషన్‌ను సులభతరం చేయడానికి పేజీలు కూడా రూపొందించబడ్డాయి. Lcov స్ట్రింగ్‌లు, ఫంక్షన్‌లు మరియు శాఖల కవరేజీకి మద్దతు ఇస్తుంది.

పరీక్షలు పూర్తయిన తర్వాత, కవరేజీ సమాచారం ఇక్కడ ఉంటుంది కవరేజ్/lcov.info.
మనం చెప్పాలి సోనార్'నేను దానిని ఎక్కడ నుండి పొందగలను? కాబట్టి, దాని కాన్ఫిగరేషన్ ఫైల్‌కి క్రింది పంక్తులను జోడిద్దాం. కానీ ఒక పాయింట్ ఉంది: ప్రాజెక్ట్‌లు బహుభాషా కావచ్చు, అంటే ఫోల్డర్‌లో src అనేక ప్రోగ్రామింగ్ భాషలకు సోర్స్ కోడ్‌లు మరియు ఒకటి లేదా మరొక దానితో అనుబంధం ఉన్నాయి మరియు క్రమంగా, ఒకటి లేదా మరొక ప్లగ్ఇన్ యొక్క ఉపయోగం దాని పొడిగింపు ద్వారా నిర్ణయించబడుతుంది. మరియు కవరేజ్ సమాచారం వివిధ ప్రోగ్రామింగ్ భాషల కోసం వేర్వేరు ప్రదేశాలలో నిల్వ చేయబడుతుంది, కాబట్టి దీన్ని సెటప్ చేయడానికి ప్రతి భాషకు దాని స్వంత విభాగం ఉంటుంది. మా ప్రాజెక్ట్ ఉపయోగిస్తుంది టైప్‌స్క్రిప్ట్, కాబట్టి మనకు దాని కోసం సెట్టింగ్‌ల విభాగం అవసరం:

సోనార్-ప్రాజెక్ట్.గుణాలు:

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

స్కానర్ యొక్క మొదటి ప్రయోగానికి అంతా సిద్ధంగా ఉంది. ప్రాజెక్ట్ అని నేను గమనించాలనుకుంటున్నాను సోనార్'ఇచ్చిన ప్రాజెక్ట్ కోసం మీరు మొదటిసారి స్కానర్‌ని అమలు చేసినప్పుడు స్వయంచాలకంగా సృష్టించబడుతుంది. తదుపరి సమయాల్లో, కాలక్రమేణా ప్రాజెక్ట్ పారామితులలో మార్పుల డైనమిక్‌లను చూడటానికి సమాచారం సేకరించబడుతుంది.

కాబట్టి, ముందుగా సృష్టించిన ఆదేశాన్ని ఉపయోగించుకుందాం ప్యాకేజీ.జాసన్:

yarn run sonar 

గమనిక: మీరు పరామితిని కూడా ఉపయోగించవచ్చు -X మరింత వివరణాత్మక లాగింగ్ కోసం.

స్కానర్ మొదటిసారి ప్రారంభించబడితే, స్కానర్ యొక్క బైనరీ మొదట డౌన్‌లోడ్ చేయబడుతుంది. ఆ తర్వాత అది ప్రారంభమవుతుంది మరియు సర్వర్‌ను స్కాన్ చేయడం ప్రారంభిస్తుంది సోనార్'a ఇన్‌స్టాల్ చేయబడిన ప్లగిన్‌ల కోసం, తద్వారా మద్దతు ఉన్న భాషను గణించడం. దాని ఆపరేషన్ కోసం అనేక ఇతర పారామితులు కూడా లోడ్ చేయబడ్డాయి: నాణ్యత ప్రొఫైల్‌లు, క్రియాశీల నియమాలు, మెట్రిక్స్ రిపోజిటరీ, సర్వర్ నియమాలు.

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

గమనిక: ఈ కథనం యొక్క ఫ్రేమ్‌వర్క్‌లో మేము వాటిపై వివరంగా నివసించము, కానీ మీరు ఎల్లప్పుడూ అధికారిక వనరులను సంప్రదించవచ్చు.

తరువాత, ఫోల్డర్ విశ్లేషణ ప్రారంభమవుతుంది src అన్నింటికీ సోర్స్ ఫైల్‌ల లభ్యత కోసం (నిర్దిష్టమైనది స్పష్టంగా పేర్కొనబడకపోతే) మద్దతు ఉన్న భాష, వాటి తదుపరి ఇండెక్సింగ్‌తో.

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

తదుపరి అనేక ఇతర విశ్లేషణలు వస్తాయి, వీటిని మేము ఈ కథనంలో దృష్టి పెడతాము (ఉదాహరణకు, లైనింగ్, కోడ్ డూప్లికేషన్ డిటెక్షన్ మొదలైనవి).

స్కానర్ యొక్క పని చివరిలో, సేకరించిన మొత్తం సమాచారం సమగ్రపరచబడుతుంది, ఆర్కైవ్ చేయబడుతుంది మరియు సర్వర్‌కు పంపబడుతుంది.

దీని తరువాత, వెబ్ ఇంటర్‌ఫేస్‌లో ఏమి జరిగిందో మనం ఇప్పటికే చూడవచ్చు:

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

మనం చూడగలిగినట్లుగా, ఏదో పని చేసింది మరియు ఒక రకమైన కవరేజీని కూడా చూపిస్తుంది, కానీ అది మాతో సరిపోలడం లేదు జెస్ట్-నివేదిక.

దాన్ని గుర్తించండి. ప్రాజెక్ట్‌ను మరింత వివరంగా చూద్దాం, కవరేజ్ విలువపై క్లిక్ చేసి, వివరణాత్మక ఫైల్ రిపోర్ట్‌లోకి “ఫాల్ త్రూ” చేయండి:

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

ఇక్కడ మనం ప్రధాన, పరిశీలించిన ఫైల్‌తో పాటు చూస్తాము HelloWorld.vue, ఒక ఫైల్ కూడా ఉంది ప్రధాన.ts, ఇది కవరేజ్ యొక్క మొత్తం చిత్రాన్ని పాడు చేస్తుంది. కానీ మేము దానిని కవరేజ్ గణన నుండి ఎలా మినహాయించాము. అవును, ప్రతిదీ సరైనది, కానీ అది స్థాయిలో ఉంది జెస్ట్, కానీ స్కానర్ దానిని ఇండెక్స్ చేసింది, కనుక ఇది దాని లెక్కల్లో ముగిసింది.

దీన్ని సరిచేద్దాం:

సోనార్-ప్రాజెక్ట్.గుణాలు:

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

నేను ఒక స్పష్టీకరణ చేయాలనుకుంటున్నాను: ఈ పారామీటర్‌లో పేర్కొన్న ఫోల్డర్‌లతో పాటు, పరామితిలో జాబితా చేయబడిన అన్ని ఫోల్డర్‌లు కూడా జోడించబడతాయి sonar.test.inclusions.

స్కానర్‌ను ప్రారంభించిన తర్వాత, మేము సరైన సమాచారాన్ని చూస్తాము:

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

తర్వాత పాయింట్ చూద్దాం - నాణ్యమైన ప్రొఫైల్స్. నేను మద్దతు గురించి పైన మాట్లాడాను సోనార్ఒకే సమయంలో అనేక భాషలు. సరిగ్గా ఇదే మనం చూస్తున్నాం. కానీ మా ప్రాజెక్ట్ వ్రాయబడిందని మాకు తెలుసు TS, కాబట్టి అనవసరమైన అవకతవకలు మరియు తనిఖీలతో స్కానర్‌ను ఎందుకు వక్రీకరించాలి. మేము కాన్ఫిగరేషన్ ఫైల్‌కు మరో పారామీటర్‌ని జోడించడం ద్వారా విశ్లేషణ కోసం భాషను సెట్ చేస్తాము సోనార్'జ:

సోనార్-ప్రాజెక్ట్.గుణాలు:

...
sonar.language=ts
...

స్కానర్‌ని మళ్లీ రన్ చేసి, ఫలితాన్ని చూద్దాం:

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

కవరేజ్ పూర్తిగా పోయింది.

మేము స్కానర్ లాగ్‌ను చూస్తే, మనం ఈ క్రింది పంక్తిని చూడవచ్చు:

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

అంటే, మా ప్రాజెక్ట్ ఫైల్‌లు ఇండెక్స్ చేయబడలేదు.

పరిస్థితి క్రింది విధంగా ఉంది: అధికారికంగా మద్దతు VueJs ప్లగిన్‌లో ఉంది సోనార్జెఎస్ఎవరు బాధ్యత వహిస్తారు జావాస్క్రిప్ట్.

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

కానీ ఈ మద్దతు ప్లగిన్‌లో లేదు సోనార్టీఎస్ కోసం TS, దీని గురించి బగ్ ట్రాకర్‌లో అధికారిక టిక్కెట్ తెరవబడింది సోనార్'జ:

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

ఈ వాస్తవాన్ని ధృవీకరిస్తూ SonarQube డెవలపర్‌ల నుండి ప్రతినిధులలో ఒకరి నుండి ఇక్కడ కొన్ని సమాధానాలు ఉన్నాయి.

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

కానీ ప్రతిదీ మాకు పని, మీరు అభ్యంతరం. అవును, కొంచెం ప్రయత్నిద్దాం "హాక్".
మద్దతు ఉంటే .vue-ఫైళ్లు సోనార్'ఓహ్, అప్పుడు వాటిని పరిగణించమని అతనికి చెప్పడానికి ప్రయత్నిద్దాం టైప్‌స్క్రిప్ట్.

పరామితిని జోడిద్దాం:

సోనార్-ప్రాజెక్ట్.గుణాలు:

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

స్కానర్‌ని ప్రారంభిద్దాం:

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

మరియు, 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 ప్రాజెక్ట్ ఇంటిగ్రేషన్

తనిఖీ చేయడానికి మేము ఉపయోగిస్తాము సిపిడి-వినియోగ - jscpd:

npx jscpd src

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

కోడ్ లైన్ల కోసం:

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

బహుశా ఇది భవిష్యత్ ప్లగిన్ సంస్కరణల్లో పరిష్కరించబడుతుంది 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 ప్రాజెక్ట్ ఇంటిగ్రేషన్

మరియు ఏమీ మారలేదు. జెస్ట్ నివేదికలో వివరించిన ఫైళ్లను సోనార్ ఫైళ్లుగా పరిగణించడం లేదన్నది వాస్తవం యూనిట్- పరీక్షలు. ఈ పరిస్థితిని సరిచేయడానికి, మేము కాన్ఫిగరేషన్ పరామితిని ఉపయోగిస్తాము సోనార్ సోనార్.పరీక్షలు, దీనిలో మేము పరీక్షలతో ఫోల్డర్‌లను స్పష్టంగా సూచిస్తాము (ప్రస్తుతానికి మనకు ఒకటి మాత్రమే ఉంది):

సోనార్-ప్రాజెక్ట్.గుణాలు:

…
sonar.tests=src/components/__tests__
…

స్కానర్‌ని పునఃప్రారంభిద్దాం:

yarn run sonar

ఇంటర్‌ఫేస్‌లో ఏమి మారిందో చూద్దాం:

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

ఇప్పుడు మేము మా సంఖ్యను చూశాము యూనిట్-పరీక్షలు మరియు, లోపల క్లిక్ చేయడం ద్వారా విఫలమైతే, ప్రాజెక్ట్ ఫైల్‌లలో ఈ నంబర్ పంపిణీని మనం చూడవచ్చు:

సోనార్‌క్యూబ్‌తో VueJS+TS ప్రాజెక్ట్ ఇంటిగ్రేషన్

తీర్మానం

కాబట్టి, మేము నిరంతర విశ్లేషణ కోసం ఒక సాధనాన్ని చూశాము సోనార్ క్యూబ్. మేము దానిలో వ్రాసిన ప్రాజెక్ట్‌ను విజయవంతంగా విలీనం చేసాము 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

ఒక వ్యాఖ్యను జోడించండి