工具

前端开发环境及软件

前言

换设备、重装系统、入职新公司——每次都要从零搭建开发环境。本文整理前端开发所需的软件清单，从运行环境到日常工作工具，按搭建顺序分类，附带版本说明和安装建议。

一、基础运行环境

Node.js

前端开发的基石，建议用 LTS 版本（当前最新 LTS：v22.x）。

工具 作用 推荐安装方式
Node.js JS 运行时 官方 nodejs.org 下载 LTS 版（慢），国内可走 npmmirror 镜像
nvm-windows Node 版本管理（Windows） 官网 nvmnode.com 直接下载 nvm-setup.exe，有中文界面，国内访问无障碍
nvm Node 版本管理（macOS/Linux） curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

为什么需要 nvm？ 不同项目的 Node 版本要求不同：老项目可能锁定 v16，新项目用 v22。用 nvm 一条命令切换，避免全局重装。

Windows 安装 nvm-windows 后建议配置国内镜像，否则 nvm install 下载 Node 会极慢：

1
2
nvm node_mirror https://npmmirror.com/mirrors/node/
nvm npm_mirror https://npmmirror.com/mirrors/npm/
1
2
3
4
5
# 常用 nvm 命令
nvm install 22           # 安装 Node 22
nvm use 22               # 切换到 22
nvm list                 # 查看已安装版本
nvm alias default 22     # 设默认版本

包管理器

npm 是 Node.js 自带的，但推荐额外装 pnpm，节省磁盘空间且安装更快。

1
npm install -g pnpm
工具 特点 适用场景
npm 自带、生态最广 默认首选
pnpm 硬链接复用、省磁盘、Monorepo 原生支持 多项目 / 大项目推荐
yarn 离线缓存、锁定版本更严格 老项目常见，新项目建议换 pnpm

Git

1
2
3
4
5
6
# 安装后配置全局信息
git config --global user.name "你的名字"
git config --global user.email "你的邮箱"

# 推荐开启长路径支持（Windows）
git config --global core.longpaths true

二、编辑器

VS Code（核心）

  • 官方下载：code.visualstudio.com（可能较慢）
  • 国内加速方法：进入官网右键复制下载链接 → 把域名 az764295.vo.msecnd.net 替换为 vscode.cdn.azure.cn

微软在国内部署了官方 CDN vscode.cdn.azure.cn，实测下载速度从 ~100KB/s 提升到 5-10MB/s。注意该域名没有目录浏览页（直接访问会报错），必须拼接完整文件路径使用。

必备全局配置（settings.json）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "files.autoSave": "onFocusChange",
  "files.exclude": {
    "**/node_modules": true,
    "**/dist": true
  },
  "emmet.triggerExpansionOnTab": true,
  "explorer.compactFolders": false
}

VS Code 扩展（按角色推荐）

角色 扩展组合
Vue 开发 Volar + Vue Snippets + Vue Peek + Auto Rename Tag
React 开发 ES7+ React Snippets + React Refactor
代码质量 ESLint + Prettier + Error Lens
Git GitLens + Git History
效率 Path Intellisense + Live Server + Better Comments
AI 辅助 GitHub Copilot / 通义灵码 / CodeBuddy
样式 Color Highlight + Tailwind CSS IntelliSense
界面 Material Icon Theme + 中文语言包

字体推荐

编程字体首选 Fira Code 或 JetBrains Mono，都自带连字（ligature）。

1
2
3
4
5
// settings.json
{
  "editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true
}

三、浏览器与调试工具

浏览器

浏览器 用途 下载
Chrome 主力开发浏览，DevTools 最完善 google.cn/chrome
Edge 多浏览器兼容测试（Chromium 内核） Windows 自带
Firefox 多浏览器兼容测试（Gecko 内核） firefox.com

Chrome DevTools 常用面板

面板 用途 使用频率
Elements DOM / CSS 实时编辑 每天
Console 日志、执行 JS 每天
Sources 断点调试、源代码浏览 高频
Network 接口抓包、性能瓶颈 每次联调
Application Cookie / localStorage / IndexedDB 中频
Performance 性能录制、火焰图 优化期
Lighthouse 自动性能/SEO/可访问性审计 上线前

