开发工具链-构建、测试、代码质量校验常用包的比较

颜酱2025-11-28 13:23

开发工具链包括构建、测试、代码质量校验等核心工具，是 npm 包开发的基础设施。

📑 目录

快速参考

工具选型速查表

工具类型 推荐工具 适用场景 备选方案
构建工具 tsup TypeScript 库、双模式（ESM+CJS）、快速上手 Rollup（复杂场景）、esbuild（极速构建）
测试工具 Vitest TypeScript、ESM、快速测试 Jest（成熟生态）、Mocha（灵活配置）
代码质量 ESLint + Prettier + Stylelint 代码规范、格式化 Biome（一体化方案）
Git Hooks simple-git-hooks 轻量级、零配置 husky（功能丰富）

快速开始

bash 复制代码 
# 1. 安装核心工具
pnpm add tsup typescript vitest -D
pnpm add eslint prettier -D

# 2. 初始化配置
# - tsup.config.ts
# - vitest.config.ts
# - .eslintrc.js
# - .prettierrc.js

# 3. 配置 package.json scripts

构建工具

tsup（推荐）

对于需要 TypeScript + 双模式兼容（ESM + CJS）的 npm 包开发，tsup 是当前最推荐的工具之一------它完美解决了「TS 转译 + 双模式打包 + 类型声明生成 + 低配置成本」的核心需求。

优势：

  • ✅ 零配置，开箱即用
  • ✅ 基于 esbuild，构建速度极快
  • ✅ 自动生成类型声明（.d.ts）
  • ✅ 支持 Shebang（CLI 工具必需）
  • ✅ 内置 Tree-shaking

安装

bash 复制代码 
pnpm add tsup typescript -D

配置

tsup.config.ts：

js 复制代码 
import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/index.ts'], // 入口文件
  format: ['esm', 'cjs'], // 同时输出 ESM（.js）和 CJS（.cjs）
  shebang: true, // CLI 必须添加 Shebang，会自动添加 #!/usr/bin/env node
  dts: true, // 自动生成 TypeScript 类型声明（.d.ts）
  sourcemap: true, // 生成 sourcemap
  clean: true, // 打包前清空 dist 目录
  minify: true, // 生产环境压缩代码（可选）
  target: 'es2020', // 转译目标（兼容 Node 14+）
  splitting: false, // 关闭代码分割（库打包不需要）
});

package.json scripts：

json 复制代码 
{
  "scripts": {
    "build": "tsup",
    "dev": "tsup --watch",
    "prepublishOnly": "npm run build"
  }
}

打包产物

bash 复制代码 
dist/
├── index.js        # ESM 产物
├── index.cjs       # CJS 产物
├── index.d.ts      # TS 类型声明
├── index.js.map    # ESM sourcemap
└── index.cjs.map   # CJS sourcemap

Rollup

Rollup 是成熟的模块打包器，适合复杂场景和精细控制。

优势：

  • ✅ 强大的插件生态
  • ✅ 精确的 Tree-shaking
  • ✅ 支持多入口、代码分割
  • ✅ 适合大型库和复杂构建需求

劣势：

  • ❌ 配置相对复杂
  • ❌ 需要手动配置 TypeScript 类型生成

安装

bash 复制代码 
pnpm add rollup @rollup/plugin-typescript @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-dts -D

配置

rollup.config.js：

js 复制代码 
import typescript from '@rollup/plugin-typescript';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import dts from 'rollup-plugin-dts';

export default [
  // 构建 JS 文件
  {
    input: 'src/index.ts',
    output: [
      {
        file: 'dist/index.cjs',
        format: 'cjs',
        sourcemap: true,
      },
      {
        file: 'dist/index.js',
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [typescript(), resolve(), commonjs()],
    external: ['react', 'react-dom'], // 外部依赖
  },
  // 生成类型声明
  {
    input: 'src/index.ts',
    output: {
      file: 'dist/index.d.ts',
      format: 'es',
    },
    plugins: [dts()],
  },
];

esbuild

esbuild 是极速的 JavaScript/TypeScript 打包器，适合对构建速度要求极高的场景。

优势：

  • ✅ 构建速度极快（10-100x 快于其他工具）
  • ✅ 零配置，API 简单
  • ✅ 内置 TypeScript 支持

劣势：

  • ❌ 不支持类型声明生成（需配合 tsc）
  • ❌ 插件生态相对较少
  • ❌ 配置选项较少

安装

bash 复制代码 
pnpm add esbuild typescript -D

配置

esbuild.config.js：

js 复制代码 
import { build } from 'esbuild';

build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outdir: 'dist',
  format: 'esm',
  platform: 'node',
  target: 'es2020',
  sourcemap: true,
  minify: true,
}).catch(() => process.exit(1));

package.json scripts：

json 复制代码 
{
  "scripts": {
    "build": "node esbuild.config.js && tsc --emitDeclarationOnly",
    "build:cjs": "esbuild src/index.ts --bundle --format=cjs --outfile=dist/index.cjs",
    "build:esm": "esbuild src/index.ts --bundle --format=esm --outfile=dist/index.js"
  }
}

unbuild

unbuild 是 Nuxt 团队开发的构建工具，基于 Rollup，配置更简单。

优势：

  • ✅ 配置简单，类似 tsup
  • ✅ 基于 Rollup，功能强大
  • ✅ 自动生成类型声明
  • ✅ 支持 monorepo

安装

bash 复制代码 
pnpm add unbuild -D

配置

build.config.ts：

ts 复制代码 
import { defineBuildConfig } from 'unbuild';

export default defineBuildConfig({
  entries: ['src/index'],
  declaration: true,
  clean: true,
  rollup: {
    emitCJS: true,
  },
});

构建工具对比

工具 速度 配置复杂度 类型声明 插件生态 适用场景
tsup ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ✅ 自动 ⭐⭐⭐ TypeScript 库、快速上手
Rollup ⭐⭐⭐ ⭐⭐ ❌ 需插件 ⭐⭐⭐⭐⭐ 大型库、复杂构建
esbuild ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ❌ 需 tsc ⭐⭐ 极速构建、简单项目
unbuild ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ✅ 自动 ⭐⭐⭐⭐ Nuxt 生态、monorepo
webpack ⭐⭐ ⭐ ❌ 需配置 ⭐⭐⭐⭐⭐ 应用项目（不推荐库）

选型建议：

  • 快速开发 TypeScript 库：tsup
  • 复杂构建需求：Rollup
  • 极致构建速度：esbuild
  • Nuxt 项目：unbuild

测试工具

Vitest（推荐）

Vitest 是基于 esbuild 的超高速测试工具，天生支持 TS/ESM/CJS，与 tsup 生态契合度极高，配置简单且运行速度比 Jest 快 5-10 倍。

优势：

  • ✅ 基于 esbuild，速度极快
  • ✅ 零配置，开箱即用
  • ✅ 原生支持 TypeScript、ESM
  • ✅ 兼容 Jest API，迁移成本低
  • ✅ 内置 UI 界面

安装

bash 复制代码 
pnpm add vitest @vitest/ui @vitest/coverage-v8 -D

配置

零配置使用（package.json）：

json 复制代码 
{
  "scripts": {
    "test": "vitest run",
    "test:watch": "vitest",
    "test:ui": "vitest ui",
    "test:coverage": "vitest run --coverage"
  }
}

使用配置文件（vitest.config.ts）：

js 复制代码 
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true,
    environment: 'node',
    include: ['test/**/*.test.{ts,js}'],
    exclude: ['node_modules', 'dist'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html', 'lcov'],
      reportsDirectory: 'coverage',
      thresholds: {
        lines: 80,
        functions: 80,
        branches: 80,
        statements: 80,
      },
    },
  },
});

编写测试用例

ts 复制代码 
import { describe, test, expect } from 'vitest';
import { add, formatDate } from '../src/index.ts';

describe('工具函数', () => {
  test('add(1, 2) 应该返回 3', () => {
    expect(add(1, 2)).toBe(3);
    expect(add(-1, 5)).toBe(4);
    expect(add(0, 0)).toBe(0);
  });

  test('formatDate 应该将日期格式化为 YYYY-MM-DD', () => {
    const date = new Date('2025-11-24');
    expect(formatDate(date)).toBe('2025-11-24');
  });

  test('异步函数应该返回成功结果', async () => {
    const fetchData = async () => Promise.resolve({ name: 'test' });
    const result = await fetchData();
    expect(result.name).toBe('test');
  });
});

Jest

Jest 是 Facebook 开发的成熟测试框架，生态丰富，适合大型项目。

优势：

  • ✅ 功能全面（Mock、Snapshot、Coverage）
  • ✅ 生态丰富，插件多
  • ✅ 文档完善，社区活跃
  • ✅ 适合 React 项目

劣势：

  • ❌ 配置相对复杂
  • ❌ 速度较慢（需配置 esbuild 加速）
  • ❌ TypeScript 支持需额外配置

安装

bash 复制代码 
pnpm add jest @types/jest ts-jest -D

配置

jest.config.js：

js 复制代码 
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  roots: ['<rootDir>/test'],
  testMatch: ['**/*.test.{ts,js}'],
  collectCoverageFrom: ['src/**/*.{ts,js}', '!src/**/*.d.ts'],
  coverageDirectory: 'coverage',
  coverageReporters: ['text', 'html', 'lcov'],
};

Mocha

Mocha 是灵活的测试框架，需要配合断言库使用。

优势：

  • ✅ 灵活，可自由选择断言库
  • ✅ 支持多种报告格式
  • ✅ 适合 Node.js 项目

劣势：

  • ❌ 需要额外配置断言库、覆盖率工具
  • ❌ 配置相对复杂

安装

bash 复制代码 
pnpm add mocha @types/mocha chai @types/chai nyc -D

配置

mocha.opts：

bash 复制代码 
--require ts-node/register
--timeout 5000
test/**/*.test.ts

测试用例示例：

ts 复制代码 
import { expect } from 'chai';
import { add } from '../src/index';

describe('add 函数', () => {
  it('应该正确相加两个数字', () => {
    expect(add(1, 2)).to.equal(3);
  });
});

Ava

Ava 是轻量级、并行的测试框架，适合快速测试。

优势：

  • ✅ 轻量级，速度快
  • ✅ 并行执行测试
  • ✅ 内置断言

劣势：

  • ❌ 生态相对较小
  • ❌ 文档较少

安装

bash 复制代码 
pnpm add ava -D

配置

ava.config.js：

js 复制代码 
export default {
  files: ['test/**/*.test.{ts,js}'],
  extensions: ['ts'],
  require: ['ts-node/register'],
};

测试工具对比

工具 速度 配置复杂度 TypeScript 生态 适用场景
Vitest ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ✅ 原生 ⭐⭐⭐⭐ TypeScript 项目、快速测试
Jest ⭐⭐⭐ ⭐⭐⭐ ⚠️ 需配置 ⭐⭐⭐⭐⭐ React 项目、大型项目
Mocha ⭐⭐⭐ ⭐⭐ ⚠️ 需配置 ⭐⭐⭐⭐ Node.js 项目、灵活配置
Ava ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⚠️ 需配置 ⭐⭐⭐ 轻量级项目、快速测试

选型建议：

  • TypeScript 项目：Vitest（推荐）
  • React 项目：Jest
  • Node.js 项目：Mocha
  • 轻量级项目：Ava

代码质量工具

ESLint + Prettier

ESLint 和 Prettier 是前端代码质量与格式规范的黄金组合：

  • ESLint：负责代码质量校验（语法错误、逻辑问题）
  • Prettier：负责代码格式美化（缩进、引号、分号）

安装依赖

bash 复制代码 
pnpm add eslint prettier -D
pnpm add @typescript-eslint/eslint-plugin @typescript-eslint/parser -D
pnpm add eslint-config-prettier eslint-plugin-prettier -D

ESLint 配置（.eslintrc.js）

js 复制代码 
module.exports = {
  env: {
    browser: false,
    node: true,
    es2024: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'prettier'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'plugin:prettier/recommended',
  ],
  rules: {
    '@typescript-eslint/no-explicit-any': 'warn',
    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
    'no-console': process.env.NODE_ENV === 'production' ? 2 : 1,
  },
  ignorePatterns: ['dist/', 'node_modules/', '*.config.*'],
};

Prettier 配置（.prettierrc.js）

js 复制代码 
module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  quoteProps: 'as-needed',
  jsxSingleQuote: true,
  trailingComma: 'es5',
  bracketSpacing: true,
  bracketSameLine: false,
  arrowParens: 'avoid',
  proseWrap: 'preserve',
  htmlWhitespaceSensitivity: 'css',
  endOfLine: 'lf',
};

忽略文件配置

.eslintignore：

arduino 复制代码 
dist/
node_modules/
*.config.*
coverage/

.prettierignore：

csharp 复制代码 
dist/
node_modules/
coverage/
*.min.js
package-lock.json
pnpm-lock.yaml

脚本命令

json 复制代码 
{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
    "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
    "prettier:check": "prettier --check .",
    "prettier:fix": "prettier --write .",
    "format": "pnpm run prettier:fix && pnpm run lint:fix"
  }
}

