快速配置开发环境

一、安装开发应用

安装前端开发必备工具软件，全部官方渠道下载，安全稳定，安装后登录对应账号同步个人配置。

必装软件清单：Chrome、VSCode、XCode、Warp、Snipaste、Rectangle

Warp（新一代 Rust 终端，内置 AI、智能补全、团队协作）：https://www.warp.dev/
XCode（App Store安装，必备开发编译环境）
Snipaste（截图置顶工具，开发高效截图批注）：https://www.snipaste.com/
Rectangle（Mac窗口分屏、大小快速调整）
Chrome（开发调试浏览器）、VSCode（代码编辑器）

所有软件安装完成后，登录个人账号，同步主题、快捷键、插件、偏好设置。

二、基础开发环境配置

2.1 HomeBrew（Mac万能包管理器）

Mac 必备包管理工具，后续所有命令行软件均通过 brew 安装。

官网：https://brew.sh/index_zh-cn

官方安装命令：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

✅ 安装验证：

brew -v

💡 常用brew命令：

brew update          # 更新brew自身
brew install 软件名   # 安装软件
brew uninstall 软件名 # 卸载软件
brew list            # 查看已安装软件

2.2 Oh My Zsh（终端美化增强）

优化原生终端，支持主题、插件、命令补全，大幅提升终端使用效率。

官网：https://ohmyz.sh/

安装命令：

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

安装完成后重载配置：

source ~/.zshrc

2.2.1 必备插件安装（自动补全、语法高亮）

先安装插件本体，再配置启用：

# 自动补全插件
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

# 语法高亮插件
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

编辑配置文件启用插件：

vim ~/.zshrc

找到 plugins=() 修改为：

plugins=(git zsh-autosuggestions zsh-syntax-highlighting autojump)

💡 新增 autojump 目录快速跳转插件，替代繁琐cd命令

最后重载配置生效：

source ~/.zshrc

2.3 Node 版本管理

推荐两种方式管理 Node 版本，根据个人偏好选择。

方案一：pnpm env（推荐，轻量高效）

pnpm 不仅是高性能包管理器，还能直接管理 Node 版本，无需额外安装 nvm 等工具。

先通过 Homebrew 安装 pnpm：

brew install pnpm

pnpm env 常用命令：

pnpm env ls                # 查看已安装的 Node 版本
pnpm env ls-remote         # 查看所有可安装的 Node 版本
pnpm env use 20 --global   # 全局安装并使用 Node 20
pnpm env use latest --global # 安装并使用最新版 Node
pnpm env remove 18         # 卸载指定版本

💡 安装完 Node 后，可以通过 pnpm env use 直接切换版本，不需要其他工具。相比 nvm，pnpm env 命令更简洁、安装更快。

方案二：NVM（Node版本管理器）

经典多版本 Node 切换工具，生态成熟，兼容性好。

官方文档：https://github.com/nvm-sh/nvm/blob/master/README.md

安装命令：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.5/install.sh | bash

安装出错可参考排查文档：https://www.jianshu.com/p/622ad36ee020

安装完成重载配置、验证版本：

source ~/.zshrc 
nvm -v

NVM常用核心命令

nvm ls-remote        # 查看所有可安装Node版本
nvm install 20       # 安装LTS长期稳定版node20
nvm install latest   # 安装最新版
nvm use 20           # 切换使用node20
nvm alias default 20 # 设置默认node版本
nvm ls               # 查看已安装版本
nvm current          # 查看当前使用版本

2.4 包管理器镜像配置（解决下载慢、超时）

如果使用 pnpm，镜像配置方式如下：

# 设置淘宝镜像源
pnpm config set registry https://registry.npmmirror.com/

# 验证是否配置成功
pnpm config get registry

如果使用 npm，对应命令：

npm set registry https://registry.npmmirror.com/
npm config get registry

💡 如需恢复官方源：pnpm config set registry https://registry.npmjs.org/ 或 npm set registry https://registry.npmjs.org/

三、Git & GitHub SSH 完整配置（免密推送）

配置SSH密钥，实现GitHub拉取、推送代码免账号密码，开发必备。

3.1 全局Git账号配置

# 替换为自己的GitHub用户名、邮箱
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

# 查看配置是否生效
git config --global --list

3.2 生成SSH密钥对

# 替换为你的GitHub邮箱
ssh-keygen -t ed25519 -C "你的GitHub注册邮箱"

全程直接回车（无需设置密码，按需选择），生成密钥对。

3.3 加载密钥并复制公钥

# 启动代理并加载私钥
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519

# 复制公钥（Mac专用）
cat ~/.ssh/id_ed25519.pub | pbcopy

3.4 GitHub绑定公钥并测试连接

1. 打开GitHub → 头像 → Settings → SSH and GPG keys → New SSH key

2. 粘贴复制的公钥，自定义标题（如MacBook开发机），保存

3. 终端测试连接：

ssh -T git@github.com

出现 Hi 用户名! You've successfully authenticated 即为配置成功。

3.5 Git Alias 快捷命令配置

通过配置 Git 别名（alias），用简短命令替代常用长命令，大幅提升提交流程效率。

常用快捷命令配置

# 基础快捷命令
git config --global alias.co checkout
git config --global alias.cb "checkout -b"
git config --global alias.cp cherry-pick

# 日志美化（图形化展示提交历史）
git config --global alias.lg "log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

配置后使用示例：

git co feature-branch       # 切换分支：git checkout feature-branch
git cb new-feature          # 创建并切换分支：git checkout -b new-feature
git cp abc1234              # 拣选提交：git cherry-pick abc1234
git lg                      # 查看美化后的提交日志

一键配置脚本

可以直接执行以下脚本一次性完成所有快捷配置：

git config --global alias.co checkout && \
git config --global alias.cb "checkout -b" && \
git config --global alias.cp cherry-pick && \
git config --global alias.st status && \
git config --global alias.cm "commit -m" && \
git config --global alias.cam "commit -am" && \
git config --global alias.lg "log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

💡 查看所有已配置的别名：git config --global --list | grep alias

四、终端快捷工具补充（提升开发效率）

4.1 autojump 目录快速跳转（j命令）

搭配zsh插件使用，替代cd，快速跳转历史访问目录

brew install autojump
source ~/.zshrc

常用用法：j 目录名 模糊跳转，j -s 查看历史目录权重

五、收尾配置

所有配置完成后，重启终端，执行以下命令确保全部配置生效：

source ~/.zshrc

至此，Mac前端基础开发环境全部配置完成，可正常进行项目开发、依赖安装、Git代码管理。

（注：部分内容可能由 AI 生成）

快速配置开发环境

On this page