2.3 📦 软件安装清单

这节帮你把开发环境搭好。跟着做，10 分钟搞定。Mac 和 Windows 都有。

🗺️ 安装总览

每装完一个软件，都要验证一下是否安装成功。

1. 🔵 VS Code — 代码编辑器

VS Code 是你写代码的「工作台」。免费、好用、插件多，AI 编程的主战场。

下载安装

🍎 Mac：

# 方法1：直接下载
# 打开 https://code.visualstudio.com 下载 .dmg 文件，双击安装

# 方法2：用 Homebrew（如果有的话）
brew install --cask visual-studio-code

🪟 Windows：

# 方法1：直接下载
# 打开 https://code.visualstudio.com 下载 .exe 文件，双击安装

# 方法2：用 winget
winget install Microsoft.VisualStudioCode

验证安装

# 打开终端，输入：
code --version

# 看到类似输出就是成功了：
# 1.96.0
# x64

💡 如果提示 code 命令找不到：

Mac：打开 VS Code → 按 Cmd+Shift+P → 输入 shell command → 选择「Install code command in PATH」

Windows：安装时勾选「Add to PATH」选项

必装插件

安装完 VS Code 后，装这些插件（在左侧扩展商店搜索安装）：

必装（没它们活不了）：
├── Chinese (Simplified) — 中文界面
├── Prettier — 代码自动格式化
├── ESLint — JavaScript 代码检查
├── GitLens — Git 增强（看谁改了哪行）
└── Auto Rename Tag — 自动修改配对的 HTML 标签

强烈推荐（AI 加速）：
├── GitHub Copilot — AI 代码补全（$10/月，学生免费）
├── Continue — 开源 AI 编程助手（免费）
└── Cursor — 号称 AI 原生编辑器（VS Code 魔改版）

前端开发：
├── Live Server — 本地实时预览 HTML
├── Tailwind CSS IntelliSense — Tailwind 智能提示
└── ES7+ React Snippets — React 代码片段

安装插件的方法：

打开 VS Code
点击左侧边栏的扩展图标（方块拼图图标）
搜索插件名
点击「Install」

2. 🟢 Node.js — JavaScript 运行环境

Node.js 让 JavaScript 能在电脑上运行（不只是在浏览器里）。npm 是它的包管理器，装软件用的。

下载安装

🍎 Mac：

# 方法1：官网下载
# 打开 https://nodejs.org 下载 LTS 版本（左边那个）

# 方法2：用 Homebrew（推荐）
brew install node@20

# 方法3：用 nvm（版本管理器，最灵活）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc  # 或 source ~/.zshrc
nvm install 20
nvm use 20

🪟 Windows：

# 方法1：官网下载
# 打开 https://nodejs.org 下载 LTS 版本，双击安装
# 安装时一路 Next，勾选「Add to PATH」

# 方法2：用 winget
winget install OpenJS.NodeJS.LTS

# 方法3：用 nvm-windows
# 下载 https://github.com/coreybutler/nvm-windows/releases
# 安装后：
nvm install 20
nvm use 20

验证安装

# 检查 Node.js 版本
node --version
# 期望输出：v20.x.x（只要 >= 18 就行）

# 检查 npm 版本
npm --version
# 期望输出：10.x.x

为什么要装 LTS 版本？

Node.js 有两个版本线：
├── LTS（Long Term Support）← 装这个！稳定，有长期支持
└── Current                  ← 最新特性，但可能有 bug

版本号规则：
├── 偶数版本（18, 20, 22）= LTS ← 稳定
└── 奇数版本（19, 21, 23）= Current ← 实验性

3. 🔴 Git — 版本控制

Git 帮你管理代码的历史版本。改错了可以回退，多人可以同时改同一份代码。

下载安装

🍎 Mac：

# Mac 一般自带 Git，先检查一下：
git --version

# 如果没有或者版本太旧：
brew install git

# 或者安装 Xcode Command Line Tools（会弹窗提示）
xcode-select --install

🪟 Windows：

# 方法1：官网下载
# 打开 https://git-scm.com/download/win 下载安装

# 方法2：用 winget
winget install Git.Git

# 安装时注意：
# ✅ 选 VS Code 作为默认编辑器
# ✅ 选「Git from the command line and also from 3rd-party software」
# ✅ 选「Use OpenSSH」
# ✅ 选「Use Windows' default console window」

