使用 Lint-staged 校验 Git 暂存区代码是否符合标准

什么是 Lint-staged

在 Git 暂存区执行相关的操作，如对暂存区进行eslint或是prettier，也可以自定义一些脚本

官方写着很有趣的一段话:

Run linters against staged git files and don’t let 💩 slip into your code base!
对暂存区进行代码校验，不要让 💩(便便)溜进你的代码库！

正文

有些人可能会问，我都有eslint和prettier为什么还要用lint-staged?

简而言之: lint-staged只对已修改的或是将要提交到仓库的文件进行校验

因为lint-staged仅对暂存区的文件进行校验，而eslint和prettier则是全局或是指定某个目录下的的所有文件进行校验，在执行效率上肯定是lint-staged更胜一筹

安装

COPY

1	npm install lint-staged -D

编辑package.json文件

如果同时校验.vue则可以这么写"*.{js,vue}": "npx eslint --fix"
其内部使用的匹配规则是micromatch

COPY

{
  "lint-staged": {
    "*.js": "npx eslint --fix"
  }
}

完整package.json文件

COPY

{
  "name": "study-notes",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prepare": "npx husky install"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@commitlint/cli": "^16.2.3",
    "@commitlint/config-conventional": "^16.2.1",
    "eslint": "^8.13.0",
    "husky": "^7.0.4",
    "lint-staged": "^12.3.7"
  },
  "commitlint": {
    "extends": "@commitlint/config-conventional"
  },
  "lint-staged": {
    "*.js": "npx eslint --fix"
  }
}

配置好后，当你执行git add .后就可以使用npx lint-staged命令来校验暂存区的代码文件了

有些人可能会说，这么麻烦，那我还不如直接在git add .之前使用npx eslint --fix .这也不是更好吗？

文章开头一句说了，lint-staged只对暂存区的代码文件进行 lint，执行效率远超npx eslint --fix .命令，该命令会对全局的文件进行校验，不过有没有问题都要校验一遍(如果项目很大，那么这个差距就显现了)

如果一个项目有几百或上千个文件，而我只是修改了一个文件，比如说一个标点符号或者是其它修改，那么npx eslint --fix .可能需要校验很久，而使用npx lint-staged则只需要校验这个文件即可

配合 Husky 使用

关于如何使用 husky 可以参考这篇文章: 使用 Husky(哈士奇)管理 Git 项目

添加 hook 后执行git commit之前就会对暂存区的文件进行校验了

COPY

1	npx husky add .husky/pre-commit 'npx lint-staged'