Skip to content

前端git commit 代码简单lint校验 以及格式化代码 #296

@cg669

Description

@cg669

团队开发中,由于每个人风格不一,导致代码可能会存在很多不是很严谨的代码。


此时我们可以借助lint工具进行检验,但是仍然会有不足,比如团队成员为了赶时间人为忽略。


为了避免团队有的人没有去手动更改lint所报出的问题,以及在commit的时候对所有代码进行基础的检测,比如大小写等容易发生又不容易被发现的问题。


我们可以利用git的钩子来进行一系列的代码校验等处理。



步骤:

1、首先我们要先配置好eslint 也可以顺带配下 stylelint,既然校验就一步到底,js以及css一起校验。(这个可自行找下两种lint的配置)


2、配置好lint以后,我们可以搭配husky。husky  其实就是一个为 git 客户端增加 hook 的工具。将其安装到所在仓库的过程中它会自动在 .git/ 目录下增加相应的钩子实现在 pre-commit 阶段就执行一系列流程保证每一个 commit 的正确性。

3.然后我们可以在package.json文件里面加上如下代码。当然也支持其他写法啊,不过类似,具体可查看husky官网。



4、上面有一个npm run prettier,其实是自定义的一个命令,既然我们开启的文本校验,为什么不加上格式化呢?这样不管每个人开发时候的代码的样子多么丑,最后提交上来,格式都进行了统一。


此处可google下prettier,其实也是一个小的npm 工具包。


5、虽然上面基本满足了本地提交校验以及格式化的需求,但是还是会有漏洞,当用户commit -n的时候,会跳过git hook,这样会导致代码提交上去了,但是却是没有检查的情况。那么我们应该怎么避免有的队员这种操作呢,此时我们可以加上线上校验,当代码提交的git上的时候,我们利用git ci,可以在代码提交完以后进行模拟lint操作,如果不通过就会报错,不能允许合并。如下图。


6、这样我们就避免了团队成员提交的时候,手动跳过commit lint过程。


7、gitlab-ci的配置留到下节再讲哦~~~


Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions