vue 專案整合 husky+commitlint+stylelint

Jason Long發表於2021-03-27
VueMIT

最近剛換了新工作，這兩天也沒有業務上的需求，做了一些前端工程化方面的東西。要在現有的專案中整合 husky+commitlint+stylelint，也不能對現有程式碼產生影響。

使用 lint 的目的：

  • 拒絕錯誤程式碼被提交到程式碼倉庫
  • 修復、美化程式碼

簡單介紹一下庫：

我們在建立 vue 專案的時候，eslint 已經整合好了，根據我們自己的需求修改 eslint 規則配置。
規則地址：https://eslint.vuejs.org/rules
檢視規則效果地址：https://mysticatea.github.io/vue-eslint-demo/

stylelint

官方文件：https://stylelint.io/

可以幫助我們自動修復錯誤、格式化樣式程式碼。

使用

1.安裝 stylelint、stylelint-config-standard 兩個依賴到我們的專案中

yarn add stylelint stylelint-config-standard -D

2.在根目錄，建立一個 .stylelintrc 配置檔案

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": [
      2,
      {
        "baseIndentLevel": 1
      }
    ],
    "declaration-block-semicolon-newline-after": "always"
  }
}

husky

官方文件：https://typicode.github.io/husky/#/

Git hooks made easy.

引自官方，可以讓 git hooks 變得更簡單，在特定的重要動作觸發自定義指令碼。比如：當我們在提交或者推送程式碼的時候，可以使用它驗證提交資訊、執行測試、格式化程式碼、觸發 CI/CD 等。

使用

這裡我們使用 yarn 來安裝並啟用。

1.安裝 husky

yarn add husky -D

2.啟用 git hooks

yarn husky install

執行完這步後，以為可以忽略後面的步驟。把生成的 .husky 目錄下檔案新增在 .gitignore，結果其他小夥伴更新程式碼後，需要再次執行次步驟才能使用，顯然不是友好的。

3.在 package.json 檔案中，安裝依賴後啟用 git hooks

"script": {
   "postinstall": "husky install"
}

commitlint

官方文件：https://commitlint.js.org/#/

用來幫助我們在多人開發時，遵守 git 提交約定。

使用

1.將 @commitlint/cli、@commitlint/config-conventional 兩個依賴安裝到我們的專案中

yarn add @commitlint/cli @commitlint/config-conventional -D

2.在根目錄，建立一個 commitlint.config.js 配置檔案

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

增加 commit-msg 勾子

使用下面命令增加一個 git 提交資訊的勾子，會在 .husky 目錄下建立一個 commit-msg 檔案。

yarn husky add .husky/commit-msg 'yarn commitlint --edit "$1"'

lint-staged

在前面已經配置了 stylelint、husk、commitlint。lint-staged 在我們提交程式碼時，只會對修改的檔案進行檢查、修復處理，以保證提交的程式碼沒有語法錯誤，不會影響其他夥伴在更新程式碼無法執行的問題。

使用

1.安裝 lint-staged 依賴到我們的專案中

yarn add lint-staged -D

2.在根目錄，建立一個 .lintstagedrc 配置檔案

{
  "*.{js,vue}": ["npm run lint"],
  "*.{html,vue,css,scss,sass,less}": ["stylelint --fix"]
}

增加 pre-commit 勾子

在 .husky 目錄建立一個 pre-commit 檔案。

yarn husky add .husky/pre-commit 'yarn lint-staged --allow-empty "$1"'

問題

整個實踐下來，遇到了兩個影響比較大的問題。

Windows

當我們在 Windows 的 Git Bash 上使用 Yarn，git hooks 會失敗（stdin is not a tty）。

解決方案：

1.在 .husky 目錄下建立一個 common.sh 檔案：

#!/bin/sh

command_exists () {
  command -v "$1" >/dev/null 2>&1
}

# Windows 10, Git Bash and Yarn workaround
if command_exists winpty && test -t 1; then
  exec < /dev/tty
fi

2.在對應的勾子檔案中，增加一行 . "$(dirname "$0")/common.sh" 程式碼

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
. "$(dirname "$0")/common.sh"

yarn …

CI

最初沒有考慮到 CI 是不需要 git hooks 的問題，就直接將程式碼合併到測試服的分支上，通過 Jenkins 構建出現了 husky install 失敗。

解決方案：
使用 is-ci，在 ci 場景不會執行 husky install。

1.安裝 is-ci

$ yarn add is-ci -D

2.在 .husky 目錄下，建立一個 install.js 檔案

const { spawnSync } = require('child_process')
const isCI = require('is-ci')

if (!isCI) {
  spawnSync('husky', ['install'], {
    stdio: 'inherit',
    shell: true
  })
}

3.修改 package.json 檔案

"script": {
   "postinstall": "node .husky/install.js"
}

補充

vue eslint 配置

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    "indent": ["error", 2],
    'vue/max-attributes-per-line': [
      'error',
      { multiline: { allowFirstLine: false } }
    ],
    'vue/html-indent': [
      'error',
      2,
      {
        attribute: 1,
        baseIndent: 1,
        closeBracket: 0,
        alignAttributesVertically: true,
        ignores: []
      }
    ],
    'vue/html-closing-bracket-newline': [
      'error',
      {
        singleline: 'never',
        multiline: 'never'
      }
    ]
  }
}

轉載請標註來源： https://www.cnblogs.com/JasonLong/p/14520479.html

相關文章