webpack+vue+Eslint+husky+lint-staged 統一項目編碼規範

一. Eslint：

爲何咱們要在項目中使用ESLint

ESLint能夠校驗咱們寫的代碼，給代碼定義一個規範，項目裏的代碼必須按照這個規範寫。

加入ESLint有很是多的好處，好比說能夠幫助咱們避免一些很是低級的錯誤，一些格式上的問題致使咱們在運行生產環境的時候出現一些不明因此的報錯。還有就是在跟團隊協做的時候，每一個人都保持同一個風格進行代碼書寫，這樣團隊內部相互去看別人的代碼的時候，就能夠更容易的看懂。

ESLint實戰小技巧全揭祕

1. 局部安裝eslint

$ npm install eslint -D

2. 初始化配置文件：

$ eslint --init

3. webpack中配置eslint：

須要先安裝 eslint-loader 解析 .eslint.js 文件

$ npm install eslint-loader -D

在 webpack.base.conf.js 的 rules 中添加如下規則：

{
        test: /\.(vue|js|jsx)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
        enforce: 'pre',
        options: {
        　　fix: true,
        }
}

4. 配置 Eslint：

咱們這裏是 Vuejs 項目，因此須要同時對 .vue 文件中的 js 代碼進行檢測，就須要利用 eslint-plugin-vue 插件來搭配使用。使用別人寫好的規則包（以eslint-config-開頭的npm包），如eslint-config-standard，由於本人比較偏向於 Airbnb JavaScript Style，因此從此的代碼規範將均使用此規範。

安裝依賴：

$ npm install eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue babel-eslint -D

（一）配置 package.json 文件：

在 package.json 中添加 lint 腳本：

// ...
"scripts": {
  // ...
  "lint": "eslint --ext .js,.vue src"
},
// ...

上面的命令中 --ext 參數就是用來指定須要檢查的擴展名的文件，src 就是指定檢查的目錄。

命令行運行 npm run lint，輸出以下：

在報這麼多的錯誤以後，若是咱們一條一條地去修復，就會變的很是的麻煩，相信剛接觸ESLint的童鞋都深有體會。其實這些錯誤均可以讓ESLint幫助咱們自動地修復。只須要在ESLint後面加上一個參數--fix，它就會自動修復 Lint 出來的問題。當咱們再去terminal裏面跑一下：$ npm run lint，就會發現不少問題都被自動修復了。剩餘沒有被自動修復的問題按照提示進行修復便可。

"lint": "eslint --fix --ext .js,.jsx,.vue src"

（二）配置 .eslintrc.js 文件：

先放總體文件看看

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "airbnb-base",
        "plugin:vue/essential",
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module",
        "parser": "babel-eslint",
    },
    "plugins": [
        "vue",
    ],
    "rules": {
        'no-console': 'off'
    }
};

（1）extends： 

一個配置文件能夠被基礎配置中的已啓用的規則繼承。可使用如下規則繼承，表明繼承Eslint中推薦的（打鉤的）規則項：

module.exports = {
    "extends": "eslint:recommended",
    "rules": {
        
    }
}

使用別人寫好的規則包（以eslint-config-開頭的npm包），如eslint-config-standard，我項目中使用的是airbnb：

module.exports = {
    "extends": [　　
　　　　"airbnb-base",
　　　　"plugin:vue/essential"
　　 ],

"rules": { } }

（2）plugin屬性：

ESLint 支持使用第三方插件（以eslint-plugin-開頭的npm包），在使用插件以前，必須使用 npm 安裝。如eslint-plugin-react、eslint-plugin-vue等。

module.exports = {
    "plugins": [
        "vue"
    ]
};

（3）rules屬性：

當須要根據本身的需求進行配置時，能夠在 rules 中添加規則；module.exports = {

"extends": [
        "airbnb-base",
        "plugin:vue/essential",
    ],
    "plugins": [
        "vue",
    ],
    "rules": {
　　　　　'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
　　　　  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'　
    }
};

如在平時開發中常常要用到console，能夠將這條規則關掉，這樣在開發環境運行 npm run lint 時，命令行就不會輸出 no-console/no-debugger 警告了。

 二. husky & lint-staged：

