概览
这份笔记整理了在 macOS 上搭建前端开发环境的常见步骤，适合作为新电脑初始化、系统重装后的恢复清单，或给前端初学者使用的标准环境搭建流程。
内容分为两部分：
- 基础开发环境
- 命令行效率工具
一、基础开发环境
安装顺序
- 安装 Homebrew
- 安装 nvm 与 Node.js
- 安装 pnpm
- 安装 Git 并完成基础配置
1. 安装 Homebrew
安装命令
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"配置环境变量（Apple Silicon）
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"验证
brew -v说明
- Apple Silicon 芯片的 Homebrew 默认安装路径是
/opt/homebrew - 将
brew shellenv写入~/.zprofile后，终端重启即可自动生效 - Homebrew 是 macOS 上最常用的包管理器，后续大部分工具都可以通过它安装
2. 安装 nvm 与 Node.js
安装 nvm
brew install nvm
mkdir ~/.nvm写入 zsh 配置
echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc
echo '[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"' >> ~/.zshrc
source ~/.zshrc安装 Node.js（推荐 LTS）
nvm install --lts
nvm use --lts
node -v说明
nvm用于管理多个 Node.js 版本- 相比直接安装固定版本的 Node，使用
nvm更适合前端开发场景 - 对大多数项目来说，LTS（长期支持版）是更稳妥的选择
3. 安装 pnpm
安装命令
npm install -g pnpm验证
pnpm -v说明
pnpm是现代前端项目里非常常见的包管理器- 相比
npm和yarn，通常更节省磁盘空间，安装速度也更快 - 很多新项目已经默认推荐使用
pnpm
4. 安装 Git
安装命令
brew install git基础配置
git config --global user.name "你的名字"
git config --global user.email "你的邮箱"说明
- Git 是前端开发的基础工具，几乎所有项目都会用到
- 建议先完成全局用户名和邮箱配置，避免提交记录信息缺失
- 如果你有公司和个人两个身份，后续可以在不同仓库里设置局部配置
二、提升效率的命令行工具（强烈推荐）
这些工具不是“能不能开发”的必需品，但会明显改善终端体验，尤其适合长期做前端开发的人。
5. fzf（模糊搜索神器）
安装命令
brew install fzf启用
$(brew --prefix)/opt/fzf/install用途
- 模糊搜索文件
- 快速搜索命令历史
- 快速切换目录
- 与很多 CLI 工具结合使用时体验很好
说明
fzf 基本算是终端效率工具的“底层能力”之一。装好之后，很多操作都会更快。
6. zoxide（智能 cd）
安装命令
brew install zoxide配置
echo 'eval "$(zoxide init zsh)"' >> ~/.zshrc
source ~/.zshrc使用示例
z project-name用途
- 根据历史使用频率快速跳转目录
- 替代传统
cd的重复路径输入
说明
越常去的目录，zoxide 越容易猜中。用久了之后，跳项目目录会非常顺手。
7. bat（更强的 cat）
安装命令
brew install bat使用示例
bat index.ts用途
- 查看文件内容时显示语法高亮
- 自动显示行号
- 更适合阅读代码、配置文件和日志
说明
如果你经常在终端里看源码，bat 会比原生 cat 舒服很多。
8. eza（现代版 ls）
安装命令
brew install eza推荐 alias
alias ls="eza --icons"
alias ll="eza -la --icons"用途
- 更清晰地展示目录结构
- 支持图标、颜色和更友好的文件信息展示
- 替代原生
ls
说明
eza 能显著提升终端浏览目录时的可读性，适合和 bat 一起搭配使用。
相关笔记
一句话总结
如果只装最核心的内容，就先装：
Homebrew + nvm + Node LTS + pnpm + Git
如果想让终端体验明显更顺，再加：
fzf + zoxide + bat + eza