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
