开发工具

工具链总览

类别	工具	用途
前端开发	VSCode & Cursor	React/TS 编码、AI 辅助
后端开发	IntelliJ IDEA	Spring Boot 编码、调试
移动/跨端	HBuilder X	uni-app 开发、多端打包
数据库管理	DBeaver	PostgreSQL 设计、查询、管理
API 管理	Apifox	接口文档、调试、Mock、测试
缓存管理	Another Redis Desktop Manager	Redis 可视化操作
消息队列	RabbitMQ Management Plugin	RabbitMQ 监控与管理
容器化	Docker	环境一致性、服务编排
CI/CD	Jenkins	自动化构建、测试、部署
版本控制	IDE 内置 Git + 插件	代码追溯、分支管理、协作

---

1. VSCode & Cursor（前端：React + TypeScript + pnpm）

1.1 推荐插件

• ESLint -- 代码规范实时检查。
• Prettier -- Code formatter -- 统一代码风格，保存时自动格式化。
• ES7+ React/Redux/React-Native snippets -- 组件、Hook 代码片段一键生成。
• Tailwind CSS IntelliSense -- 如果使用 Tailwind，类名自动补全。
• Path Intellisense -- 文件路径补全。
• GitLens -- 图形化 Git 追溯：行历史、提交比较、代码作者一目了然。
• Git History -- 提交历史可视化管理。
• Import Cost -- 显示导入包体积。
• Auto Rename Tag -- JSX/HTML 标签自动同步。
• Thunder Client -- 轻量 API 测试（个人调试，团队统一用 Apifox）。
• Docker -- 管理容器、docker-compose，查看日志。
• pnpm-lens -- 在 package.json 中展示 pnpm 版本提示。

Cursor 在原 VSCode 基础上深度融合 AI，按需使用：

• Ctrl+K 输入需求生成代码。
• Ctrl+L 对话式编写复杂逻辑。
• 整项目级 AI 重构与分析。

1.2 内置 Git 图形化操作

VSCode 左侧 Source Control 面板提供所有常用 Git 操作：

• 查看变更、暂存、提交、推送、拉取。
• 分支创建、切换、合并直接在 UI 完成。
• 搭配 GitLens 可实现文件行注释、代码历史对比、提交图表，完全替代独立 Git GUI 工具。

1.3 依赖安装

• 全局安装 pnpm：npm i -g pnpm
• 项目根目录执行 pnpm install
• Monorepo 项目需配置 pnpm-workspace.yaml，然后同样在根目录安装。

1.4 全功能开发流程

1. 初始化 ：pnpm create vite my-app --template react-ts，或 Cursor 用 AI 生成脚手架。
2. 编码：代码片段 + Cursor AI 快速生成业务逻辑，保存自动格式化。
3. 调试 ：Chrome DevTools + React Developer Tools，VSCode 可配置 launch.json 断点调试，或直接用 Apifox 测试 API。
4. 版本控制：Source Control 面板完成日常提交，GitLens 复盘历史。
5. 测试：Vitest/Jest 配合 Testing Library，安装对应 VSCode 扩展直接运行。
6. 构建 ：pnpm build，通过环境变量控制不同模式。

---

2. IntelliJ IDEA（后端：Java + Spring 全家桶）

2.1 必备插件

• Lombok -- 简化代码，需开启 Settings > Build > Compiler > Annotation Processors。
• Spring Boot Helper -- 端点映射、配置提示。
• Maven Helper -- 依赖冲突分析，快捷 Maven 操作。
• Alibaba Java Coding Guidelines -- 代码规范检查。
• SonarLint -- 代码质量实时检测。
• JRebel and XRebel -- 热部署（可用免费 DCEVM + HotSwapAgent 替代）。
• Grep Console -- 控制台日志着色、过滤。
• GitToolBox -- 增强 Git 状态显示、自动 fetch、行内提交信息。
• Rainbow Brackets -- 彩虹括号。
• .env files support -- 环境变量文件高亮。
• MyBatisX -- 若使用 MyBatis，快速跳转 Mapper XML。
• Docker -- 管理容器、镜像，集成 Docker Compose。

2.2 内置 Git 图形化操作

IDEA 的 Git 集成极为强大：

• 顶部菜单 Git 或右侧边栏 Commit 面板：查看差异、提交、推送。
• Log 视图以图形展示所有分支和提交，可过滤、搜索、回滚。
• GitToolBox 在状态栏显示分支、未提交数量，文件标签页显示作者。
• 无需外部客户端即可完成代码审查、冲突解决。

2.3 依赖安装

• 打开 pom.xml（Maven）或 build.gradle（Gradle）所在目录，IDEA 自动识别并下载全部依赖。
• 若多模块项目包含前端，直接在终端用 pnpm 安装。

2.4 全功能开发流程