验证安装

git --version
# 期望输出：git version 2.x.x

首次配置（必做！）

# 设置你的身份（告诉 Git 你是谁）
git config --global user.name "你的名字"
git config --global user.email "你的邮箱@example.com"

# 设置默认分支名（现代做法用 main 而不是 master）
git config --global init.defaultBranch main

# 设置 VS Code 作为 Git 编辑器
git config --global core.editor "code --wait"

# 验证配置
git config --list

Git 基础命令速查

# 初始化一个 Git 仓库
git init

# 克隆一个远程仓库
git clone https://github.com/xxx/xxx.git

# 查看状态
git status

# 添加文件到暂存区
git add .                    # 添加所有文件
git add filename.js          # 添加指定文件

# 提交
git commit -m "你的提交说明"

# 推送到远程
git push

# 拉取远程更新
git pull

4. ⬛ 终端 — 你的命令行工具

终端是你和电脑「对话」的窗口。AI 编程需要大量使用终端命令。

🍎 Mac 用户

Mac 自带 Terminal，够用了。但推荐安装 iTerm2（更好看更强大）。

# 安装 iTerm2
brew install --cask iterm2

# 安装 Oh My Zsh（美化终端，可选）
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Mac 终端常用快捷键：

Cmd + T        — 新建标签页
Cmd + W        — 关闭标签页
Cmd + K        — 清屏
Cmd + D        — 分屏
Ctrl + C       — 终止当前命令
Ctrl + L       — 清屏
Tab            — 自动补全（超常用！）
↑ / ↓          — 浏览历史命令

🪟 Windows 用户

推荐使用 Windows Terminal（微软官方，比老的 cmd 好用太多）。

# 安装 Windows Terminal
# 方法1：Microsoft Store 搜索「Windows Terminal」安装
# 方法2：winget
winget install Microsoft.WindowsTerminal

但更重要的：装 WSL2

# 以管理员身份打开 PowerShell，运行：
wsl --install

# 安装完成后重启电脑
# 重启后会自动安装 Ubuntu
# 设置用户名和密码（这个密码是你设的，不是电脑密码）

# 验证 WSL2
wsl --version

为什么推荐 WSL2？

没有 WSL2 的 Windows 开发体验：
├── 路径用反斜杠 \
├── 很多 npm 包编译出错
├── 教程里的命令跑不通
└── 各种莫名其妙的问题

有了 WSL2：
├── 就是一个完整的 Linux 系统
├── 教程里的命令全部通用
├── 和 Mac 用户体验一致
└── 而且还能无缝访问 Windows 文件

WSL2 安装后的 VS Code 配置：

打开 VS Code
安装「WSL」扩展（微软官方）
在 WSL 终端输入 code . 就能在 VS Code 里编辑 Linux 文件

Windows 终端常用快捷键：

Ctrl + Shift + T  — 新建标签页
Ctrl + Shift + W  — 关闭标签页
Ctrl + L          — 清屏
Ctrl + C          — 终止当前命令
Tab               — 自动补全
↑ / ↓             — 浏览历史命令

5. 📦 包管理器 — npm / pnpm

包管理器就像「应用商店」，但给开发者用的。安装第三方库和工具。

npm（随 Node.js 自动安装）

# npm 已经随 Node.js 一起装了，验证一下：
npm --version
# 期望输出：10.x.x

# 设置国内镜像源（🇨🇳 国内用户必做！）
npm config set registry https://registry.npmmirror.com

# 验证镜像源
npm config get registry
# 期望输出：https://registry.npmmirror.com

pnpm（推荐，比 npm 更快更省空间）

# 安装 pnpm
npm install -g pnpm

# 验证
pnpm --version

# 🇨🇳 国内用户设置镜像源
pnpm config set registry https://registry.npmmirror.com

为什么推荐 pnpm？

npm vs pnpm：
├── 速度：pnpm 快 2-3 倍
├── 磁盘：pnpm 全局共享依赖，省空间
├── 安全：pnpm 默认不提升依赖（更安全）
└── 兼容：npm 能干的 pnpm 都能干

一句话：装 pnpm，然后用 pnpm 替代 npm。

