用pre-commit+husky铸就前端lint工作流

前言

在前端开发中，代码质量至关重要。良好的代码质量不仅可以提高代码的可读性、可维护性和可扩展性，还可以减少bug的产生，提高开发效率。

为了确保代码质量，我们需要对代码进行检查。传统上，代码检查主要依靠人工进行。然而，随着代码量的不断增加，人工检查变得越来越困难和耗时。

为了解决这个问题，出现了各种代码检查工具，其中比较流行的包括ESLint、Stylelint、Prettier等。这些工具可以帮助开发者在提交代码时自动检查代码，并发现潜在的问题。

pre-commit和husky简介

pre-commit是一个在代码提交前运行自定义命令的工具。它可以帮助开发者在提交代码前对代码进行检查，并根据检查结果决定是否允许提交。

husky是一个与pre-commit配合使用的工具。它可以帮助开发者在pre-commit运行自定义命令之前，自动安装pre-commit所需的依赖项。

使用pre-commit和husky构建前端lint工作流

1. 安装pre-commit和husky

npm install --save-dev pre-commit husky

2. 配置pre-commit

在项目根目录创建.pre-commit-config.yaml文件，并添加以下内容：

repos:
  - repo: https://github.com/pre-commit/pre-commit-hooks
    rev: v4.1.0
    hooks:
      - id: check-yaml
      - id: check-json
      - id: check-toml

3. 配置husky

在项目根目录创建.huskyrc文件，并添加以下内容：

{
  "hooks": {
    "pre-commit": "npx lint-staged"
  }
}

4. 安装lint-staged

npm install --save-dev lint-staged

5. 配置lint-staged

在项目根目录创建.lintstagedrc文件，并添加以下内容：

{
  "*.js": [
    "eslint --fix",
    "stylelint --fix"
  ],
  "*.json": [
    "prettier --write"
  ]
}

6. 运行pre-commit

在项目根目录运行以下命令：

npx pre-commit install

使用说明

在配置好pre-commit和husky之后，当开发者提交代码时，pre-commit会自动运行lint-staged。lint-staged会根据.lintstagedrc文件中的配置，对代码进行检查。如果检查发现问题，lint-staged会阻止提交，并提示开发者修复问题。

结语

通过使用pre-commit和husky，开发者可以轻松地在提交代码前对代码进行检查，从而提高代码质量和开发效率。

附录

1. pre-commit常用的钩子

钩子
check-yaml	检查YAML文件的格式
check-json	检查JSON文件的格式
check-toml	检查TOML文件的格式
check-markdown	检查Markdown文件的格式
check-xml	检查XML文件的格式
check-css	检查CSS文件的格式
check-html	检查HTML文件的格式
check-javascript	检查JavaScript文件的格式
check-python	检查Python文件的格式
check-ruby	检查Ruby文件的格式

2. lint-staged常用的命令

命令
lint	对代码进行检查
lint --fix	对代码进行检查并修复问题
lint --quiet	对代码进行检查但不输出结果
lint --format	以指定格式输出检查结果