团队协作（三）—— husky + lint-staged 增量检测（支持 tsx）

type

status

date

slug

summary

1. 前言

上篇说到使用 husky + commitlint 集成使得在提交代码时对代码进行质量检测以及规范化提交信息，然而没有必要对所有的代码都重复全量地检查，只要对存在暂存区的代码进行 lint 检查就好了，这种增量检测的实现由 lint-staged 完成，这也是本篇将要介绍的内容。

本节代码：https://github.com/Knight174/team-work/tree/chapter3

2. lint-staged

2.1 安装

2.2 配置

在根目录下新建 .lintstagedrc.json 文件：

对于 js、ts 文件会执行 eslint 命令，对于 vue 文件会执行 bun run lint 命令。

⚠️ 注意：vue 文件还是要用 lint 命令（vue-tsc -b）的，eslint 不会检查其中的 ts script 类型问题！

2.3 修改 pre-commit 钩子

在上一篇中我们设置过 pre-commit hook（执行 bun run lint），现在需要执行 lint-staged 命令。.husky/pre-commit 文件修改如下：

2.4 提交与检测暂存区代码

现在将这组配置用的代码移至暂存区，然后提交这批代码，看看是否只对暂存区的代码生效：

可以看到提交信息为：build: 配置 lint-staged，此时非暂存区存在其他存在问题的修改项，但这一次的提交是成功的！

现在运行以下命令先看下哪些文件存在问题：

接下来把有问题的这一组代码移至暂存区，试着提交一下：

可以看到在提交信息后就执行了 pre-commit 钩子中的 npx lint-staged。按照配置文件 lintstagedrc.json 的内容依次对 js、ts、vue 文件进行了检查，能够正常发现错误，而且只有存在错误，代码就无法提交上去。（虽然但是不建议使用强制提交）

之后，修改好这些错误就能正常提交了。

⚠️ 注意：每次改完的代码记得及时移至暂存区，因为 lint-staged 只会对暂存区的内容进行检测。

3. 支持 tsx

vue文件可以被检测了，js 和 ts 也可以，现在来进一步支持 Vue3 支持的 tsx 写法吧。

3.1 @vitejs/plugin-vue-jsx

想要在 Vite 中使用 tsx 语法，就要安装 @vitejs/plugin-vue-jsx：

然后在 vite.config.ts 中引入相关依赖并配置：

3.2 添加 tsconfig 配置项

最后确保在 tsconfig.app.json 中有以下几个配置参数：

现在这个项目就具备了 tsx 写组件的能力了。

3.3 tsx 组件编写与应用

在 component 目录下新建 MyButton.tsx：

此处留给 eslint 一个错误：'a' is assigned a value but never used.

在 App.vue 中引入 MyButton 组件：

执行 bun run dev，打开页面能够正常显示：

3.4 提交检测

扩展 .lintstagedrc.json 中的检测范围，使之支持 jsx、tsx：

将这批代码移至暂存区，然后提交看看：

可以看到错误被正常检测出来。

同样在修改完错误后，再次提交就能通过了！

4. 总结

这样，使用 lint-staged 保证了只对暂存区的代码进行检查，这将会让大型项目狠狠受益。需要提到的是，ESLint 由于升级到 v9，它的配置集成在 eslint.config.js，如果想要添加新的 rules 就需要在那里写入。尽管它的命令行表现与以往不同，但是如果可以把团队协作 2，3 两篇跟下来，想必对新版的配置和使用也不在话下。