一、先明确你的身份&使用场景（选软件第一判断标准）
1. 纯新手：只写简单HTML/CSS/静态页面、零基础
需求 ：简单、中文、不用配置、一键运行
推荐组合：VS Code + Chrome
备选：HBuilderX（国产可视化更强）
避雷：WebStorm（付费、配置复杂，新手劝退）
2. 做小程序/uni-app、多端打包（APP/小程序/H5）
首选：HBuilderX
理由：内置模拟器、一键打包、小程序配套工具齐全，不用复杂环境配置；
辅助：微信开发者工具、Figma看设计稿
3. 企业开发、Vue/React/TS大型工程、团队协作
二选一：
- VS Code（免费，插件自由，大多数公司标配）
- WebStorm（付费，自带全套校验、重构，开箱即用，适合复杂TS项目）
4. Mac设计师转前端、频繁看设计稿切图
编辑器：VS Code
设计工具：Figma（跨平台）；仅Mac可用Sketch
5. 低配老旧电脑、追求启动速度
轻量编辑器：Sublime Text
放弃WebStorm（内存占用极高）
6. 只做页面调试、抓接口、测试
不需要重型编辑器，只用：Chrome、Apifox、SwitchHosts
二、编辑器核心对比，按需挑选
| 工具 | 费用 | 优点 | 缺点 | 适合人群 |
|---|---|---|---|---|
| VS Code | 完全免费 | 轻量、插件巨多、跨平台、公司通用 | 复杂项目需手动装插件配置 | 90%前端、新手、职场开发 |
| WebStorm | 付费订阅 | 内置ESLint/TS/框架支持，代码重构强，少配置 | 占内存、收费、启动慢 | 大型React/Vue/TS团队 |
| HBuilderX | 基础免费，高级功能付费 | 国产中文，uni-app/小程序专属，自带预览 | 纯Web项目生态不如VSCode | 小程序、多端混合开发 |
| Sublime Text | 免费试用，付费解锁 | 极致轻巧，秒开，占用极低 | 调试、TS支持弱，插件零散 | 老旧电脑、简单静态页面 |
三、配套工具怎么选（按需求取舍）
1. 设计稿工具
- 个人/团队协作、Windows/Mac通用 → Figma（优先）
- 仅Mac、传统UI设计流程 → Sketch
- 老设计师习惯Adobe → Adobe XD
2. 接口测试
- 新手、全中文、一体化（接口+文档+Mock）→ Apifox
- 老牌、海外项目、简单请求 → Postman
3. 抓包调试
- Windows：Fiddler
- Mac/Windows通用：Charles
4. 代码管理
统一用 Git，搭配 Git Bash（Windows）/终端(Mac)，仓库选Gitee/GitHub
5. 运行环境
所有前端工程化项目（Vue/React/Vite）必须装 Node.js，无替代软件。
四、极简筛选步骤（直接套用）
步骤1：确定你的开发方向
1）静态网页 / Vue/React 网页项目 → VS Code
2）小程序、uniapp、APP打包 → HBuilderX
3）超大型TS企业项目、不想折腾插件 → WebStorm
步骤2：看电脑配置
- 内存8G及以下低配机：拒绝WebStorm，选VS Code或Sublime
- 16G+高性能电脑：WebStorm、VS Code随便选
步骤3：预算判断
- 不想花钱：VS Code、HBuilderX免费版、Figma免费版全套够用
- 公司报销/愿意付费：WebStorm、Sketch
步骤4：配套工具补齐
- 必装：Chrome浏览器、Node.js、Git
- 做接口：Apifox
- 切图写页面：Figma
五、避坑建议
- 新手不要一上来装WebStorm，大量内置功能看不懂，增加学习成本；
- 不要只用记事本写代码，无语法提示、无格式化，效率极低；
- uni-app项目别强行用VS Code，模拟器、打包功能不如HBuilderX原生适配；
- 低配电脑不要同时开WebStorm+多个浏览器页面，极易卡顿。
六、两套万能推荐搭配
方案A（通用免费，99%人适用）
VS Code + Chrome + Node.js + Git + Figma + Apifox
适用：自学、公司上班、网页开发、少量小程序
方案B（多端小程序专用）
HBuilderX + 微信开发者工具 + Figma + Apifox
适用：小程序、uniapp、跨端APP开发