前端常用工具清单

资源类型：tools
适合收藏：脚手架、调试、构建、AI 辅助工具精选清单

---

1. 脚手架工具

用于快速创建项目、统一工程结构、初始化开发环境。

通用前端脚手架

• Vite
  现代前端构建工具，启动快、配置简单，适合 Vue、React、Svelte、Vanilla 等项目。

• Create React App
  React 官方早期推荐脚手架，目前新项目更推荐 Vite、Next.js 等方案。

• Vue CLI
  Vue 2 / Vue 3 项目传统脚手架，适合维护老项目。

• create-vue
  Vue 官方推荐的新项目初始化工具，基于 Vite。

• Angular CLI
  Angular 官方脚手架，集成项目创建、构建、测试、代码生成等能力。

---

React / Vue / 全栈框架脚手架

• Next.js
  React 全栈框架，支持 SSR、SSG、App Router、API Routes。

• Nuxt
  Vue 全栈框架，支持 SSR、SSG、文件路由、服务端能力。

• Remix
  React 全栈框架，强调 Web 标准、嵌套路由和数据加载。

• Astro
  内容型网站、博客、文档站常用框架，支持多框架组件共存。

• SvelteKit
  Svelte 官方应用框架，适合构建高性能 Web 应用。

---

包管理器与项目初始化

• npm
  Node.js 默认包管理器。

• Yarn
  经典包管理器，支持 workspace。

• pnpm
  高性能包管理器，节省磁盘空间，Monorepo 项目常用。

• npx
  临时执行 npm 包命令，常用于创建项目。

• corepack
  Node.js 内置包管理器代理工具，可统一 npm / yarn / pnpm 版本。

常用初始化命令：

bash📋 复制
npm create vite@latest

npm create vue@latest

npx create-next-app@latest

pnpm create vite

---

2. 调试工具

用于排查页面、网络、性能、状态、兼容性等问题。

浏览器开发者工具

• Chrome DevTools
  前端调试核心工具，支持 Elements、Console、Network、Performance、Memory、Application 等面板。

• Firefox Developer Tools
  对 CSS 调试、布局调试、无障碍检查支持较好。

• Safari Web Inspector
  调试 iOS Safari、Mac Safari 必备。

• Edge DevTools
  基于 Chromium，适合 Windows 与企业环境调试。

---

框架调试插件

• React Developer Tools
  查看 React 组件树、props、state、hooks、渲染性能。

• Vue Devtools
  查看 Vue 组件、响应式数据、Pinia、路由等。

• Redux DevTools
  调试 Redux 状态流转、action、time travel。

• Pinia Devtools
  通常集成在 Vue Devtools 中，用于调试 Pinia 状态。

---

网络与接口调试

• Postman
  API 调试、接口集合管理、自动化测试。

• Insomnia
  简洁的 API 调试工具，支持 REST、GraphQL。

• Hoppscotch
  在线 API 调试工具，轻量便捷。

• Apifox
  集接口文档、Mock、调试、自动化测试于一体。

• Charles
  HTTP 抓包、移动端调试常用。

• Fiddler
  Windows 环境常见抓包工具。

• mitmproxy
  命令行抓包代理工具，适合高级调试和自动化场景。

---

移动端调试

• Chrome Remote Debugging
  调试 Android Chrome 页面。

• Safari Remote Debugging
  调试 iOS Safari、WebView 页面。

• vConsole
  移动端网页内置调试面板。

• eruda
  移动端网页调试控制台，功能类似 DevTools 简化版。

示例：

html📋 复制
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>
  eruda.init();
</script>

---

性能与质量分析

• Lighthouse
  页面性能、SEO、可访问性、最佳实践评分。

• PageSpeed Insights
  基于 Lighthouse 和真实用户数据的性能分析工具。

• WebPageTest
  更专业的网页性能测试工具，支持瀑布流、地域、网络环境分析。

• Chrome Performance 面板
  分析运行时性能、长任务、渲染、脚本执行。

