우리는 업무에 플랫폼을 적극적으로 사용합니다. 소나큐브 코드 품질을 높은 수준으로 유지합니다. 작성된 프로젝트 중 하나를 통합하는 경우 VueJs+타입스크립트, 문제가 발생했습니다. 따라서 우리가 어떻게 문제를 해결했는지 더 자세히 말씀 드리고 싶습니다.

이 글에서는 위에서 쓴 것처럼 SonarQube 플랫폼에 대해 이야기하겠습니다. 약간의 이론 - 처음으로 듣는 사람들을 위한 일반적인 내용은 다음과 같습니다.

소나큐브 (이전의 소나)는 지속적인 검사 및 코드 품질 측정을 위한 오픈 소스 플랫폼입니다.
MISRA C, MISRA C++, MITRE/CWE 및 CERT 보안 코딩 표준의 규칙에 따라 코드 분석 및 오류 감지를 지원합니다. 또한 OWASP 상위 10개 및 CWE/SANS 상위 25개 프로그래밍 오류 목록에서 오류를 인식할 수도 있습니다.
플랫폼이 다양한 기성 도구를 사용함에도 불구하고 SonarQube는 결과를 단일 대시보드로 축소하여 실행 기록을 유지함으로써 개발 중 소프트웨어 품질 변화의 일반적인 추세를 확인할 수 있습니다.

자세한 내용은 다음에서 확인할 수 있습니다. 공식 웹 사이트

다양한 프로그래밍 언어가 지원됩니다. 위 링크의 정보로 판단하면 25개 이상의 언어가 있습니다. 특정 언어를 지원하려면 적절한 플러그인을 설치해야 합니다. 커뮤니티 버전에는 작업을 위한 플러그인이 포함되어 있습니다. 자바 스크립트 (typesсript 포함), Wiki에서는 그 반대라고 말합니다. 뒤에 자바 스크립트 플러그인 답변 SonarJS, Typescript의 경우 소나TS 각각.

공식 클라이언트는 적용 범위 정보를 보내는 데 사용됩니다. 소나큐브 스캐너, 다음의 설정을 사용하여 설정-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+Jest. 우리 자신을 향해 구부리자:

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

먼저 클라이언트를 설치해야 합니다 소나큐브라는 소나 스캐너~을 위해 npm 래퍼가 있습니다.

yarn add sonarqube-scanner

그리고 즉시 명령을 추가하십시오. 스크립트 그것으로 작업합니다.

패키지.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

• 소나.호스트.url - 주소 소나'ㅏ;
• sonar.projectKey – 서버의 고유한 프로젝트 식별자 소나'ㅏ;
• sonar.프로젝트 이름 – 이름은 프로젝트가 다음으로 식별되므로 언제든지 변경될 수 있습니다. 프로젝트키;
• 소나 소스 – 소스가 있는 폴더, 일반적으로 이 폴더 SRC, 그러나 무엇이든 될 수 있습니다. 이 폴더는 스캐너가 실행되는 폴더인 루트 폴더를 기준으로 설정됩니다.
• 소나.테스트 – 이전 매개변수와 함께 사용되는 매개변수입니다. 테스트가 위치한 폴더입니다. 이 프로젝트에는 해당 폴더가 없으며 테스트는 '폴더에서 테스트중인 구성 요소 옆에 있습니다.test'이므로 지금은 이를 무시하고 다음 매개변수를 사용하겠습니다.
• 소나.테스트.포함 – 마스크를 사용하는 테스트 경로에는 여러 요소가 쉼표로 구분되어 나열될 수 있습니다.
• sonar.source인코딩 – 소스 파일 인코딩.

스캐너를 처음 실행하는 경우 주요 이전 작업을 제외한 모든 것이 준비됩니다. 테스트 엔진 자체를 실행하여 스캐너가 이후에 사용할 적용 범위에 대한 정보를 생성할 수 있습니다.

하지만 이렇게 하려면 이 정보를 생성하도록 테스트 엔진을 구성해야 합니다. 이 프로젝트에서 테스트 엔진은 농담. 해당 설정은 파일의 해당 섹션에 있습니다. package.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);
},
...

