المهارات antfu
📦

antfu

آمن

應用 Anthony Fu 的 Web 開發最佳實踐

專案通常在團隊成員之間缺乏一致的工具和配置。此技能提供了來自 Anthony Fu 的固執己見的最佳實踐，包括 TypeScript、ESLint、Vitest 和 CI/CD 配置，確保任何 Web 專案的一致性程式碼品質和開發者體驗。

يدعم: Claude Codex Code(CC)
📊 70 كافٍ
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "antfu". How should I configure TypeScript for a new project?

النتيجة المتوقعة:

  • For a TypeScript project following Anthony Fu's best practices:
  •  
  • ```json:tsconfig.json
  • {
  • "compilerOptions": {
  • "target": "ESNext",
  • "module": "ESNext",
  • "moduleResolution": "Bundler",
  • "strict": true,
  • "jsx": "preserve",
  • "resolveJsonModule": true,
  • "isolatedModules": true,
  • "esModuleInterop": true,
  • "lib": ["ESNext", "DOM"],
  • "skipLibCheck": true,
  • "noEmit": true
  • },
  • "include": ["**/*.ts", "**/*.d.ts", "**/*.tsx"],
  • "exclude": ["node_modules"]
  • }
  • ```

استخدام "antfu". What ESLint configuration should I use?

النتيجة المتوقعة:

  • Use @antfu/eslint-config as your base configuration:
  •  
  • ```bash
  • # Install dependencies
  • pnpm add -D eslint @antfu/eslint-config
  • ```
  •  
  • ```js:eslint.config.js
  • import antfu from '@antfu/eslint-config'
  •  
  • export default antfu({
  • stylistic: true,
  • vue: false,
  • jsonc: false,
  • })
  • ```

التدقيق الأمني

آمن
v1 • 1/30/2026

Pure documentation skill containing development best practices. Static findings are false positives from markdown code examples. No executable code, scripts, or runtime behavior. All detected patterns are standard documentation formatting showing example configurations.

8
الملفات التي تم فحصها
960
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

45
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
20
المجتمع
100
الأمان
83
الامتثال للمواصفات

ماذا يمكنك بناءه

使用一致的工具設定新的 Web 專案

在啟動新專案時套用 TypeScript、ESLint 和測試的標準化配置，從一開始就確保一致性。

讓團隊成員熟悉現有程式碼庫的慣例

參考此技能向新團隊成員解釋專案的程式碼風格、測試和 CI/CD 慣例。

將現有專案遷移至現代化工具

審查當前專案配置並識別可以透過採用現代化工具和慣例來改進的領域。

جرّب هذه الموجهات

配置新的 TypeScript 專案 
我想使用 Anthony Fu 的最佳實踐來設定新的 TypeScript 專案。我的 tsconfig.json 應該長什麼樣子？包含嚴格模式、ESNext 目標的設定，以及任何其他推薦的 TypeScript 配置。
使用 antfu 配置設定 ESLint 
幫我使用 @antfu/eslint-config 配置專案的 ESLint。我需要安裝哪些套件？我的 eslint.config.js 應該包含什麼？如果需要，告訴我如何與 TypeScript 和 Vue 整合。
為 monorepo 配置 pnpm 工作區 
我正在使用 pnpm 設定 monorepo。我的 pnpm-workspace.yaml 應該長什麼樣子？套件管理的推薦設定是什麼？如何配置 @antfu/ni 以實現一致的命令？
設定 GitHub Actions CI 工作流程 
我想使用 GitHub Actions 為我的專案設定 CI/CD。我應該使用什麼工作流程檔案？推薦執行 linting、測試和類型檢查的動作有哪些？如果適用，參考 sxzz/workflows 模式。

أفضل الممارسات

  • 使用 @antfu/ni（ni、nr、nx）命令，無論團隊成員偏好哪種套件管理器，都能實現一致的套件管理
  • 使用 lint-staged 配置 simple-git-hooks，在提交前自動對暂存的檔案執行 linter
  • 從專案開始就使用 ESNext 目標和啟用的嚴格模式設定 TypeScript，以早期發現類型錯誤

تجنب

  • 在同一專案中混合使用不同的套件管理器（npm、yarn、pnpm）而不使用 @antfu/ni
  • 在不了解影響的情況下禁用 TypeScript 嚴格模式或 ESLint 規則
  • 跳過預提交 hook 和 CI 檢查以節省時間——這會導致程式碼品質不一致

الأسئلة المتكررة

什麼是 @antfu/eslint-config？為什麼我應該使用它？
@antfu/eslint-config 是由 Anthony Fu 建立的可共用 ESLint 配置。它將 ESLint 規則與 Prettier 格式化整合到單一的固執己見的配置中。它減少了配置開銷，並確保跨專案的一致程式碼風格。
我需要使用 pnpm 來遵循這些實踐嗎？
雖然推薦使用 pnpm 以提高效率並節省磁碟空間，但 @antfu/ni 允許團隊成員使用他們偏好的套件管理器（pnpm、npm、yarn、bun），同時在團隊中保持一致的命令。
如何將 Vitest 與這些實踐整合？
安裝 Vitest 並使用此技能推薦的設定進行配置。使用 @vitest/ui 進行視覺化測試探索，並確保您的測試檔案遵循命名慣例（*.test.ts 或 *.spec.ts）以實現自動發現。
我可以在 Vue 或 React 專案中使用這些實踐嗎？
是的。這些配置支援 Vue 和 React/Next.js。在配置 ESLint 時，在 @antfu/eslint-config 中啟用 vue 或 react 選項。TypeScript 和測試配置適用於各種框架。
推薦哪些 VSCode 設定？
使用此技能中概述的 VSCode 擴充功能和設定來實現儲存時格式化、ESLint 整合和 TypeScript 支援。這確保您的編輯器在您撰寫程式碼時自動應用程式碼品質檢查。
如何將現有專案遷移至這些實踐？
首先安裝所需的依賴套件並建立配置檔案。使用 --fix 執行 ESLint 來自動修復風格問題。逐步採用其他實踐，如預提交 hook 和 CI/CD。遷移可以增量完成。

تفاصيل المطور

المؤلف

antfu

الترخيص

MIT

المستودع

https://github.com/antfu/skills/tree/main/skills/antfu/

مرجع

main

بنية الملفات

📁 references/

📄 antfu-eslint-config.md

📄 app-development.md

📄 github-actions.md

📄 gitignore.md

📄 library-development.md

📄 monorepo.md

📄 vscode-extensions.md

📄 SKILL.md