1. 创建项目：Spring Initializr 勾选 Web、JPA、PostgreSQL Driver、Lombok、Validation 等。
2. 编码 ：Alt+Insert 生成构造器/方法，MyBatisX 跳转 SQL，Rainbow Brackets 辅助阅读。
3. 接口测试 ：内置 HTTP Client 编写 .http 文件直接测试，或结合 Apifox 同步测试用例。
4. 数据库操作：右侧 Database 面板连接 PostgreSQL，浏览数据、执行 DDL、生成实体（JPA Buddy）。
5. 运行与调试：使用 JRebel 实现方法体热交换，断点调试、条件断点一应俱全。
6. 代码分析 ：SonarLint 实时扫描，Code > Inspect Code 全项目静态检查。
7. 构建 ：Maven/Gradle 面板运行 clean package，生成可执行 JAR。
8. 容器化 ：Docker 插件一键构建镜像，或调用 docker-compose up 启动依赖服务。

---

3. HBuilder X（移动/跨端：uni-app）

3.1 插件与配置

• HBuilder X 深度集成 uni-app，推荐从插件市场导入：
  • uni-ui / uView UI -- 跨端 UI 组件库。
  • Prettier -- 代码格式化。
  • ESLint -- 代码检查。
• 运行配置：指定微信开发者工具、浏览器、真机基座路径。
• 若使用 Vue3 + Vite 版 uni-app，可切换至 VSCode 开发，但 HBuilder X 在真机调试和打包方面仍不可替代。

3.2 内置 Git 图形化操作

HBuilder X 内置 Git 管理：

• 工具栏 版本控制 按钮打开窗口：查看变更、提交、推送、拉取。
• 文件树显示修改状态，右键可进行 Git 操作。
• 可配合项目中 .gitignore 过滤无关文件。

3.3 依赖安装

• 终端执行 npm install 或 pnpm install。
• 导入插件市场组件时会自动安装相关依赖。

3.4 开发流程

1. 路由与页面 ：pages.json 配置路由、TabBar，easycom 自动注册组件。
2. 条件编译 ：#ifdef 实现平台差异化代码。
3. 状态管理 ：Pinia (Vue3)，封装 uni.request 并配置拦截器。
4. 调试：一键运行到浏览器、微信开发者工具或真机，真机可调试原生能力。
5. 打包发布：云打包生成 APK/IPA，或发行到小程序、H5。

---

4. DBeaver（数据库管理：PostgreSQL）

4.1 安装与连接

• 下载社区版，新建连接 → PostgreSQL，填写主机、端口、数据库、用户密码。
• 支持 SSH 隧道和 SSL，驱动自动下载。

4.2 主要功能

• 数据编辑：网格视图直接增删改数据，支持提交回滚。
• ER 图：选中表/模式，右键查看实体关系图，支持导出。
• SQL 编辑器：语法高亮、自动补全、执行计划分析（Explain）。
• 数据传输：不同数据库间的导入导出、数据迁移。
• 备份/恢复：调用 pg_dump/pg_restore 进行逻辑备份。
• 元数据搜索：快速定位表、字段。
• 对比：数据库结构差异对比，生成同步脚本。

4.3 在开发中的使用

• 设计阶段生成 DDL 存入 Git。
• 开发时调试数据、优化 SQL 查询。
• 配合 Flyway/Liquibase 管理迁移，DBeaver 可导出基线。

---

5. Apifox（API 管理与测试）

5.1 安装与配置

• 下载桌面端或使用 Web 版，注册账号后创建团队项目。
• 导入 SpringDoc OpenAPI 生成的 Swagger JSON 地址，自动生成接口文档。

5.2 核心功能

• 接口文档：动态更新，Markdown 描述，自动生成请求/响应示例。
• 接口调试：一键发送请求，环境变量管理，前后置脚本。
• Mock 服务：根据文档自动生成智能 Mock 数据，前端无需等待后端。
• 自动化测试：编排接口用例，设置断言，集合运行、定时任务。
• 代码生成：一键生成多种语言的请求代码片段。

5.3 与全栈协作

• 后端：IDEA 内置 HTTP Client 快速单接口调试，同步到 Apifox 供团队查看。
• 前端：开发阶段使用 Apifox Mock 服务，进入联调后切换为真实环境。
• 代替 Thunder Client 作为团队统一 API 管理平台。

---

6. Another Redis Desktop Manager（缓存管理）

6.1 安装与连接

• 下载免费开源版，新建连接 → 填写 Redis 服务器地址、端口、密码。
• 支持 SSH 隧道连接远程 Redis。

6.2 主要功能

• 键值浏览：树状结构展示 Key，支持搜索、筛选。
• 数据操作：增删改查字符串、哈希、列表、集合等数据类型。
• 命令控制台：直接执行 Redis 命令并查看返回。
• 连接监控：查看客户端列表、服务器信息、内存使用。
• 导入导出：批量导入导出数据。

6.3 在开发中的应用

• 开发阶段验证缓存是否写入成功。
• 排查数据错乱时快速清空或修改缓存。
• 查看键的 TTL，优化过期策略。

---

7. Docker（环境容器化）

7.1 安装

• 下载 Docker Desktop（Windows/Mac）或安装 Docker Engine（Linux）。
• 确认 docker 和 docker-compose 命令可用。

