SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ನಮ್ಮ ಕೆಲಸದಲ್ಲಿ ನಾವು ವೇದಿಕೆಯನ್ನು ಸಕ್ರಿಯವಾಗಿ ಬಳಸುತ್ತೇವೆ ಸೋನಾರ್ ಕ್ಯೂಬ್ ಉನ್ನತ ಮಟ್ಟದಲ್ಲಿ ಕೋಡ್ ಗುಣಮಟ್ಟವನ್ನು ನಿರ್ವಹಿಸಲು. ಬರೆಯಲಾದ ಯೋಜನೆಗಳಲ್ಲಿ ಒಂದನ್ನು ಸಂಯೋಜಿಸುವಾಗ VueJs + ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್, ಸಮಸ್ಯೆಗಳು ಹುಟ್ಟಿಕೊಂಡವು. ಆದ್ದರಿಂದ, ನಾವು ಅವುಗಳನ್ನು ಹೇಗೆ ಪರಿಹರಿಸಲು ನಿರ್ವಹಿಸುತ್ತಿದ್ದೇವೆ ಎಂಬುದನ್ನು ಹೆಚ್ಚು ವಿವರವಾಗಿ ಹೇಳಲು ನಾನು ಬಯಸುತ್ತೇನೆ.

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ಈ ಲೇಖನದಲ್ಲಿ ನಾವು SonarQube ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಕುರಿತು ನಾನು ಮೇಲೆ ಬರೆದಂತೆ ಮಾತನಾಡುತ್ತೇವೆ. ಸ್ವಲ್ಪ ಸಿದ್ಧಾಂತ - ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಏನು, ಮೊದಲ ಬಾರಿಗೆ ಅದರ ಬಗ್ಗೆ ಕೇಳುವವರಿಗೆ:

ಸೋನಾರ್ ಕ್ಯೂಬ್ (ಮಾಜಿ ಸೋನಾರ್) ನಿರಂತರ ತಪಾಸಣೆ ಮತ್ತು ಕೋಡ್ ಗುಣಮಟ್ಟದ ಮಾಪನಕ್ಕಾಗಿ ತೆರೆದ ಮೂಲ ವೇದಿಕೆಯಾಗಿದೆ.
MISRA C, MISRA C++, MITER/CWE ಮತ್ತು CERT ಸುರಕ್ಷಿತ ಕೋಡಿಂಗ್ ಮಾನದಂಡಗಳ ನಿಯಮಗಳ ಪ್ರಕಾರ ಕೋಡ್ ವಿಶ್ಲೇಷಣೆ ಮತ್ತು ದೋಷ ಪತ್ತೆಯನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ. ಇದು OWASP ಟಾಪ್ 10 ಮತ್ತು CWE/SANS ಟಾಪ್ 25 ಪ್ರೋಗ್ರಾಮಿಂಗ್ ದೋಷಗಳ ಪಟ್ಟಿಯಿಂದ ದೋಷಗಳನ್ನು ಗುರುತಿಸಬಹುದು.
ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ವಿವಿಧ ಸಿದ್ಧ ಸಾಧನಗಳನ್ನು ಬಳಸುತ್ತದೆ ಎಂಬ ವಾಸ್ತವದ ಹೊರತಾಗಿಯೂ, SonarQube ಫಲಿತಾಂಶಗಳನ್ನು ಒಂದೇ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗೆ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, ರನ್‌ಗಳ ಇತಿಹಾಸವನ್ನು ಇಟ್ಟುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಇದರಿಂದಾಗಿ ಅಭಿವೃದ್ಧಿಯ ಸಮಯದಲ್ಲಿ ಸಾಫ್ಟ್‌ವೇರ್ ಗುಣಮಟ್ಟದಲ್ಲಿನ ಬದಲಾವಣೆಗಳ ಸಾಮಾನ್ಯ ಪ್ರವೃತ್ತಿಯನ್ನು ನೋಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಹೆಚ್ಚಿನ ವಿವರಗಳನ್ನು ಇಲ್ಲಿ ಕಾಣಬಹುದು ಅಧಿಕೃತ ವೆಬ್ಸೈಟ್

ಹೆಚ್ಚಿನ ಸಂಖ್ಯೆಯ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳನ್ನು ಬೆಂಬಲಿಸಲಾಗುತ್ತದೆ. ಮೇಲಿನ ಲಿಂಕ್‌ನಿಂದ ಮಾಹಿತಿಯ ಮೂಲಕ ನಿರ್ಣಯಿಸುವುದು, ಇವು 25 ಕ್ಕೂ ಹೆಚ್ಚು ಭಾಷೆಗಳಾಗಿವೆ. ನಿರ್ದಿಷ್ಟ ಭಾಷೆಯನ್ನು ಬೆಂಬಲಿಸಲು, ನೀವು ಸೂಕ್ತವಾದ ಪ್ಲಗಿನ್ ಅನ್ನು ಸ್ಥಾಪಿಸಬೇಕು. ಸಮುದಾಯ ಆವೃತ್ತಿಯು ಕೆಲಸ ಮಾಡಲು ಪ್ಲಗಿನ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ (ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ ಸೇರಿದಂತೆ), ವಿಕಿ ಇದಕ್ಕೆ ವಿರುದ್ಧವಾಗಿ ಹೇಳುತ್ತದೆ. ಹಿಂದೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ ಉತ್ತರಗಳು ಸೋನಾರ್ಜೆಎಸ್, ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್‌ಗಾಗಿ ಸೋನಾರ್ಟಿಎಸ್ ಅನುಕ್ರಮವಾಗಿ.

