前景提要：
項目提交之前做代碼檢查，避免不規范的代碼推送到服務器。
前端項目的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"
},
補充，對於js代碼來說，vscode有eslint官方的插件，可以幫我們根據eslintrc的配置來檢查js代碼是否合法，並且保存的時候自動幫我們修復能修復的，但是需要我們在vscode中配置eslint，先安裝eslint插件，然后在vscode的user setting JSON文件添加這兩個鍵值對：
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",{
"language": "vue",
"autoFix": true
},
"html",
"vue"
]
這時候我們在代碼工作區就能實時看到js代碼的不規范的地方，stylelint只需要安裝插件，不需要配置就能看到不規范的地方，至於stylelint的autofixonSave暫時沒有找到這個。