Stylelint（样式文件校验）

stylelint 是样式文件的代码质量与格式校验工具，相当于样式领域的「ESLint」。

安装依赖

bash 复制代码 
pnpm add stylelint stylelint-config-standard stylelint-config-standard-scss -D
pnpm add stylelint-scss postcss-scss -D
pnpm add stylelint-config-prettier stylelint-prettier -D
pnpm add stylelint-order stylelint-config-recess-order -D

配置（.stylelintrc.js）

js 复制代码 
module.exports = {
  files: ['**/*.{css,scss,sass,less,vue}'],
  ignoreFiles: ['dist/', 'node_modules/'],
  customSyntax: 'postcss-scss',
  extends: [
    'stylelint-config-standard',
    'stylelint-config-standard-scss',
    'stylelint-config-recess-order',
    'stylelint-prettier/recommended',
  ],
  rules: {
    'declaration-no-important': 0,
    'selector-max-compound-selectors': [2, 3],
    'property-no-deprecated': 1,
  },
};

脚本命令

json 复制代码 
{
  "scripts": {
    "lint:style": "stylelint . --ext .css,.scss,.less,.vue",
    "lint:style:fix": "stylelint . --ext .css,.scss,.less,.vue --fix"
  }
}

Git Hooks

simple-git-hooks

simple-git-hooks 是一款「零配置、轻量型」的 Git Hooks 工具，用于验证提交信息格式和运行测试。

安装依赖

bash 复制代码 
pnpm add simple-git-hooks @commitlint/cli @commitlint/config-conventional -D

配置提交信息校验（commitlint.config.js）

js 复制代码 
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'chore'],
    ],
    'subject-max-length': [1, 'always', 50],
  },
};

配置 Git Hooks（package.json）

json 复制代码 
{
  "scripts": {
    "prepare": "simple-git-hooks"
  },
  "simple-git-hooks": {
    "commit-msg": "npx --no -- commitlint --edit $1",
    "pre-commit": "pnpm run lint && pnpm run test"
  }
}

初始化钩子

bash 复制代码 
npx simple-git-hooks

提交信息格式

格式：type(scope): subject

示例：

  • feat(user): 新增用户登录功能
  • fix: 修复登录失败问题
  • docs: 更新 README 中的安装步骤

husky

husky 是功能丰富的 Git Hooks 工具，适合需要更多控制和功能的项目。

优势：

  • ✅ 功能丰富，支持所有 Git Hooks
  • ✅ 配置灵活，可编写复杂脚本
  • ✅ 生态完善，插件多
  • ✅ 支持跨平台（Windows/Mac/Linux）
  • ✅ 文档完善，社区活跃

劣势：

  • ❌ 配置相对复杂
  • ❌ 需要手动创建 .husky 目录
  • ❌ 体积较大（相比 simple-git-hooks）

安装依赖

bash 复制代码 
pnpm add husky -D
pnpm add @commitlint/cli @commitlint/config-conventional -D

初始化

bash 复制代码 
# 初始化 husky
npx husky init

# 或手动创建 .husky 目录
mkdir .husky

配置 Git Hooks（package.json）

json 复制代码 
{
  "scripts": {
    "prepare": "husky install"
  }
}

创建 Hooks

pre-commit hook（.husky/pre-commit）：

bash 复制代码 
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm run lint
pnpm run test

commit-msg hook（.husky/commit-msg）：

bash 复制代码 
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no -- commitlint --edit $1

配置提交信息校验（commitlint.config.js）

js 复制代码 
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'build', 'ci', 'chore'],
    ],
    'subject-max-length': [1, 'always', 50],
  },
};

高级用法

husky 支持更复杂的脚本，例如：

pre-push hook（.husky/pre-push）：

bash 复制代码 
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# 运行完整测试套件
pnpm run test:ci

# 检查代码覆盖率
pnpm run test:coverage

Git Hooks 工具对比

工具 配置复杂度 功能丰富度 体积 生态 适用场景
simple-git-hooks ⭐⭐⭐⭐⭐ ⭐⭐⭐ 轻量级 ⭐⭐⭐ 简单项目、快速上手
husky ⭐⭐⭐ ⭐⭐⭐⭐⭐ 较大 ⭐⭐⭐⭐⭐ 复杂项目、需要精细控制

选型建议：

  • 简单项目、快速上手：simple-git-hooks（推荐）
  • 复杂项目、需要精细控制：husky
  • 需要跨平台支持：husky
  • 需要编写复杂脚本：husky

