การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

เราใช้แพลตฟอร์มนี้ในการทำงานของเรา โซนาร์คิวบ์ เพื่อรักษาคุณภาพโค้ดให้อยู่ในระดับสูง เมื่อรวมหนึ่งในโครงการที่เขียนมา VueJs+Typescript,ปัญหาก็เกิดขึ้น. ดังนั้นฉันอยากจะบอกคุณโดยละเอียดว่าเราจัดการแก้ไขปัญหาเหล่านี้ได้อย่างไร

การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

ในบทความนี้ เราจะพูดถึงแพลตฟอร์ม SonarQube ตามที่ฉันได้เขียนไว้ข้างต้น ทฤษฎีเล็ก ๆ น้อย ๆ - โดยทั่วไปคืออะไรสำหรับผู้ที่ได้ยินเรื่องนี้เป็นครั้งแรก:

โซนาร์คิวบ์ (อดีต Sonar) เป็นแพลตฟอร์มโอเพ่นซอร์สสำหรับการตรวจสอบและการวัดคุณภาพโค้ดอย่างต่อเนื่อง
รองรับการวิเคราะห์โค้ดและการตรวจจับข้อผิดพลาดตามกฎของมาตรฐานการเขียนโปรแกรม MISRA C, MISRA C++, MITER/CWE และ CERT Secure Coding Standards นอกจากนี้ยังสามารถรับรู้ข้อผิดพลาดจากรายการข้อผิดพลาดในการเขียนโปรแกรม OWASP Top 10 และ CWE/SANS Top 25
แม้ว่าแพลตฟอร์มจะใช้เครื่องมือสำเร็จรูปมากมาย แต่ SonarQube ก็ลดผลลัพธ์ลงเหลือเพียงแดชบอร์ดเดียว โดยจะเก็บประวัติการทำงาน และทำให้คุณเห็นแนวโน้มทั่วไปของการเปลี่ยนแปลงคุณภาพซอฟต์แวร์ในระหว่างการพัฒนา

สามารถดูรายละเอียดเพิ่มเติมได้ที่ เว็บไซต์อย่างเป็นทางการ

รองรับภาษาการเขียนโปรแกรมจำนวนมาก เมื่อพิจารณาจากข้อมูลจากลิงก์ด้านบน มีมากกว่า 25 ภาษา หากต้องการรองรับภาษาใดภาษาหนึ่ง คุณต้องติดตั้งปลั๊กอินที่เหมาะสม เวอร์ชันชุมชนมีปลั๊กอินสำหรับใช้งานด้วย จาวาสคริปต์ (รวมถึงประเภทсript) แม้ว่าวิกิจะพูดตรงกันข้ามก็ตาม ด้านหลัง จาวาสคริปต์ คำตอบของปลั๊กอิน โซนาร์JS, สำหรับตัวพิมพ์ดีด โซนาร์TS ตามลำดับ

ลูกค้าอย่างเป็นทางการใช้เพื่อส่งข้อมูลความคุ้มครอง เครื่องสแกน sonarqubeซึ่งใช้การตั้งค่าจาก การตั้งค่า-file ส่งข้อมูลนี้ไปยังเซิร์ฟเวอร์ โซนาร์คิวบ์ เพื่อการรวมตัวและการรวมกลุ่มต่อไป

สำหรับ จาวาสคริปต์ เป็น กระดาษห่อ NPM. เรามาเริ่มใช้งานทีละขั้นตอนกันดีกว่า โซนาร์คิวบ์ в ดู-โครงการใช้ ประเภท.

เพื่อปรับใช้เซิร์ฟเวอร์ โซนาร์คิวบ์ มาใช้ประโยชน์กันเถอะ นักเทียบท่า-เขียน.

โซนาร์.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 เข้ากับ SonarQube
ยังไม่มีโครงการใดอยู่ในนั้นและนั่นก็ยุติธรรมแล้ว เราจะแก้ไขสถานการณ์นี้ ฉันใช้โครงการตัวอย่างอย่างเป็นทางการสำหรับ VueJS+TS+Jest. โค้งงอเข้าหาตัวเรา:

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

