为了账号安全,请及时绑定邮箱和手机立即绑定

为代码提交前加上代码检测

标签:
CSS3

本文讲述的是如何利用三方插件进行代码检测,

准备工作

  1. 了解eslint的基本用法

  2. 了解git钩子

  3. 使用第三方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是否存在如果不存在就初始化,如果存在了就不做处理这样就完成了一次内网搭建与排除各种小问题

demo非内网



作者:coderLfy
链接:https://www.jianshu.com/p/8faa352c4802


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消