VS Code 集成

安装插件

  • ESLint（Microsoft）
  • Prettier - Code formatter
  • Vitest（可选）

配置（.vscode/settings.json）

VS Code 是前端开发必备的编辑器，ESLint、Prettier 等工具的集成可以大大提高开发效率。 安装插件：

  • ESLint（Microsoft）
  • Prettier - Code formatter
  • Vitest（可选）

配置（.vscode/settings.json），Command+Shift+P 打开设置，输入 settings.json 打开设置文件，添加以下配置，能实现保存时自动格式化、粘贴时自动格式化、禁用输入时实时格式化、设置默认格式化工具为 Prettier、编辑器基础配置（与 Prettier 保持一致，避免冲突）、按文件类型指定格式化工具（兜底）、ESLint 关键配置（核心）、Prettier 专属配置、框架专属兼容配置、其他辅助配置：

json 复制代码 
{
  // ===================== 全局格式化核心配置 =====================
  // 1. 保存时自动格式化（触发 Prettier + ESLint 修复）
  "editor.formatOnSave": true,
  // 2. 粘贴内容时自动格式化
  "editor.formatOnPaste": true,
  // 3. 禁用输入时实时格式化（避免频繁干扰）
  "editor.formatOnType": false,
  // 4. 设置默认格式化工具为 Prettier（统一所有文件格式）
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // "editor.defaultFormatter": "biomejs.biome", // 以后考虑
  "biome.formatOnSave": true,
  "biome.lintOnSave": true,
  "biome.organizeImportsOnSave": true, // 保存时自动整理导入语句
  // 5. 编辑器基础配置（与 Prettier 保持一致，避免冲突）
  "editor.tabSize": 2,
  "editor.useTabs": false,
  "files.eol": "\n", // 行尾换行符（LF，跨平台兼容）

  // ===================== 按文件类型指定格式化工具（兜底） =====================
  // 确保每种文件类型都用 Prettier 格式化，避免冲突
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[svelte]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[scss]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },

  // ===================== ESLint 关键配置（核心） =====================
  // 1. 保存时自动修复 ESLint 可修复问题（含框架规则）
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll.stylelint": "explicit",
    "source.organizeImports": "explicit"
  },
  // 2. 启用 ESLint 校验的所有文件类型
  "eslint.validate": [
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact",
    "vue",
    "svelte",
    "html",
    "markdown"
  ],
  // 3. 强制使用项目根目录的 ESLint 配置（避免全局配置干扰）
  "eslint.useFlatConfig": false, // 兼容传统 .eslintrc.js 配置
  "eslint.nodePath": "./node_modules", // 指向项目依赖（monorepo 场景必备）
  "eslint.workingDirectories": [{ "mode": "auto" }], // 自动识别项目目录

  // ===================== Prettier 专属配置 =====================
  // 1. 强制使用项目根目录的 .prettierrc.js（避免插件默认配置冲突）
  "prettier.requireConfig": true,
  // 2. 忽略 .prettierignore 中的文件
  "prettier.ignorePath": ".prettierignore",
  // 3. 禁用 Prettier 对特定文件的格式化（按需调整）
  "prettier.disableLanguages": [],

  // ===================== 框架专属兼容配置 =====================
  // 1. Vue 配置（禁用 Volar 内置格式化，交给 Prettier）
  "vue.format.enable": false,
  "volar.format.enable": false,
  // 2. Svelte 配置（禁用内置格式化，交给 Prettier）
  "svelte.format.enable": false,
  // 3. 禁用 VS Code 内置格式化（避免与 Prettier/ESLint 冲突）
  "javascript.format.enable": false,
  "typescript.format.enable": false,
  "html.format.enable": false,
  "css.format.enable": false,
  "scss.format.enable": false,

  // ===================== 其他辅助配置 =====================
  // 显示 ESLint 错误提示（增强开发体验）
  "eslint.showDebugLogs": false,
  "eslint.showStatusBar": true,
  // 保存时自动修复所有可修复问题（包括框架专属规则）
  "editor.codeActionsOnSaveTimeout": 3000,
  "cursor.cpp.disabledLanguages": ["plaintext"] // 延长超时时间（避免大文件修复失败）
}

