vue，react 配置 commitlint 和 eslint 鉤子

chemzqm 發布于2019-08-23 10:26 / 1934人閱讀

摘要：官網倉庫倉庫中文官網一配置搭配的鉤子后，每次提交版本信息的時候，會根據配置的規則進行校驗，若不符合規則會失敗，并提示相應信息。添加字段的配置跳過校驗使用指令可以跳過檢驗規則代碼規范強制提交測試

關于 commitlint, husky, eslint 的具體信息可以見官網。

commitlint: 官網, github 倉庫

husky： github 倉庫

eslint 中文官網

一、配置 commitlint

commitlint 搭配 husky 的 commit message 鉤子后，每次提交 git 版本信息的時候，會根據配置的規則進行校驗，若不符合規則會 commit 失敗，并提示相應信息。
1. 安裝 commitlint husky 依賴

npm install --save-dev @commitlint/{cli,config-conventional}
npm install --save-dev husky@next  # 安裝最新版，就不用配置 scripts 腳本了

2. 新建 commitlint.config.js 文件

module.exports = {
    extends: ["@commitlint/config-conventional"]
};

commitlint.config.js 配置文件可以添加自己的規則，這里 @commitlint/config-conventional 提供了官方的規則擴展：

build：主要目的是修改項目構建系統(例如 glup，webpack，rollup 的配置等)的提交
ci：主要目的是修改項目繼續集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交
docs：文檔更新
feat：新增功能
merge：分支合并 Merge branch ? of ?
fix：bug 修復
perf：性能, 體驗優化
refactor：重構代碼(既沒有新增功能，也沒有修復 bug)
style：不影響程序邏輯的代碼修改(修改空白字符，格式縮進，補全缺失的分號等，沒有改變代碼邏輯)
test：新增測試用例或是更新現有測試
revert：回滾某個更早之前的提交
chore：不屬于以上類型的其他類型

3. 配置 package.json 文件
添加 husky 字段

"husky": {
    "hooks": {
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
    }
  },

4. 測試

git add .
git commit -m "foo: this will fail"

配置 eslint 鉤子

添加 husky 的 pre-commit 的鉤子，husky 會在你每次提交 commit 之前使用 eslint 校驗代碼規范，不符合規則會提交失敗會打印出校驗信息。
添加 husky 字段的配置

"husky": {
    "hooks": {
      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS",
      "pre-commit": "eslint "src/**/*.{js,ts,vue}""
    }
  },

- 跳過校驗
使用 --no-verify 指令可以跳過檢驗規則

git add . && git commit --no-verify -m "代碼規范強制提交測試"

云服務器 GPU云服務器 commitlint ESLint webrtc和vue 鍵盤鉤子

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96334.html

工程搭建---代碼風格統一

摘要：為此我們需要安裝這個是用于提交代碼的鉤子函數安裝完之后，我們就需要在增加運行鉤子函數。等鉤子函數這樣就簡單的成功對代碼進行效驗了，當然這邊更進一步的可以使用這個可以將取得所有被提交的文件依次執行寫好的任務。一個項目是會有多個成員來開發的，因此統一開發規范是很有必要的，不然每個人都有自己的風格，同步之后代碼都會報錯。我這邊是用Vscode編譯器的。首先用vue-cli3.0創建一個工...

levius 2019-08-23 16:05 評論0 收藏0
Lint Your Code

摘要：形成良好統一的代碼規范，有利于提高代碼的可讀性，減少潛在的錯誤，便于團隊協作開發。其中是可選的，如果沒有則禁用所有規則，如果有則禁用所有規則。也可以定義一個命令同時運行這兩個命令，我在這里使用了我們定義了在鉤子觸發時會執行命令。形成良好統一的代碼規范，有利于提高代碼的可讀性，減少潛在的錯誤，便于團隊協作開發。本文簡單介紹JS、CSS、 Git Commit 的規范工具及用法。 Lin...

hidogs 2019-08-23 10:27 評論0 收藏0
vue控件庫環境搭建(1)--統一打包

摘要：當然如果使用的話，使用來效驗提交的代碼最后，需要修改演示環境在該環境下創建一個文件這邊主要和英文版中文版框架庫框架庫選擇語言簡體中文主頁面配置別名路徑配置別名路徑背景：為了避免重復造輪子，很有必要開發一個通用組件庫，方便重復利用。本文是采用vue-lic3.0腳手改造而成的，使用vuepress作為演示環境。首先通過vue腳手架生產目錄如下： showImg(https://seg...

Scorpion 2019-08-23 15:56 評論0 收藏0
vue控件庫環境搭建(1)--統一打包

摘要：當然如果使用的話，使用來效驗提交的代碼最后，需要修改演示環境在該環境下創建一個文件這邊主要和英文版中文版框架庫框架庫選擇語言簡體中文主頁面配置別名路徑配置別名路徑背景：為了避免重復造輪子，很有必要開發一個通用組件庫，方便重復利用。本文是采用vue-lic3.0腳手改造而成的，使用vuepress作為演示環境。首先通過vue腳手架生產目錄如下： showImg(https://seg...

freecode 2019-08-02 14:32 評論0 收藏0
前端代碼風格自動化系列（五）之共同出擊

摘要：我們在前面的四篇中介紹了這些工具，可以完成以最小的代價在提交到遠程倉庫前，格式化為統一風格的代碼，大家都很熟悉這里就不列舉了。下面舉一個配置。這里對于項目里分別做了提交前格式化操作，對于提交規范做了校驗。我們在前面的四篇中介紹了husky、commitlint、lint-staged、prettier這些工具，可以完成以最小的代價在Git提交到遠程倉庫前，格式化為統一風格的代碼，es...

pumpkin9 2019-08-23 14:33 評論0 收藏0