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

颜酱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 批量执行

参考资源

相关推荐
mCell1 小时前
[NOTE] JavaScript 中的稀疏数组、空槽和访问
javascript·面试·v8
柒儿吖1 小时前
Electron for 鸿蒙PC - Native模块Mock与降级策略
javascript·electron·harmonyos
颜酱1 小时前
package.json 配置指南
前端·javascript·node.js
todoitbo1 小时前
基于 DevUI MateChat 搭建前端编程学习智能助手：从痛点到解决方案
前端·学习·ai·状态模式·devui·matechat
oden1 小时前
SEO听不懂？看完这篇你明天就能优化网站了
前端
IT_陈寒2 小时前
React性能优化：这5个Hooks技巧让我减少了40%的重新渲染
前端·人工智能·后端
Sunhen_Qiletian2 小时前
《Python开发之语言基础》第六集：操作文件
前端·数据库·python
珑墨2 小时前
【唯一随机数】如何用JavaScript的Set生成唯一的随机数？
开发语言·前端·javascript·ecmascript
L***d6702 小时前
十七：Spring Boot依赖 （2）-- spring-boot-starter-web 依赖详解
前端·spring boot·后端
热门推荐
01GitHub 镜像站点02【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连03BongoCat - 跨平台键盘猫动画工具04UV安装并设置国内源05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06Linux下V2Ray安装配置指南07Labelme从安装到标注：零基础完整指南08Google Antigravity：无法登录？早期错误、登录修复和用户反馈指南09全球最强模型Grok4，国内已可免费使用！（附教程）10“我的电脑”图标没了怎么办 4种方法找回