前端工程化的一个重要目标是确保代码的可维护性和一致性。在这个过程中，代码检查工具（linting）是非常重要的组成部分，它能够自动检查代码中的潜在问题和不符合编码规范的地方。常见的工具包括 ESLint、Stylelint 和 Prettier 等。
lint-staged 在这一环节的作用是确保提交到代码仓库的代码已经通过了 linting 的检查和自动修复，从而在提交之前就减少了低质量或不合规范的代码进入代码库的可能性。
在前端工程化中，Git 的提交流程是项目协作的核心部分。为了保证多人协作时提交的代码质量，开发者通常会在 Git hooks 上加一些自动化工具，比如：
-
预提交检查（pre-commit hook）：确保在每次提交之前，代码都符合项目的编码规范。
-
预推送检查（pre-push hook）：在推送代码到远程仓库之前，确保代码通过测试。
lint-staged 就是优化 Git 提交流程的关键工具之一。它在 pre-commit 阶段运行，只对暂存区的文件进行 linting 操作。配合 Git hooks（例如 Husky），实现自动化代码质量检查流程，使得开发者的工作流更加顺畅和标准化。
安装与使用
我们可以通过 npm 或 pnpm 安装 lint-staged：
npm install lint-staged --save-dev
pnpm add lint-staged --save-dev
安装完成之后，我们需要配置一下 lint-staged，它的配置方式可以有多种，包括通过 package.json 文件、.lintstagedrc 文件，或者在 lint-staged.config.js 中配置。
{
"lint-staged": {
"*.js": ["eslint --fix", "git add"],
"*.css": ["stylelint --fix", "git add"],
"*.md": ["prettier --write", "git add"]
}
}
在上面的这些配置中，代表了如下操作：
-
对所有 .js 文件，使用 ESLint 自动修复并暂存更改。
-
对所有 .css 文件，使用 Stylelint 修复并暂存。
-
对 .md 文件使用 Prettier 格式化并重新暂存。
在 .lintstagedrc 文件中配置：
{
"*.js": ["eslint --fix", "git add"],
"*.css": ["stylelint --fix", "git add"],
"*.md": ["prettier --write", "git add"]
}
在 lint-staged.config.js 文件中配置：
module.exports = {
"*.js": ["eslint --fix", "git add"],
"*.css": ["stylelint --fix", "git add"],
"*.md": ["prettier --write", "git add"],
};
等这些配置完成之后我们就可以执行如下命令来做检查了：
npx lint-staged
它会根据你的配置依次执行：
我们还可以在 lint-staged 中运行任何终端命令。比如，如果你想对 TypeScript 文件运行自定义脚本：
{
"*.ts": ["tsc --noEmit", "git add"]
}
通过在命令之间使用数组，lint-staged 可以并行地运行多个任务：
{
"*.js": ["eslint --fix", "jest --bail --findRelatedTests", "git add"]
}
这里，eslint --fix 和 jest 会同时运行，后续的 git add 在前面的命令成功后才会执行。
实现原理
lint-staged 的核心工作是只对暂存的文件执行任务。它通过 Git 提供的命令 git diff --cached --name-only 来获取所有已经暂存但还没有提交的文件。
-
git diff --cached：获取暂存区与上一次提交之间的差异，即已经通过 git add 暂存的文件。
-
--name-only：只列出文件的名称，而不显示具体的差异内容。
这一步确保 lint-staged 只处理那些正在准备提交的文件，而不会浪费资源检查未改动的文件。
根据 lint-staged 的配置，它会根据文件的扩展名来匹配需要执行的任务。通常配置会按照文件类型定义不同的检查任务，比如 .js 文件使用 ESLint、.css 文件使用 Stylelint、.md 文件使用 Prettier 等。
一旦确定了哪些文件需要检查，lint-staged 会依次对这些文件运行相应的任务。这些任务都是在 Git 暂存区的文件上执行的。
每个任务是一个标准的命令行工具，比如 eslint --fix 或 prettier --write。这些工具会对暂存区中的文件进行检查和修复。
值得注意的是如果某个任务是自动修复任务（比如 eslint --fix 或 prettier --write），这些工具会在执行后直接修改文件内容。
如果 lint-staged 在检查过程中发现问题（例如 ESLint 报错、测试未通过），它会中断提交流程，返回错误信息。开发者必须解决这些问题后才能重新提交。
lint-staged 支持并行执行任务。如果你配置了多个任务，lint-staged 会在后台并行执行它们。比如对不同类型的文件运行多个检查任务时，可以同时进行，从而加速整个检查过程。
总结
lint-staged 是一个非常强大的工具，可以在开发过程中自动化代码检查和修复，确保代码库的质量。同时，它只对暂存的文件运行任务，能够有效减少执行时间，提升开发效率。通过与 Husky 配合使用，lint-staged 可以很好地集成到 Git 的提交流程中，实现自动化的代码规范检查。
最后分享两个我的两个开源项目,它们分别是:
这两个项目都会一直维护的，如果你想参与或者交流学习，可以加我微信 yunmz777 如果你也喜欢,欢迎 star 🚗🚗🚗