ಕವರೇಜ್ ಮಾಹಿತಿಯನ್ನು ಕಳುಹಿಸಲು ಅಧಿಕೃತ ಕ್ಲೈಂಟ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ ಸೋನಾರ್ಕುಬ್-ಸ್ಕ್ಯಾನರ್, ಇದು, ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಬಳಸಿ ಸಂರಚಿಸು-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 .

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು
ಅದರಲ್ಲಿ ಇನ್ನೂ ಯಾವುದೇ ಯೋಜನೆಗಳಿಲ್ಲ ಮತ್ತು ಅದು ನ್ಯಾಯೋಚಿತವಾಗಿದೆ. ನಾವು ಈ ಪರಿಸ್ಥಿತಿಯನ್ನು ಸರಿಪಡಿಸುತ್ತೇವೆ. ನಾನು ಅಧಿಕೃತ ಉದಾಹರಣೆ ಯೋಜನೆಯನ್ನು ತೆಗೆದುಕೊಂಡೆ 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 - ಯೋಜನೆಯನ್ನು ಗುರುತಿಸಿರುವುದರಿಂದ ಅದರ ಹೆಸರು, ಅದನ್ನು ಯಾವುದೇ ಸಮಯದಲ್ಲಿ ಬದಲಾಯಿಸಬಹುದು ಯೋಜನೆಯ ಕೀ;
  • ಸೋನಾರ್.ಮೂಲಗಳು - ಮೂಲಗಳೊಂದಿಗೆ ಫೋಲ್ಡರ್, ಸಾಮಾನ್ಯವಾಗಿ ಇದು Src, ಆದರೆ ಯಾವುದಾದರೂ ಆಗಿರಬಹುದು. ಈ ಫೋಲ್ಡರ್ ಅನ್ನು ರೂಟ್ ಫೋಲ್ಡರ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಹೊಂದಿಸಲಾಗಿದೆ, ಇದು ಸ್ಕ್ಯಾನರ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಲಾದ ಫೋಲ್ಡರ್ ಆಗಿದೆ;
  • ಸೋನಾರ್.ಪರೀಕ್ಷೆಗಳು - ಹಿಂದಿನದಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗುವ ನಿಯತಾಂಕ. ಇದು ಪರೀಕ್ಷೆಗಳು ಇರುವ ಫೋಲ್ಡರ್ ಆಗಿದೆ. ಈ ಯೋಜನೆಯಲ್ಲಿ, ಅಂತಹ ಯಾವುದೇ ಫೋಲ್ಡರ್ ಇಲ್ಲ, ಮತ್ತು ಪರೀಕ್ಷೆಯು ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ಪರೀಕ್ಷಿಸುತ್ತಿರುವ ಘಟಕದ ಪಕ್ಕದಲ್ಲಿದೆ.ಟೆಸ್ಟ್', ಆದ್ದರಿಂದ ನಾವು ಇದೀಗ ಅದನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತೇವೆ ಮತ್ತು ಮುಂದಿನ ಪ್ಯಾರಾಮೀಟರ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ;
  • ಸೋನಾರ್.ಪರೀಕ್ಷೆ.ಸೇರ್ಪಡೆಗಳು - ಮುಖವಾಡವನ್ನು ಬಳಸಿಕೊಂಡು ಪರೀಕ್ಷೆಗಳಿಗೆ ಮಾರ್ಗ, ಅಲ್ಪವಿರಾಮದಿಂದ ಪ್ರತ್ಯೇಕಿಸಲಾದ ಹಲವಾರು ಅಂಶಗಳನ್ನು ಪಟ್ಟಿಮಾಡಬಹುದು;
  • sonar.sourceEncoding - ಮೂಲ ಫೈಲ್‌ಗಳಿಗಾಗಿ ಎನ್‌ಕೋಡಿಂಗ್.

ಸ್ಕ್ಯಾನರ್‌ನ ಮೊದಲ ಉಡಾವಣೆಗಾಗಿ, ಮುಖ್ಯ ಹಿಂದಿನ ಕ್ರಿಯೆಯನ್ನು ಹೊರತುಪಡಿಸಿ ಎಲ್ಲವೂ ಸಿದ್ಧವಾಗಿದೆ: ಪರೀಕ್ಷಾ ಎಂಜಿನ್ ಅನ್ನು ಸ್ವತಃ ಪ್ರಾರಂಭಿಸುವುದು, ಇದರಿಂದ ಅದು ವ್ಯಾಪ್ತಿಯ ಬಗ್ಗೆ ಮಾಹಿತಿಯನ್ನು ರಚಿಸಬಹುದು, ಅದನ್ನು ಸ್ಕ್ಯಾನರ್ ನಂತರ ಬಳಸುತ್ತದೆ.

ಆದರೆ ಇದನ್ನು ಮಾಡಲು, ಈ ಮಾಹಿತಿಯನ್ನು ಉತ್ಪಾದಿಸಲು ನೀವು ಪರೀಕ್ಷಾ ಎಂಜಿನ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಈ ಯೋಜನೆಯಲ್ಲಿ, ಪರೀಕ್ಷಾ ಎಂಜಿನ್ ಆಗಿದೆ ಇಲ್ಲ. ಮತ್ತು ಅದರ ಸೆಟ್ಟಿಂಗ್‌ಗಳು ಫೈಲ್‌ನ ಅನುಗುಣವಾದ ವಿಭಾಗದಲ್ಲಿವೆ ಪ್ಯಾಕೇಜ್.

ಈ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಸೇರಿಸೋಣ:

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

ಅಂದರೆ, ವ್ಯಾಪ್ತಿ ಮತ್ತು ಮೂಲವನ್ನು (ವಿನಾಯಿತಿಗಳ ಜೊತೆಗೆ) ಲೆಕ್ಕಾಚಾರ ಮಾಡುವ ಅಗತ್ಯಕ್ಕಾಗಿ ನಾವು ಧ್ವಜವನ್ನು ಹೊಂದಿಸುತ್ತೇವೆ, ಅದರ ಆಧಾರದ ಮೇಲೆ ಅದು ರೂಪುಗೊಳ್ಳುತ್ತದೆ.

ಈಗ ಪರೀಕ್ಷೆಯನ್ನು ನಡೆಸೋಣ:

yarn test

ನಾವು ಈ ಕೆಳಗಿನವುಗಳನ್ನು ನೋಡುತ್ತೇವೆ:

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ಕಾರಣವೆಂದರೆ ಘಟಕದಲ್ಲಿಯೇ ಯಾವುದೇ ಕೋಡ್ ಇಲ್ಲ. ಇದನ್ನು ಸರಿಪಡಿಸೋಣ.

HelloWorld.vue:

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

ವ್ಯಾಪ್ತಿಯನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಇದು ಸಾಕಷ್ಟು ಇರುತ್ತದೆ.

ಪರೀಕ್ಷೆಯನ್ನು ಮರುಪ್ರಾರಂಭಿಸಿದ ನಂತರ, ನಾವು ಇದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುತ್ತೇವೆ:

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ಪರದೆಯ ಮೇಲೆ ನಾವು ಕವರೇಜ್ ಬಗ್ಗೆ ಮಾಹಿತಿಯನ್ನು ನೋಡಬೇಕು ಮತ್ತು ಯೋಜನೆಯ ಫೋಲ್ಡರ್ನಲ್ಲಿ ಫೋಲ್ಡರ್ ಅನ್ನು ರಚಿಸಲಾಗುತ್ತದೆ ವ್ಯಾಪ್ತಿ ಸಾರ್ವತ್ರಿಕ ಸ್ವರೂಪದಲ್ಲಿ ಪರೀಕ್ಷಾ ವ್ಯಾಪ್ತಿಯ ಮಾಹಿತಿಯೊಂದಿಗೆ LCOV (LTP GCOV ವಿಸ್ತರಣೆ).

Gcov ಕೋಡ್ ವ್ಯಾಪ್ತಿಯನ್ನು ಪರೀಕ್ಷಿಸಲು ಮುಕ್ತವಾಗಿ ವಿತರಿಸಲಾದ ಉಪಯುಕ್ತತೆಯಾಗಿದೆ. Gcov ಪ್ರೋಗ್ರಾಂನಲ್ಲಿ ಪ್ರತಿ ಹೇಳಿಕೆಗೆ ನಿಖರವಾದ ಮರಣದಂಡನೆಗಳನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ ಮತ್ತು ಮೂಲ ಕೋಡ್‌ಗೆ ಟಿಪ್ಪಣಿಗಳನ್ನು ಸೇರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. GCC ಪ್ಯಾಕೇಜ್‌ನ ಭಾಗವಾಗಿ Gcov ಪ್ರಮಾಣಿತ ಉಪಯುಕ್ತತೆಯಾಗಿ ಬರುತ್ತದೆ.
ಎಲ್ಕೋವ್ - gcov ಗಾಗಿ ಚಿತ್ರಾತ್ಮಕ ಇಂಟರ್ಫೇಸ್. ಇದು ಬಹು ಮೂಲ ಫೈಲ್‌ಗಳಿಗಾಗಿ gcov ಫೈಲ್‌ಗಳನ್ನು ಜೋಡಿಸುತ್ತದೆ ಮತ್ತು ಕೋಡ್ ಮತ್ತು ಕವರೇಜ್ ಮಾಹಿತಿಯೊಂದಿಗೆ HTML ಪುಟಗಳ ಗುಂಪನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ. ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ಸುಲಭಗೊಳಿಸಲು ಪುಟಗಳನ್ನು ಸಹ ರಚಿಸಲಾಗಿದೆ. Lcov ತಂತಿಗಳು, ಕಾರ್ಯಗಳು ಮತ್ತು ಶಾಖೆಗಳ ವ್ಯಾಪ್ತಿಯನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ.

ಪರೀಕ್ಷೆಗಳು ಪೂರ್ಣಗೊಂಡ ನಂತರ, ಕವರೇಜ್ ಮಾಹಿತಿಯನ್ನು ಇಲ್ಲಿ ಇರಿಸಲಾಗುತ್ತದೆ ವ್ಯಾಪ್ತಿ/lcov.info.
ನಾವು ಹೇಳಬೇಕಾಗಿದೆ ಸೋನಾರ್'ನಾನು ಅದನ್ನು ಎಲ್ಲಿಂದ ಪಡೆಯಬಹುದು? ಆದ್ದರಿಂದ, ಅದರ ಕಾನ್ಫಿಗರೇಶನ್ ಫೈಲ್‌ಗೆ ಕೆಳಗಿನ ಸಾಲುಗಳನ್ನು ಸೇರಿಸೋಣ. ಆದರೆ ಒಂದು ಅಂಶವಿದೆ: ಯೋಜನೆಗಳು ಬಹುಭಾಷಾ ಆಗಿರಬಹುದು, ಅಂದರೆ, ಫೋಲ್ಡರ್ನಲ್ಲಿ Src ಹಲವಾರು ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳಿಗೆ ಮೂಲ ಕೋಡ್‌ಗಳು ಮತ್ತು ಒಂದು ಅಥವಾ ಇನ್ನೊಂದರೊಂದಿಗೆ ಸಂಬಂಧವಿದೆ ಮತ್ತು ಪ್ರತಿಯಾಗಿ, ಒಂದು ಅಥವಾ ಇನ್ನೊಂದು ಪ್ಲಗಿನ್‌ನ ಬಳಕೆಯನ್ನು ಅದರ ವಿಸ್ತರಣೆಯಿಂದ ನಿರ್ಧರಿಸಲಾಗುತ್ತದೆ. ಮತ್ತು ಕವರೇಜ್ ಮಾಹಿತಿಯನ್ನು ವಿವಿಧ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳಿಗಾಗಿ ವಿವಿಧ ಸ್ಥಳಗಳಲ್ಲಿ ಸಂಗ್ರಹಿಸಬಹುದು, ಆದ್ದರಿಂದ ಪ್ರತಿ ಭಾಷೆಯು ಇದನ್ನು ಹೊಂದಿಸಲು ತನ್ನದೇ ಆದ ವಿಭಾಗವನ್ನು ಹೊಂದಿದೆ. ನಮ್ಮ ಯೋಜನೆಯು ಬಳಸುತ್ತದೆ ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್, ಆದ್ದರಿಂದ ನಮಗೆ ಇದಕ್ಕಾಗಿ ಸೆಟ್ಟಿಂಗ್‌ಗಳ ವಿಭಾಗದ ಅಗತ್ಯವಿದೆ:

ಸೋನಾರ್-ಪ್ರಾಜೆಕ್ಟ್.ಪ್ರಾಪರ್ಟೀಸ್:

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

ಸ್ಕ್ಯಾನರ್‌ನ ಮೊದಲ ಉಡಾವಣೆಗೆ ಎಲ್ಲವೂ ಸಿದ್ಧವಾಗಿದೆ. ಯೋಜನೆಯಾಗಿದೆ ಎಂದು ನಾನು ಗಮನಿಸಲು ಬಯಸುತ್ತೇನೆ ಸೋನಾರ್ನಿರ್ದಿಷ್ಟ ಪ್ರಾಜೆಕ್ಟ್‌ಗಾಗಿ ಸ್ಕ್ಯಾನರ್ ಅನ್ನು ನೀವು ಮೊದಲ ಬಾರಿಗೆ ರನ್ ಮಾಡಿದಾಗ 'e ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ರಚಿಸಲಾಗುತ್ತದೆ. ನಂತರದ ಸಮಯಗಳಲ್ಲಿ, ಕಾಲಾನಂತರದಲ್ಲಿ ಯೋಜನೆಯ ನಿಯತಾಂಕಗಳಲ್ಲಿನ ಬದಲಾವಣೆಗಳ ಡೈನಾಮಿಕ್ಸ್ ಅನ್ನು ನೋಡಲು ಮಾಹಿತಿಯನ್ನು ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ.

ಆದ್ದರಿಂದ, ಮೊದಲು ರಚಿಸಲಾದ ಆಜ್ಞೆಯನ್ನು ಬಳಸೋಣ ಪ್ಯಾಕೇಜ್:

yarn run sonar 

ಗಮನಿಸಿ: ನೀವು ನಿಯತಾಂಕವನ್ನು ಸಹ ಬಳಸಬಹುದು -X ಹೆಚ್ಚು ವಿವರವಾದ ಲಾಗಿಂಗ್ಗಾಗಿ.

ಸ್ಕ್ಯಾನರ್ ಅನ್ನು ಮೊದಲ ಬಾರಿಗೆ ಪ್ರಾರಂಭಿಸಿದರೆ, ಸ್ಕ್ಯಾನರ್‌ನ ಬೈನರಿಯನ್ನು ಮೊದಲು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ. ಅದರ ನಂತರ ಅದು ಪ್ರಾರಂಭವಾಗುತ್ತದೆ ಮತ್ತು ಸರ್ವರ್ ಅನ್ನು ಸ್ಕ್ಯಾನ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸುತ್ತದೆ ಸೋನಾರ್ಸ್ಥಾಪಿಸಲಾದ ಪ್ಲಗಿನ್‌ಗಳಿಗಾಗಿ 'a, ಆ ಮೂಲಕ ಬೆಂಬಲಿತ ಭಾಷೆಯನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಅದರ ಕಾರ್ಯಾಚರಣೆಗಾಗಿ ಹಲವಾರು ಇತರ ನಿಯತಾಂಕಗಳನ್ನು ಸಹ ಲೋಡ್ ಮಾಡಲಾಗಿದೆ: ಗುಣಮಟ್ಟದ ಪ್ರೊಫೈಲ್‌ಗಳು, ಸಕ್ರಿಯ ನಿಯಮಗಳು, ಮೆಟ್ರಿಕ್ಸ್ ರೆಪೊಸಿಟರಿ, ಸರ್ವರ್ ನಿಯಮಗಳು.

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ಗಮನಿಸಿ: ಈ ಲೇಖನದ ಚೌಕಟ್ಟಿನೊಳಗೆ ನಾವು ಅವುಗಳ ಮೇಲೆ ವಿವರವಾಗಿ ವಾಸಿಸುವುದಿಲ್ಲ, ಆದರೆ ನೀವು ಯಾವಾಗಲೂ ಅಧಿಕೃತ ಮೂಲಗಳನ್ನು ಸಂಪರ್ಕಿಸಬಹುದು.

ಮುಂದೆ, ಫೋಲ್ಡರ್ ವಿಶ್ಲೇಷಣೆ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ Src ಎಲ್ಲಾ ಮೂಲ ಫೈಲ್‌ಗಳ ಲಭ್ಯತೆಗಾಗಿ (ನಿರ್ದಿಷ್ಟ ಒಂದನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸದಿದ್ದರೆ) ಬೆಂಬಲಿತ ಭಾಷೆ, ಅವುಗಳ ನಂತರದ ಸೂಚಿಕೆಯೊಂದಿಗೆ.

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ಮುಂದಿನ ಹಲವಾರು ಇತರ ವಿಶ್ಲೇಷಣೆಗಳು ಬರುತ್ತವೆ, ಈ ಲೇಖನದಲ್ಲಿ ನಾವು ಗಮನಹರಿಸುವುದಿಲ್ಲ (ಉದಾಹರಣೆಗೆ, ಲಿಂಟಿಂಗ್, ಕೋಡ್ ನಕಲು ಪತ್ತೆ, ಇತ್ಯಾದಿ).

ಸ್ಕ್ಯಾನರ್‌ನ ಕೆಲಸದ ಕೊನೆಯಲ್ಲಿ, ಎಲ್ಲಾ ಸಂಗ್ರಹಿಸಿದ ಮಾಹಿತಿಯನ್ನು ಒಟ್ಟುಗೂಡಿಸಲಾಗುತ್ತದೆ, ಆರ್ಕೈವ್ ಮಾಡಲಾಗುತ್ತದೆ ಮತ್ತು ಸರ್ವರ್‌ಗೆ ಕಳುಹಿಸಲಾಗುತ್ತದೆ.

ಇದರ ನಂತರ, ವೆಬ್ ಇಂಟರ್ಫೇಸ್ನಲ್ಲಿ ಏನಾಯಿತು ಎಂಬುದನ್ನು ನಾವು ಈಗಾಗಲೇ ನೋಡಬಹುದು:

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ನಾವು ನೋಡುವಂತೆ, ಏನಾದರೂ ಕೆಲಸ ಮಾಡಿದೆ, ಮತ್ತು ಕೆಲವು ರೀತಿಯ ಕವರೇಜ್ ಅನ್ನು ಸಹ ತೋರಿಸುತ್ತದೆ, ಆದರೆ ಅದು ನಮ್ಮದಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗುವುದಿಲ್ಲ ಇಲ್ಲ-ವರದಿ.

ಅದನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡೋಣ. ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಹೆಚ್ಚು ವಿವರವಾಗಿ ನೋಡೋಣ, ಕವರೇಜ್ ಮೌಲ್ಯದ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ವಿವರವಾದ ಫೈಲ್ ವರದಿಯಲ್ಲಿ "ಫಾಲ್ ಥ್ರೂ":

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ಮುಖ್ಯ, ಪರಿಶೀಲಿಸಿದ ಫೈಲ್ ಜೊತೆಗೆ ನಾವು ಇಲ್ಲಿ ನೋಡುತ್ತೇವೆ HelloWorld.vue, ಫೈಲ್ ಕೂಡ ಇದೆ main.ts, ಇದು ವ್ಯಾಪ್ತಿಯ ಸಂಪೂರ್ಣ ಚಿತ್ರವನ್ನು ಹಾಳುಮಾಡುತ್ತದೆ. ಆದರೆ ನಾವು ಅದನ್ನು ವ್ಯಾಪ್ತಿಯ ಲೆಕ್ಕಾಚಾರದಿಂದ ಹೇಗೆ ಹೊರಗಿಟ್ಟಿದ್ದೇವೆ. ಹೌದು, ಎಲ್ಲವೂ ಸರಿಯಾಗಿದೆ, ಆದರೆ ಅದು ಮಟ್ಟದಲ್ಲಿತ್ತು ಇಲ್ಲ, ಆದರೆ ಸ್ಕ್ಯಾನರ್ ಅದನ್ನು ಇಂಡೆಕ್ಸ್ ಮಾಡಿದೆ, ಆದ್ದರಿಂದ ಅದು ಅದರ ಲೆಕ್ಕಾಚಾರದಲ್ಲಿ ಕೊನೆಗೊಂಡಿತು.

