mcpField
A
antfu

antfu

github.com/hairyf开发26106 次安装4 周前更新
代码仓库

关于 antfu

antfu 是面向 TypeScript 项目的编码规范 skill，涵盖代码组织、运行时兼容、测试和工具选择，也整理了 ESLint、pnpm 等项目约定。

主要功能

  1. 01按职责组织文件
  2. 02编写跨运行时代码
  3. 03TypeScript 类型规范
  4. 04Vitest 测试约定
  5. 05依赖与包管理工具
  6. 06ESLint、Git hooks 与 pnpm 配置

适用场景

  1. 01组织源文件与类型定义
  2. 02使用 Vitest 编写测试
  3. 03通过 @antfu/ni 管理依赖
  4. 04配置 lint 与 Git hooks

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/hairyf/skills --skill antfu

安装后在 Claude Code 中输入/antfu确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
antfu-eslint-config.md
app-development.md
library-development.md
monorepo.md
setting-up.md

详细介绍

编码实践

代码组织
  • 单一职责：每个源文件都应有清晰、聚焦的范围/用途
  • 拆分大文件：当文件变得过大或处理过多关注点时，应将其拆分
  • 类型分离：始终将类型和接口分离到 types.ts 或 types/*.ts
  • 常量提取：将常量移至专门的 constants.ts 文件
运行时环境
  • 优先同构代码：尽可能编写在 Node、浏览器和 worker 中均可运行的运行时无关代码
  • 清晰的运行时指示：当代码特定于某个环境时，在文件顶部添加注释：
// @env node
// @env browser
TypeScript
  • 显式返回类型：尽可能显式声明返回类型
  • 避免复杂的内联类型：将复杂类型提取到专门的 type 或 interface 声明中
注释
  • 避免不必要的注释：代码应自解释
  • 解释"为什么"而非"怎么做"：注释应描述理由或意图，而不是代码做了什么
测试（Vitest）
  • 测试文件：foo.ts → foo.test.ts（同一目录）
  • 使用 describe/it API（而非 test）
  • 对于复杂输出使用 toMatchSnapshot
  • 对于特定语言的快照，使用带显式路径的 toMatchFileSnapshot

工具选择

@antfu/ni 命令
命令描述
ni安装依赖
ni <pkg> / ni -D <pkg>添加依赖 / 开发依赖
nr <script>运行脚本
nu升级依赖
nun <pkg>卸载依赖
nci干净安装（pnpm i --frozen-lockfile）
nlx <pkg>执行包（npx）
检查 npm 包版本

使用 fast-npm-meta 查询包的最新版本——它查询一个小型元数据端点，而不是下载完整的注册表负载（每个包可能达到数兆字节）。

nlx fast-npm-meta version vite              # 7.3.1
nlx fast-npm-meta version "nuxt@^3.5"       # 3.5.22 — range-aware
nlx fast-npm-meta version vite nuxt vue     # multiple at once
nlx fast-npm-meta version vite --json       # JSON for scripting
nlx fast-npm-meta full vite                 # full version list + dist-tags

当你只需要最新版本时，优先使用此方法而不是 npm view <pkg> version，也优于直接从注册表读取 package.json。

TypeScript 配置
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  }
}
ESLint 设置
// eslint.config.mjs
import antfu from '@antfu/eslint-config'

export default antfu()

完成任务时，运行 pnpm run lint --fix 来格式化代码并修复编码风格。

有关详细配置选项：antfu-eslint-config

Git Hooks
{
  "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"
  }
}
pnpm Catalogs

在 pnpm-workspace.yaml 中使用命名 catalog 进行版本管理：

Catalog用途
prod生产依赖
inlined打包器内联依赖
dev开发工具（linter、bundler、测试）
frontend前端库

避免使用默认 catalog。Catalog 名称可根据项目需求调整。

参考资料

主题描述参考
ESLint Config框架支持、格式化器、规则覆盖、VS Code 设置antfu-eslint-config
Project Setup.gitignore、GitHub Actions、VS Code 扩展setting-up
App DevelopmentVue/Nuxt/UnoCSS 约定和模式app-development
Library Developmenttsdown 打包、纯 ESM 发布library-development
Monorepopnpm workspaces、集中式 alias、Turborepomonorepo

评论

支持 Markdown