JavaScript 프로젝트에서 CircleCI에서 Code Climate Quality를 사용하여 코드 품질을 향상

Code Climate은 코드 품질과 팀 생산성을 갖춘 클라우드 서비스입니다.
몇 가지 기능이 있지만 OSS의 경우 Quality 기능을 무료로 사용할 수 있습니다.

Quality의 기능에는 크게 「Maintainability」 「Test Coverage」의 2개가 있습니다. 이러한 설정 방법을 차례로 설명합니다.

환경

Windows 10 Pro 1809/Windows Subsystem for Linux

Node.js 11.8.0

TypeScript 3.3.1

Jest 23.3.13

CircleCI

Maintainability 설정

매우 간단합니다. Code Climate 에 GitHub 계정을 연결하여 대상 리포지토리를 추가하기 만하면됩니다.

잠시 기다리면 리포지토리 페이지가 게시되고 품질 평가 점수가 표시됩니다.



issues에서 실제 코드의 문제점을 확인할 수 있습니다.
이번 시도한 리포지토리에서는, 메소드내의 행수의 길이와, Cognitive Complexity(인지적 복잡도) 의 높이가 지적되고 있었습니다. 이것들을 리팩토링 해 나가는 것으로 코드의 품질이 향상한다고 생각합니다.

(Cognitive Complexity에 대해서는 여기를 참조 : Cognitive Complexity로 코드의 가독성을 정량적으로 측정합시다 - Qiita)

Test Coverage 설정

이것은 Code Climate에 테스트 커버리지 정보를 보내는 기능입니다. 그 때문에, 다른 방법으로 미리 테스트가 실행되고 있어 커버리지가 계측되고 있는 것이 전제입니다.

이번에는 Jest 에 기재된 테스트에 대해 --coverage 옵션 을 사용해 커버리지 파일을 출력합니다.

package.json (발췌)

"scripts": {
  "test": "jest --coverage"
},

이 테스트를 CircleCI에서 자동으로 실행합니다.

여기에서 Code Climate Test Coverage 설정으로 이동합니다. Code Climate 공식 문서에도 CircleCI PHP 테스트 커버리지 보고서 설정 샘플 가 있으므로, 그쪽을 참고로 이번 JavaScript 프로젝트용의 설정 파일을 기술해 갑니다.

커버리지 보고서를 제출하려면 Code Climate에서 제공하는 cc-test-reporter라는 도구를 사용하십시오. 여기를 curl 에서 가져오고 ./cc-test-reporter after-build 와 같이 사용하여 커버리지 보고서를 보낼 수 있습니다. 이번 Jest가 출력하는 커버리지 보고서는 lcov 형식이므로 --coverage-input-type lcov를 지정합니다.

CircleCI의 설정 파일은 이런 느낌이 됩니다.

circleci/config.yml

version: 2
jobs:
  build:
    steps:

      # 中略

      - run:
          name: Setup Code Climate test-reporter
          command: |
            curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
            chmod +x ./cc-test-reporter

      - run:
          name: Run tests
          command: |
            ./cc-test-reporter before-build
            npm test
            ./cc-test-reporter after-build --coverage-input-type lcov --exit-code $?

Code Climate 공식 문서에서 CircleCI 설정 에서는 config.yml 에 CC_TEST_REPORTER_ID 도 기술하도록 지시합니다만, 코드내에는 기재하지 않고 CircleCI 측에 있는 환경 변수의 설정 기능을 사용합시다.

CircleCI의 PROJECT SETTINGS에서 Environment Variables로 설정할 수 있습니다.



Code Climate 공식 문서에서 "Test Reporter ID를 숨길 필요가 있습니까?" 라고 대답되고 있기 때문에, 비록 잡히 다루어도 큰 문제는 없을 것 같습니다. 그러나 재발행 기능이 갖추어져 있는 ID이므로, 만약을 위해 정중하게 취급합니다.

참고

이번에 설정한 결과는 아래와 같습니다.
htps : // 여기에서 ぃ 뭐. 코 m / 기테 b / s2 테르 모두 l / 이레 아 d