7.2 在开发中的使用

编写 docker-compose.yml 快速搭建本地依赖环境，例如：

version: '3'
services:
  postgres:
    image: postgres:15
    environment:
      POSTGRES_PASSWORD: mysecretpassword
    ports:
      - "5432:5432"
  redis:
    image: redis:7
    ports:
      - "6379:6379"
  rabbitmq:
    image: rabbitmq:3-management  # 已包含 Management Plugin
    ports:
      - "5672:5672"   # AMQP
      - "15672:15672" # 管理界面

执行 docker-compose up -d 即可启动全套服务，保证团队环境一致。

7.3 与 IDE 集成

• VSCode 安装 Docker 扩展，管理容器、查看日志。
• IDEA 内置 Docker 插件，可直接构建后端项目镜像，或通过 Services 面板管理 Compose。

---

8. RabbitMQ Management Plugin（消息队列管理）

8.1 启用方式

• Docker 方式 ：直接使用 rabbitmq:3-management 镜像，管理界面默认开启。
• 手动安装 ：rabbitmq-plugins enable rabbitmq_management，访问 http://localhost:15672，默认账号 guest/guest。

8.2 功能与用途

• 队列监控：查看消息数、消费者数、消息速率。
• 交换机管理：声明交换器、绑定队列。
• 消息追踪：发布消息到指定路由，查看消息内容。
• 用户与权限：创建用户，分配虚拟主机权限。
• 开发时用它定位消息丢失、队列堆积等问题。

---

9. Jenkins（持续集成/持续部署）

9.1 安装

• 可通过 Docker 快速部署：

  docker run -d -p 8080:8080 -p 50000:50000 -v jenkins_home:/var/jenkins_home jenkins/jenkins:lts

• 访问 http://localhost:8080，按提示解锁并安装推荐插件（Git、Pipeline、NodeJS 等）。

9.2 配置流水线（Pipeline）

在项目根目录创建 Jenkinsfile，示例：

pipeline {
    agent any
    tools {
        nodejs 'NodeJS-18'   // 需要在全局工具中配置
        maven 'Maven-3.8'
    }
    stages {
        stage('Checkout') {
            steps {
                git branch: 'main', url: 'https://github.com/your-repo.git'
            }
        }
        stage('Build Backend') {
            steps {
                dir('backend') {
                    sh 'mvn clean package'
                }
            }
        }
        stage('Build Frontend') {
            steps {
                dir('frontend') {
                    sh 'pnpm install && pnpm build'
                }
            }
        }
        stage('Docker Build & Push') {
            steps {
                sh 'docker build -t my-app .'
                sh 'docker push my-app'
            }
        }
        stage('Deploy') {
            steps {
                sh 'docker-compose up -d'
            }
        }
    }
    post {
        failure {
            // 发送通知
        }
    }
}

• 在 Jenkins 中创建 Pipeline 任务，指向代码仓库，自动执行构建、测试、打包、部署。

9.3 与工具链配合

• 代码推送后触发 Jenkins 任务（Webhook）。
• 自动运行单元测试、接口测试（可用 Apifox CLI 触发自动化测试）。
• 构建 Docker 镜像推送至私有仓库，最终部署到开发/测试环境。
• 支持环境变量、参数化构建，灵活控制部署版本。

---

10. 全栈开发完整流程串联

一个典型需求从开发到上线的端到端过程：

1. 需求与设计

   DBeaver 设计数据库表结构，导出 DDL 纳入版本控制。

2. 并行开发

   • 后端：IDEA 创建 Spring Boot 项目，定义接口，编写实体、服务。
   • 前端：VSCode/Cursor 编写 React 页面，用 Apifox Mock 数据并行开发。
   • 移动端：HBuilder X 开发 uni-app，同样使用 Apifox Mock。

3. 服务依赖

   Docker Compose 一键启动 PostgreSQL、Redis、RabbitMQ，开发环境即开即用。

4. 接口联调

   后端更新接口后，同步 Apifox 文档，前端/移动端切换到真实环境联调。

   Redis 通过 Another Redis Desktop Manager 查看缓存数据。

   RabbitMQ 管理界面监控消息传递。

5. 版本控制

   全程使用 IDE 内置 Git 图形化功能提交代码，分支合并、解决冲突。

6. 自动化测试与 CI

   代码推送到 Git 仓库，Jenkins 流水线自动：

   • 编译后端项目，运行单元测试。
   • 构建前端资源。
   • 执行 Apifox 自动化测试套件。
   • 构建 Docker 镜像。
   • 部署到测试环境。

7. 调试与优化

   IDEA 远程调试后端，VSCode 分析前端性能，DBeaver 分析慢 SQL，RabbitMQ 检查队列积压。

8. 发布上线

   通过 Jenkins 执行生产部署流水线，Docker Compose 或 Kubernetes 滚动更新，Apifox 进行线上冒烟测试。

9. 监控 （后续可扩展）

   暂时通过 RabbitMQ 管理界面、Redis 管理器、DBeaver 等确保服务健康。

---