本文讲述的是如何利用三方插件进行代码检测,
准备工作
- 了解eslint的基本用法
- 了解git钩子
- 使用第三方husky,lint-staged
git钩子是什么
git 钩子是git为我们提供的事件的回调,这些文件在 文件的根目录中的
.git/hooks
中大多是.sample
后缀的文件夹,这些都是shell命令,通过出去这个后缀即可触发
.git
这个文件需要通过文件夹设置查看隐藏文件即可看到
git官网钩子介绍
我们的目的是想在提交前使用eslint来验证是否正确,正确才是其提交这样的话就需要用到pre-commit
这个钩子
husky与lint-staged是什么如何用
husky 是检测钩子函数的一个工具目前最新的是@1.0.1, lint-staged则是检测git暂存区的工具
两者的使用也非常简单:
npm i husky lint-staged eslint -D
注意一点,husky在安装的时候会通过你的命令来初始化.git/hooks中的钩子,所以一定要先让自己的文件受git的控制,如果没被控制只需要git init
即可,如果因为某些原因需要重新初始化,则可以node ./node_modules/husky/lib/installer/bin.js install
或者重新安装husky这样就能初始化了
配置husky与lint-staged
// package.json
// linters中的"src/**/*.js"这个是检测的文件夹可以修改这个的意思是检测src下所有层级的js
// 需要注意的lint-staged这个如果报错则创建一个.lintstagedrc把 { "linters" : {...} }放进去即可
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"linters": {
"src/**/*.js": [
"./node_modules/.bin/eslint --fix",
"git add"
]
}
}
内网中搭建
本次是在内网中搭建的着实麻烦,首先要吧对应的npm包按照层级保存在内网的包中,如果大家公司条件好点可以开代理或者白名单,如果和笔主一样苦逼只能通过压缩好了放入这种方式称之为离线安装
,由于husky在首次安装的时候会初始化.git/hooks
中的文件,所以一定要注意存在.git
否则会不成功,如果通过cnpm 会有下划线开头,也会多一个重复的包,./node_modules/.bin
中的对应的名称与.cmd
的文件也就是下划线的可以通过其内容来恢复
当然每个项目手动去初始化肯定是不好的,可以通过在script start 中去初始化与气动项目使用
node ./node_modules/lib/installer/bin.js && 启动你的项目
来操作,这个的意思是先启动前者之后在启动项目,如果是webpack 启动的就要注意不要把初始化放在后面,这样它可能误识别成参数了 。
在启动bin.js 同层级的index.js中可以通过修改源码(不建议,不得已为之)通过使用fs.existsSync(path)
来判断pre-commit是否存在如果不存在就初始化,如果存在了就不做处理这样就完成了一次内网搭建与排除各种小问题