• Chrome Memory 面板
  分析内存泄漏、堆快照、对象引用。

---

3. 构建与工程化工具

用于代码打包、转译、压缩、规范化、测试和发布。

打包工具

• Vite
  开发体验优秀，生产环境基于 Rollup 构建。

• Webpack
  生态成熟，适合复杂工程和历史项目。

• Rollup
  更适合类库打包，Tree Shaking 表现优秀。

• Parcel
  零配置打包工具，上手简单。

• esbuild
  Go 编写的极速构建工具，常作为底层能力使用。

• Rspack
  Rust 编写，兼容 Webpack 生态，构建速度快。

• Turbopack
  Vercel 推出的 Rust 构建工具，常见于 Next.js 生态。

---

转译与编译

• Babel
  JavaScript 转译工具，处理新语法兼容。

• TypeScript
  JavaScript 类型系统，现代前端工程标配。

• SWC
  Rust 编写的高速编译器，可替代部分 Babel 场景。

• Sucrase
  快速转译工具，适合开发阶段。

---

CSS 工具

• PostCSS
  CSS 转换工具平台，常配合插件使用。

• Autoprefixer
  自动补全浏览器前缀。

• Sass
  CSS 预处理器。

• Less
  CSS 预处理器，历史项目常见。

• Tailwind CSS
  原子化 CSS 框架，适合快速构建 UI。

• UnoCSS
  即时按需的原子化 CSS 引擎。

---

代码规范

• ESLint
  JavaScript / TypeScript 代码检查工具。

• Prettier
  代码格式化工具。

• Stylelint
  CSS / SCSS / Less 代码检查工具。

• EditorConfig
  统一不同编辑器的基础格式。

• Husky
  Git Hooks 工具。

• lint-staged
  只检查暂存区文件，常与 Husky 搭配。

• commitlint
  规范 Git Commit Message。

常见提交规范：

bash📋 复制
feat: add user profile page
fix: resolve login redirect issue
docs: update README
refactor: simplify request wrapper

---

测试工具

• Vitest
  Vite 生态测试框架，速度快，适合现代前端项目。

• Jest
  经典 JavaScript 测试框架，生态成熟。

• Testing Library
  面向用户行为的组件测试工具。

• Cypress
  端到端测试工具，调试体验好。

• Playwright
  跨浏览器自动化测试工具，适合 E2E 和 UI 测试。

• Storybook
  组件开发、展示、测试和文档工具。

---

Monorepo 工具

• pnpm workspace
  轻量 Monorepo 方案，常用于前端多包项目。

• Turborepo
  高性能 Monorepo 构建系统，适合任务缓存和流水线优化。

• Nx
  功能强大的 Monorepo 工具，适合大型团队。

• Lerna
  经典多包管理工具，适合 npm 包发布管理。

---

发布与部署

• Vercel
  适合 Next.js、前端静态站点和 Serverless 部署。

• Netlify
  适合静态站点、Jamstack 项目。

• Cloudflare Pages
  静态站点和边缘部署平台。

• GitHub Pages
  免费静态页面托管，适合文档、博客、小项目。

• Docker
  应用容器化部署工具。

• GitHub Actions
  CI/CD 自动化工具。

---

4. AI 辅助工具精选

用于代码补全、解释、重构、生成测试、文档编写和问题排查。

编程助手

• GitHub Copilot
  IDE 内代码补全、函数生成、测试生成、解释代码。

• Cursor
  AI 代码编辑器，适合基于项目上下文进行修改和问答。

• Codeium
  AI 代码补全工具，支持多种编辑器。

• Tabnine
  AI 编程助手，强调隐私和团队场景。

• Amazon Q Developer
  AWS 生态下的 AI 编程助手。

---

通用 AI 工具

• ChatGPT
  适合方案设计、代码解释、Bug 分析、文档生成。

• Claude
  适合长文本理解、代码审查、架构讨论。

• Gemini
  Google AI 助手，适合结合搜索和多模态能力。

