WSL 开发环境搭建：Node、Git、zsh、VS Code

WSL 装完进 Ubuntu 之后，新手最常踩的坑是跟着某篇老教程一路 sudo apt install nodejs git zsh 装完，结果 Node 版本过低、全局包要 sudo、切换版本一团糟。这一篇把前端日常真正需要的几样工具一次性讲清楚——Git 和凭证共享、用 fnm 装 Node、pnpm、zsh 美化、VS Code Remote、GitHub SSH key——并顺手把几个典型踩坑点点出来。

Git 和 Windows 凭证共享

Ubuntu 自带 Git，只需要加全局配置：

git config --global user.name "你的名字"
git config --global user.email "你的邮箱"
git config --global init.defaultBranch main
git config --global pull.rebase false
git config --global core.editor "code --wait"

一个很实用的小技巧是让 WSL 共享 Windows 的 Git 凭证——这样你在 Windows 上登的 GitHub 账号在 WSL 里能直接用，不用在 Linux 侧再登一遍。前提是 Windows 上装了 Git for Windows，然后：

git config --global credential.helper \
  "/mnt/c/Program\ Files/Git/mingw64/bin/git-credential-manager.exe"

路径按你实际安装位置调。

Node：用 fnm，别用 apt

sudo apt install nodejs 装出来的 Node 版本老、升级麻烦、全局包要 sudo，几乎没有值得用它的理由。推荐 fnm——Rust 写的版本管理器，比 nvm 快很多：

curl -fsSL https://fnm.vercel.app/install | bash
# 关终端重开让环境变量生效

fnm install 22
fnm default 22
node -v

包管理器用 pnpm，速度和磁盘占用都比 npm 好一档。通过 Node 自带的 corepack 开启：

corepack enable
corepack prepare pnpm@latest --activate
pnpm -v

之后日常用 pnpm install 和 pnpm add 替代 npm 系列命令。

zsh 配几个让终端舒服的东西

默认 bash 够用，但 zsh 配合补全和主题会舒服很多。装完设为默认 shell，再装 oh-my-zsh：

sudo apt install zsh -y
chsh -s $(which zsh)
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

两个最值得装的插件是 zsh-autosuggestions（灰色智能补全）和 zsh-syntax-highlighting（命令语法高亮）：

git clone https://github.com/zsh-users/zsh-autosuggestions \
  ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-syntax-highlighting \
  ~/.oh-my-zsh/custom/plugins/zsh-syntax-highlighting

打开 ~/.zshrc，把 plugins=(git) 改成 plugins=(git zsh-autosuggestions zsh-syntax-highlighting)，source ~/.zshrc 生效。

想让提示符更漂亮可以加个 Starship：

curl -sS https://starship.rs/install.sh | sh
echo 'eval "$(starship init zsh)"' >> ~/.zshrc

顺手在 Windows Terminal 里装一个 Nerd Font（比如 JetBrainsMono Nerd Font）设为终端字体，图标就全亮了。

VS Code + Remote WSL

Windows 上装好 VS Code 后，到扩展市场搜 WSL（Microsoft 官方）装上。然后在 WSL 终端里：

cd ~/code/your-project
code .

VS Code 会以 Remote-WSL 模式打开，左下角显示 WSL: Ubuntu。这时所有扩展都跑在 WSL 里——ESLint 和 Prettier 读的是 Linux 下的 node_modules、集成终端是 zsh、文件系统就是 Linux——跨平台的各种坑一次性都消失了。

前端日常强烈推荐的扩展：ESLint、Prettier、GitLens、Error Lens（错误直接显示在行尾）、Tailwind CSS IntelliSense，以及下一篇要装的 Claude Code 官方扩展。

GitHub SSH Key

为了 git push 不每次输密码，生成 SSH key 挂到 GitHub：

ssh-keygen -t ed25519 -C "你的邮箱"
cat ~/.ssh/id_ed25519.pub

复制输出，到 github.com/settings/keys 新建一个 SSH key 粘贴进去。测试连接：

ssh -T [email protected]
# Hi xxx! You've successfully authenticated

看到这句就算通了。

一次验收

把下面几条跑一遍全有输出就齐活了：

git --version
node -v
pnpm -v
zsh --version
code --version

环境就绪，下一篇正式安装 Claude Code，跑起来第一个会话。

参考资料

• fnm — Node 版本管理
• oh-my-zsh
• Starship
• VS Code WSL 文档
• Nerd Fonts