小小書僮，可笑可笑

murmrur

0%

使用GitLab CI/CD在Merge前做預先檢查

Posted on Edited on

本文章可以幫你

  1. GitLab Merge when pipleline succeeds設定
  2. 使用GitLab CI/CD
  3. 使用ESLint/StyleLint檢查程式碼

設定GitLab的Merge when pipeline succeeds/啟動runners

  1. 官方文件可以參考 site1
    site2
  2. GitLab設定的位置[Repo] => Settings => General => Merge requests
  3. 記得啟動runners[Repo] => Settings => CI/CD => Runners

在專案裡面新增GitLab CI comfig

  1. 新增.gitlab-ci.yml並設定其內容
  2. 設定workflow讓pipeline只在Merge Request Contenx建立的時候才執行
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    workflow:
        rules:
            - if: $CI_MERGE_REQUEST_ID # Execute jobs in merge request context
            - if: $CI_COMMIT_BRANCH == 'dev' # Execute jobs when a new commit is pushed to dev branch

    stages:
      - prepare
      - check
      - build
      - deploy

    cache:
      paths:
        - node_modules/

    install:
      stage: prepare
    #   only: => going to be deprecated，根據gitloab 11.x doc，即將被拋棄
    #     - dev
      script:
        - npm install

    eslint:
      stage: check
    #   only: => going to be deprecated，根據gitloab 11.x doc，即將被拋棄
    #     - dev
      dependencies:
        - prepare
      script:
        - eslint src/*.ts

    stylelint:
      stage: check
    #   only: => going to be deprecated，根據gitloab 11.x doc，即將被拋棄
    #     - dev
      dependencies:
        - prepare
      script:
        - stylelint src/css/**/*.scss

    build:
      stage: build
    #   only: => going to be deprecated，根據gitloab 11.x doc，即將被拋棄
    #     - dev
      dependencies:
        - prepare
      script:
        - npm run build

    deploy:
      stage: deploy
      script: ./deploy
      rules:
        - if: $CI_COMMIT_BRANCH == 'dev' # Execute jobs when a new commit is pushed to dev branch

設定eslint/stylelint

  1. 安裝eslint與設定
    • install packages
      1
      npm install eslint eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser
    • .eslintrc.js
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      module.exports = {
          env: {
              browser: true,
              es6: true
          },
          extends: [
              // Uses the recommended rules from the @typescript-eslint/eslint-plugin
              "plugin:@typescript-eslint/recommended",
              // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
              "prettier/@typescript-eslint",
              // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors.
              // Make sure this is always the last configuration in the extends array.
              "plugin:prettier/recommended"
          ],
          globals: {
              Atomics: "readonly",
              SharedArrayBuffer: "readonly"
          },
          parser: "@typescript-eslint/parser",
          parserOptions: {
              ecmaVersion: 2018,
              sourceType: "module"
          },
          plugins: ["@typescript-eslint"],
          rules: {
              "prettier/prettier": ["error"],
              "@typescript-eslint/no-explicit-any": "off",
              "@typescript-eslint/interface-name-prefix": "off"
          }
      };
    • 使用
      1
      eslint src/js/**/*.ts --fix
  2. 安裝stylelint與設定
    • install packages
      1
      npm install stylelint stylelint-config-prettier stylelint-config-sass-guidelines stylelint-config-standard stylelint-order stylelint-scss
    • .stylelintrc.js
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      module.exports = {
          extends: ["stylelint-config-standard", "stylelint-config-sass-guidelines"],
          rules: {
              indentation: 4,
              "selector-max-id": null,
              "max-nesting-depth": null,
              "function-url-quotes": null,
              "selector-class-pattern": null,
              "selector-max-compound-selectors": null,
              "selector-max-compound-selectors": null,
              "selector-max-compound-selectors": null,
              "selector-no-qualifying-type": null,
              "no-descending-specificity": null,
              "declaration-block-no-duplicate-properties": null,
              "function-linear-gradient-no-nonstandard-direction": null,
              "selector-id-pattern": null,
              "font-family-no-missing-generic-family-keyword": null,
              "function-no-unknown": null,
              "max-line-length": null
          }
      };
    • 使用
      1
      stylelint src/css/**/*.scss --fix

前置作業設定好了，試試看吧!

  1. 執行後，可以從[Repo] => CI/CD => Piplelines/Jobs去看結果

  2. 設定eslint error level去測試錯誤結果

    commit後pipeline因為eslint error跑失敗

    開了merge request會無法merge，需要先修正pipeline的錯誤

[Enhancement]修改為當workflow成立時才可以Merge

  1. 將.gitlab ci config加上workflow rules
    1
    2
    3
    4
    workflow:
        rules:
            - if: $CI_MERGE_REQUEST_ID # Execute jobs in merge request context
            - if: $CI_COMMIT_BRANCH == 'dev' # Execute jobs when a new commit is pushed to dev branch
  2. 如此一來當在gitlab上開Merge request時，會自動跑CI/CD，成功後才可以去Merge