pre-commit+husky打造前端lint工作流-[七日打卡3]

1,687 阅读2分钟

什么是 Lint?

Lint 是对代码做静态分析,并试图找出潜在问题的工具,实战中我们也用 Lint 来指使用工具的过程。

为什么要 Lint?

使用Lint可以带来的好处:

  • 减少潜在的bug
  • 提升开发效率
  • 提升代码的可读性

要怎么做 lint?

市面上lint工具有很多,经过多次对比使用,最终我们团队决定选用 husky + lint-staged 这套完美搭配。

stagedgit里面的一个概念,

指的是代码的提交区:使用git add . && git commit -m ${msg}提交后,

接下来所有修改过的代码都会进入代码提交区

staged相对的一个概念是working tree clean

在本地提交代码前进行校验,如果不通过lint则需要重新commit,

lint-staged工具会帮助我们只校验改动的代码,

对于那些有历史包袱的大项目,可以忽略未修改的历史文件。

如何配置?

安装

# 安装 husky
$ npm install husky -D

# 安装 lint-staged
$ npm install lint-staged -D

配置

// package.json
"scripts": {
    "prettier": "prettier --write ./src/**/*.js",
    "lint-staged": "lint-staged",
},
"husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.js": [
      "npm run prettier"
    ]
},

如上所示,首先在 package.json中配置了一个husky对象,

增加了pre-commithook,指定的动作是运行npm run lint-staged命令。

通过npm scripts中的lint-staged命令则可以触发另一个配置在package.json中对象lint-staged里的动作,

比如这里是进行代码美化。

增加 commit 内容 lint

如果有一个项目,从始至终都是你一个人在维护,那么你想怎么写都可以,没有人会干预你。

但是如果是一个多人维护的项目,大家都有各自的想法,

连「每行代码结尾是不是要加分号」这种的很难统一的行为,

更何况是提交代码呢?

所以我们需要一个可以校验提交信息格式的工具:commitlint

安装

# 安装依赖
npm i husky lint-staged prettier @commitlint/cli @commitlint/config-conventional -D

配置

package.json中的相关配置:

// package.json
"husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.js": [
      "npm run prettier"
    ]
},

其中"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"这行表示当执行git commit时会使用 commitlint进行格式校验,

格式来自于配置文件:commitlint.config.js:

// commitlint.config.js
module.exports = {
  extends: ["@commitlint/config-conventional"],
};

参考官方文档:

执行成功如图所示