• Perplexity
  AI 搜索工具，适合查资料和追踪最新技术信息。

---

设计与前端协作

• Figma AI
  辅助设计生成、内容填充、设计稿理解。

• Uizard
  根据描述或草图生成界面原型。

• v0
  根据提示词生成 React / Tailwind UI。

• Bolt
  在线生成和运行 Web 应用原型。

• StackBlitz
  在线前端 IDE，适合快速验证和分享 Demo。

---

5. 推荐组合方案

新项目通用组合

• Vite
• TypeScript
• pnpm
• ESLint
• Prettier
• Vitest
• Playwright
• GitHub Actions

---

Vue 项目组合

• create-vue
• Vue 3
• TypeScript
• Pinia
• Vue Router
• Vite
• Vue Devtools
• Vitest

---

React 项目组合

• Vite 或 Next.js
• React
• TypeScript
• React Router 或 Next.js App Router
• Zustand / Redux Toolkit / Jotai
• React Developer Tools
• Testing Library
• Playwright

---

组件库项目组合

• Vite
• Rollup
• TypeScript
• Storybook
• Vitest
• Testing Library
• ESLint
• Stylelint
• Changesets

---

中大型团队工程化组合

• pnpm workspace
• Turborepo 或 Nx
• TypeScript
• ESLint
• Prettier
• commitlint
• Husky
• lint-staged
• GitHub Actions / GitLab CI
• Docker

---

6. 工具选型速查表

场景	推荐工具
快速创建现代前端项目	Vite
创建 Vue 3 项目	create-vue
创建 React SSR 项目	Next.js
创建 Vue SSR 项目	Nuxt
类库打包	Rollup / tsup
超快编译	esbuild / SWC
代码规范	ESLint + Prettier
CSS 检查	Stylelint
单元测试	Vitest / Jest
组件测试	Testing Library
E2E 测试	Playwright / Cypress
组件文档	Storybook
API 调试	Postman / Apifox
移动端调试	vConsole / eruda
性能分析	Lighthouse / WebPageTest
Monorepo	pnpm workspace / Turborepo / Nx
自动化部署	GitHub Actions
AI 代码补全	GitHub Copilot / Cursor
AI 原型生成	v0 / Bolt

---

7. 前端工具学习 Checklist

入门阶段

• 掌握 npm 基础命令
• 会使用 Vite 创建项目
• 会使用 Chrome DevTools 调试页面
• 会查看 Network 请求
• 会使用 Console 排查错误
• 会安装和使用浏览器插件
• 会使用 Postman 或 Apifox 调试接口

---

进阶阶段

• 理解 Webpack / Vite 的基本工作原理
• 会配置 TypeScript
• 会配置 ESLint 和 Prettier
• 会使用 Git Hooks 约束提交
• 会编写基础单元测试
• 会使用 Lighthouse 分析性能
• 会使用 Source Map 调试线上问题

---

工程化阶段

• 会设计前端项目目录结构
• 会搭建组件库开发环境
• 会配置 CI/CD 流程
• 会处理环境变量和多环境构建
• 会分析打包产物体积
• 会搭建 Monorepo 项目
• 会制定团队代码规范

---

AI 辅助阶段

• 会用 AI 解释陌生代码
• 会用 AI 生成测试用例
• 会用 AI 辅助重构代码
• 会用 AI 生成组件雏形
• 会用 AI 编写技术文档
• 会判断 AI 生成代码的正确性
• 不直接复制未经验证的 AI 代码

---

8. 收藏建议

• 日常开发优先熟练掌握：Vite、TypeScript、ESLint、Prettier、Chrome DevTools
• 团队项目重点掌握：Git Hooks、CI/CD、测试、Monorepo
• 性能优化重点掌握：Lighthouse、Performance、Bundle Analyzer
• 移动端项目重点掌握：Remote Debugging、vConsole、eruda
• AI 工具重点用于：提效、解释、生成初稿，不替代代码审查和测试验证