이는 적용 범위를 계산하는 데 충분합니다.

테스트를 다시 시작한 후 다음 사항을 확인합니다.

화면에 적용 범위에 대한 정보가 표시되고 프로젝트 폴더에 폴더가 생성됩니다. 적용 범위 범용 형식의 테스트 커버리지 정보 포함 LCOV(LTP GCOV 확장).

Gcov 코드 적용 범위를 검사하기 위해 무료로 배포되는 유틸리티입니다. Gcov는 프로그램의 각 명령문에 대한 정확한 실행 횟수를 생성하고 소스 코드에 주석을 추가할 수 있도록 합니다. Gcov는 GCC 패키지의 일부로 표준 유틸리티로 제공됩니다.
리코브 - gcov용 그래픽 인터페이스. 여러 소스 파일에 대한 gcov 파일을 조합하고 코드 및 적용 범위 정보가 포함된 HTML 페이지 세트를 생성합니다. 탐색을 더 쉽게 하기 위해 페이지도 생성됩니다. Lcov는 문자열, 함수 및 분기의 적용 범위를 지원합니다.

테스트가 완료된 후 적용 범위 정보는 다음에서 확인할 수 있습니다. 적용 범위/lcov.info.
우리는 말할 필요가 소나'어디서 구할 수 있나요? 따라서 구성 파일에 다음 줄을 추가해 보겠습니다. 그러나 한 가지 점이 있습니다. 프로젝트는 다국어, 즉 폴더에 있을 수 있습니다. SRC 여러 프로그래밍 언어에 대한 소스 코드와 하나 또는 다른 언어와의 제휴가 있으며, 하나 또는 다른 플러그인의 사용은 확장에 따라 결정됩니다. 그리고 적용 범위 정보는 프로그래밍 언어마다 다른 위치에 저장될 수 있으므로 각 언어에는 이를 설정하기 위한 자체 섹션이 있습니다. 우리 프로젝트에서는 타이프 스크립트, 따라서 이에 대한 설정 섹션이 필요합니다.

소나 프로젝트.속성:

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

스캐너의 첫 번째 실행을 위한 모든 준비가 완료되었습니다. 이 프로젝트는 다음과 같습니다. 소나'e는 특정 프로젝트에 대해 스캐너를 처음 실행할 때 자동으로 생성됩니다. 이후에는 시간이 지남에 따라 프로젝트 매개변수의 역학적 변화를 확인하기 위해 정보가 축적될 것입니다.

그럼 앞에서 만든 명령을 사용해 보겠습니다. package.json:

yarn run sonar 

참고 : 매개변수를 사용할 수도 있습니다. -X 더 자세한 로깅을 원하시면

스캐너가 처음으로 시작된 경우 스캐너 자체의 바이너리가 먼저 다운로드됩니다. 그 후 서버 검색이 시작되고 시작됩니다. 소나'a 설치된 플러그인에 대해 지원되는 언어를 계산합니다. 해당 작업을 위한 다양한 기타 매개변수도 로드됩니다. 품질 프로필, 활성 규칙, 지표 저장소, 서버 규칙.

참고 : 이 기사의 틀 내에서 이에 대해 자세히 설명하지는 않지만 언제든지 공식 소스에 문의할 수 있습니다.

다음으로 폴더 분석이 시작됩니다 SRC 후속 인덱싱을 통해 지원되는 모든 언어(특정 언어가 명시적으로 지정되지 않은 경우)에 대한 소스 파일의 가용성을 확인합니다.

다음에는 이 기사에서 다루지 않는 다양한 다른 분석(예: 린팅, 코드 중복 감지 등)이 나옵니다.

스캐너 작업이 끝나면 수집된 모든 정보가 집계, 보관되어 서버로 전송됩니다.

그 후에 웹 인터페이스에서 무슨 일이 일어났는지 이미 볼 수 있습니다.

보시다시피 뭔가 효과가 있었고 심지어 어떤 종류의 보도도 보여 주었지만 우리의 것과 일치하지 않습니다. 농담-보고서.

