Chúng tôi tích cực sử dụng nền tảng này trong công việc của mình soundQube để duy trì chất lượng mã ở mức cao. Khi tích hợp một trong các dự án được viết bằng VueJs+Bản đánh máy, vấn đề nảy sinh. Vì vậy, tôi muốn kể cho bạn chi tiết hơn về cách chúng tôi giải quyết chúng.

Trong bài viết này, chúng ta sẽ nói về nền tảng SonarQube, như tôi đã viết ở trên. Một lý thuyết nhỏ - nói chung là gì, dành cho những ai lần đầu nghe về nó:

soundQube (trước Sonar) là một nền tảng nguồn mở để kiểm tra liên tục và đo lường chất lượng mã.
Hỗ trợ phân tích mã và phát hiện lỗi theo quy tắc của tiêu chuẩn lập trình MISRA C, MISRA C++, MITER/CWE và CERT Secure Coding Standards. Nó cũng có thể nhận ra các lỗi từ danh sách lỗi lập trình Top 10 của OWASP và CWE/SANS Top 25.
Mặc dù thực tế là nền tảng này sử dụng nhiều công cụ làm sẵn khác nhau, SonarQube giảm kết quả xuống một trang tổng quan duy nhất, lưu giữ lịch sử các lần chạy và từ đó cho phép bạn xem xu hướng chung về những thay đổi về chất lượng phần mềm trong quá trình phát triển.

Thông tin chi tiết có thể được tìm thấy tại trang web chính thức

Một số lượng lớn các ngôn ngữ lập trình được hỗ trợ. Đánh giá theo thông tin từ liên kết ở trên, đây là hơn 25 ngôn ngữ. Để hỗ trợ một ngôn ngữ cụ thể, bạn phải cài đặt plugin thích hợp. Phiên bản cộng đồng bao gồm một plugin để làm việc với Javascript (bao gồm cả typeсript), mặc dù wiki nói ngược lại. Phía sau Javascript câu trả lời plugin SonarJS, cho Bản đánh máy SonarTS tương ứng.

Máy khách chính thức được sử dụng để gửi thông tin bảo hiểm máy quét sonarqube, bằng cách sử dụng cài đặt từ cấu hình-file, gửi dữ liệu này đến máy chủ soundQube để củng cố và tổng hợp thêm.

vì Javascript có trình bao bọc npm. Vì vậy, hãy bắt đầu thực hiện từng bước soundQube в quang cảnh-dự án sử dụng Bản đánh máy.

Để triển khai máy chủ soundQube hãy tận dụng lợi thế docker-soạn.

sonar.yaml:

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

Phóng:

docker-compose -f sonar.yml up

Sau khi soundQube sẽ có mặt tại: http://localhost:9001 .

Chưa có dự án nào trong đó và điều đó công bằng. Chúng tôi sẽ khắc phục tình trạng này. Tôi lấy dự án ví dụ chính thức cho VueJS+TS+Jest. Hãy hướng nó về phía chính chúng ta:

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

Đầu tiên chúng ta cần cài đặt client soundQube, được gọi là máy quét siêu âmĐối với NPM có một trình bao bọc:

yarn add sonarqube-scanner

Và ngay lập tức thêm lệnh vào kịch bản để làm việc với nó.

gói.json:

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

