gitlab ci 集成 eslint/prettier/tsc 做代码审查，并使用 eslint 输出作为显示代码质量

前言

想自动化一下公司里代码的部分审查，最初想用 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