背景

当然是项目需求需要呀，要完成需求，顺便学习一下。我的需求是commit的时候防止不规范的代码被提交，要完成需求，就要明白git commit hooks 的运行机制。了解之后才能更好的进行下一步

git hooks

在提交代码的时候我们经常会用到git add ./git commit -m ‘feat: xx’/git push …,不知道有没有小伙伴关注过这些命令的执行主要在.git文件夹的hooks 里面。你现在可以打开你的项目，用命令行把隐藏的文件展示出来，你就能看到了，后缀名是.sample 的就是我们的git 钩子，也可以说是一种生命周期吧，到哪一步需要审核一些什么东西，如果审核没有通过，那么这次的git命令就执行失败了。

要完成需求，就需要在 pre-commit hooks 出面，来防止不规范的代码被提交，那么问题来了，如何做到呢？

husky

在我们前端，pre-commit能够防止不规范代码被commit，.git/hooks 文件不方便，且 shell 也不是前端所熟悉的语言

，所以一般会用husky。

官方说husky可以让 git git hooks 变得更简单，在特定的重要动作触发自定义脚本。比如：当我们在提交或者推送代码的时候，可以使用它验证提交信息、运行测试、格式化代码、触发 CI/CD 等。

// 安装husky
yarn add husky -D
// 启用git hooks
yarn husky install

执行完这步后，我们可以忽略后面的步骤。把生成的 .husky 目录下文件添加在 .gitignore，但是结果其他小伙伴更新代码后，需要再次执行次步骤才能使用，显然不是友好的。所以我们把它加入到 package.json 文件里面去

"script": {
   "postinstall": "husky install" // 这个就是安装依赖后启动git hooks，这是npm的一个钩子函数
}

增加 commit-msg 勾子，使用下面命令增加一个 git 提交信息的勾子，会在 .husky目录下创建一个 commit-msg 文件。

lint-staged

在前面已经配置了 husky。但是我们只想对修改的文件进行检查、修复处理，以保证提交的代码没有语法错误，不会影响其他伙伴在更新代码无法运行的问题，同时也不会去动原来的代码，这时候我们就需要lint-staged 了

// 安装 lint-staged 依赖到我们的项目中
yarn add lint-staged -D
// 在根目录，创建一个 .lintstagedrc 配置文件
{
  "*.{js,vue}": ["npm run lint"]
}

增加 pre-commit 勾子

在 .husky 目录创建一个 pre-commit 文件。

yarn husky add .husky/pre-commit 'yarn lint-staged --allow-empty "$1"'

eslint 自定义规则

前面的代码里面有一句 npm run lint 这句话是什么意思呢？他呀就是运行 eslint 对我们的代码进行检测。到此我们的工作就简单了，只需要写一个 eslint 插件就可以完成需求了。那么自定义 eslint rules 怎么写呢？网上找文章或者看官网吧，这个就不在一一介绍了。

总结

我们把前面的知识点串连起来，然后得到了下面这个 package.json 文件。到此呢，我们的任务也就完成了

  "scripts": {
    "lint": "eslint --ext .ts,.js,.vue src",
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "postinstall": "husky install"
  },
  "hooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix",
      "git add"
    ]
  },

别看这个需求很小，但是它涉及到的知识点很多，对我而言从 npm 简单运行原理到 git hooks 再到 lint-staged 最后是 eslint 。刚开始看到的时候也很茫然不知道怎么做，但是只要思路清晰的话，问题不到，网上都可以慢慢的找到的。最主要的是要了解Git commit hooks运行机制，然后在一步一步的细化问题，最后解决问题。很喜欢现在，做的事情很有意思，都是我未曾尝试过的领域，上手需要时间，但是领导给机会，只要你愿意学，同事细心指导。但愿有一天自己能够成长，能够自己独当一面。从前端到后端，从项目选型到上线，自己都能够独立，并且完成的很完美。只要自己加油，努力，我想要的都会朝我走来，成为自己想要成为的那个人。