ಇದನ್ನು ಸರಿಪಡಿಸೋಣ:

ಸೋನಾರ್-ಪ್ರಾಜೆಕ್ಟ್.ಪ್ರಾಪರ್ಟೀಸ್:

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

ನಾನು ಸ್ಪಷ್ಟೀಕರಣವನ್ನು ಮಾಡಲು ಬಯಸುತ್ತೇನೆ: ಈ ಪ್ಯಾರಾಮೀಟರ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಫೋಲ್ಡರ್‌ಗಳ ಜೊತೆಗೆ, ಪ್ಯಾರಾಮೀಟರ್‌ನಲ್ಲಿ ಪಟ್ಟಿ ಮಾಡಲಾದ ಎಲ್ಲಾ ಫೋಲ್ಡರ್‌ಗಳನ್ನು ಸಹ ಸೇರಿಸಲಾಗುತ್ತದೆ ಸೋನಾರ್.ಪರೀಕ್ಷೆ.ಸೇರ್ಪಡೆಗಳು.

ಸ್ಕ್ಯಾನರ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಿದ ನಂತರ, ನಾವು ಸರಿಯಾದ ಮಾಹಿತಿಯನ್ನು ನೋಡುತ್ತೇವೆ:

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ಮುಂದಿನ ಅಂಶವನ್ನು ನೋಡೋಣ - ಗುಣಮಟ್ಟದ ಪ್ರೊಫೈಲ್‌ಗಳು. ನಾನು ಬೆಂಬಲದ ಬಗ್ಗೆ ಮೇಲೆ ಮಾತನಾಡಿದ್ದೇನೆ ಸೋನಾರ್ಒಂದೇ ಸಮಯದಲ್ಲಿ ಹಲವಾರು ಭಾಷೆಗಳು. ಇದು ನಿಖರವಾಗಿ ನಾವು ನೋಡುತ್ತಿರುವುದು. ಆದರೆ ನಮ್ಮ ಯೋಜನೆಯನ್ನು ಬರೆಯಲಾಗಿದೆ ಎಂದು ನಮಗೆ ತಿಳಿದಿದೆ TS, ಆದ್ದರಿಂದ ಅನಗತ್ಯ ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್‌ಗಳು ಮತ್ತು ಚೆಕ್‌ಗಳೊಂದಿಗೆ ಸ್ಕ್ಯಾನರ್ ಅನ್ನು ಏಕೆ ತಗ್ಗಿಸಬೇಕು. ಕಾನ್ಫಿಗರೇಶನ್ ಫೈಲ್‌ಗೆ ಇನ್ನೂ ಒಂದು ನಿಯತಾಂಕವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನಾವು ವಿಶ್ಲೇಷಣೆಗಾಗಿ ಭಾಷೆಯನ್ನು ಹೊಂದಿಸುತ್ತೇವೆ ಸೋನಾರ್'ಎ:

ಸೋನಾರ್-ಪ್ರಾಜೆಕ್ಟ್.ಪ್ರಾಪರ್ಟೀಸ್:

...
sonar.language=ts
...

ಸ್ಕ್ಯಾನರ್ ಅನ್ನು ಮತ್ತೊಮ್ಮೆ ರನ್ ಮಾಡೋಣ ಮತ್ತು ಫಲಿತಾಂಶವನ್ನು ನೋಡೋಣ:

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ಕವರೇಜ್ ಸಂಪೂರ್ಣವಾಗಿ ಹೋಯಿತು.

ನಾವು ಸ್ಕ್ಯಾನರ್ ಲಾಗ್ ಅನ್ನು ನೋಡಿದರೆ, ನಾವು ಈ ಕೆಳಗಿನ ಸಾಲನ್ನು ನೋಡಬಹುದು:

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ಅಂದರೆ, ನಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಫೈಲ್‌ಗಳನ್ನು ಸರಳವಾಗಿ ಇಂಡೆಕ್ಸ್ ಮಾಡಲಾಗಿಲ್ಲ.

ಪರಿಸ್ಥಿತಿ ಹೀಗಿದೆ: ಅಧಿಕೃತವಾಗಿ ಬೆಂಬಲಿತವಾಗಿದೆ VueJs ಪ್ಲಗಿನ್‌ನಲ್ಲಿದೆ ಸೋನಾರ್ಜೆಎಸ್ಯಾರು ಜವಾಬ್ದಾರರು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್.

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ಆದರೆ ಈ ಬೆಂಬಲವು ಪ್ಲಗಿನ್‌ನಲ್ಲಿಲ್ಲ ಸೋನಾರ್ಟಿಎಸ್ ಗೆ TS, ಅದರ ಬಗ್ಗೆ ಬಗ್ ಟ್ರ್ಯಾಕರ್‌ನಲ್ಲಿ ಅಧಿಕೃತ ಟಿಕೆಟ್ ತೆರೆಯಲಾಗಿದೆ ಸೋನಾರ್'ಎ:

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

