开发工具 #
提高开发效率的工具和工作流。
代码编辑器 #
VS Code 推荐插件 #
必装插件
- Prettier - 代码格式化
- ESLint - JavaScript/TypeScript 代码检查
- GitLens - Git 增强工具
- Auto Rename Tag - HTML/JSX 标签同步重命名
前端开发
- ES7+ React/Redux/React-Native snippets
- Auto Import - 自动导入
- Bracket Pair Colorizer - 括号配色
- Live Server - 本地开发服务器
后端开发
- Thunder Client - API 测试
- Database Client - 数据库管理
- Docker - 容器管理
版本控制 #
Git 工作流 #
# 功能分支工作流
git checkout -b feature/new-feature
git add .
git commit -m "feat: add new feature"
git push origin feature/new-feature
# 合并到主分支
git checkout main
git pull origin main
git merge feature/new-feature
git push origin main
提交规范 (Conventional Commits) #
feat: 新功能
fix: 修复bug
docs: 文档更新
style: 代码格式化
refactor: 代码重构
test: 测试相关
chore: 构建过程或辅助工具变动
包管理器 #
Node.js 生态 #
```bash
# 安装依赖
npm install express
# 开发依赖
npm install --save-dev nodemon
# 全局安装
npm install -g create-react-app
```
```bash
# 安装依赖
yarn add express
# 开发依赖
yarn add --dev nodemon
# 全局安装
yarn global add create-react-app
```
```bash
# 安装依赖
pnpm add express
# 开发依赖
pnpm add -D nodemon
# 全局安装
pnpm add -g create-react-app
```
调试工具 #
浏览器开发者工具 #
- Elements - DOM 结构和样式调试
- Console - JavaScript 调试和日志
- Network - 网络请求监控
- Performance - 性能分析
- Application - 存储和 PWA 调试
API 测试工具 #
- Postman - 功能丰富的 API 测试平台
- Insomnia - 轻量级 REST 客户端
- Thunder Client - VS Code 插件
- curl - 命令行工具
构建和打包 #
现代构建工具对比 #
| 工具 | 特点 | 适用场景 |
|---|---|---|
| Webpack | 功能强大，配置复杂 | 大型项目，需要精细控制 |
| Vite | 快速启动，现代化 | 现代前端项目 |
| Rollup | 体积小，适合库开发 | 组件库、工具库 |
| Parcel | 零配置，自动化 | 快速原型开发 |
**效率提升技巧** - 使用代码片段和模板加速开发 - 配置热重载提高调试效率 - 使用代码检查工具保证质量 - 自动化重复性任务