ພວກເຮົາໃຊ້ເວທີໃນການເຮັດວຽກຂອງພວກເຮົາຢ່າງຈິງຈັງ soundQube ເພື່ອຮັກສາຄຸນນະພາບລະຫັດຢູ່ໃນລະດັບສູງ. ເມື່ອລວມເອົາໂຄງການຫນຶ່ງທີ່ຂຽນໄວ້ໃນ VueJs+ຕົວພິມ, ບັນຫາເກີດຂຶ້ນ. ດັ່ງນັ້ນ, ຂ້າພະເຈົ້າຢາກບອກທ່ານໃນລາຍລະອຽດເພີ່ມເຕີມວ່າພວກເຮົາຈັດການແນວໃດເພື່ອແກ້ໄຂພວກມັນ.

ໃນບົດຄວາມນີ້ພວກເຮົາຈະສົນທະນາ, ດັ່ງທີ່ຂ້າພະເຈົ້າຂຽນຂ້າງເທິງ, ກ່ຽວກັບເວທີ SonarQube. ທິດສະດີເລັກນ້ອຍ - ມັນແມ່ນຫຍັງໂດຍທົ່ວໄປ, ສໍາລັບຜູ້ທີ່ໄດ້ຍິນກ່ຽວກັບມັນຄັ້ງທໍາອິດ:

soundQube (ອະດີດ sonar) ເປັນເວທີແຫຼ່ງເປີດສໍາລັບການກວດກາຢ່າງຕໍ່ເນື່ອງແລະການວັດແທກຄຸນນະພາບລະຫັດ.
ຮອງຮັບການວິເຄາະລະຫັດ ແລະການກວດຫາຂໍ້ຜິດພາດຕາມກົດລະບຽບຂອງ MISRA C, MISRA C++, MITER/CWE ແລະ CERT Secure Coding Standards programming Standards. ມັນຍັງສາມາດຮັບຮູ້ຄວາມຜິດພາດຈາກ OWASP Top 10 ແລະ CWE/SANS Top 25 ລາຍຊື່ຄວາມຜິດພາດການຂຽນໂປຼແກຼມ.
ເຖິງວ່າຈະມີຄວາມຈິງທີ່ວ່າແພລະຕະຟອມໃຊ້ເຄື່ອງມືທີ່ກຽມພ້ອມຕ່າງໆ, SonarQube ຫຼຸດລົງຜົນໄດ້ຮັບໃນ dashboard ດຽວ, ຮັກສາປະຫວັດການແລ່ນແລະດັ່ງນັ້ນຈຶ່ງຊ່ວຍໃຫ້ທ່ານເຫັນແນວໂນ້ມທົ່ວໄປຂອງການປ່ຽນແປງໃນຄຸນນະພາບຂອງຊອບແວໃນລະຫວ່າງການພັດທະນາ.

ລາຍລະອຽດເພີ່ມເຕີມສາມາດພົບໄດ້ທີ່ ເວັບໄຊທ໌ທາງການ

ຈໍານວນຂະຫນາດໃຫຍ່ຂອງພາສາການຂຽນໂປລແກລມໄດ້ຮັບການສະຫນັບສະຫນູນ. ການຕັດສິນໂດຍຂໍ້ມູນຈາກການເຊື່ອມຕໍ່ຂ້າງເທິງ, ເຫຼົ່ານີ້ແມ່ນຫຼາຍກ່ວາ 25 ພາສາ. ເພື່ອຮອງຮັບພາສາສະເພາະ, ທ່ານຕ້ອງຕິດຕັ້ງ plugin ທີ່ເຫມາະສົມ. ສະບັບຊຸມຊົນປະກອບມີ plugin ສໍາລັບການເຮັດວຽກກັບ Javascript (ລວມທັງ typesсript), ເຖິງແມ່ນວ່າ wiki ເວົ້າວ່າກົງກັນຂ້າມ. ຫລັງ Javascript plugin ຄໍາຕອບ SonarJS, ສໍາລັບ Typescript SonarTS respectively