浏览器扩展

扩展 用途
Vue.js devtools Vue 组件树 / Pinia / 路由调试
Wappalyzer 识别网站技术栈
FeHelper JSON 格式化、时间戳、编解码等
沉浸式翻译 中英文文档双语对照阅读
Octotree GitHub 侧边栏目录树

四、终端工具

Windows 用户

工具 用途 下载
Windows Terminal 替代自带的 cmd/PowerShell，支持多标签、GPU 渲染 Microsoft Store 免费
PowerShell 7 Windows Terminal 的推荐 Shell GitHub Release
oh-my-posh 终端美化，显示 Git 分支、Node 版本 winget install JanDeDobbeleer.OhMyPosh

macOS 用户

工具 用途
iTerm2 替代自带 Terminal，分屏 + 热键呼出
Homebrew macOS 包管理器，装软件不必去官网下载
zsh + oh-my-zsh Shell 美化 + Git 快捷别名

通用 Shell 工具

1
2
3
4
# 命令增强（任选一个）
npm install -g zx         # Google 出品的 Shell 脚本框架，写 JS 替代 bash
cargo install bat         # 带语法高亮的 cat 替代品
cargo install ripgrep     # 超快的内容搜索

五、API 调试工具

工具 类型 适合人群 价格
Apifox 桌面客户端 国内团队首选，API 文档 + 调试 + Mock 三合一 免费版够用
Postman 桌面客户端 国际通用、老牌 免费版有限制
Bruno 桌面客户端 Git 友好，API 集合存为本地文件，可版本管理 开源免费
Thunder Client VS Code 扩展 轻量，不离开编辑器调试 API 免费版够用

六、数据库与中间件管理

工具 用途 下载
DBeaver 通用数据库客户端，支持 MySQL/PG/SQLite 等 80+ 数据库 社区版免费
Another Redis Desktop Manager Redis 可视化客户端 GitHub 开源免费
MongoDB Compass MongoDB 官方 GUI 免费

七、设计协作与切图

工具 用途 价格
Figma UI 设计 + 标注 + 切图导出，浏览器+客户端都可 个人免费
Pixso 国内版 Figma，协作更流畅 免费
MasterGo 另一国内协作设计工具 免费

前端不需要设计师全套 Sky，有 Figma 账号 + 浏览器就够了——看标注、导出 SVG/PNG、复制 CSS 代码一条龙。

八、日常效率工具

工具 用途 推荐理由
Snipaste 截图 + 贴图到屏幕 Windows 必备，按 F1 截图，F3 贴到屏幕置顶
Typora Markdown 编辑器 所见即所得，写文档/周报/笔记
uTools 快捷启动器 + 插件生态 Alt+Space 呼出，翻译/计算/剪切板历史/颜色提取
Everything 文件搜索（Windows） 秒级全盘搜索，比自带搜索快 100 倍
Alfred 快捷启动器（macOS） Raycast 是新晋替代品
Clash Verge 网络代理客户端 访问 GitHub/npm 等国际站点
Ditto 剪切板历史 Ctrl+ 呼出，代码片段随手粘贴

九、搭建流程总结

从格式化电脑到能开始开发，按以下顺序：

1
2
3
4
5
6
7
8
9
10
1. 装 Chrome         → 浏览器，下载其他工具的基础
2. 装 Clash Verge    → 网络通畅，后续安装才能顺利
3. 装 Git            → 代码管理
4. 装 nvm + Node.js  → 运行环境
5. 装 VS Code        → 主力编辑器
6. 装 VS Code 扩展   → Volar / ESLint / Prettier / AI 插件
7. 装 Apifox         → API 调试
8. 装 DBeaver        → 数据库（按需）
9. 装 Snipaste + uTools → 日常效率工具
10. 装 Figma + Typora  → 设计协作 + 文档

总耗时约 45 分钟，一键安装命可节省一半。

内容由 AI 生成，仅供参考。本文发布于 码上学习，转载请注明出处。