ก่อนอื่นเราต้องติดตั้งไคลเอนต์ โซนาร์คิวบ์ซึ่งเรียกว่า เครื่องสแกนโซนาร์สำหรับ NPM มีกระดาษห่อ:

yarn add sonarqube-scanner

และเพิ่มคำสั่งลงไปทันที สคริปต์ เพื่อทำงานกับมัน

แพ็คเกจ.json:

{
 … 
   scripts: {
      ...
      "sonar": "sonar-scanner"
      ...
   },
 …
}

ถัดไปเพื่อให้เครื่องสแกนทำงานได้คุณต้องตั้งค่าโปรเจ็กต์เป็นไฟล์พิเศษ เริ่มจากพื้นฐานกันก่อน

โซนาร์-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

  • โซนาร์.host.url - ที่อยู่ Sonar'ก;
  • sonar.projectKey – ตัวระบุโครงการที่ไม่ซ้ำบนเซิร์ฟเวอร์ Sonar'ก;
  • sonar.ชื่อโครงการ – ชื่อสามารถเปลี่ยนแปลงได้ตลอดเวลาเนื่องจากมีการระบุโครงการโดย โครงการคีย์;
  • โซนาร์.แหล่งที่มา – โฟลเดอร์ที่มีแหล่งที่มา โดยปกติจะเป็นเช่นนี้ สิ่งอำนวยความสะดวกแต่จะเป็นอะไรก็ได้ โฟลเดอร์นี้ได้รับการตั้งค่าให้สัมพันธ์กับโฟลเดอร์รูท ซึ่งเป็นโฟลเดอร์ที่เรียกใช้งานสแกนเนอร์
  • โซนาร์.การทดสอบ – พารามิเตอร์ที่ไปควบคู่กับพารามิเตอร์ก่อนหน้า นี่คือโฟลเดอร์ที่เก็บการทดสอบ ในโปรเจ็กต์นี้ ไม่มีโฟลเดอร์ดังกล่าว และการทดสอบจะอยู่ถัดจากส่วนประกอบที่กำลังทดสอบในโฟลเดอร์ 'ทดสอบ' ดังนั้นเราจะเพิกเฉยต่อตอนนี้และใช้พารามิเตอร์ถัดไป
  • โซนาร์ ทดสอบ การรวม – เส้นทางสำหรับการทดสอบโดยใช้มาสก์ อาจมีองค์ประกอบหลายอย่างคั่นด้วยเครื่องหมายจุลภาค
  • sonar.sourceEncoding – การเข้ารหัสสำหรับไฟล์ต้นฉบับ

สำหรับการเปิดตัวสแกนเนอร์ครั้งแรก ทุกอย่างจะพร้อม ยกเว้นการดำเนินการหลักก่อนหน้า: การเปิดตัวกลไกทดสอบ เพื่อให้สามารถสร้างข้อมูลเกี่ยวกับความครอบคลุม ซึ่งสแกนเนอร์จะใช้ในภายหลัง

แต่ในการดำเนินการนี้ คุณจะต้องกำหนดค่าเครื่องมือทดสอบเพื่อสร้างข้อมูลนี้ ในโครงการนี้มีเครื่องมือทดสอบคือ มี. และการตั้งค่าจะอยู่ในส่วนที่เกี่ยวข้องของไฟล์ package.json.

มาเพิ่มการตั้งค่าเหล่านี้:

"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 มาเป็นยูทิลิตี้มาตรฐานซึ่งเป็นส่วนหนึ่งของแพ็คเกจ GCC
ลคอฟ - ส่วนต่อประสานกราฟิกสำหรับ gcov โดยจะรวบรวมไฟล์ gcov สำหรับไฟล์ต้นฉบับหลายไฟล์ และสร้างชุดหน้า HTML พร้อมโค้ดและข้อมูลการครอบคลุม หน้ายังถูกสร้างขึ้นเพื่อให้การนำทางง่ายขึ้น Lcov รองรับการครอบคลุมของสตริง ฟังก์ชัน และสาขา