ລູກຄ້າຢ່າງເປັນທາງການຖືກນໍາໃຊ້ເພື່ອສົ່ງຂໍ້ມູນການຄຸ້ມຄອງ sonarqube-ເຄື່ອງສະແກນ, ທີ່, ການນໍາໃຊ້ການຕັ້ງຄ່າຈາກ config-file, ສົ່ງຂໍ້ມູນນີ້ໄປຫາເຄື່ອງແມ່ຂ່າຍ soundQube ສໍາລັບການລວມແລະການລວບລວມຕື່ມອີກ.

ໄປ Javascript ມີແມ່ນ npm wrapper. ດັ່ງນັ້ນ, ໃຫ້ເລີ່ມຕົ້ນການປະຕິບັດຂັ້ນຕອນໂດຍຂັ້ນຕອນ soundQube в Vue- ໂຄງ​ການ​ການ​ນໍາ​ໃຊ້​ ຕົວອັກສອນ.

ເພື່ອນຳໃຊ້ເຊີບເວີ soundQube ໃຫ້ເຮົາໃຊ້ປະໂຫຍດ docker-compose.

sonar.yaml:

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

ເປີດຕົວ:

docker-compose -f sonar.yml up

ຫຼັງຈາກນີ້ soundQube ຈະມີຢູ່: http://localhost:9001 .

ຍັງ​ບໍ່​ມີ​ໂຄງ​ການ​ຢູ່​ໃນ​ມັນ​ເທື່ອ​ແລະ​ວ່າ​ແມ່ນ​ຍຸ​ຕິ​ທໍາ​. ພວກເຮົາຈະແກ້ໄຂສະຖານະການນີ້. ຂ້າພະເຈົ້າໄດ້ເອົາໂຄງການຕົວຢ່າງຢ່າງເປັນທາງການສໍາລັບ VueJS+TS+Jest. ໃຫ້ພວກເຮົາກົ້ມໃສ່ຕົວເຮົາເອງ:

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

ທໍາອິດພວກເຮົາຈໍາເປັນຕ້ອງໄດ້ຕິດຕັ້ງລູກຄ້າ soundQube, ເຊິ່ງເອີ້ນວ່າ sonar-ສະແກນສຳ ລັບ npm ມີ wrapper ເປັນ:

yarn add sonarqube-scanner

ແລະທັນທີເພີ່ມຄໍາສັ່ງໃສ່ scripts ເຮັດວຽກກັບມັນ.

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 - ທີ່ຢູ່ sonar'ກ;
• sonar.projectKey – ຕົວລະບຸໂຄງການທີ່ເປັນເອກະລັກໃນເຊີບເວີ sonar'ກ;
• sonar.projectName – ຊື່​ຂອງ​ຕົນ​, ມັນ​ສາ​ມາດ​ໄດ້​ຮັບ​ການ​ປ່ຽນ​ແປງ​ໄດ້​ທຸກ​ເວ​ລາ​, ນັບ​ຕັ້ງ​ແຕ່​ໂຄງ​ການ​ໄດ້​ຖືກ​ກໍາ​ນົດ​ໂດຍ​ ລະຫັດໂຄງການ;
• sonar.ແຫຼ່ງ - ໂຟນເດີທີ່ມີແຫຼ່ງ, ປົກກະຕິແລ້ວນີ້ 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);
},
...

ນີ້ຈະພຽງພໍທີ່ຈະຄິດໄລ່ການຄຸ້ມຄອງ.

ຫຼັງ​ຈາກ​ການ restart ການ​ທົດ​ສອບ​, ພວກ​ເຮົາ​ຈະ​ເຮັດ​ໃຫ້​ແນ່​ໃຈວ່​າ​ນີ້​:

ໃນຫນ້າຈໍທີ່ພວກເຮົາຄວນຈະເຫັນຂໍ້ມູນກ່ຽວກັບການຄຸ້ມຄອງ, ແລະໂຟນເດີຈະຖືກສ້າງຂື້ນໃນໂຟນເດີໂຄງການ ການຄຸ້ມຄອງ ກັບຂໍ້ມູນການທົດສອບການຄຸ້ມຄອງໃນຮູບແບບທົ່ວໄປ LCOV (ສ່ວນຂະຫຍາຍ LTP GCOV).

