git commit期间通过git hook 的 pre-commit 做stylelint、eslint校验，依赖husky、lint-staged、

实现过程

-> 待提交的代码

-> git add 添加到暂存区

-> 执行 git commit

-> husky注册在git pre-commit的钩子调起 lint-staged

-> lint-staged 取得所有被提交的文件依次执行写好的任务（ESLint 和 stylelint）

-> 如果有错误（没通过ESlint检查）则停止任务，等待下次commit，同时打印错误信息

-> 成功提交

git hook 介绍

每次git commit的时，git会主动调用 .git/hooks/pre-commit

这个脚本(默认的*.sample不执行)，脚本可以是shell、python、ruby等可执行脚本，只要是 以非零状态

退出会导致中止，就commit失败。

依赖管理

添加 eslint 依赖

npm install l babel-eslint eslint eslint-config-standard eslint-friendly-formatter eslint-loader eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue --save-dev

添加stylelint 依赖

npm install stylelint stylelint-config-standard --save-dev

添加husky lint-staged 处理

npm install husky lint-staged --save-dev

• husky 可以用于实现各种 Git Hook。这里主要用到 pre-commit这个 hook，在执行 commit 之前，运行一些自定义操作
• lint-staged 用于对 Git 暂存区中的文件执行代码检测

package.json

"scripts": {
    ...
    "eslint": "eslint --ext .js,.vue src public package",
    "eslintfix": "eslint --fix --ext .js,.vue src public package",
    "stylelint": "stylelint **/*.less",
    "stylelintfix": "stylelint --fix **/*.less",
    "lint-staged": "lint-staged"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{js,vue}": [
      "npm run eslint"
    ],
    "**/*.less": [
      "npm run stylelint"
    ]
  },
           

如果你用的vue-cli2.0版本，添加eslint的时候，记得修改webpack.base.conf.js 文件

webpack.base.conf.js 添加以下内容

.....
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})
...
module.exports = {
	...
	module: {
		...
		rules:[
			...(config.dev.useEslint ? [createLintingRule()] : []),
			...
		]
	}
	...
}
           

husky: https://www.npmjs.com/package/husky

lint-staged: https://www.npmjs.com/package/lint-staged

prettier: https://www.npmjs.com/package/prettier