　　如今最流行的版本管理工具非  git莫屬，而良好的代碼規範有助於項目的維護，爲了防止一些不規範的代碼  commit並 push到遠端,咱們能夠在 git命令執行前用一些鉤子來檢測並阻止。如今大前端主要有兩種  git鉤子插件： husky（jquery與next.js都在用）， pre-commit(antd在用)。我項目中使用的是 husky。

　　用過  git的小夥伴們都知道 git 有不少命令 commit、 push、 rebase等等。那這些命令主要是在執行.git文件夾中的東西， git 鉤子文檔上介紹很是詳細， git init後，在 .git/hooks文件中，有一些 .simple結尾的鉤子示例腳本，那麼 git 鉤子目錄就是在.git文件夾的hooks下，以下所示：

 

 

上圖中的腳本文件就是 git 的鉤子函數。

若是想啓用對應的鉤子函數，只需手動刪除後綴。因此，列出兩種配置方法：

 

1. 手動修改鉤子文件：

按照文檔上，配置鉤子腳本，修改hooks中文件名對應的鉤子文件，啓用鉤子。使用shell腳本檢查。

!/usr/bin/env bash    
# get files to be linted
FILES=$(git diff --cached --name-only | grep -E '^src|^test/unit/specs|^test/e2e')    
# lint them if any
if [[ $FILES ]]; then
  ./node_modules/.bin/eslint $FILES
fi

文件名是pre-commit, 在commit 以前啓用的鉤子函數， 利用 git diff查看當前有哪些文件修改過，只對指定文件夾中修改的文件使用eslint進行代碼檢查，漸進式對整個項目實現代碼規範。

腳本寫好後，不用每次都手動複製到.git/hooks目錄下，只需對當前文件建立軟鏈接，到指定目錄，在package.json中配置腳本命令，

"scripts": {   
　　"install-hook": "ln -s ../../build/git-hooks/pre-commit .git/hooks/pre-commit",
}

在項目初始化後， 執行npm run install-hook,很方便地配置好了pre-commit 鉤子。

2. husky 和 lint-staged 結合構建鉤子：

husky可以防止不規範代碼被commit、push等，而使用了eslint後，用 lint-staged 能夠在 lint 後，更加靈活，執行其餘腳本，嘗試進行修改錯誤，好比 eslint --fix 檢查後並修復錯誤等，因此項目中使用了 husky 與 lint-staged 結合使用。

首先，husky 和 lint-staged 安裝依賴：

$ npm install -D lint-staged husky

修改 package.json 文件：

{ 
    ...
    "scripts": {
    "lint": "eslint --fix --ext .js,.jsx,.vue src"
    },
    "husky": {
    　　hooks": {
        　　"pre-commit": "lint-staged",
        　　"pre-push": "lint-staged"
    　　}
    },
    "lint-staged": {
    　　"src/**/*.{js,json,vue}": [
        　　"eslint --fix",
        　　"git add"
    　　]
    },
    ...
}

此時，當你 git commit的時候，將會執行 precommit裏的腳本，沒有問題了才能夠提交。

附：在安裝和測試過程當中遇到的一些問題的解決辦法：

（1）在安裝完 Eslint 進行測試時，出現了好幾個 parser error 的問題，不是說缺乏；就是說缺乏 >，實際上是由於不兼容致使的報錯，只要加上 babel-eslint 便可；

首先安裝 babel-eslint ：

$ npm install -D  babel-eslint

其次在 .eslintrc.js 文件中加入：

{

　　　"extends": [

　　　　　　"airbnb-base",

　　　　　　"plugin:vue/essential"

　　　],

"parserOptions": {
        "parser": "babel-eslint"
   }, 
}

（2）安裝 husky 後提交代碼 husky 不生效：

$ rm -rf .git/hooks
$ npm uninstall husky -D
$ npm install husky -D

（3）npm run lint 始終報 npm 的 error，使用以下命令便可：

$ npm run lint -s

（4）關於prettier 的問題：

prettier 是一個很好的格式化代碼的插件，但對已經有必定迭代完成度的代碼不推薦使用。使用該插件後，它會將原有的代碼也進行格式化，形成不少不可知的問題，我就是前車可鑑，使用 prettier 後，本來已經沒有 eslint 問題的代碼，又多出了更多的不知道什麼緣由的報錯，只能將代碼回退處理。