Gcov ເປັນ​ປະ​ໂຫຍດ​ແຈກ​ຢາຍ freely ສໍາ​ລັບ​ການ​ກວດ​ສອບ​ການ​ຄຸ້ມ​ຄອງ​ລະ​ຫັດ​. Gcov ສ້າງຈໍານວນການປະຕິບັດທີ່ແນ່ນອນສໍາລັບແຕ່ລະຄໍາຖະແຫຼງໃນໂຄງການແລະອະນຸຍາດໃຫ້ທ່ານເພີ່ມຄໍາບັນຍາຍໃສ່ລະຫັດແຫຼ່ງ. Gcov ມາເປັນຜົນປະໂຫຍດມາດຕະຖານເປັນສ່ວນຫນຶ່ງຂອງຊຸດ GCC.
Lcov - ການໂຕ້ຕອບຮູບພາບສໍາລັບ gcov. ມັນປະກອບໄຟລ໌ gcov ສໍາລັບໄຟລ໌ແຫຼ່ງຫຼາຍແລະຜະລິດຊຸດຂອງຫນ້າ HTML ທີ່ມີລະຫັດແລະຂໍ້ມູນການຄຸ້ມຄອງ. ຫນ້າເວັບຍັງຖືກສ້າງຂື້ນເພື່ອເຮັດໃຫ້ການນໍາທາງງ່າຍຂຶ້ນ. Lcov ສະຫນັບສະຫນູນການຄຸ້ມຄອງສາຍ, ຫນ້າທີ່, ແລະສາຂາ.

ຫຼັງຈາກການທົດສອບສໍາເລັດ, ຂໍ້ມູນການຄຸ້ມຄອງຈະຖືກຕັ້ງຢູ່ໃນ coverage/lcov.info.
ພວກເຮົາຈໍາເປັນຕ້ອງເວົ້າ sonar'ຂ້ອຍສາມາດເອົາມັນມາຈາກໃສ? ດັ່ງນັ້ນ, ໃຫ້ເພີ່ມເສັ້ນຕໍ່ໄປນີ້ໃສ່ໄຟລ໌ການຕັ້ງຄ່າຂອງມັນ. ແຕ່ມີຈຸດຫນຶ່ງ: ໂຄງການສາມາດມີຫຼາຍພາສາ, ນັ້ນແມ່ນ, ໃນໂຟນເດີ src ມີລະຫັດແຫຼ່ງສໍາລັບຫລາຍພາສາການຂຽນໂປລແກລມແລະການເຊື່ອມໂຍງກັບຫນຶ່ງຫຼືອື່ນ, ແລະໃນທາງກັບກັນ, ການນໍາໃຊ້ຫນຶ່ງຫຼື plugin ອື່ນຖືກກໍານົດໂດຍການຂະຫຍາຍຂອງມັນ. ແລະຂໍ້ມູນການຄຸ້ມຄອງສາມາດຖືກເກັບໄວ້ໃນສະຖານທີ່ຕ່າງໆສໍາລັບພາສາການຂຽນໂປຼແກຼມທີ່ແຕກຕ່າງກັນ, ດັ່ງນັ້ນແຕ່ລະພາສາມີສ່ວນຂອງຕົນເອງສໍາລັບການຕັ້ງຄ່ານີ້. ໂຄງການຂອງພວກເຮົາໃຊ້ ຕົວອັກສອນ, ດັ່ງນັ້ນພວກເຮົາຕ້ອງການພາກສ່ວນການຕັ້ງຄ່າພຽງແຕ່ສໍາລັບມັນ:

sonar-project.properties:

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

