使用husky + lint-staged助力团队编码规范
使用husky + lint-staged助力团队编码规范
- 写在前面
- 了解 githooks
- husky
- 钩子中执行多个命令
- hook 拦截
- lint-staged
- mrm
- 关于 prettier 的问题
写在前面
husky
是一个为 git 客户端增加 hook 的工具。安装后,它会自动在仓库中的 .git/
目录下增加相应的钩子;比如 pre-commit
钩子就会在你执行 git commit
的触发。
那么我们可以在 pre-commit
中实现一些比如 lint 检查、单元测试、代码美化等操作。当然,pre-commit
阶段执行的命令当然要保证其速度不要太慢,每次 commit 都等很久也不是什么好的体验。
lint-staged
,一个仅仅过滤出 Git 代码暂存区文件(被 git add 的文件)的工具;这个很实用,因为我们如果对整个项目的代码做一个检查,可能耗时很长,如果是老项目,要对之前的代码做一个代码规范检查并修改的话,这可能就麻烦了呀,可能导致项目改动很大。
所以这个 lint-staged
,对团队项目和开源项目来说,是一个很好的工具,它是对个人要提交的代码的一个规范和约束。
了解 githooks
Git Hooks 就是在 Git 执行特定事件(如commit、push、receive等)时触发运行的脚本,类似于“钩子函数”,没有设置可执行的钩子将被忽略。
在项目的 .git/hooks
目录中,有一些 .sample
结尾的钩子示例脚本,如果想启用对应的钩子,只需手动删除后缀,即可。(删除某一个 hook 的后缀 .sample
即可启用该 hook 脚本,默认是不启用的。)
【但是,我们一般不去改动 .git/hooks
里面的文件,因为我们使用 husky 】
husky
- husky 的安装
npm i husky -D --registry=https://registry.npm.taobao.org
husky 在安装过程中会在 .git/hooks
文件夹中生成一系列的 git hook
脚本。
需要注意的是:你要留意 husky 的安装信息,是否为你安装了
git
钩子。
如果安装正确的话,可以看到 husky 会打印出如下消息:
> node husky install
husky > setting up git hooks
husky > done
但也有可能:
这个就是由于电脑 node
版本的原因,跳过了 Git 钩子安装,相当于是没有安装成功哦~
OK,假设你的 husky
安装是正常的,那么 husky 为你安装的 hooks 将会生效。这样我们在 git commit
的时候会触发 pre-commit
钩子从而触发到 huksy。
我们在 package.json
文件中配置 husky 的钩子需要执行的 命令 或 操作。
"husky": {"hooks": {"pre-commit": "echo \"git commit trigger husky pre-commit hook\" "}
}
这样,在 git commit
的时候就会看到 pre-commit
执行了。
从 1.0.0 开始,husky 的配置可以使用 .huskyrc
、.huskyrc.json
、.huskyrc.js
或 husky.config.js
文件
钩子中执行多个命令
- 根据 npm script 的规则,使用 &&
"husky": {"hooks": {"pre-commit": "echo \"git commit trigger husky pre-commit hook\" && npm run test"}
}
- 如果您更喜欢使用数组,建议的方法是在
.huskyrc.js
中定义它们
const tasks = arr => arr.join(' && ')module.exports = {'hooks': {'pre-commit': tasks(['npm run lint','npm run test'])}
}
hook 拦截
为了阻止提交,pre-commit
脚本必须以非零的退出代码退出。
如果您的提交未被阻止,请检查脚本退出代码。
当然 husky 不止能验证 commit
,也可以进行 push
等其他操作验证,这里就不一一举例了,具体可以参照 npm husky 。
lint-staged
lint-staged
是一个在 git 暂存文件上(也就是被 git add
的文件)运行已配置的 linter(或其他)任务。lint-staged
总是将所有暂存文件的列表传递给任务。
// package.json"lint-staged": {"src/**/*.{js,vue}": ["prettier --write","eslint --cache --fix","git add"]
}
这里 lint-staged
的配置是:在 git 的待提交的文件中,在 src 目录下的所有 .js
.vue
都要执行三条命令。前两条一会儿说,后一条是将处理过的代码重新 add 到 git 中。
结合我们前面介绍的 husky,配合 husky 的 pre-commit 钩子,将会形成一个自动化工具链。
"husky": {"hooks": {"pre-commit": "lint-staged"}
},
"lint-staged": {"src/**/*.{js,vue}": ["prettier --write", "eslint --cache --fix", "git add"]
}
在 commit 之前,将暂存区的内容做一次 代码检查 和 代码美化,然后再添加到暂存区;然后再 commit,完美!!
从 v3.1 开始,您现在可以使用不同的方式进行 lint-staged 配置:
- lint-staged 在你的对象 package.json
- .lintstagedrc JSON或YML格式的文件
- lint-staged.config.js JS格式的文件
- 使用 --config 或 -c 标志传递配置文件
mrm
mrm 是一个自动化工具。推荐
它将根据 package.json
依赖项中的代码质量工具来安装和配置 husky 和 lint-staged,因此请确保在此之前安装并配置所有代码质量工具,如 Prettier 和 ESlint
安装 mrm 并执行 lint-staged 任务:
npm i mrm -D --registry=https://registry.npm.taobao.org
npx mrm lint-staged
此时,将会自动给你安装相关依赖工具,以及相关配置文件。
mrm 文档、mrm api doc
关于 prettier 的问题
prettier 是一个很好的格式化代码的插件,但对已经有一定迭代完成度的代码不推荐使用。使用该插件后,它会将原有的代码也进行格式化,造成很多不可知的问题,我就是前车之鉴,使用 prettier 后,原本已经没有 eslint 问题的代码,又多出了更多的不知道什么原因的报错,只能将代码回退处理。
所以,这也就是我们为什么在 lint-staged
中,执行 prettier
的原因。
-----------------(正文完)------------------
前端学习交流群,想进来面基的,可以加群:
或者手动search群号:685486827,832485817;
写在最后: 约定优于配置 —— 软件开发的简约原则
-------------------------------- (完)--------------------------------------
我的:
个人网站: https://neveryu.github.io/neveryu/
Github: https://github.com/Neveryu
新浪微博: https://weibo.com/Neveryu
更多学习资源请关注我的新浪微博…
使用husky + lint-staged助力团队编码规范相关推荐
- php团队规范,PHP团队 编码规范 代码样式风格规范
一.基本约定 1.源文件 2.缩进 3.行 4.关键字 和 True/False/Null 5.命名 6.代码注释标签 7.业务模块 二.代码样式风格 1.命名空间(Namespace) 和 导入(U ...
- 团队项目开发编码规范之一:概述
团队项目开发"编码规范"之一:概述 发布日期:2011年3月18日星期三作者:EricHu 勤能补拙.笨鸟先飞. "程序员.程序员"顾名思义就是来编程序的人 ...
- 团队项目开发“编码规范”之九:代码分析
团队项目开发"编码规范"之九: 代码分析 发布日期:2011年3月17日星期三作者:EricHu ...
- 团队项目开发编码规范
团队项目开发"编码规范"之一:概述 "程序员.程序员"顾名思义就是来编程序的人员.他们和一般工作人员是一样的,都需要合作,可能为了一个大型项目程序会有十人以上或 ...
- Android开发之代码检测工具Lint和阿里巴巴编码规范扫描(代码检测工具)
我们写代码很多都不规范,如何检测? 实际上AS自带检测工具了叫lint如下图: 还有一款是阿里巴巴的代码检测和AS自带的差不多如下图: 下面我们来说下这两个如何使用呢? 1.我们先说AS系统自带的吧 ...
- 新人融入团队的必备python技巧,python 编码规范,滚雪球学Python第4季12篇
python 是非常灵活的语言,所以不同的人编写出的代码差异化会很大,正因如此,所以需要一些基本规范,大家都去遵守,这样才能在多人协作开发中保持一致性. 本文就为大家梳理一下 python 行业里面达 ...
- 基于 Node.js + Koa 构建完整的 Web API (配置 ESLint 和使用 Airbnb 编码规范)
主题内容:基于 Node.js + Koa 构建完整的 Web API (配置 ESLint 和使用 Airbnb 代码规范) 背景描述:上一篇 基于 Node.js + Koa 构建完整的 Web ...
- Flutter编码规范及工具使用
最近学习听课,讲师讲了下编码规范及相对应对检测工具讲解,及自己的理解在这里分享下. 命名规范 命名规范中包括了文件以及文件夹的命名规范,常量和变量的命名规范,类的命令规范.Dart 中只包含这三种命名 ...
- 《阿里巴巴编码规范(JAVA)》学习认证考后感
image.png <阿里巴巴 Java 开发手册>是阿里巴巴集团技术团队的集体智慧结晶和经验总结,经历了多次大规模一线实战的检验及不断完善,系统化地整理成册,回馈给广大开发者. 本手册的 ...
最新文章
- Fiddler抓取手机(app)https包
- 安装配置Kali虚拟机----linux----kali
- centos7下NFS服务器的搭建与配置
- P5327-[ZJOI2019]语言【线段树合并,LCA】
- http协议报文体_http协议详解之响应报文 3
- jmeter+接口测试练习+接口关联+Json提取
- 【前缀和笔记】前缀和介绍和使用
- Unity学习笔记(一)——C#语法基础
- 计算机控制温度闭环控制实验,温度闭环控制实验
- windows系统上安装.cab文件
- CHROME扩展开发文档之·chrome.runtime
- 哔哩哔哩20校招算法笔试题(2019.8.20)第二道编程题 AC
- 2021-2022年小学期 程序设计开发实践 随堂笔记
- binlog流程 mysql_MySQL binlog分析程序:Open Replicator
- 原型模式,也叫克隆、拷贝模式,深克隆浅克隆
- 点双连通分量边双联通分量详解
- HTML5前端开发入门之网易注册界面实战
- android l是哪个版本,关于Android L的五个有趣事实
- golang java微服务_Golang 微服务教程(四)
- 三星s换机助手电脑复原不了,急!!
热门文章
- 异步加载loading
- 这10 部科幻电影、剧集,我推荐给产品经理们
- S@Kura的PHP进阶之路(三)
- 第一次软工作业(构建之法)
- Python_oldboy_自动化运维之路_面向对象2(十)
- Unity3D插件 Doozy UI 学习(一):打开一个面板
- 数据运营平台-基础架构
- 【UE·蓝图底层篇】一文搞懂NativeClass、GeneratedClass、BlueprintClass、ParentClass
- “熊孩子”乱敲键盘攻破 Linux 桌面;苹果开源代码被发现包含兼容微信的代码;网传蚂蚁启用OKR替代KPI | EA周报...
- 访问控制列表之基本ACL、高级ACL 、 高级ACL之ICMP、高级ACL之telnet