最佳实践

  1. 工具组合：tsup（构建）+ Vitest（测试）+ ESLint + Prettier（代码质量）+ simple-git-hooks/husky（提交规范）
  2. 配置逻辑：Prettier 管格式，ESLint 管质量，通过 eslint-config-prettier 避免冲突
  3. 开发流程：VS Code 实时格式化 + 保存自动修复 + Git Hooks 强制校验
  4. monorepo 适配：根目录统一配置，子包继承，通过 Turbo 并行执行任务

常见问题

构建工具相关问题

Q: tsup 和 Rollup 如何选择？

A:

  • tsup：适合快速开发 TypeScript 库，零配置，开箱即用
  • Rollup：适合复杂构建需求，需要精细控制打包过程

Q: 如何生成类型声明文件？

A:

  • tsup ：设置 dts: true 自动生成
  • Rollup ：使用 rollup-plugin-dts 插件
  • esbuild ：需配合 tsc --emitDeclarationOnly

Q: 构建速度慢怎么办？

A:

  • 使用 esbuild 或 tsup（基于 esbuild）
  • 关闭不必要的 sourcemap
  • 使用缓存（如 Turborepo）

测试工具相关问题

Q: Vitest 和 Jest 如何选择？

A:

  • Vitest：TypeScript 项目首选，速度快，配置简单
  • Jest：React 项目或需要丰富生态的场景

Q: 测试覆盖率如何配置？

A:

  • Vitest ：安装 @vitest/coverage-v8，配置 coverage 选项
  • Jest ：内置 coverage，配置 collectCoverageFrom

Q: 如何测试异步函数？

A:

ts 复制代码 
test('异步函数测试', async () => {
  const result = await asyncFunction();
  expect(result).toBe(expected);
});

代码质量工具相关问题

Q: ESLint 和 Prettier 冲突怎么办？

A: 安装 eslint-config-prettier，在 ESLint extends 中最后添加 'plugin:prettier/recommended'

Q: 如何忽略某些文件的检查？

A: 在 .eslintignore 和 .prettierignore 中添加文件路径

Q: 如何自定义 ESLint 规则？

A: 在 .eslintrc.js 的 rules 字段中添加自定义规则

Git Hooks 相关问题

Q: simple-git-hooks 和 husky 如何选择？

A:

  • simple-git-hooks：适合简单项目，零配置，轻量级
  • husky：适合复杂项目，需要精细控制和跨平台支持

Q: Git Hooks 不生效怎么办？

A:

  • 检查 prepare 脚本是否已执行：npm run prepare
  • 检查 .git/hooks 目录是否存在钩子文件
  • 确保钩子文件有执行权限：chmod +x .husky/pre-commit

Q: 如何跳过 Git Hooks？

A:

  • 跳过 pre-commit：git commit --no-verify
  • 跳过 commit-msg：git commit --no-verify -m "message"
  • ⚠️ 不推荐在生产环境跳过，会破坏代码质量保障

Q: 如何在 monorepo 中使用 Git Hooks？

A:

  • simple-git-hooks：在根目录配置，自动应用到所有子包
  • husky ：在根目录配置，使用 pnpm -r 或 turbo 批量执行

参考资源

相关推荐
ywf12151 小时前
前端的dist包放到后端springboot项目下一起打包
前端·spring boot·后端
恋猫de小郭2 小时前
2026，Android Compose 终于支持 Hot Reload 了，但是收费
android·前端·flutter
hpoenixf8 小时前
2026 年前端面试问什么
前端·面试
还是大剑师兰特8 小时前
Vue3 中的 defineExpose 完全指南
前端·javascript·vue.js
泯泷8 小时前
阶段一：从 0 看懂 JSVMP 架构，先在脑子里搭出一台最小 JSVM
前端·javascript·架构
mengchanmian9 小时前
前端node常用配置
前端
华洛9 小时前
利好打工人，openclaw不是企业提效工具，而是个人助理
前端·javascript·产品经理
xkxnq9 小时前
第六阶段：Vue生态高级整合与优化(第93天)Element Plus进阶：自定义主题（变量覆盖）+ 全局配置与组件按需加载优化
前端·javascript·vue.js
A黄俊辉A10 小时前
vue css中 :global的使用
前端·javascript·vue.js
小码哥_常10 小时前
被EdgeToEdge适配折磨疯了，谁懂！
前端
热门推荐
01GitHub 镜像站点02围棋-html版本03Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南04小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）05班级宠物园部署指南06OpenClaw 使用和管理 MCP 完全指南07OpenClaw Control UI安全上下文访问配置08UV安装并设置国内源09“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）102026年03月18日热门Model/github项目