หลังจากการทดสอบเสร็จสิ้น ข้อมูลความคุ้มครองจะอยู่ในนั้น ความคุ้มครอง/lcov.info.
เราจำเป็นต้องพูด Sonar'ฉันจะหามันได้จากที่ไหน? ดังนั้น ให้เพิ่มบรรทัดต่อไปนี้ลงในไฟล์การกำหนดค่า แต่มีจุดหนึ่ง: โปรเจ็กต์สามารถพูดได้หลายภาษานั่นคือในโฟลเดอร์ สิ่งอำนวยความสะดวก มีซอร์สโค้ดสำหรับภาษาการเขียนโปรแกรมหลายภาษาและความเกี่ยวข้องกับภาษาใดภาษาหนึ่งและในทางกลับกันการใช้ปลั๊กอินอย่างใดอย่างหนึ่งจะถูกกำหนดโดยส่วนขยาย และข้อมูลความครอบคลุมสามารถจัดเก็บไว้ในที่ต่างๆ สำหรับภาษาการเขียนโปรแกรมที่แตกต่างกัน ดังนั้นแต่ละภาษาจึงมีส่วนการตั้งค่าของตัวเอง โครงการของเราใช้ ประเภทดังนั้นเราจึงต้องการส่วนการตั้งค่าสำหรับมันโดยเฉพาะ:

โซนาร์-project.properties:

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

ทุกอย่างพร้อมสำหรับการเปิดตัวสแกนเนอร์ครั้งแรก ผมอยากทราบว่าโครงการนี้ Sonar'e ถูกสร้างขึ้นโดยอัตโนมัติในครั้งแรกที่คุณเรียกใช้เครื่องสแกนสำหรับโปรเจ็กต์ที่กำหนด ในครั้งต่อๆ ไป ข้อมูลจะถูกสะสมเพื่อดูพลวัตของการเปลี่ยนแปลงในพารามิเตอร์ของโครงการเมื่อเวลาผ่านไป

ลองใช้คำสั่งที่สร้างขึ้นก่อนหน้านี้ใน package.json:

yarn run sonar 

หมายเหตุ: คุณยังสามารถใช้พารามิเตอร์ได้ -X เพื่อการบันทึกที่ละเอียดยิ่งขึ้น

หากเปิดตัวสแกนเนอร์เป็นครั้งแรก ไบนารี่ของสแกนเนอร์จะถูกดาวน์โหลดก่อน หลังจากนั้นจะเริ่มและเริ่มการสแกนเซิร์ฟเวอร์ Sonar'a สำหรับปลั๊กอินที่ติดตั้ง ดังนั้นจึงคำนวณภาษาที่รองรับ นอกจากนี้ยังมีการโหลดพารามิเตอร์อื่น ๆ อีกมากมายสำหรับการดำเนินการ: โปรไฟล์คุณภาพ กฎที่ใช้งานอยู่ พื้นที่เก็บข้อมูลเมตริก กฎของเซิร์ฟเวอร์.

การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

หมายเหตุ: เราจะไม่กล่าวถึงรายละเอียดเหล่านี้ภายในกรอบของบทความนี้ แต่คุณสามารถติดต่อแหล่งข้อมูลอย่างเป็นทางการได้ตลอดเวลา

ต่อไป การวิเคราะห์โฟลเดอร์จะเริ่มต้นขึ้น สิ่งอำนวยความสะดวก เพื่อความพร้อมใช้งานของไฟล์ต้นฉบับสำหรับภาษาที่รองรับทั้งหมด (หากไม่ได้ระบุไว้อย่างชัดเจน) พร้อมด้วยการจัดทำดัชนีในภายหลัง

การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

ถัดมาเป็นการวิเคราะห์อื่นๆ มากมาย ซึ่งเราไม่ได้เน้นในบทความนี้ (เช่น การ Linting การตรวจหาการทำซ้ำโค้ด เป็นต้น)

ในตอนท้ายของการทำงานของเครื่องสแกน ข้อมูลที่รวบรวมทั้งหมดจะถูกรวบรวม เก็บถาวร และส่งไปยังเซิร์ฟเวอร์

หลังจากนี้ เราจะเห็นได้ว่าเกิดอะไรขึ้นในเว็บอินเตอร์เฟส:

การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

ดังที่เราเห็น มีบางอย่างใช้ได้ผลและยังแสดงการครอบคลุมบางประเภทด้วย แต่มันไม่ตรงกับของเรา มี-รายงาน.

ลองคิดดูสิ มาดูรายละเอียดโครงการกันดีกว่า คลิกที่ค่าความครอบคลุม และ "ตกลง" ลงในรายงานไฟล์โดยละเอียด:

การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

ที่นี่เราเห็นนอกเหนือจากไฟล์หลักที่ตรวจสอบแล้ว HelloWorld.vueมีไฟล์ หลัก.tsซึ่งทำให้ภาพรวมของการรายงานข่าวเสียไป แต่ทำไมเราถึงแยกมันออกจากการคำนวณความคุ้มครองล่ะ ใช่ ทุกอย่างถูกต้องแต่ก็อยู่ในระดับเดียวกัน มีแต่เครื่องสแกนจัดทำดัชนีไว้ ดังนั้นมันจึงจบลงที่การคำนวณ

มาแก้ไขปัญหานี้กัน:

โซนาร์-project.properties:

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

ฉันต้องการชี้แจง: นอกเหนือจากโฟลเดอร์ที่ระบุในพารามิเตอร์นี้แล้ว โฟลเดอร์ทั้งหมดที่อยู่ในพารามิเตอร์จะถูกเพิ่มด้วย โซนาร์ ทดสอบ การรวม.

หลังจากเปิดตัวสแกนเนอร์เราจะเห็นข้อมูลที่ถูกต้อง:

การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

ลองดูที่จุดต่อไป - โปรไฟล์คุณภาพ. ฉันพูดคุยข้างต้นเกี่ยวกับการสนับสนุน Sonar'om หลายภาษาในเวลาเดียวกัน นี่คือสิ่งที่เราเห็น แต่เรารู้ว่าโครงการของเราเขียนอยู่ใน TSเหตุใดจึงต้องเครียดสแกนเนอร์ด้วยการปรับเปลี่ยนและการตรวจสอบที่ไม่จำเป็น เราจะตั้งค่าภาษาสำหรับการวิเคราะห์โดยเพิ่มพารามิเตอร์อีกหนึ่งตัวให้กับไฟล์การกำหนดค่า Sonar'ก:

โซนาร์-project.properties:

...
sonar.language=ts
...

มารันสแกนเนอร์อีกครั้งแล้วดูผลลัพธ์:

การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

ความคุ้มครองก็หายไปหมด

หากเราดูบันทึกของสแกนเนอร์ เราจะเห็นบรรทัดต่อไปนี้:

การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

นั่นคือไฟล์โครงการของเราไม่ได้รับการจัดทำดัชนี

สถานการณ์มีดังนี้: ได้รับการสนับสนุนอย่างเป็นทางการ วิวเจส อยู่ในปลั๊กอิน โซนาร์JSใครเป็นผู้รับผิดชอบ จาวาสคริปต์.

การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

แต่การสนับสนุนนี้ไม่ได้อยู่ในปลั๊กอิน โซนาร์TS สำหรับ TSซึ่งมีการเปิดตั๋วอย่างเป็นทางการในตัวติดตามบั๊ก Sonar'ก:

  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'โอ้ งั้นลองบอกเขาให้พิจารณาดูสิ ประเภท.

มาเพิ่มพารามิเตอร์กัน:

โซนาร์-project.properties:

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

มาเปิดตัวสแกนเนอร์กัน:

การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

และทุกอย่างก็กลับมาเป็นปกติแล้ว และมีเพียงโปรไฟล์เดียวเท่านั้น ประเภท. นั่นคือเราสามารถแก้ไขปัญหาได้โดยการสนับสนุน VueJs+TS สำหรับ โซนาร์คิวบ์.

ลองไปเพิ่มเติมและปรับปรุงข้อมูลความครอบคลุมสักหน่อย

