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

1. 前言

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

本节代码：github.com/Knight174/t…

欢迎加入技术交流群。

2. lint-staged

2.1 安装

$ bun add -d lint-staged

2.2 配置

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

{
  "**/*.{js,ts}": "eslint",
  "**/*.vue": "bun run lint"
}

对于 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 文件修改如下：

- bun run lint
+ npx lint-staged

2.4 提交与检测暂存区代码

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

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

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

$ npx eslint

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

$ git add .
$ git commit -m 'feat: 添加utils'

可以看到在提交信息后就执行了 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：

$ bun add -d @vitejs/plugin-vue-jsx

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

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
+ import vueJsx from '@vitejs/plugin-vue-jsx';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
+   vueJsx()
  ],
});

3.2 添加 tsconfig 配置项

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

{
  "compilerOptions": {
    // ...
    "jsx": "preserve",
    "jsxImportSource": "vue", // 定义 jsx 使用的库为 vue
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

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

3.3 tsx 组件编写与应用

在 component 目录下新建 MyButton.tsx：

import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'MyButton',
  props: {
    label: {
      type: String as PropType<string>,
      required: true,
    },
    onClick: {
      type: Function as PropType<() => void>,
      required: false,
    },
  },
  setup(props) {
    const a = 1; // ❌ 此处有一个错误：'a' is assigned a value but never used.
    return () => <button onClick={props.onClick}>{props.label}</button>;
  },
});

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

在 App.vue 中引入 MyButton 组件：

<script setup lang="ts">
// 其他 ts 代码
import MyButton from './components/MyButton';
</script>

<template>
  <!-- 其他 html 代码 -->
  <MyButton label="MyButton" />
</template>

<style scoped>
/* css 代码 */
</style>

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

3.4 提交检测

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

{
  "**/*.{js,jsx,ts,tsx}": "eslint",
  "**/*.vue": "bun run lint"
}

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

$ git add .
$ git commit -m 'build: 支持tsx'

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

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

4. 总结

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