Appearance
效率工具
好的工具能够显著提升开发效率和代码质量，以下是团队推荐的前端开发效率工具
包管理工具
| 工具 | 说明 | 推荐场景 |
|---|---|---|
| pnpm | 快速、节省磁盘空间的包管理器 | 推荐，所有新项目统一使用 |
| npm | Node.js 默认包管理器 | 老项目维护 |
| yarn | Facebook 出品的包管理器 | 特定项目需要时 |
构建工具
| 工具 | 说明 | 推荐场景 |
|---|---|---|
| Vite | 下一代前端构建工具，极速冷启动 | 推荐，Vue3/React 新项目 |
| Webpack | 功能强大的模块打包器 | 老项目维护、复杂配置需求 |
| Rollup | ES Module 打包器 | 工具库/组件库打包 |
代码质量工具
| 工具 | 说明 | 用途 |
|---|---|---|
| ESLint | JavaScript/TypeScript 代码检查工具 | 代码规范检查（必装） |
| Prettier | 代码格式化工具 | 统一代码风格（必装） |
| Stylelint | CSS 代码检查工具 | 样式规范检查 |
| commitlint | Git Commit 规范检查 | 提交信息规范 |
| husky | Git Hooks 工具 | 提交前自动检查 |
| lint-staged | 对暂存文件执行 lint | 增量检查，提升效率 |
调试工具
| 工具 | 说明 |
|---|---|
| Vue Devtools | Vue 应用调试工具（浏览器插件） |
| React Developer Tools | React 应用调试工具（浏览器插件） |
| Eruda | 移动端调试面板，适用于 H5/小程序 WebView |
| vConsole | 腾讯出品的移动端调试工具 |
| Charles / Whistle | 网络抓包和代理工具 |
文档工具
| 工具 | 说明 |
|---|---|
| VitePress | Vue 驱动的静态网站生成器（本站使用） |
| Storybook | UI 组件开发和文档工具 |
| Apifox | API 文档、调试、Mock 一体化 |
API 测试工具
| 工具 | 说明 |
|---|---|
| Apifox | API 设计、开发、测试一体化平台（推荐） |
| Postman | 经典 API 测试工具 |
设计协作
| 工具 | 说明 |
|---|---|
| 蓝湖 | 设计稿交付和标注平台 |
| Figma | 在线设计协作工具 |
| MasterGo | 国产在线设计工具 |
其他实用工具
| 工具 | 说明 |
|---|---|
| TinyPNG | 在线图片压缩 |
| Can I Use | 浏览器兼容性查询 |
| Regex101 | 正则表达式调试工具 |
| Carbon | 代码截图美化工具 |