ಈ ಸತ್ಯವನ್ನು ದೃಢೀಕರಿಸುವ SonarQube ಡೆವಲಪರ್‌ಗಳ ಪ್ರತಿನಿಧಿಗಳಲ್ಲಿ ಒಬ್ಬರಿಂದ ಕೆಲವು ಉತ್ತರಗಳು ಇಲ್ಲಿವೆ.

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ಆದರೆ ಎಲ್ಲವೂ ನಮಗೆ ಕೆಲಸ ಮಾಡಿದೆ, ನೀವು ವಿರೋಧಿಸುತ್ತೀರಿ. ಹೌದು, ಸ್ವಲ್ಪ ಪ್ರಯತ್ನಿಸೋಣ "ಹ್ಯಾಕ್".
ಬೆಂಬಲ ಇದ್ದರೆ .vue-ಕಡತಗಳನ್ನು ಸೋನಾರ್'ಓಹ್, ನಂತರ ಅವರನ್ನು ಪರಿಗಣಿಸಲು ಹೇಳಲು ಪ್ರಯತ್ನಿಸೋಣ ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್.

ಪ್ಯಾರಾಮೀಟರ್ ಅನ್ನು ಸೇರಿಸೋಣ:

ಸೋನಾರ್-ಪ್ರಾಜೆಕ್ಟ್.ಪ್ರಾಪರ್ಟೀಸ್:

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

ಸ್ಕ್ಯಾನರ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸೋಣ:

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ಮತ್ತು, 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

ಸಹಜವಾಗಿ, ನಮ್ಮ ವ್ಯಾಪ್ತಿಯು ಕುಸಿಯುತ್ತದೆ, ಆದರೆ ಈಗ ನಾವು ಅದರಲ್ಲಿ ಆಸಕ್ತಿ ಹೊಂದಿಲ್ಲ.

ಕೋಡ್ನ ನಕಲು ಸಾಲುಗಳ ವಿಷಯದಲ್ಲಿ, ನಾವು ನೋಡುತ್ತೇವೆ:

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ಪರಿಶೀಲಿಸಲು ನಾವು ಬಳಸುತ್ತೇವೆ ಸಿಪಿಡಿ-ಉಪಯುಕ್ತತೆ - jscpd:

npx jscpd src

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ಕೋಡ್ ಸಾಲುಗಳಿಗಾಗಿ:

SonarQube ನೊಂದಿಗೆ VueJS+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

ಇಂಟರ್ಫೇಸ್ನಲ್ಲಿ ಏನು ಬದಲಾಗಿದೆ ಎಂದು ನೋಡೋಣ ಸೋನಾರ್'ಎ:

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ಮತ್ತು ಏನೂ ಬದಲಾಗಿಲ್ಲ. ಜೆಸ್ಟ್ ವರದಿಯಲ್ಲಿ ವಿವರಿಸಿರುವ ಕಡತಗಳನ್ನು ಸೋನಾರ್ ಕಡತಗಳೆಂದು ಪರಿಗಣಿಸುವುದಿಲ್ಲ ಎಂಬುದು ಸತ್ಯ ಘಟಕ- ಪರೀಕ್ಷೆಗಳು. ಈ ಪರಿಸ್ಥಿತಿಯನ್ನು ಸರಿಪಡಿಸಲು, ನಾವು ಕಾನ್ಫಿಗರೇಶನ್ ಪ್ಯಾರಾಮೀಟರ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ ಸೋನಾರ್ ಸೋನಾರ್.ಪರೀಕ್ಷೆಗಳು, ಇದರಲ್ಲಿ ನಾವು ಪರೀಕ್ಷೆಗಳೊಂದಿಗೆ ಫೋಲ್ಡರ್‌ಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಸೂಚಿಸುತ್ತೇವೆ (ನಾವು ಇದೀಗ ಒಂದನ್ನು ಮಾತ್ರ ಹೊಂದಿದ್ದೇವೆ):

ಸೋನಾರ್-ಪ್ರಾಜೆಕ್ಟ್.ಪ್ರಾಪರ್ಟೀಸ್:

…
sonar.tests=src/components/__tests__
…

ಸ್ಕ್ಯಾನರ್ ಅನ್ನು ಮರುಪ್ರಾರಂಭಿಸೋಣ:

yarn run sonar

ಇಂಟರ್ಫೇಸ್ನಲ್ಲಿ ಏನು ಬದಲಾಗಿದೆ ಎಂದು ನೋಡೋಣ:

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ಈಗ ನಾವು ನಮ್ಮ ಸಂಖ್ಯೆಯನ್ನು ನೋಡಿದ್ದೇವೆ ಘಟಕ-ಪರೀಕ್ಷೆಗಳು ಮತ್ತು, ಒಳಗೆ ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ ವಿಫಲವಾದ ನಂತರ, ಪ್ರಾಜೆಕ್ಟ್ ಫೈಲ್‌ಗಳ ನಡುವೆ ಈ ಸಂಖ್ಯೆಯ ವಿತರಣೆಯನ್ನು ನಾವು ನೋಡಬಹುದು:

SonarQube ನೊಂದಿಗೆ VueJS+TS ಯೋಜನೆಯನ್ನು ಸಂಯೋಜಿಸುವುದು

