SonarQube를 사용하여 Vue+TypeScript 항목의 품질 관리

예제

설명용 저장소
https://github.com/sterashima78/vue-ts-sonarqube-example

입문

코드의 질을 평가하기 위해 정적 분석 방법을 많이 제시했다.
이러한 분석을 통해 얻은 지표를 자주 관찰함으로써 코드의 질적 악화를 신속하게 검출할 수 있기를 기대할 수 있다.
자바스크립트Plato에서 몇 가지 지표를 산출할 수 있는지 알지만
유지 보수 정체 외에 현재 내가 자주 사용하는 Vue와 Typescript는 대응하지 않는다.
이 경우 SonarQube 대체할 것을 알기 때문에 Vue + Typescript 항목을 가져옵니다.
이 파일은 가져오기 방법을 나타냅니다.

샘플 항목 준비

$ vue create vue-ts-sonerqube-example
Vue CLI v4.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Vuex, CSS Pre-processors, Linter, Unit
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files

SonarQube 서버 준비

SonarQube는 Java11 이상을 요구하는 Java 소프트웨어입니다.
Docker image도 있지만 이번에는 다음 페이지에서 커뮤니티 버전 (ver8.0) 을 다운로드하여 실행하기로 했습니다.
https://www.sonarqube.org/downloads/
다운로드한 zip의 압축을 풀면 bin 아래에는 각 OS의 실행용 파일이 있기 때문에 실행합니다
윈도우즈의 경우 sonarqube-8.0\bin\windows-x86-64\StartSonar.bat 를 실행하면 됩니다.
listenhttp://localhost:9000 때문에 브라우저에서 접근할 수 있습니다.

SonarQube용 설정

SonerQube는 서버에 이 검색 결과를 전송하여 결과를 열람할 수 있는 소프트웨어 검색 기능을 갖추고 있습니다.
이 때 다른 도구의 결과를 읽을 수 있기 때문에 단일 테스트 결과와lint 결과를 읽을 수 있습니다.다음은 이 설정을 진행합니다.

패키지 설치 종속

$ npm i -D jest-sonar-reporter sonarqube-scanner npm-run-all

lint 설정

다음 작업 추가
package.json

{
   "scripts": {
       "lint:sonar": "eslint -f json -o report.json ."
   } 
}

설정 단위 테스트

다음 항목 추가
jest.config.js

module.exports = {
  testResultsProcessor: "jest-sonar-reporter",
  collectCoverageFrom: [
    "src/**/*.{js,jsx,ts,tsx,vue}",
    "!<rootDir>/node_modules/"
  ]
};

다음 작업 추가
package.json

{
   "scripts": {
       "test:unit:sonar": "npm run test:unit -- --coverage"
   } 
}

sonar-scanner 설정

SonerQube의 정적 분석과 데이터를 전송하는 sonar-scanner를 설정합니다.
다음 작업 추가
package.json

{
   "scripts": {
       "sonar:scan": "sonar-scanner",
       "sonar": "run-s test:unit:sonar lint:sonar sonar:scan"
   } 
}

다음 프로필 추가
sonar-project.properties

sonar.projectKey=vue-ts-sonerqube-example
sonar.projectName=vue-ts-sonerqube-example

sonar.sources=src
sonar.tests=tests

sonar.test.inclusions=**/*tests*/**
sonar.exclusions=**/*tests*/**

sonar.testExecutionReportPaths=test-report.xml

sonar.javascript.file.suffixes=.js,.jsx
sonar.typescript.file.suffixes=.ts,.tsx,.vue

sonar.typescript.lcov.reportPaths=coverage/lcov.info
sonar.javascript.lcov.reportPaths=coverage/lcov.info
sonar.eslint.reportPaths=report.json