亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

為代碼提交前加上代碼檢測

標簽:
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下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消