常用包管理命令

# 安装项目依赖
pnpm install             # 安装 package.json 里的所有依赖
pnpm add express         # 安装某个包
pnpm add -D typescript   # 安装开发依赖（-D = --save-dev）
pnpm remove express      # 卸载某个包

# npm 也一样，只是把 pnpm 换成 npm
npm install
npm install express
npm install -D typescript
npm uninstall express

# 全局安装（装命令行工具用）
pnpm add -g create-next-app
npm install -g create-next-app

✅ 一键验证所有安装

在终端里运行以下命令，全部有版本号输出就说明环境搭好了：

echo "=== 开发环境检查 ==="
echo ""
echo "📦 Node.js:"
node --version
echo ""
echo "📦 npm:"
npm --version
echo ""
echo "📦 pnpm:"
pnpm --version
echo ""
echo "🔴 Git:"
git --version
echo ""
echo "🔵 VS Code:"
code --version
echo ""
echo "✅ 全部检查完毕！"

期望输出类似：

=== 开发环境检查 ===

📦 Node.js:
v20.18.0

📦 npm:
10.8.2

📦 pnpm:
9.15.0

🔴 Git:
git version 2.39.5

🔵 VS Code:
1.96.0
x64

✅ 全部检查完毕！

🔧 常见问题

Q: `command not found: node` / `'node' 不是内部或外部命令`

# 原因：Node.js 没装好，或者没加到 PATH

# Mac 解决方案：
# 重新安装 Node.js，用 nvm 管理版本
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

# Windows 解决方案：
# 重新安装 Node.js，确保勾选了「Add to PATH」
# 重启终端/电脑试试

Q: npm install 报错 `EACCES permission denied`

# Mac/Linux 解决方案：不要用 sudo！用 nvm 管理 Node.js
# 错误做法：sudo npm install -g xxx
# 正确做法：
nvm install 20
nvm use 20
npm install -g xxx

# Windows 解决方案：
# 以管理员身份运行 PowerShell

Q: Git clone 报错 `SSL certificate problem`

# 临时解决方案（不推荐长期使用）：
git config --global http.sslVerify false

# 推荐方案：更新 Git 到最新版本
# 或者用 SSH 方式 clone（后面会讲）

📝 环境配置记录表

安装完后，把这个表填一下，留着备用：

我的开发环境：
├── 操作系统：macOS ___ / Windows ___
├── Node.js：v___
├── npm：v___
HEREDOC_END

🗺️ 安装总览​

1. 🔵 VS Code — 代码编辑器​

下载安装​

验证安装​

必装插件​

2. 🟢 Node.js — JavaScript 运行环境​

下载安装​

验证安装​

为什么要装 LTS 版本？​

3. 🔴 Git — 版本控制​

下载安装​

验证安装​

首次配置（必做！）​

Git 基础命令速查​

4. ⬛ 终端 — 你的命令行工具​

🍎 Mac 用户​

🪟 Windows 用户​

5. 📦 包管理器 — npm / pnpm​

npm（随 Node.js 自动安装）​

pnpm（推荐，比 npm 更快更省空间）​

常用包管理命令​

✅ 一键验证所有安装​

🔧 常见问题​

Q: command not found: node / 'node' 不是内部或外部命令​

Q: npm install 报错 EACCES permission denied​

Q: Git clone 报错 SSL certificate problem​

📝 环境配置记录表​

🗺️ 安装总览

1. 🔵 VS Code — 代码编辑器

下载安装

验证安装

必装插件

2. 🟢 Node.js — JavaScript 运行环境

下载安装

验证安装

为什么要装 LTS 版本？

3. 🔴 Git — 版本控制

下载安装

验证安装

首次配置（必做！）

Git 基础命令速查

4. ⬛ 终端 — 你的命令行工具

🍎 Mac 用户

🪟 Windows 用户

5. 📦 包管理器 — npm / pnpm

npm（随 Node.js 自动安装）

pnpm（推荐，比 npm 更快更省空间）

常用包管理命令

✅ 一键验证所有安装

🔧 常见问题

Q: `command not found: node` / `'node' 不是内部或外部命令`

Q: npm install 报错 `EACCES permission denied`

Q: Git clone 报错 `SSL certificate problem`

📝 环境配置记录表