代碼提交git時自動格式化並經過ESlint檢測

前言

在同一個項目中，通常都是幾我的合做開發，每一個人的代碼風格不一樣，所以提交到git以前，須要統一下格式，所以纔有了這篇文章，分享一下本身的配置過程。但願每一個小夥伴都能規範本身的代碼，若是你認爲對你有幫助或者有小夥伴有更好的方法歡迎積極留言！

準備工做

以vue爲例，用腳手架生成一個項目，目錄結構（這個沒有什麼影響，已有項目更好）

介紹下咱們須要使用到的npm模塊

• prettier  代碼格式化模塊，和vscode上安裝的Vetur擴展工具使用的格式化相同
  
• husky  git的鉤子，在git的hook中執行一些命令
  
• lint-staged  對git暫存的文件進行lint檢查
• eslint   js代碼檢測工具

第1步

安裝所需依賴

cnpm install --save-dev prettier husky lint-staged eslint複製代碼

第2步

2.1 配置prettier的規則

在項目更目錄新建一個 .prettierrc 文件，內容爲（這裏爲了方便加了中文註釋，實際須要將註釋去掉）

{
    // 代碼換行長度
    "printWidth": 200,
    // 代碼縮進空格數
    "tabWidth": 2,
    // 使用製表符縮進而不是空格縮進
    "useTabs": true,
    // 代碼結尾是否加分號
    "semi": false,
    // 是否使用單引號
    "singleQuote": true,
    // 對象大括號內兩邊是否加空格 { a:0 }
    "bracketSpacing": true,
    // 單個參數的箭頭函數不加括號 x => x
    "arrowParens": "avoid"
}複製代碼

更多配置能夠查看prettier官網配置：prettier.io/docs/en/opt…

 2.2 配置eslint規則

由於沒有全局安裝eslint，因此在項目中執行(初始化eslint文件)

./node_modules/.bin/eslint --init複製代碼

這是個人根據eslint的提示選項，具體根據項目不一樣選擇不一樣

在項目自動在根目錄新增長了一個.eslintrc.json文件，在rules選項中校驗規則：

"rules":{
    // 禁止對象字面量中出現重複的 key
    "no-dupe-keys": "error",
    // 禁止出現重複的 case 標籤
    "no-duplicate-case": "error",
    // 禁止出現空語句塊,容許catch出現空語句
    "no-empty": ["error", {"allowEmptyCatch": true}],
    // 禁止對 catch 子句的參數從新賦值
    "no-ex-assign":"error",
    // 禁止沒必要要的布爾轉換
    "no-extra-boolean-cast": "error",
    // 禁止沒必要要的分號
    "no-extra-semi": "error",
    // 強制全部控制語句使用一致的括號風格
    "curly": "error"
    
}複製代碼

更多校驗規則能夠查看eslint官網配置： cn.eslint.org/docs/rules/

第3步

在package.json中增長husky和lint-staged的配置

"husky":{
    "hooks": {
        "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "src/**": [
        "prettier --config .prettierrc --write",
        "eslint --fix",
        "git add"
    ]
}複製代碼

效果圖：

具體檢查路徑在lint-staged 配置項能夠配置，具體查看官網

注：lint-staged配置項中必定要加"git add"，不然格式化修改後的文件，沒有被commit到本地倉庫中

第4步

檢驗是否成功，修改一些文件後，執行

git add .複製代碼

git commit -m '測試'複製代碼

此時就會自動格式化後進行eslint校驗，若是有錯誤的話，commit會失敗，並給出eslint提示的錯誤，修改後再次提交就能夠了，下面是成功的例子

注：若是還有不明白的能夠將demo克隆下來看一下，githua地址 github.com/foreverhot/…

需將檢查圖片忽略，不然檢查不經過（建立如下文件並分別加入/src/img）

.eslintignore文件 忽略eslint檢查的路徑

.prettierignore文件 忽略prettier格式化的路徑