name: antfu description: Anthony Fu 的 {个人偏好} 网页开发偏好与最佳实践 metadata: author: Anthony Fu version: “2026.1.28”

Anthony Fu 的偏好设置

此技能涵盖了 Anthony Fu 在网页开发中偏好的工具、配置和最佳实践。此技能具有强烈个人观点。

快速概览

类别	偏好
包管理器	pnpm
语言	TypeScript (严格模式)
模块系统	ESM (`"type": "module"`)
代码检查与格式化	@antfu/eslint-config (不使用 Prettier)
测试	Vitest
Git 钩子	simple-git-hooks + lint-staged
文档	VitePress (位于 `docs/` 目录)

核心技术栈

包管理器 (pnpm)

使用 pnpm 作为包管理器。

对于 monorepo 设置，使用 pnpm workspaces：

# pnpm-workspace.yaml
packages:
  - 'packages/*'

在 pnpm-workspace.yaml 中使用 pnpm 命名目录来管理依赖版本：

目录	用途
`prod`	生产环境依赖
`inlined`	被打包工具内联的依赖
`dev`	开发工具 (代码检查器、打包器、测试、开发服务器)
`frontend`	打包进前端的库

目录名称不限于上述，可根据需要调整。避免使用默认目录。

@antfu/ni

使用 @antfu/ni 来统一包管理器命令。它会根据 lockfile 自动检测包管理器 (pnpm/npm/yarn/bun)。

命令	描述
`ni`	安装依赖
`ni <pkg>`	添加依赖
`ni -D <pkg>`	添加开发依赖
`nr <script>`	运行脚本
`nu`	升级依赖
`nun <pkg>`	卸载依赖
`nci`	纯净安装 (类似 `pnpm i --frozen-lockfile`)
`nlx <pkg>`	执行包 (类似 `npx`)

如果找不到命令，请使用 pnpm i -g @antfu/ni 全局安装。

TypeScript (严格模式)

始终启用严格模式使用 TypeScript。

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

ESM (ECMAScript 模块)

始终在 ESM 模式下工作。在 package.json 中设置 "type": "module"。

代码质量

ESLint (@antfu/eslint-config)

使用 @antfu/eslint-config 进行格式化和代码检查。这消除了对 Prettier 的需求。

创建带有 // @ts-check 注释的 eslint.config.js：

// @ts-check
import antfu from '@antfu/eslint-config'

export default antfu()

将脚本添加到 package.json：

{
  "scripts": {
    "lint": "eslint ."
  }
}

遇到代码检查错误时，尝试使用 nr lint --fix 修复。不要添加 lint:fix 脚本。

Git 钩子 (simple-git-hooks + lint-staged)

使用 simple-git-hooks 和 lint-staged 进行提交前代码检查：

{
  "simple-git-hooks": {
    "pre-commit": "pnpm i --frozen-lockfile --ignore-scripts --offline && npx lint-staged"
  },
  "lint-staged": {
    "*": "eslint --fix"
  },
  "scripts": {
    "prepare": "npx simple-git-hooks"
  }
}

单元测试 (Vitest)

使用 Vitest 进行单元测试。

{
  "scripts": {
    "test": "vitest"
  }
}

约定：

将测试文件放在源文件旁边：foo.ts → foo.test.ts (同一目录)
高级别测试放在每个包的 tests/ 目录中
使用 describe 和 it API (而非 test)
使用 expect API 进行断言
仅对 TypeScript 空值断言使用 assert
对复杂输出断言使用 toMatchSnapshot
对特定语言的输出使用带有显式文件路径和扩展名的 toMatchFileSnapshot (将这些文件排除在代码检查之外)

项目设置

发布 (库项目)

对于库项目，通过由 bumpp 触发的 GitHub Releases 发布：

{
  "scripts": {
    "release": "bumpp -r"
  }
}

文档 (VitePress)

使用 VitePress 编写文档。将文档放在 docs/ 目录下。

docs/
├── .vitepress/
│   └── config.ts
├── index.md
└── guide/
    └── getting-started.md

将脚本添加到 package.json：

{
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs"
  }
}

参考资料

项目设置

主题	描述	参考
@antfu/eslint-config	用于格式化和代码检查的 ESLint 扁平配置	antfu-eslint-config
GitHub Actions	使用 sxzz/workflows 的偏好工作流	github-actions
.gitignore	JS/TS 项目的偏好 .gitignore	gitignore
VS Code 扩展	推荐的开发扩展	vscode-extensions

开发

主题	描述	参考
应用开发	Vue/Vite/Nuxt/UnoCSS Web 应用的偏好	app-development
库开发	打包和发布 TypeScript 库的偏好	library-development
Monorepo	pnpm workspaces、集中式别名、Turborepo	monorepo