ತೀರ್ಮಾನಕ್ಕೆ

ಆದ್ದರಿಂದ, ನಾವು ನಿರಂತರ ವಿಶ್ಲೇಷಣೆಗಾಗಿ ಸಾಧನವನ್ನು ನೋಡಿದ್ದೇವೆ ಸೋನಾರ್ ಕ್ಯೂಬ್. ನಾವು ಅದರಲ್ಲಿ ಬರೆದ ಯೋಜನೆಯನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಸಂಯೋಜಿಸಿದ್ದೇವೆ VueJs+TS. ಕೆಲವು ಹೊಂದಾಣಿಕೆ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸಲಾಗಿದೆ. ನಾವು ಪರೀಕ್ಷಾ ಕವರೇಜ್ ಸೂಚಕದ ಮಾಹಿತಿ ವಿಷಯವನ್ನು ಹೆಚ್ಚಿಸಿದ್ದೇವೆ. ಈ ಲೇಖನದಲ್ಲಿ, ನಾವು ಕೋಡ್ ಗುಣಮಟ್ಟದ ಮಾನದಂಡಗಳಲ್ಲಿ ಒಂದನ್ನು ಮಾತ್ರ ಪರಿಶೀಲಿಸಿದ್ದೇವೆ (ಬಹುಶಃ ಮುಖ್ಯವಾದವುಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ), ಆದರೆ ಸೋನಾರ್ ಕ್ಯೂಬ್ ಸುರಕ್ಷತೆ ಪರೀಕ್ಷೆ ಸೇರಿದಂತೆ ಇತರ ಗುಣಮಟ್ಟದ ಮಾನದಂಡಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ. ಆದರೆ ಈ ಎಲ್ಲಾ ವೈಶಿಷ್ಟ್ಯಗಳು ಸಂಪೂರ್ಣವಾಗಿ ಲಭ್ಯವಿಲ್ಲ ಸಮುದಾಯ-ಆವೃತ್ತಿಗಳು. ಆಸಕ್ತಿದಾಯಕ ಮತ್ತು ಉಪಯುಕ್ತ ವೈಶಿಷ್ಟ್ಯವೆಂದರೆ ಏಕೀಕರಣ ಸೋನಾರ್ ಕ್ಯೂಬ್ GitLab ಮತ್ತು BitBucket ನಂತಹ ವಿವಿಧ ಕೋಡ್ ರೆಪೊಸಿಟರಿ ನಿರ್ವಹಣಾ ವ್ಯವಸ್ಥೆಗಳೊಂದಿಗೆ. ತಡೆಗಟ್ಟಲು ವಿಲೀನ ಪುಲ್ (ವಿಲೀನ) ವಿನಂತಿಕವರೇಜ್ ಕ್ಷೀಣಿಸಿದಾಗ ರೆಪೊಸಿಟರಿಯ ಮುಖ್ಯ ಶಾಖೆಗೆ 'a. ಆದರೆ ಇದು ಸಂಪೂರ್ಣವಾಗಿ ವಿಭಿನ್ನವಾದ ಲೇಖನಕ್ಕಾಗಿ ಕಥೆಯಾಗಿದೆ.

ಪಿಎಸ್: ಕೋಡ್ ರೂಪದಲ್ಲಿ ಲೇಖನದಲ್ಲಿ ವಿವರಿಸಿದ ಎಲ್ಲವೂ ಲಭ್ಯವಿದೆ ನನ್ನ ಫೋರ್ಕ್.

ನೋಂದಾಯಿತ ಬಳಕೆದಾರರು ಮಾತ್ರ ಸಮೀಕ್ಷೆಯಲ್ಲಿ ಭಾಗವಹಿಸಬಹುದು. ಸೈನ್ ಇನ್ ಮಾಡಿ, ದಯವಿಟ್ಟು.

ನೀವು SonarQube ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಅನ್ನು ಬಳಸುತ್ತೀರಾ:

  • 26,3%ಹೌದು 5

  • 15,8%No3

  • 15,8%ನಾನು ಈ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಬಗ್ಗೆ ಕೇಳಿದ್ದೇನೆ ಮತ್ತು ಬಳಸಲು ಬಯಸುತ್ತೇನೆ3

  • 10,5%ನಾನು ಈ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಬಗ್ಗೆ ಕೇಳಿದ್ದೇನೆ ಮತ್ತು 2 ಅನ್ನು ಬಳಸಲು ಬಯಸುವುದಿಲ್ಲ

  • 0,0%ನಾನು ಬೇರೆ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್0 ಅನ್ನು ಬಳಸುತ್ತಿದ್ದೇನೆ

  • 31,6%ನಾನು ಅವಳ ಬಗ್ಗೆ ಮೊದಲ ಬಾರಿಗೆ ಕೇಳಿದೆ 6

19 ಬಳಕೆದಾರರು ಮತ ಹಾಕಿದ್ದಾರೆ. 3 ಬಳಕೆದಾರರು ದೂರ ಉಳಿದಿದ್ದಾರೆ.

ಮೂಲ: www.habr.com

ಕಾಮೆಂಟ್ ಅನ್ನು ಸೇರಿಸಿ