그것을 알아 봅시다. 프로젝트를 더 자세히 살펴보고 적용 범위 값을 클릭한 다음 자세한 파일 보고서를 "전체" 살펴보겠습니다.

여기서는 검사된 기본 파일 외에도 HelloWorld.vue, 파일도 있습니다 main.ts, 이는 보도의 전체 그림을 망칩니다. 그런데 왜 보장 범위 계산에서 제외했는지요. 예, 모든 것이 정확합니다. 하지만 수준에 있었습니다. 농담, 그러나 스캐너가 이를 색인화했기 때문에 결국 계산에 포함되었습니다.

이 문제를 해결해 보겠습니다.

소나 프로젝트.속성:

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

명확하게 설명하고 싶습니다. 이 매개변수에 지정된 폴더 외에도 매개변수에 나열된 모든 폴더도 추가됩니다. 소나.테스트.포함.

스캐너를 실행하면 올바른 정보가 표시됩니다.

다음 요점을 살펴 보겠습니다. 품질 프로필. 위에서 지원에 대해 이야기했습니다. 소나동시에 여러 언어를 사용합니다. 이것이 바로 우리가 보고 있는 것입니다. 하지만 우리는 우리 프로젝트가 다음 언어로 작성되었다는 것을 알고 있습니다. TS, 그렇다면 불필요한 조작과 확인으로 스캐너에 부담을 주는 이유는 무엇입니까? 구성 파일에 매개변수를 하나 더 추가하여 분석할 언어를 설정하겠습니다. 소나'ㅏ:

소나 프로젝트.속성:

...
sonar.language=ts
...

스캐너를 다시 실행하고 결과를 확인해 보겠습니다.

커버력이 완전 없어졌습니다.

스캐너 로그를 보면 다음 줄을 볼 수 있습니다.

즉, 프로젝트 파일이 색인화되지 않았습니다.

상황은 다음과 같습니다. 공식적으로 지원됩니다. VueJ 플러그인에 있습니다 SonarJS, 누가 책임을 지는가 자바 스크립트.

하지만 이 지원은 플러그인에 없습니다 소나TS 에 TS, 버그 추적기에서 공식 티켓이 개설되었습니다. 소나'ㅏ:

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

다음은 이 사실을 확인하는 SonarQube 개발자 대표 중 한 사람의 답변입니다.

하지만 모든 것이 우리에게 도움이 되었다고 당신은 반대합니다. 응, 좀 해보자 "마구 자르기".
지원이 있는 경우 .vue-파일 소나'아, 그럼 그에게 그것들을 다음과 같이 생각하라고 말해보자 타이프 스크립트.

매개변수를 추가해 보겠습니다.

소나 프로젝트.속성:

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

스캐너를 실행해 봅시다:

그리고 짜잔, 모든 것이 정상으로 돌아왔습니다. 타이프 스크립트. 즉, 우리는 지원 문제를 해결했습니다. VueJs+TS 에 소나큐브.

더 나아가 커버리지 정보를 조금 더 개선해 보도록 하겠습니다.

지금까지 우리가 한 일:

• 프로젝트에 추가됨 소나-스캐너;
• 설정 농담 적용 범위 정보를 생성하기 위해;
• 구성된 소나-스캐너;
• 지원 문제를 해결했습니다 .vue-파일 + 타이프 스크립트.

테스트 범위 외에도 코드 품질에 대한 다른 흥미롭고 유용한 기준이 있습니다. 예를 들어 프로젝트의 코드 중복 및 줄 수(코드 복잡성과 관련된 계수 계산에 포함)가 있습니다.

