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 問題的代碼，又多出了更多的不知道什么原因的報錯，只能將代碼回退處理。