ທຸກສິ່ງທຸກຢ່າງແມ່ນກຽມພ້ອມສໍາລັບການເປີດຕົວຄັ້ງທໍາອິດຂອງເຄື່ອງສະແກນ. ຂ້າພະເຈົ້າຢາກຈະສັງເກດວ່າໂຄງການແມ່ນ sonar'e ຖືກສ້າງຂື້ນໂດຍອັດຕະໂນມັດໃນຄັ້ງ ທຳ ອິດທີ່ທ່ານແລ່ນເຄື່ອງສະແກນ ສຳ ລັບໂຄງການໃດ ໜຶ່ງ. ໃນເວລາຕໍ່ມາ, ຂໍ້ມູນຈະຖືກສະສົມເພື່ອເບິ່ງການປ່ຽນແປງຂອງຕົວກໍານົດການຂອງໂຄງການໃນໄລຍະເວລາ.

ດັ່ງນັ້ນ, ໃຫ້ໃຊ້ຄໍາສັ່ງທີ່ສ້າງຂຶ້ນກ່ອນຫນ້ານັ້ນ ຊຸດ .json:

yarn run sonar 

ຫມາຍເຫດ: ທ່ານຍັງສາມາດໃຊ້ພາລາມິເຕີໄດ້ -X ສໍາລັບການບັນທຶກລາຍລະອຽດເພີ່ມເຕີມ.

ຖ້າເຄື່ອງສະແກນຖືກເປີດຕົວຄັ້ງທໍາອິດ, ຫຼັງຈາກນັ້ນ, binary ຂອງເຄື່ອງສະແກນຕົວມັນເອງຈະຖືກດາວໂຫຼດກ່ອນ. ຫຼັງຈາກນັ້ນ, ມັນເລີ່ມຕົ້ນແລະເລີ່ມຕົ້ນການສະແກນເຄື່ອງແມ່ຂ່າຍ sonar'a ສໍາລັບ plugins ທີ່ຕິດຕັ້ງ, ດັ່ງນັ້ນການຄິດໄລ່ພາສາທີ່ສະຫນັບສະຫນູນ. ຕົວກໍານົດການອື່ນໆທີ່ຫຼາກຫຼາຍສໍາລັບການດໍາເນີນການຂອງມັນແມ່ນຍັງໂຫລດ: ໂປຣໄຟລ໌ຄຸນນະພາບ, ກົດລະບຽບການເຄື່ອນໄຫວ, ຄັງເກັບມ້ຽນ metrics, ກົດລະບຽບຂອງເຄື່ອງແມ່ຂ່າຍ.

ຫມາຍເຫດ: ພວກເຮົາຈະບໍ່ອາໄສຢູ່ກັບພວກມັນໃນລາຍລະອຽດພາຍໃນຂອບຂອງບົດຄວາມນີ້, ແຕ່ທ່ານສາມາດຕິດຕໍ່ກັບແຫຼ່ງທີ່ເປັນທາງການໄດ້ຕະຫຼອດເວລາ.

ຕໍ່ໄປ, ການວິເຄາະໂຟນເດີເລີ່ມຕົ້ນ src ສໍາລັບການມີໄຟລ໌ແຫຼ່ງສໍາລັບທຸກຄົນ (ຖ້າຫາກວ່າສະເພາະໃດຫນຶ່ງບໍ່ໄດ້ລະບຸຢ່າງຊັດເຈນ) ພາສາທີ່ສະຫນັບສະຫນູນ, ດ້ວຍການດັດສະນີຕໍ່ມາຂອງພວກເຂົາ.

ຕໍ່ໄປແມ່ນການວິເຄາະອື່ນໆ, ເຊິ່ງພວກເຮົາບໍ່ໄດ້ສຸມໃສ່ໃນບົດຄວາມນີ້ (ຕົວຢ່າງເຊັ່ນ: linting, ການກວດສອບການຊໍ້າຊ້ອນຂອງລະຫັດ, ແລະອື່ນໆ).

ໃນຕອນທ້າຍຂອງການເຮັດວຽກຂອງເຄື່ອງສະແກນ, ຂໍ້ມູນທັງຫມົດທີ່ເກັບກໍາໄດ້ຖືກລວບລວມ, ເກັບໄວ້ແລະຖືກສົ່ງໄປຫາເຄື່ອງແມ່ຂ່າຍ.