สิ่งที่เราได้ทำไปแล้ว:

  • เพิ่มเข้าไปในโครงการ Sonar-สแกนเนอร์;
  • ติดตั้ง มี เพื่อสร้างข้อมูลความครอบคลุม
  • กำหนดค่าแล้ว Sonar-สแกนเนอร์;
  • แก้ไขปัญหาการสนับสนุนแล้ว .vue-ไฟล์+ ประเภท.

นอกจากความครอบคลุมของการทดสอบแล้ว ยังมีเกณฑ์ที่เป็นประโยชน์อื่นๆ ที่น่าสนใจสำหรับคุณภาพของโค้ด เช่น การทำสำเนาโค้ดและจำนวนบรรทัด (เกี่ยวข้องกับการคำนวณค่าสัมประสิทธิ์ที่เกี่ยวข้องกับความซับซ้อนของโค้ด) ของโปรเจ็กต์

ในการใช้งานปลั๊กอินในปัจจุบันเพื่อการทำงานด้วย TS (โซนาร์TS) จะไม่ทำงาน CPD (ตัวตรวจจับการคัดลอกวาง) และการนับบรรทัดของโค้ด .vue-ไฟล์

หากต้องการสร้างสถานการณ์สังเคราะห์ของการทำซ้ำโค้ด เพียงทำซ้ำไฟล์คอมโพเนนต์ด้วยชื่ออื่นและเพิ่มลงในโค้ดด้วย หลัก.ts ฟังก์ชันจำลองและทำซ้ำด้วยชื่ออื่น เพื่อตรวจสอบความซ้ำซ้อนเหมือนใน .vue, และใน .ts -ไฟล์

main.ts:

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

ในการดำเนินการนี้ คุณจะต้องใส่เครื่องหมายความคิดเห็นในบรรทัดการกำหนดค่าชั่วคราว:

โซนาร์-project.properties:

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

มารีสตาร์ทเครื่องสแกนพร้อมกับการทดสอบ:

yarn test && yarn run sonar

แน่นอนว่าการรายงานข่าวของเราจะตก แต่ตอนนี้เราไม่สนใจเรื่องนั้นแล้ว

ในแง่ของการทำซ้ำบรรทัดโค้ด เราจะเห็น:

การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

เพื่อตรวจสอบเราจะใช้ CPD-คุณประโยชน์ - jscpd:

npx jscpd src

การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

สำหรับบรรทัดโค้ด:

การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

บางทีสิ่งนี้อาจได้รับการแก้ไขในเวอร์ชันปลั๊กอินในอนาคต โซนาร์JS(TS). ฉันต้องการทราบว่าพวกเขากำลังค่อยๆ เริ่มรวมปลั๊กอินทั้งสองนี้เข้าเป็นหนึ่งเดียว โซนาร์JSซึ่งฉันคิดว่าถูกต้อง

ตอนนี้ฉันต้องการพิจารณาทางเลือกในการปรับปรุงข้อมูลความครอบคลุม

จนถึงตอนนี้ เราสามารถดูความครอบคลุมของการทดสอบเป็นเปอร์เซ็นต์สำหรับทั้งโปรเจ็กต์ และโดยเฉพาะไฟล์ต่างๆ แต่เป็นไปได้ที่จะขยายตัวบ่งชี้นี้ด้วยข้อมูลเกี่ยวกับปริมาณ หน่วย- ทดสอบโครงการตลอดจนในบริบทของไฟล์

มีห้องสมุดที่สามารถ มี- แปลงรายงานเป็นรูปแบบสำหรับ Sonar'ก:
ข้อมูลการทดสอบทั่วไป - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

มาติดตั้งไลบรารี่นี้ในโครงการของเรา:

yarn add jest-sonar-reporter

และเพิ่มเข้าไปในการกำหนดค่า มี:

แพ็คเกจ.json:

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

ตอนนี้เรามาทำการทดสอบกัน:

yarn test

หลังจากนั้นไฟล์จะถูกสร้างขึ้นในรูทของโปรเจ็กต์ ทดสอบรายงาน.xml.

ลองใช้มันในการกำหนดค่า Sonar'ก:

โซนาร์-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

และรีสตาร์ทเครื่องสแกน:

yarn run sonar