Tiếp theo, để máy quét hoạt động, bạn cần đặt cài đặt dự án trong một tệp đặc biệt. Hãy bắt đầu với những điều cơ bản.

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 - Địa chỉ Sonar'MỘT;
sonar.projectKey – mã định danh dự án duy nhất trên máy chủ Sonar'MỘT;
sonar.projectName – tên của nó, nó có thể được thay đổi bất cứ lúc nào, vì dự án được xác định bởi dự ánKey;
sonar.nguồn – thư mục có nguồn, thường là cái này src, nhưng có thể là bất cứ thứ gì. Thư mục này được đặt tương ứng với thư mục gốc, đây là thư mục mà máy quét được khởi chạy;
sonar.tests – một tham số song song với tham số trước đó. Đây là thư mục chứa các bài kiểm tra. Trong dự án này không có thư mục nào như vậy và bài kiểm tra nằm bên cạnh thành phần đang được kiểm tra trong thư mục 'thử nghiệm', vì vậy bây giờ chúng ta sẽ bỏ qua nó và sử dụng tham số tiếp theo;
sonar.test.inclusions – đường dẫn cho các thử nghiệm sử dụng mặt nạ, có thể có một số phần tử được liệt kê cách nhau bằng dấu phẩy;
sonar.sourceEncoding – mã hóa cho các tập tin nguồn.

Đối với lần khởi chạy đầu tiên của máy quét, mọi thứ đều sẵn sàng, ngoại trừ hành động chính trước đó: khởi chạy chính công cụ thử nghiệm để nó có thể tạo ra thông tin về phạm vi phủ sóng mà máy quét sẽ sử dụng sau đó.

Nhưng để làm được điều này, bạn cần định cấu hình công cụ kiểm tra để tạo ra thông tin này. Trong dự án này, động cơ thử nghiệm được có. Và cài đặt của nó nằm ở phần tương ứng của file package.json.

Hãy thêm các cài đặt này:

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

Nghĩa là, chúng tôi tự đặt cờ cho nhu cầu tính toán mức độ phù hợp và nguồn (cùng với các trường hợp ngoại lệ) trên cơ sở đó nó sẽ được hình thành.

Bây giờ hãy chạy thử nghiệm:

yarn test

Chúng ta sẽ thấy như sau:

Lý do là không có mã trong chính thành phần đó. Hãy khắc phục điều này.

HelloWorld.vue:

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

Điều này sẽ đủ để tính toán phạm vi bảo hiểm.

Sau khi khởi động lại thử nghiệm, chúng tôi sẽ đảm bảo điều này:

Trên màn hình chúng ta sẽ thấy thông tin về vùng phủ sóng và một thư mục sẽ được tạo trong thư mục dự án bảo hiểm với thông tin phạm vi kiểm tra ở định dạng phổ quát LCOV (phần mở rộng LTP GCOV).

Gcov là một tiện ích được phân phối miễn phí để kiểm tra phạm vi bảo hiểm của mã. Gcov tạo số lần thực thi chính xác cho mỗi câu lệnh trong chương trình và cho phép bạn thêm chú thích vào mã nguồn. Gcov là một tiện ích tiêu chuẩn nằm trong gói GCC.
Lcov - giao diện đồ họa cho gcov. Nó tập hợp các tệp gcov cho nhiều tệp nguồn và tạo ra một tập hợp các trang HTML có mã và thông tin phạm vi. Các trang cũng được tạo để giúp điều hướng dễ dàng hơn. Lcov hỗ trợ phạm vi bao phủ của chuỗi, hàm và nhánh.

Sau khi hoàn thành các thử nghiệm, thông tin về vùng phủ sóng sẽ được đặt trong bảo hiểm/lcov.info.
Chúng ta cần phải nói Sonar'Tôi có thể lấy nó từ đâu? Vì vậy, hãy thêm các dòng sau vào tệp cấu hình của nó. Nhưng có một điểm: các dự án có thể đa ngôn ngữ, tức là trong thư mục src có mã nguồn cho một số ngôn ngữ lập trình và liên kết với ngôn ngữ này hay ngôn ngữ khác, và do đó, việc sử dụng plugin này hoặc plugin khác được xác định bởi tiện ích mở rộng của nó. Và thông tin phạm vi có thể được lưu trữ ở những nơi khác nhau cho các ngôn ngữ lập trình khác nhau, vì vậy mỗi ngôn ngữ có phần riêng để thiết lập điều này. Dự án của chúng tôi sử dụng Bản đánh máy, vì vậy chúng tôi cần một phần cài đặt dành riêng cho nó:

sonar-project.properties:

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

Mọi thứ đã sẵn sàng cho lần ra mắt đầu tiên của máy quét. Tôi muốn lưu ý rằng dự án này Sonar'e được tạo tự động trong lần đầu tiên bạn chạy trình quét cho một dự án nhất định. Trong những lần tiếp theo, thông tin sẽ được tích lũy để xem động lực thay đổi các thông số của dự án theo thời gian.

Vì vậy, hãy sử dụng lệnh được tạo trước đó trong package.json:

yarn run sonar

Lưu ý: bạn cũng có thể sử dụng tham số -X để ghi nhật ký chi tiết hơn.

Nếu máy quét được khởi chạy lần đầu tiên thì tệp nhị phân của máy quét sẽ được tải xuống trước. Sau đó nó khởi động và bắt đầu quét máy chủ Sonar'a dành cho các plugin đã cài đặt, từ đó tính toán ngôn ngữ được hỗ trợ. Nhiều thông số khác cho hoạt động của nó cũng được tải: hồ sơ chất lượng, quy tắc hoạt động, kho lưu trữ số liệu, quy tắc máy chủ.

Lưu ý: Chúng tôi sẽ không đề cập chi tiết về chúng trong khuôn khổ bài viết này, nhưng bạn luôn có thể liên hệ với các nguồn chính thức.

Tiếp theo, quá trình phân tích thư mục bắt đầu src để biết tính khả dụng của các tệp nguồn cho tất cả các ngôn ngữ được hỗ trợ (nếu một ngôn ngữ cụ thể không được chỉ định rõ ràng), cùng với việc lập chỉ mục tiếp theo của chúng.

Tiếp theo là nhiều phân tích khác mà chúng tôi không tập trung vào trong bài viết này (ví dụ: phân tích linting, phát hiện trùng lặp mã, v.v.).

Khi kết thúc công việc của máy quét, tất cả thông tin thu thập được sẽ được tổng hợp, lưu trữ và gửi đến máy chủ.

Sau này, chúng ta có thể thấy điều gì đã xảy ra trong giao diện web:

Như chúng ta có thể thấy, một cái gì đó đã hoạt động và thậm chí hiển thị một số loại phạm vi bảo hiểm, nhưng nó không phù hợp với chúng ta có-báo cáo.

Hãy tìm ra nó. Chúng ta hãy xem dự án chi tiết hơn, nhấp vào giá trị bảo hiểm và “chuyển qua” một báo cáo tệp chi tiết:

Ở đây chúng ta thấy, ngoài tệp chính, đã được kiểm tra HelloWorld.vue, cũng có một tập tin chính.ts, làm hỏng toàn bộ bức tranh về phạm vi phủ sóng. Nhưng tại sao chúng tôi lại loại nó khỏi tính toán phạm vi bảo hiểm. Vâng, mọi thứ đều đúng, nhưng nó ở mức độ có, nhưng máy quét đã lập chỉ mục cho nó nên cuối cùng nó vẫn nằm trong tính toán của nó.

Hãy sửa lỗi này:

sonar-project.properties:

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

Tôi muốn làm rõ: ngoài các thư mục được chỉ định trong tham số này, tất cả các thư mục được liệt kê trong tham số cũng được thêm vào sonar.test.inclusions.

Sau khi khởi chạy máy quét, chúng tôi thấy thông tin chính xác:

Hãy nhìn vào điểm tiếp theo - Hồ sơ chất lượng. Tôi đã nói ở trên về hỗ trợ Sonar'om nhiều ngôn ngữ cùng một lúc. Đây chính xác là những gì chúng ta đang thấy. Nhưng chúng tôi biết rằng dự án của chúng tôi được viết bằng TS, vậy tại sao phải làm căng máy quét với những thao tác và kiểm tra không cần thiết. Chúng ta sẽ đặt ngôn ngữ để phân tích bằng cách thêm một tham số nữa vào tệp cấu hình Sonar'MỘT:

sonar-project.properties:

...
sonar.language=ts
...

Hãy chạy lại máy quét và xem kết quả:

Vùng phủ sóng đã hoàn toàn biến mất.

Nếu nhìn vào nhật ký máy quét, chúng ta có thể thấy dòng sau:

Nghĩa là, các tệp dự án của chúng tôi không được lập chỉ mục.

Tình hình như sau: được hỗ trợ chính thức VueJs có trong plugin SonarJSai chịu trách nhiệm cho Javascript.

Nhưng hỗ trợ này không có trong plugin SonarTS cho TS, về việc một vé chính thức đã được mở trong trình theo dõi lỗi Sonar'MỘT:

Dưới đây là một số câu trả lời từ một trong những đại diện của nhà phát triển SonarQube, xác nhận thực tế này.

Nhưng mọi thứ đều có tác dụng với chúng tôi, bạn phản đối. Đúng vậy, chúng ta hãy thử một chút "gian lận".
Nếu có sự hỗ trợ .vue-các tập tin Sonar'Ồ, vậy hãy thử nói với anh ấy hãy coi họ như Bản đánh máy.

Hãy thêm một tham số:

sonar-project.properties:

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

Hãy khởi động máy quét:

Và, thì đấy, mọi thứ đã trở lại bình thường và chỉ với một hồ sơ dành cho Bản đánh máy. Nghĩa là, chúng tôi đã giải quyết được vấn đề với sự hỗ trợ VueJs+TS cho soundQube.

Hãy cố gắng tiến xa hơn và cải thiện thông tin đưa tin một chút.

Những gì chúng tôi đã làm cho đến nay:

được thêm vào dự án Sonar-máy quét;
cài đặt có để tạo ra thông tin bảo hiểm;
được cấu hình Sonar-máy quét;
đã giải quyết được vấn đề hỗ trợ .vue-tập tin + Bản đánh máy.

Ngoài phạm vi kiểm tra, còn có các tiêu chí hữu ích thú vị khác về chất lượng mã, ví dụ như sao chép mã và số dòng (liên quan đến việc tính toán các hệ số liên quan đến độ phức tạp của mã) của dự án.

Trong quá trình triển khai plugin hiện tại để làm việc với TS (SonarTS) sẽ không làm việc CPD (Máy dò sao chép) và đếm dòng mã .vue-các tập tin.

Để tạo một tình huống tổng hợp về sao chép mã, chỉ cần sao chép tệp thành phần bằng một tên khác và thêm nó vào mã chính.ts một hàm giả và sao chép nó bằng một tên khác. Để kiểm tra sự trùng lặp như trong .vuevà trong .ts -các tập tin.

chính.ts:

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

Để thực hiện việc này, bạn cần bình luận tạm thời dòng cấu hình:

sonar-project.properties:

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

Hãy khởi động lại máy quét cùng với việc kiểm tra:

yarn test && yarn run sonar

Tất nhiên, phạm vi phủ sóng của chúng tôi sẽ giảm, nhưng hiện tại chúng tôi không quan tâm đến điều đó.

Về mặt sao chép dòng mã, chúng ta sẽ thấy:

Để kiểm tra chúng tôi sẽ sử dụng CPD-tính thiết thực - jscpd:

npx jscpd src

Đối với dòng mã:

Có lẽ điều này sẽ được giải quyết trong các phiên bản plugin sau này SonarJS(TS). Tôi muốn lưu ý rằng họ đang dần bắt đầu hợp nhất hai plugin này thành một SonarJS, điều mà tôi nghĩ là đúng.

Bây giờ tôi muốn xem xét phương án cải thiện thông tin đưa tin.

Cho đến nay, chúng ta có thể thấy mức độ bao phủ thử nghiệm theo tỷ lệ phần trăm, cho toàn bộ dự án và cho các tệp nói riêng. Nhưng có thể mở rộng chỉ số này bằng thông tin về số lượng đơn vị-tests cho dự án, cũng như trong ngữ cảnh của các tập tin.

