husky和lint-staged实现git commit前自动跑lint

需求场景

lint就是检查的代码,eslint,stylelint,prettier这些东西,想必大家都知道了;
但是每次commit的时候都要自己npm run fix 会不会很蛋痛;
所以,想git commit的时候自动跑完fix,就需要
husky和lint-stated了

husky

安装husky

npm install husky --save-dev
// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "pre-push": "npm test",
      "...": "..."
    }
  }
}

这样git commit 的时候就会执行npm test了,但是还是不完美,如果我们想干很多件事呢,比较吧修改好的放到暂存区;
那么就需要 lint-stated

lint-stated

安装 lint-stated

npm install -D lint-staged

然后package.json就可以这样写了;

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.css": [
      "stylelint --fix",
      "prettier --write",
      "git add"
    ],
    "*.scss": [
      "stylelint --fix --syntax scss",
      "prettier --write",
      "git add"
    ],
    "*.{js,jsx}": [
      "eslint --fix",
      "git add"
    ]
  },

就相当于git commit的时候会自动去执行lint-staged的代码;
".css"是去匹配css文件,然后做一些操作;
同理"
.scss","*.{js,jsx}"就是去匹配scss文件和js还有jsx文件,然后爬改跑的lint;
是不是很完美,很简单!

mRPGuifea9.gif

git add 就是修改好的,放到暂存区

延伸

1、除了可以"pre-commit"以外还可以有很多其他git钩子操作,具体可以在.git/hooks目录下面看这些钩子名字;


image.png

2、出了husky,还可以用yorkie,就是搞vue那个老几,在husky基础上面改的一个东西;反正都差不多;
如果直接用vue的脚手架就可以不用安装husky,一样配置就完了;官方文档

推荐阅读更多精彩内容