vue項目集成husky, commitlint, lint-staged, prettier總結

公司項目開發中，都會有不少種規範，代碼規範，提交規範等等，目的就是爲了使團隊代碼風格統一，便於閱讀，便於理解。

經過使用以上工具，項目將會具有校驗提交信息是否規範，提交前格式化代碼，lint代碼等功能。

1介紹

1.1 husky

如不少其餘版本控制系統同樣，git也具備在特定時間執行特定動做的腳本功能。husky 其實就是一個爲 git 客戶端增長 hook 的工具。它提供了不少git hooks（如commit, push, receive等），咱們能夠很方便在這些鉤子中檢測提交信息是否規範，運行測試用例，檢測代碼等等。

1.2 commitlint

commitlint 能夠校驗提交信息是否規範，提交格式以下：

git commit -m <type>: <description>
複製代碼

其中type能夠是如下值：

• build：主要目的是修改項目構建系統(例如 glup，webpack，rollup 的配置等)的提交
• ci：主要目的是修改項目繼續集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交
• docs：文檔更新
• feat：新增功能
• fix：bug 修復
• perf：性能優化
• refactor：重構代碼(既沒有新增功能，也沒有修復 bug)
• style：不影響程序邏輯的代碼修改(修改空白字符，補全缺失的分號等)
• test：新增測試用例或是更新現有測試
• revert：回滾某個更早以前的提交
• chore：不屬於以上類型的其餘類型(平常事務)

例如：

git commit -m "fix: 修復什麼bug"
複製代碼

1.3 lint-staged

能夠運行相關lint插件進行代碼檢測。

1.4 prittier

能夠對代碼進行格式化，保證代碼統一格式。

2 配置husky

1. 安裝

yarn add husky -D
複製代碼

2. 啓用，執行完下面命令後，根目錄會出現一個.husky的目錄。

yarn husky install
複製代碼

3. 爲了保證其餘人下載項目代碼之後，自動啓用hook，因此須要在package.json的scripts中加入"postinstall": "husky install"，例如：

{
      "scripts": {
        "postinstall": "husky install"
      }
    }
複製代碼

注意：若是是npm安裝，能夠參照這裏

2 配置commitlint

1. 安裝

yarn add @commitlint/cli @commitlint/config-conventional -D
複製代碼

2. 建立配置文件

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

或者在根目錄新建這個commitlint.config.js文件，而後輸入下面內容：

module.exports = {extends: ['@commitlint/config-conventional']}
複製代碼

3. 增長commit-msg鉤子

yarn husky add .husky/commit-msg 'yarn commitlint --edit "$1"'
複製代碼

執行完上述命令之後，.husky下面會有commit-msg的文件。 至此，項目能夠校驗提交信息，是否符合規範，有想嘗試的能夠試下。

4. windows下使用git bash執行commit時，可能會出現包含stdin is not a tty的報錯。能夠在 .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
複製代碼

而後在對應的勾子文件中，增長一行 . "$(dirname "$0")/common.sh" 代碼

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

yarn …
複製代碼

注意：全部*.sh文件的第一行必須是#!/bin/sh,不然會出現報錯：error: cannot spawn git: No such file or directory

3 配置lint-staged

1. 安裝

yarn add lint-staged -D
複製代碼

2. 根目錄建立 .lintstagedrc 配置文件

{
      "./src/**/*.{js,jsx,ts,tsx,vue,less,sass,scss,css.json}": ["prettier --write"],
}
複製代碼

4 配置prettier

1. 安裝

yarn add prettier -D
複製代碼

2. 根目錄建立.prettierrc.js文件

// 詳見https://prettier.io/docs/en/options.html
module.exports = {
  printWidth: 80, // 每行的長度
  tabWidth: 2, // 縮進的空格數
  useTabs: false, // 用tabs而不是空格縮進
  semi: true, // 每一個語句末尾是否加分號，false只有在編譯報錯時才加
  singleQuote: false, // 使用單引號代替雙引號，jsx引號規則將會忽略此配置。
  quoteProps: "as-needed", //
  jsxSingleQuote: false, // 在jsx中使用單引號代替雙引號
  trailingComma: "es5", // 是否有末尾的逗號，例如數組或對象的最後一項。/es5/none/all
  bracketSpacing: false, // 在對象字面量{}的語法中打印空格
  jsxBracketSameLine: false, // 開始標籤的>是否和以前內容在同一行
  arrowParens: "always", // 箭頭函數的參數是否加括號 /always/avoid
  rangeStart: 0, // 須要格式化的開始位置
  rangeEnd: Infinity, // 須要格式化的結束位置
};
複製代碼

5 配置pre commit鉤子

1. 執行下面命令，會在.husky目錄下面有個文件pre-commit

yarn husky add .husky/pre-commit 'yarn lint-staged --allow-empty "$1" && yarn lint'
複製代碼

項目若是使用vue-cli建立的，package.json的scripts中會有lint: vue-cli-service lint。若是想執行其餘lint插件，能夠將上面的yarn lint修改。

注意：若是commit出現stdin is not a tty的報錯。參考

至此。完結。

6 額外補充

1. 若是不想加入 配置husky 中的第3步，能夠刪除.husky下的.gitignore文件。

2. 若是不想安裝lint-staged，能夠將文件pre-commit裏的命令改成:

yran prettier "./src/**/*.{js,jsx,ts,tsx,vue,less,sass,scss,css.json}" --write && yarn lint
複製代碼

7 參考

1. typicode.github.io/husky/#/?id…
2. www.cnblogs.com/qiqi715/p/1…
3. www.cnblogs.com/JasonLong/p…