มาดูกันว่ามีการเปลี่ยนแปลงอะไรบ้างในอินเทอร์เฟซ Sonar'ก:

การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

และไม่มีอะไรเปลี่ยนแปลง ความจริงก็คือ Sonar ไม่ได้ถือว่าไฟล์ที่อธิบายในรายงาน Jest เป็นไฟล์ หน่วย-ทดสอบ เพื่อแก้ไขสถานการณ์นี้ เราใช้พารามิเตอร์การกำหนดค่า Sonar โซนาร์.การทดสอบซึ่งเราจะระบุโฟลเดอร์ที่มีการทดสอบอย่างชัดเจน (ตอนนี้เรามีเพียงโฟลเดอร์เดียวเท่านั้น):

โซนาร์-project.properties:

…
sonar.tests=src/components/__tests__
…

มารีสตาร์ทเครื่องสแกนกันเถอะ:

yarn run sonar

มาดูกันว่ามีอะไรเปลี่ยนแปลงไปบ้างในอินเทอร์เฟซ:

การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

ตอนนี้เราได้เห็นจำนวนของเราแล้ว หน่วย-tests และเมื่อล้มเหลวโดยการคลิกเข้าไปข้างใน เราจะเห็นการกระจายของหมายเลขนี้ในไฟล์โปรเจ็กต์:

การรวมโปรเจ็กต์ VueJS+TS เข้ากับ SonarQube

ข้อสรุป

ดังนั้นเราจึงดูเครื่องมือสำหรับการวิเคราะห์อย่างต่อเนื่อง โซนาร์คิวบ์. เราประสบความสำเร็จในการรวมโครงการที่เขียนไว้เข้าไปด้วย VueJs+TS. แก้ไขปัญหาความเข้ากันได้บางอย่าง เราเพิ่มเนื้อหาข้อมูลของตัวบ่งชี้ความครอบคลุมการทดสอบ ในบทความนี้ เราได้ตรวจสอบเกณฑ์คุณภาพโค้ดเพียงเกณฑ์เดียว (อาจเป็นเกณฑ์หลักข้อใดข้อหนึ่ง) โซนาร์คิวบ์ รองรับเกณฑ์คุณภาพอื่นๆ รวมถึงการทดสอบความปลอดภัย แต่ไม่ใช่ว่าคุณสมบัติทั้งหมดเหล่านี้จะพร้อมใช้งานอย่างเต็มรูปแบบใน ชุมชน-รุ่น หนึ่งในคุณสมบัติที่น่าสนใจและมีประโยชน์คือการบูรณาการ โซนาร์คิวบ์ พร้อมระบบจัดการ Code Repository ต่างๆ เช่น GitLab และ BitBucket เพื่อหลีกเลี่ยง คำขอรวมการดึง (รวม)'a ไปยังสาขาหลักของพื้นที่เก็บข้อมูลเมื่อความครอบคลุมลดลง แต่นี่เป็นเรื่องราวของบทความที่แตกต่างไปจากเดิมอย่างสิ้นเชิง

PS: ทุกอย่างที่อธิบายไว้ในบทความในรูปแบบของโค้ดมีอยู่ใน ส้อมของฉัน.

เฉพาะผู้ใช้ที่ลงทะเบียนเท่านั้นที่สามารถเข้าร่วมในการสำรวจได้ เข้าสู่ระบบ, โปรด.

คุณใช้แพลตฟอร์ม SonarQube หรือไม่:

  • ลด 26,3%ใช่5

  • ลด 15,8%หมายเลข 3

  • ลด 15,8%ฉันได้ยินเกี่ยวกับแพลตฟอร์มนี้และต้องการใช้3

  • ลด 10,5%ฉันเคยได้ยินเกี่ยวกับแพลตฟอร์มนี้และไม่ต้องการใช้2

  • ลด 0,0%ฉันใช้แพลตฟอร์มอื่น0

  • ลด 31,6%ครั้งแรกที่ฉันได้ยินเกี่ยวกับเธอ6

ผู้ใช้ 19 คนโหวต ผู้ใช้ 3 รายงดออกเสียง

ที่มา: will.com

เพิ่มความคิดเห็น