ຫຼັງຈາກນີ້, ພວກເຮົາສາມາດເຫັນສິ່ງທີ່ເກີດຂຶ້ນໃນການໂຕ້ຕອບຂອງເວັບ:

ດັ່ງທີ່ພວກເຮົາສາມາດເຫັນໄດ້, ບາງສິ່ງບາງຢ່າງເຮັດວຽກ, ແລະແມ້ກະທັ້ງສະແດງໃຫ້ເຫັນບາງປະເພດຂອງການຄຸ້ມຄອງ, ແຕ່ມັນບໍ່ກົງກັບພວກເຮົາ ມີ- ລາຍ​ງານ​.

ໃຫ້ຄິດອອກ. ໃຫ້ເບິ່ງໂຄງການໃນລາຍລະອຽດເພີ່ມເຕີມ, ໃຫ້ຄລິກໃສ່ມູນຄ່າການຄຸ້ມຄອງ, ແລະ "ຕົກລົງ" ເຂົ້າໄປໃນບົດລາຍງານເອກະສານລາຍລະອຽດ:

ໃນທີ່ນີ້ພວກເຮົາເຫັນ, ນອກເຫນືອໄປຈາກເອກະສານຕົ້ນຕໍ, ກວດສອບ HelloWorld.vue, ຍັງມີໄຟລ໌ main.ts, ເຊິ່ງເຮັດໃຫ້ເສຍພາບທັງໝົດຂອງການຄຸ້ມຄອງ. ແຕ່ວິທີການທີ່ພວກເຮົາໄດ້ຍົກເວັ້ນມັນຈາກການຄິດໄລ່ການຄຸ້ມຄອງ. ແມ່ນແລ້ວ, ທຸກສິ່ງທຸກຢ່າງແມ່ນຖືກຕ້ອງ, ແຕ່ມັນຢູ່ໃນລະດັບ ມີ, ແຕ່ເຄື່ອງສະແກນດັດສະນີມັນ, ສະນັ້ນມັນສິ້ນສຸດລົງໃນການຄິດໄລ່ຂອງມັນ.

ໃຫ້ແກ້ໄຂບັນຫານີ້:

sonar-project.properties:

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

ຂ້ອຍຕ້ອງການຄວາມກະຈ່າງແຈ້ງ: ນອກຈາກໂຟນເດີທີ່ລະບຸໄວ້ໃນພາລາມິເຕີນີ້, ໂຟນເດີທັງຫມົດທີ່ລະບຸໄວ້ໃນພາລາມິເຕີກໍ່ຖືກເພີ່ມເຂົ້າ. sonar.test.inclusions.

ຫຼັງຈາກເປີດເຄື່ອງສະແກນ, ພວກເຮົາເຫັນຂໍ້ມູນທີ່ຖືກຕ້ອງ:

ຂໍ​ໃຫ້​ເບິ່ງ​ໃນ​ຈຸດ​ຕໍ່​ໄປ - ໂປຼໄຟລ໌ຄຸນນະພາບ. ຂ້າພະເຈົ້າໄດ້ເວົ້າຂ້າງເທິງກ່ຽວກັບການສະຫນັບສະຫນູນ sonar'om ຫຼາຍພາສາໃນເວລາດຽວກັນ. ນີ້ແມ່ນສິ່ງທີ່ພວກເຮົາກໍາລັງເຫັນແທ້ໆ. ແຕ່ພວກເຮົາຮູ້ວ່າໂຄງການຂອງພວກເຮົາຖືກຂຽນໄວ້ໃນ TS, ດັ່ງນັ້ນເປັນຫຍັງຈຶ່ງເມື່ອຍເຄື່ອງສະແກນດ້ວຍການຫມູນໃຊ້ແລະການກວດສອບທີ່ບໍ່ຈໍາເປັນ. ພວກເຮົາຈະກໍານົດພາສາສໍາລັບການວິເຄາະໂດຍການເພີ່ມຫນຶ່ງພາລາມິເຕີເພີ່ມເຕີມກັບໄຟລ໌ການຕັ້ງຄ່າ sonar'A:

sonar-project.properties:

...
sonar.language=ts
...

ລອງແລ່ນເຄື່ອງສະແກນອີກຄັ້ງ ແລະເບິ່ງຜົນ:

ການຄຸ້ມຄອງໄດ້ຫມົດໄປ.

ຖ້າພວກເຮົາເບິ່ງບັນທຶກຂອງເຄື່ອງສະແກນ, ພວກເຮົາສາມາດເຫັນເສັ້ນຕໍ່ໄປນີ້:

ນັ້ນແມ່ນ, ໄຟລ໌ໂຄງການຂອງພວກເຮົາພຽງແຕ່ບໍ່ໄດ້ຖືກດັດສະນີ.

ສະຖານະການແມ່ນດັ່ງຕໍ່ໄປນີ້: ສະຫນັບສະຫນູນຢ່າງເປັນທາງການ VueJs ຢູ່ໃນ plugin SonarJSຜູ້ທີ່ຮັບຜິດຊອບ Javascript.

ແຕ່ການສະຫນັບສະຫນູນນີ້ບໍ່ແມ່ນຢູ່ໃນ plugin SonarTS ການ TS, ກ່ຽວກັບການທີ່ປີ້ຢ່າງເປັນທາງການໄດ້ເປີດຢູ່ໃນຕົວຕິດຕາມແມງໄມ້ sonar'A:

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

ນີ້ແມ່ນບາງຄໍາຕອບຈາກຫນຶ່ງໃນຜູ້ຕາງຫນ້າຈາກນັກພັດທະນາ SonarQube, ຢືນຢັນຄວາມຈິງນີ້.

ແຕ່ທຸກສິ່ງທຸກຢ່າງເຮັດວຽກສໍາລັບພວກເຮົາ, ທ່ານຄັດຄ້ານ. ແມ່ນແລ້ວ, ໃຫ້ລອງມັນໜ້ອຍໜຶ່ງ "ແຮກ".
ຖ້າມີການສະຫນັບສະຫນູນ .vue- ໄຟລ​໌​ sonar'ໂອ້, ແລ້ວລອງບອກລາວໃຫ້ພິຈາລະນາເຂົາເຈົ້າ ຕົວອັກສອນ.

ມາເພີ່ມພາຣາມິເຕີ:

sonar-project.properties:

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

ມາເປີດເຄື່ອງສະແກນ:

ແລະ, voila, ທຸກສິ່ງທຸກຢ່າງແມ່ນກັບຄືນສູ່ປົກກະຕິ, ແລະມີໂປຣໄຟລ໌ດຽວສໍາລັບ ຕົວອັກສອນ. ນັ້ນແມ່ນ, ພວກເຮົາໄດ້ຈັດການແກ້ໄຂບັນຫາໃນການສະຫນັບສະຫນູນ VueJs+TS ການ soundQube.

ໃຫ້ພະຍາຍາມຕໍ່ໄປແລະປັບປຸງຂໍ້ມູນການຄຸ້ມຄອງເລັກນ້ອຍ.

ສິ່ງທີ່ພວກເຮົາໄດ້ເຮັດມາເຖິງຕອນນັ້ນ:

• ເພີ່ມໃສ່ໂຄງການ sonar- ເຄື່ອງສະແກນ;
• ຕັ້ງ​ຄ່າ ມີ ເພື່ອສ້າງຂໍ້ມູນການຄຸ້ມຄອງ;
• ກຳນົດຄ່າ sonar- ເຄື່ອງສະແກນ;
• ແກ້​ໄຂ​ບັນ​ຫາ​ສະ​ຫນັບ​ສະ​ຫນູນ​ .vue-files + ຕົວອັກສອນ.