Có một thư viện có thể có-chuyển đổi báo cáo sang định dạng cho Sonar'MỘT:
dữ liệu thử nghiệm chung - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

Hãy cài đặt thư viện này trong dự án của chúng tôi:

yarn add jest-sonar-reporter

Và thêm nó vào cấu hình có:

gói.json:

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

Bây giờ hãy chạy thử nghiệm:

yarn test

Sau đó một tập tin sẽ được tạo trong thư mục gốc của dự án test-report.xml.

Hãy sử dụng nó trong cấu hình Sonar'MỘT:

sonar-project.properties:

…
sonar.testExecutionReportPaths=test-report.xml
…

Và khởi động lại máy quét:

yarn run sonar

Hãy xem những gì đã thay đổi trong giao diện Sonar'MỘT:

Và không có gì thay đổi. Thực tế là Sonar không coi các tệp được mô tả trong báo cáo Jest là tệp đơn vị-kiểm tra. Để khắc phục tình trạng này, chúng tôi sử dụng tham số cấu hình Sonar sonar.tests, trong đó chúng tôi sẽ chỉ ra rõ ràng các thư mục có kiểm tra (hiện tại chúng tôi chỉ có một thư mục):

sonar-project.properties:

…
sonar.tests=src/components/__tests__
…

Hãy khởi động lại máy quét:

yarn run sonar

Hãy xem những gì đã thay đổi trong giao diện:

Bây giờ chúng ta đã thấy số lượng của chúng ta đơn vị-tests và không thành công khi nhấp vào bên trong, chúng ta có thể thấy sự phân bổ của con số này giữa các tệp dự án:

Kết luận

Vì vậy, chúng tôi đã xem xét một công cụ để phân tích liên tục soundQube. Chúng tôi đã tích hợp thành công vào đó một dự án được viết bằng VueJs+TS. Đã sửa một số vấn đề tương thích. Chúng tôi đã tăng nội dung thông tin của chỉ báo phạm vi kiểm tra. Trong bài viết này, chúng tôi chỉ xem xét một trong các tiêu chí chất lượng mã (có lẽ là một trong những tiêu chí chính), nhưng soundQube hỗ trợ các tiêu chí chất lượng khác, bao gồm cả kiểm tra an toàn. Nhưng không phải tất cả các tính năng này đều có sẵn đầy đủ trong cộng đồng-phiên bản. Một trong những tính năng thú vị và hữu ích là tích hợp soundQube với các hệ thống quản lý kho lưu trữ mã khác nhau, chẳng hạn như GitLab và BitBucket. Để ngăn chặn yêu cầu kéo (hợp nhất) hợp nhất'a đến nhánh chính của kho lưu trữ khi phạm vi bảo hiểm bị suy giảm. Nhưng đây là một câu chuyện cho một bài viết hoàn toàn khác.

PS: Mọi thứ được mô tả trong bài viết dưới dạng mã đều có sẵn ở cái nĩa của tôi.

Chỉ những người dùng đã đăng ký mới có thể tham gia khảo sát. Đăng nhập, xin vui lòng.

Bạn có sử dụng nền tảng SonarQube không:

26,3%Có5
15,8%3
15,8%Tôi đã nghe nói về nền tảng này và muốn sử dụng3
10,5%Tôi đã nghe nói về nền tảng này và không muốn sử dụng2
0,0%Tôi đang sử dụng một nền tảng khác0
31,6%Lần đầu tiên tôi nghe nói về cô ấy6

19 người dùng bình chọn. 3 người dùng bỏ phiếu trắng.

Nguồn: www.habr.com

Tích hợp dự án VueJS+TS với SonarQube

Kết luận

Bạn có sử dụng nền tảng SonarQube không:

Thêm một lời nhận xét Hủy bỏ trả lời