最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

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

关键词：