ນອກເຫນືອຈາກການທົດສອບການຄຸ້ມຄອງ, ມີເງື່ອນໄຂທີ່ເປັນປະໂຫຍດອື່ນໆທີ່ຫນ້າສົນໃຈສໍາລັບຄຸນນະພາບຂອງລະຫັດ, ຕົວຢ່າງ, ການຊໍ້າຊ້ອນລະຫັດແລະຈໍານວນສາຍ (ກ່ຽວຂ້ອງກັບການຄິດໄລ່ຄ່າສໍາປະສິດທີ່ກ່ຽວຂ້ອງກັບຄວາມສັບສົນຂອງລະຫັດ) ຂອງໂຄງການ.

ໃນການປະຕິບັດໃນປະຈຸບັນຂອງ plugin ສໍາລັບການເຮັດວຽກກັບ TS (SonarTS) ຈະບໍ່ເຮັດວຽກ CPD (Copy Paste Detector) ແລະການນັບສາຍຂອງລະຫັດ .vue- ໄຟລ​໌​.

ເພື່ອສ້າງສະຖານະການສັງເຄາະຂອງການຊໍ້າຊ້ອນລະຫັດ, ພຽງແຕ່ເຮັດຊ້ໍາໄຟລ໌ອົງປະກອບທີ່ມີຊື່ທີ່ແຕກຕ່າງກັນແລະເພີ່ມມັນໃສ່ລະຫັດ. main.ts ຟັງຊັນ dummy ແລະເຮັດຊ້ໍາມັນດ້ວຍຊື່ອື່ນ. ເພື່ອກວດສອບການຊໍ້າຊ້ອນເຊັ່ນໃນ .vue, ແລະໃນ .ts - ໄຟລ​໌​.

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

ສໍາລັບເສັ້ນລະຫັດ:

ບາງທີນີ້ຈະຖືກແກ້ໄຂໃນສະບັບ plugin ໃນອະນາຄົດ SonarJS(TS). ຂ້າ​ພະ​ເຈົ້າ​ຢາກ​ຈະ​ສັງ​ເກດ​ວ່າ​ພວກ​ເຂົາ​ເຈົ້າ​ແມ່ນ​ຄ່ອຍໆ​ເລີ່ມ​ຕົ້ນ​ທີ່​ຈະ​ລວມ​ທັງ​ສອງ plugins ນີ້​ເປັນ​ຫນຶ່ງ​ SonarJS, ທີ່ຂ້າພະເຈົ້າຄິດວ່າຖືກຕ້ອງ.

ຕອນນີ້ຂ້ອຍຢາກພິຈາລະນາທາງເລືອກໃນການປັບປຸງຂໍ້ມູນການຄຸ້ມຄອງ.

ມາຮອດປະຈຸ, ພວກເຮົາສາມາດເຫັນການຄຸ້ມຄອງການທົດສອບໃນຂໍ້ກໍານົດສ່ວນຮ້ອຍສໍາລັບໂຄງການທັງຫມົດ, ແລະສໍາລັບໄຟລ໌ໂດຍສະເພາະ. ແຕ່ມັນເປັນໄປໄດ້ທີ່ຈະຂະຫຍາຍຕົວຊີ້ວັດນີ້ດ້ວຍຂໍ້ມູນກ່ຽວກັບປະລິມານ ຫນ່ວຍບໍລິການ-tests ສໍາ​ລັບ​ໂຄງ​ການ​, ເຊັ່ນ​ດຽວ​ກັນ​ກັບ​ໃນ​ສະ​ພາບ​ຂອງ​ໄຟລ​໌​.

ມີຫ້ອງສະຫມຸດທີ່ສາມາດ ມີ- ປ່ຽນ​ບົດ​ລາຍ​ງານ​ເປັນ​ຮູບ​ແບບ​ສໍາ​ລັບ​ການ​ sonar'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.

ໃຫ້ເຮົາໃຊ້ມັນໃນການຕັ້ງຄ່າ sonar'A:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

ແລະຣີສະຕາດເຄື່ອງສະແກນ:

yarn run sonar

ໃຫ້ຂອງເບິ່ງສິ່ງທີ່ມີການປ່ຽນແປງໃນການໂຕ້ຕອບ sonar'A:

ແລະບໍ່ມີຫຍັງປ່ຽນແປງ. ຄວາມຈິງແມ່ນວ່າ Sonar ບໍ່ໄດ້ພິຈາລະນາໄຟລ໌ທີ່ອະທິບາຍໄວ້ໃນບົດລາຍງານ Jest ເປັນໄຟລ໌ ຫນ່ວຍບໍລິການ- ການ​ທົດ​ສອບ​. ເພື່ອແກ້ໄຂສະຖານະການນີ້, ພວກເຮົາໃຊ້ພາລາມິເຕີການຕັ້ງຄ່າ sonar sonar.tests, ທີ່ພວກເຮົາຈະຊີ້ບອກຢ່າງຊັດເຈນໂຟນເດີທີ່ມີການທົດສອບ (ພວກເຮົາມີພຽງແຕ່ຫນຶ່ງສໍາລັບໃນປັດຈຸບັນ):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

ມາເລີ່ມເຄື່ອງສະແກນໃໝ່:

yarn run sonar

ມາເບິ່ງສິ່ງທີ່ມີການປ່ຽນແປງໃນການໂຕ້ຕອບ:

ໃນປັດຈຸບັນພວກເຮົາໄດ້ເຫັນຈໍານວນຂອງພວກເຮົາ ຫນ່ວຍບໍລິການ-tests ແລະ, ສົບຜົນສໍາເລັດໂດຍການຄລິກໃສ່ພາຍໃນ, ພວກເຮົາສາມາດເຫັນການແຜ່ກະຈາຍຂອງຈໍານວນນີ້ໃນບັນດາໄຟລ໌ໂຄງການ:

ສະຫລຸບ

ດັ່ງນັ້ນ, ພວກເຮົາໄດ້ເບິ່ງເຄື່ອງມືສໍາລັບການວິເຄາະຢ່າງຕໍ່ເນື່ອງ soundQube. ພວກ​ເຮົາ​ໄດ້​ປະ​ສົມ​ປະ​ສານ​ຢ່າງ​ສໍາ​ເລັດ​ຜົນ​ເຂົ້າ​ໄປ​ໃນ​ໂຄງ​ການ​ເປັນ​ລາຍ​ລັກ​ອັກ​ສອນ​ໃນ​ VueJs+TS. ແກ້ໄຂບັນຫາຄວາມເຂົ້າກັນໄດ້ບາງຢ່າງ. ພວກເຮົາໄດ້ເພີ່ມເນື້ອໃນຂໍ້ມູນຂອງຕົວຊີ້ວັດການຄຸ້ມຄອງການທົດສອບ. ໃນບົດຄວາມນີ້ພວກເຮົາໄດ້ກວດເບິ່ງພຽງແຕ່ຫນຶ່ງຂອງເງື່ອນໄຂຄຸນນະພາບຂອງລະຫັດ (ບາງທີອາດຈະເປັນຫນຶ່ງຕົ້ນຕໍ), ແຕ່ soundQube ສະຫນັບສະຫນູນມາດຕະຖານຄຸນນະພາບອື່ນໆ, ລວມທັງການທົດສອບຄວາມປອດໄພ. ແຕ່ບໍ່ແມ່ນຄຸນສົມບັດທັງໝົດເຫຼົ່ານີ້ມີຢູ່ໃນ ຊຸມຊົນ- ສະ​ບັບ​. ຫນຶ່ງໃນລັກສະນະທີ່ຫນ້າສົນໃຈແລະເປັນປະໂຫຍດແມ່ນການເຊື່ອມໂຍງ soundQube ກັບລະບົບການຈັດການຄັງເກັບລະຫັດຕ່າງໆ, ເຊັ່ນ GitLab ແລະ BitBucket. ເພື່ອປ້ອງກັນ merge pull(merge) ຄໍາຮ້ອງຂໍ'a ໄປຫາສາຂາຕົ້ນຕໍຂອງ repository ໃນເວລາທີ່ການຄຸ້ມຄອງຖືກຊຸດໂຊມ. ແຕ່ນີ້ແມ່ນເລື່ອງສໍາລັບບົດຄວາມທີ່ແຕກຕ່າງກັນຫມົດ.

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