前言

想自動化一下公司里代碼的部分審查，最初想用 reviewdog 的，但是公司的域名基本都在 VPN 中訪問的，gitlab ci 的容器中是訪問不到的，于是乎實驗了 gitlab 代碼質量功能，下面分享一下相應的 gitlab-ci 代碼，

專案必備條件

• 使用 pnpm 包管理的前端（當然你也可以改成 npm/yarn 等，需要參考他們的 ci 檔案調整）
• 安裝 eslint-formatter-gitlab 包，用于 eslint 靜態檢查結果生成 gitlab 原生代碼質量檔案

Package.json 設定

{
  "name": "test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    // 用于檢測 typescript 的型別
    "type:check": "vue-tsc --noEmit --composite false",
    // 用于常規代碼檔案的靜態檢查
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    // 用于格式化代碼
    "format": "prettier --write src/",
    // 用于檢查代碼是否是被格式化過的
    "format:check": "prettier --check src/"
  },
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@types/node": "^18.14.6",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.39.0",
    // 用于 eslint 靜態檢查生成 gitlab 原生代碼質量檔案
    "eslint-formatter-gitlab": "^4.0.0",
    "eslint-plugin-vue": "^9.11.0",
    "prettier": "^2.8.8",
    "sass": "^1.58.3",
    "typescript": "^4.9.3",
    "vite": "^4.1.0",
    "vue-tsc": "^1.6.4"
  }
}

.gitlab-ci.yaml 檔案

stages:
  - review

# eslint 檢查
eslint-review:
  stage: review
  variables:
    ESLINT_CODE_QUALITY_REPORT: gl-codequality.json # 定義 eslint 生成 gitlab 原生代碼質量檔案的檔案名
    GIT_STRATEGY: clone
    GIT_DEPTH: 0
  rules:
    - if: $CODE_QUALITY_DISABLED
      when: never
    - if: $CI_PIPELINE_SOURCE == "merge_request_event" # 在 mr 的時候執行
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH # 在默認分支上執行
    - if: $CI_COMMIT_TAG # 在發版時執行
  # 前置腳本，用于初始化 pnpm 環境
  before_script:
    - corepack enable
    - corepack prepare pnpm@latest --activate
    - pnpm config set store-dir .pnpm-store
  image: node:16.17.0-bullseye-slim
  # 主要腳本，在安裝依賴后執行 lint 并讓輸出 format 變為 gitlab
  script:
    - pnpm i
    - pnpm run lint --format gitlab
  # 上傳 eslint 生成 gitlab 原生代碼質量檔案
  artifacts:
    reports:
      codequality: gl-codequality.json
  cache:
    key:
      files:
        - pnpm-lock.yaml
    paths:
      - .pnpm-store

# prettier 檢查
prettier-review:
  stage: review
  variables:
    GIT_STRATEGY: clone
    GIT_DEPTH: 0
  rules:
    - if: $CODE_QUALITY_DISABLED
      when: never
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
    - if: $CI_COMMIT_TAG
  before_script:
    - corepack enable
    - corepack prepare pnpm@latest --activate
    - pnpm config set store-dir .pnpm-store
  image: node:16.17.0-bullseye-slim
  script:
    - pnpm i
    - pnpm run format:check
  cache:
    key:
      files:
        - pnpm-lock.yaml
    paths:
      - .pnpm-store

# tsc 檢查
tsc-review:
  stage: review
  variables:
    GIT_STRATEGY: clone
    GIT_DEPTH: 0
  rules:
    - if: $CODE_QUALITY_DISABLED
      when: never
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
    - if: $CI_COMMIT_TAG
  before_script:
    - corepack enable
    - corepack prepare pnpm@latest --activate
    - pnpm config set store-dir .pnpm-store
  image: node:16.17.0-bullseye-slim
  script:
    - pnpm i
    - pnpm run type:check
  cache:
    key:
      files:
        - pnpm-lock.yaml
    paths:
      - .pnpm-store

參考

• Code Quality | GitLab
• Continuous Integration | pnpm
• eslint-formatter-gitlab - npm

標籤：其他

上一篇：企業研發效能度量利器，華為云發布CodeArts Board看板服務

下一篇：返回列表