今天来了一位新前端同事，帮他在新的 mac 电脑上安装环境。最近两年换了几次电脑、配了几次服务器，逐渐形成了一套稳定的流程。这里记录一下，给准备换电脑或重装系统的朋友参考。
本文配置环境适用于 macOS 14/15+ Intel / M 系列处理器，其他版本在安装依赖工具时可能会有版本不同，安装的工具主要服务前端开发。如有问题可以在留言区咨询。
流程分为以下几步：
拨号上网
具备满足与现代互联网（前沿技术）接轨的网络环境。
Terminal
SSH key:
生成 SSH key 并添加到 GitHub（代码仓库），方便使用 git 地址克隆仓库。
- 在 Terminal 运行命令：
ssh-keygen -t ed25519 -C "<your_mail@xx.com>"，然后一直回车，生成的 key 会保存在~/.ssh目录下。 - 运行命令
cat ~/.ssh/id_ed25519.pub，将文件内容添加到 GitHub 的 SSH key 列表中。
Git
当你第一次运行 git 命令时，系统会提示你安装 XCode 工具包，跟随引导一直点下一步即可。安装完成后重新运行 git 命令即可执行。
如果没有弹出，可以运行命令：
xcode-select --install
brew
Homebrew 是 macOS 上的包管理工具，类似于 Linux 上的 apt-get、yum 等。
安装命令，在 Terminal 运行：
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Node
前端必不可少的环境，安装 Node.js 可以使用 brew 安装，也可以直接到 Node.js 官网 下载安装包安装。
推荐安装 nvm, 通过 nvm 安装 Node.js，这样可以方便地切换 Node.js 版本，便于在不同项目中使用不同版本的 Node.js。
brew install nvm
nvm install latest # 安装最新版本的 Node.js
nvm 常用命令：
nvm list # 查看已安装的 node 版本
nvm install <版本号> # 安装指定版本
nvm use v18.15.0 # 使用指定版本
nvm uninstall v18.15.0 # 卸载指定版本
配置镜像源
【可选】网络条件好的可以跳过这一步。
国内访问 npm 官方源速度较慢，可以使用国内淘宝镜像源安装。
npm config set registry https://registry.npmmirror.com
Corepack
Corepack 是一个 Node.js 包管理工具，我用于管理 npm、yarn 的版本。
我的电脑不知道怎么就有，同事的新电脑是没有的。可以先检查是否有 Corepack，没有的话再安装。
corepack -v # 查看版本，如果有则已安装
安装命令：
npm install -g corepack
Pnpm / Bun
新项目最开始是使用 Bun 来做包管理，后来遇到一些目前版本暂时无法解决的问题，就换回 pnpm 了。
但是 pnpm 9.x 本地执行 nx 编译、测试命令有问题，所以现在在用 pnpm 8.x 版本。使用 Corepack 就可以很方便地切换版本。
corepack install pnpm@9 # 安装 pnpm 9.x
ZSH
【可选】
macOS 现在默认的 shell 已经是 zsh 了。
关于 ZSH 的美化、自动补全等插件推荐，简单地说就是安装以下插件：
- oh-my-zsh
- zsh-autosuggestions 自动补全插件
- zsh-syntax-highlighting 语法高亮插件
- PowerLine
详细的配置请期待下一篇文章。
编辑器
现代前端开发主要都是用 VSCode 或 WebStorm，VSCode，轻量、插件丰富、社区活跃。
最近半年，我们有很多同事包括我自己都转到基于 VSCode 开发的 Cursor，提供更好的 AI 辅助体验。
也有同事在用用 Rust 实现的 Zed 编辑器，有更好的性能，缺点是生态还不完善。
插件
由于很多插件开着非常浪费性能，所以我先是把所有插件都禁用，默认开启通用的插件。在不同项目中（工作区），仅在工作区中开启其环境所需要的插件。
我默认会打开的插件：
- Code Runner： 单文件代码运行
- Code Spell Checker： 拼写检查
- Document This： JSDoc 注释生成
- Git Graph：Git 图形化界面
- GitHub Copilot：AI 编程助手
- GitLens：看代码是谁写的和代码历史
- Markdown All in One：正如其名
- Wakatime：代码统计
主题：
不同框架的项目如 Vue, React，详情插件推荐会在后面的文章整理。
浏览器
我们公司现在很多同事都在用 Arc 浏览器，这个浏览器针对前端开发调试做了一些便捷功能，可以根据域名（localhost）自动进入开发模式。
我从公测开始使用，已经习惯了这个浏览器的设计、书签管理、交互和快捷键。前有 Arc 重新设计浏览器，后有 Figma 重新设计演示文档，设计师+前端开发真不错。推荐给大家。
搜索工具使用： Google + Devv + ChatGPT Desktop，之前是将网页保存到桌面 PWA 使用，现在 ChatGPT 推出了桌面版，可以直接快捷键提问。
Docker Management
【可选】根据项目实际需要。
我们使用 OrbStack 来管理本地的 Docker 容器，能耗相比 Docker Desktop 低很多，而且界面更简洁。
其他
办公软件的安装，不做过多赘述。这里推荐 PWA，很多应用可以在 Safari 打开，添加到桌面，其实就是保存 PWA 版本到桌面，比如 Notion、Devv、Gemini、Claude 等。
总结
按照上面的流程，在网络条件良好的条件下，配置一台新电脑大概只需要一个小时即可完成，快点赞收藏，帮你的同事快速进入开发，一起分担工作吧！
感谢阅读和关注，后续分享更多的前端开发经验。
