前景提要：

 專案提交之前做程式碼檢查，避免不規範的程式碼推送到伺服器。

前端專案的pre commit check，檢查內容：.js .vue .scss （可能是其他的jsx 或者less）

  實際上原理是 git hooks, 在commit之前執行某些指令碼。這個指令碼的定義是放在.git/hooks/pre-commit 檔案裡。

我們需要藉助工具庫 husky 和 lint-staged, 他們要配合起來使用達到這個目的。

1，第一步：
安裝工具包（假定你已經安裝了eslint 和 stylelint相關包）：

  npm install --
 
save-dev lint-staged husky

2, 第二步 ：
在package.json裡面配置git hooks 裡面，pre-commit要執行的內容。
我們要做的操作是用eslint對.js 和 .vue檔案檢查規範，以及對.scss檔案進行規範檢查，並且fix一些scss的縮排或者寫法錯誤。

{
  "name": "Project Demo",
  "version": "1.0.0",
  "description": "des",
  "author": "",
  "private": true,
  "scripts": {
	 // ...
    "lint-staged"
 
: "lint-staged" // key words
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"  // key words
    }
  },
  "lint-staged": {
    "**/*.js": "eslint --ext .js",  // key words
    "**/*.vue": "eslint --ext .vue",  // key words
    "src/**/*.scss": "stylelint --syntax scss && stylelint --fix scss"
 
  // key words
  },
  "dependencies": {
  	//...
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",  
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-import-resolver-webpack": "^0.10.1",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    
    "husky": "^1.2.0",
    "lint-staged": "^8.1.0",
    
    "stylelint": "^9.9.0",
    "stylelint-config-standard": "^18.2.0",
  }

這裡我們提交之前檢查了3種檔案,用eslint檢查js檔案和vue檔案，用stylelint檢查scss型別的檔案。

第三步：
修改或者新增我們的.eslintrc檔案 或者.stylelintrc檔案，這樣我們git staged中檔案，在commit之前，husky和 lint-staged會幫助我們對staged中的js/vue/scss檔案分別執行如下的命令,就是我們定義在package.json裡面的lint-staged節點：

eslint --ext .js

eslint --ext .vue

stylelint --syntax scss && stylelint --fix scss

常見的.stylelintrc檔案長這樣：

{
  "extends": "stylelint-config-standard",
  "rules": {
    "selector-pseudo-class-no-unknown": null,
    "shorthand-property-no-redundant-values": null,
    "at-rule-empty-line-before": null,
    "at-rule-name-space-after": null,
    "comment-empty-line-before": null,
    "declaration-bang-space-before": null,
    "declaration-empty-line-before": null,
    "function-comma-newline-after": null,
    "function-name-case": null,
    "function-parentheses-newline-inside": null,
    "function-max-empty-lines": null,
    "function-whitespace-after": null,
    "number-leading-zero": null,
    "number-no-trailing-zeros": null,
    "rule-empty-line-before": null,
    "selector-combinator-space-after": null,
    "selector-list-comma-newline-after": null,
    "selector-pseudo-element-colon-notation": null,
    "unit-no-unknown": null,
    "no-descending-specificity": null,
    "value-list-max-empty-lines": null
  }
}

如果某一個步驟檢查出來有錯誤，那麼就會提交失敗。

例子：

我們修改了專案中的一個scss檔案，裡面有3個錯誤，分別是：
1，第一個font-size和font-family冒號後面沒有空格
2，重複的font-size宣告
3，檔案最後一行沒有一個空行

我們git add 然後執行 commit命令，會出現下面的情況：

因為我們寫了stylelint --fix scss 這個命令【看上面配置】，能夠fix的就已經fix了，但是font-size重複的就不能fix，需要手動修改。

js檔案和 vue檔案是同樣的效果。

在使用eslint-plugin-import 的時候要注意

    "eslint-import-resolver-webpack": "^0.10.1",
    "eslint-plugin-import": "^2.14.0",

在.eslintrc裡面要配置一下 webpack的resolve,在settings節點加上這個，注意，config後面是相對.eslintrc檔案的配置resolve的webpack檔案的路徑，你應該根據你自己的檔案結構來寫這個路徑

  settings: {
    "import/resolver": {
        "webpack": {
            "config": "./build/webpack.base.conf.js"
        }
    }
  }

參考這裡： https://github.com/benmosher/eslint-plugin-import/tree/master/resolvers/webpack

遇到了新問題

vue檔案裡面的style並沒有被修復，我們需要修改指令碼,在lint-staged節點增加了第四行

  "lint-staged": {
    "**/*.js": "eslint --ext .js",
    "**/*.vue": "eslint --ext .vue",
    "src/**/*.scss": "stylelint --syntax scss && stylelint --fix scss",
    "src/**/*.vue": "stylelint --fix"
  },