작업을 위한 플러그인의 현재 구현에서 TS (소나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

물론 우리의 보장 범위는 떨어지겠지만 지금은 그것에 관심이 없습니다.

코드 줄을 복제하면 다음과 같이 표시됩니다.

확인하기 위해 우리는 사용할 것입니다 CPD-공익사업 - jscpd:

npx jscpd src

코드 줄의 경우:

아마도 이 문제는 향후 플러그인 버전에서 해결될 것입니다. 소나JS(TS). 나는 그들이 점차적으로 이 두 플러그인을 하나로 병합하기 시작했다는 점에 주목하고 싶습니다. SonarJS, 내 생각엔 그게 맞는 것 같아.

이제 보장 정보를 개선하는 옵션을 고려하고 싶었습니다.

지금까지 전체 프로젝트, 특히 파일에 대한 테스트 적용 범위를 백분율로 볼 수 있습니다. 그러나 수량에 대한 정보로 이 지표를 확장하는 것이 가능합니다. 단위-파일 컨텍스트뿐만 아니라 프로젝트에 대한 테스트도 수행합니다.

할 수 있는 도서관이 있어요 농담-보고서를 다음 형식으로 변환합니다. 소나'ㅏ:
일반 테스트 데이터 - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

프로젝트에 이 라이브러리를 설치해 보겠습니다.

yarn add jest-sonar-reporter

그리고 그것을 구성에 추가하십시오. 농담:

패키지.json:

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

이제 테스트를 실행해 보겠습니다.

yarn test

그런 다음 프로젝트 루트에 파일이 생성됩니다. 테스트 보고서.xml.

구성에 사용해 보겠습니다. 소나'ㅏ:

소나 프로젝트.속성:

…
sonar.testExecutionReportPaths=test-report.xml
…

그리고 스캐너를 다시 시작하십시오.

yarn run sonar

인터페이스에서 무엇이 변경되었는지 살펴보겠습니다. 소나'ㅏ:

그리고 아무것도 변하지 않았습니다. 사실 Sonar는 Jest 보고서에 설명된 파일을 파일로 간주하지 않습니다. 단위-테스트. 이 상황을 수정하기 위해 구성 매개변수를 사용합니다. 소나 소나.테스트, 테스트가 포함된 폴더를 명시적으로 표시합니다(현재는 하나만 있음).

소나 프로젝트.속성:

…
sonar.tests=src/components/__tests__
…

스캐너를 다시 시작해 보겠습니다.

yarn run sonar

인터페이스에서 무엇이 변경되었는지 살펴보겠습니다.

이제 우리는 우리의 숫자를 보았습니다. 단위-테스트를 ​​수행하고 내부를 클릭하여 실패하면 프로젝트 파일 간에 이 번호의 분포를 볼 수 있습니다.

결론

그래서 우리는 지속적인 분석을 위한 도구를 살펴보았습니다. 소나큐브. 우리는 다음으로 작성된 프로젝트를 성공적으로 통합했습니다. VueJs+TS. 일부 호환성 문제를 수정했습니다. 테스트 커버리지 지표의 정보 내용을 늘렸습니다. 이 기사에서는 코드 품질 기준 중 하나만(아마도 주요 기준 중 하나) 조사했지만 소나큐브 안전 테스트를 포함한 기타 품질 기준을 지원합니다. 하지만 이러한 기능 중 일부는 다음과 같습니다. 커뮤니티-버전. 흥미롭고 유용한 기능 중 하나는 통합입니다. 소나큐브 GitLab, BitBucket 등 다양한 코드 저장소 관리 시스템을 갖추고 있습니다. 방지하기 위해 병합 풀(병합) 요청'범위가 저하되면 저장소의 주요 분기로 이동합니다. 그러나 이것은 완전히 다른 기사에 대한 이야기입니다.

추신: 코드 형식으로 기사에 설명된 모든 내용은 다음에서 사용할 수 있습니다. 내 포크.

등록된 사용자만 설문 조사에 참여할 수 있습니다. 로그인제발

SonarQube 플랫폼을 사용하시나요?

• 26,3%예5

• 15,8%3

• 15,8%이 플랫폼에 대해 들었고 사용하고 싶습니다3

• 10,5%이 플랫폼에 대해 들었지만 사용하고 싶지 않습니다2

• 0,0%다른 플랫폼을 사용하고 있습니다0

• 31,6%처음으로 그녀에 대해 들어봤습니다6

19명의 사용자가 투표했습니다. 3명의 사용자가 기권했습니다.

출처 : habr.com