eslint git提交不上_前端团队规范-git commit如果做代码eslint校验

相信大家都意识到一个问题，前端提交不正确的代码部署的会失败，所以我们一般做团队建设的时候在commit提交的时候做下校验，其实就是执行下eslint去做下文件语法的校验，那么怎么实现的。

在看下面教程前给作者一个关注吧，更多干货等你来学习，感谢你的小手点关注哦

前端团队规范的重要性

第一点：git hooks(钩子)

首先了解下git的hooks是分客户端和服务端的，咱们这里主要介绍的是客户端的钩子，客户端一般常用的包含了pre-commit(预先提交) pre-merge-commit(合并前提交)prepare-commit-msg(准备提交)commit-msg(提交信息)，那么这些钩子是怎么操作的，其实原理很简单，他们都会对应一个脚本【存放在.git文件夹下的hooks里面】

mkdir app //创建文件夹cd app //进入app文件夹git init //初始化本地仓库cd ./.git/hooks //进入hooks目录ls -l //查看下面文件，会发现对应的都是咱们hook的名字，// 你会发现后面多了扩展名.sample扩展名，这是为了防止执行防止它们默认被执行

初始化git仓库

比如你想在git commit 的时候输出“我喜欢玩hooks来建设团队”文案怎么操作呢？

mv pre-commit.sample pre-commit //把后缀名去掉vim pre-commit //编辑这个文件

在文件里面添加输出咱们文案的代码

echo 我喜欢玩hooks来建设团队

保存后执行git commit -m '测试'试试效果

说到这里是不是明天了git钩子其实就是执行的脚本啊

第二点：eslint

先npm init -y初始化下npm包

npm init -y

安装下eslint

npm i eslint -S

配置.eslintrc文件

{    "rules": {        "semi": ["error", "always"],        "quotes": ["error", "double"]    }}

package.json里面配置eslint的执行命令

"lint": "eslint --ext .js ./"

第三点：husky(哈士奇看门狗的意思，守好你的代码质量减少损失)

安装husky 用来在commit之前操作，(这时候我们还原咱们的pre-commit去 把之前的操作暂停使用)

npm i husky -S

安装后在hooks文件夹下会多了两个文件

继续package.json里面配置下husky配置

"husky": {    "hooks": {      "pre-commit": "npm run lint"    }  }

这样我们就大功告成了。试试吧小伙伴

这就是在commit的时候语法检测，是不是很神奇啊，小伙伴，记得关注哦

课外知识：为什么执行commit的时候就和husky有关系呢？

其实和咱们的第一点有关，就是在pre-commit的时候里面执行了husky.sh脚本来看下图：

这回明白了吧，记得不想落伍，前端也需要学习脚本的哦