Windows 本地与 WSL 双环境安装 Node.js 及 VSCode 配置

本地（而非 WSL 内）安装 Node.js

在已有 WSL 环境的情况下，如果你想在 Windows 本地（而非 WSL 内）安装 Node.js 以便其他 Windows 编辑器（如 WebStorm、Sublime、Notepad++ 等）使用，可以按照以下步骤操作。

方案一：Windows 本地安装 Node.js

1. 安装 Node.js

访问 Node.js 官网
下载 LTS 版本的 Windows 安装包（.msi）
运行安装程序，按默认选项安装即可

2. 验证安装

打开 Windows 的 PowerShell 或 CMD（不是 WSL 终端）：

node --version
npm --version

Node.js 官方安装程序自带的包管理器只有 npm。如何正确安装 pnpm？既然 Node.js 环境已经装好（有 node 和 npm），现在你可以用以下任何一种方法，一分钟内安装好 pnpm。

方法一：使用 npm 安装（最推荐，最通用） 打开你的 命令提示符（CMD） 或 PowerShell，运行以下命令：

npm install -g pnpm

这个命令会利用你已有的 npm，全局（-g）安装 pnpm。安装完成后，新开一个命令行窗口，再运行 pnpm -v 就能看到版本号了。

方法二：使用 PowerShell 脚本安装（Windows 专用） 如果你喜欢，也可以在 PowerShell（管理员身份运行）中使用独立脚本安装：

iwr https://get.pnpm.io/install.ps1 -useb | iex

验证与使用 安装成功后，务必关闭当前命令行窗口，再打开一个新的（这是为了重新加载环境变量），然后输入：

pnpm -v

如果显示版本号（例如 9.x.x），就大功告成了。之后你就可以在你的项目目录下，用 pnpm install 代替 npm install 来安装依赖了。

总结与建议 核心原因：Node.js MSI 安装程序不会安装 pnpm，你需要手动安装。最佳行动：打开命令行，运行 npm install -g pnpm。后续项目：如果你想在特定项目中强制使用 pnpm，可以在项目根目录创建 .npmrc 文件并写入：package-manager=pnpm@latest。

如果你在按照以上步骤操作后，pnpm -v 命令仍然不识别，那很可能是系统 环境变量（Path） 没有自动更新。

3. 配置系统环境变量（通常自动完成）

安装程序会自动将 Node.js 和 npm 添加到系统 PATH。

4. 在编辑器中配置

VS Code：使用 WSL 扩展，已经可以直接访问 WSL 中的 Node.js
其他编辑器：默认会使用 Windows 本地的 Node.js

方案二：共享 WSL 的 Node.js（需要配置）

如果你希望 Windows 编辑器使用 WSL 中的 Node.js：

1. 在 WSL 中安装 Node.js

# Ubuntu/Debian WSL
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs
# 验证
node --version

2. 创建访问 WSL Node.js 的脚本

在 Windows 上创建批处理文件 wsl-node.bat：

@echo off
wsl node %*

3. 配置编辑器

部分编辑器允许指定 Node.js 解释器路径，可以指向这个批处理文件。

方案三：双环境共存（灵活切换）

1. 安装 Windows 版 Node.js（同方案一）

2. 使用不同终端

WSL 终端 → 使用 WSL 中的 Node.js
Windows 终端/PowerShell → 使用 Windows 的 Node.js

3. 识别当前环境

检查终端类型：echo $SHELL（WSL）vs 无此变量（Windows）
检查路径格式：/mnt/c/（WSL）vs C:\（Windows）

常见问题解决

1. 版本冲突

如果遇到版本问题，可以：

在项目根目录创建 .npmrc 指定平台：

script-shell=wsl.exe bash

2. 包管理器选择

Windows 本地：使用 npm 或 yarn（Windows 版）
WSL 内：使用 npm、yarn 或 pnpm

3. 项目位置建议

WSL 项目：放在 WSL 文件系统内（/home/username/projects/）
Windows 项目：放在 Windows 分区（C:\projects\）

4. 性能考虑

对于前端项目，Windows 本地 Node.js 性能足够
对于需要 Linux 环境的后端项目，建议使用 WSL 中的 Node.js

VS Code 三种主要使用模式

1. 模式一：双窗口独立工作

同时打开两个 VS Code 实例：

# 在 Windows PowerShell 中打开本地项目
code C:\Users\YourName\Projects\windows-project
# 在 WSL 终端中打开 WSL 项目
wsl cd ~/projects/wsl-project
code .

这样你会看到两个独立的 VS Code 窗口：

一个连接到 WSL 环境（右下角显示 WSL: Ubuntu）
一个使用 Windows 本地环境（右下角无 WSL 标识）

2. 模式二：单一窗口切换远程环境

在 VS Code 窗口左下角，点击 远程连接指示器：

><

可以：

关闭当前远程连接 → 切回 Windows 本地
选择新的远程目标 → 连接到 WSL 或其他容器
重新打开文件夹 → 在不同环境打开同一项目

3. 模式三：多文件夹工作区

创建包含不同环境文件夹的工作区：

// project.code-workspace
{
  "folders": [
    {
      "name": "WSL Project",
      "uri": "vscode-remote://wsl+Ubuntu/home/user/wsl-project"
    },
    {
      "name": "Windows Project",
      "path": "C:\\Users\\user\\windows-project"
    }
  ]
}

配置技巧

1. 区分终端

在 VS Code 中打开多个终端：

// settings.json
{
  "terminal.integrated.profiles.windows": {
    "PowerShell": {
      "source": "PowerShell",
      "icon": "terminal-powershell"
    },
    "WSL Bash": {
      "path": "wsl.exe",
      "args": ["-d", "Ubuntu"],
      "icon": "terminal-bash"
    }
  }
}

2. 配置文件分离

VS Code 支持 环境特定的设置：

Windows 专用设置 .vscode/settings.json
WSL 专用设置 .vscode/remote/settings.json 或 .vscode/settings.json 配合远程设置

3. 扩展管理

用户扩展：安装在 Windows 本地，部分会自动在 WSL 中使用
WSL 扩展：特定扩展（如某些语言支持）需要在 WSL 中重新安装
检查扩展：在扩展面板查看 "Local - Installed" vs "WSL: Ubuntu - Installed"

实际工作流示例

场景 1：前端项目（Windows 本地）

# Windows PowerShell
cd C:\projects\react-app
code .
# 打开本地环境
# 在 VS Code 中使用 Windows 的终端
npm install
# 使用 Windows Node.js
npm start

场景 2：后端项目（WSL 环境）

# WSL 终端
cd ~/projects/node-api
code .
# 自动连接到 WSL
# 在 VS Code 中使用 WSL 终端
npm install
# 使用 WSL 中的 Node.js
npm run dev

场景 3：混合开发

# 同时打开两个窗口
# 窗口 1：WSL 后端
wsl cd ~/projects/backend
code .
# 窗口 2：Windows 前端（新 PowerShell 窗口）
cd C:\projects\frontend
code .

命令行快速切换

1. 强制在特定环境打开

# 强制在 Windows 中打开
code --disable-remote C:\project
# 强制在 WSL 中打开
code --remote wsl+Ubuntu /home/user/project

2. 常用命令

# 查看当前连接
code --status
# 列出可用远程目标
code --list-remote

3. 使用别名

在 PowerShell 配置文件添加：

function code-wsl { code --remote wsl+Ubuntu $args }
function code-win { code --disable-remote $args }

最佳实践建议

项目位置规划：
- WSL 项目：放在 /home/user/projects/
- Windows 项目：放在 C:\Users\user\Projects\

Git 配置：

# Windows：使用 Windows Git
# WSL：使用 WSL Git
# 避免跨环境操作 Git 仓库

性能优化：
- WSL 项目性能：将项目放在 WSL 文件系统中（非 /mnt/c/）
- 大型项目：考虑使用 WSL 2（如果尚未使用）

环境变量管理：

// 环境特定的启动配置
{
  "configurations": [
    {
      "name": "Windows Debug",
      "env": {
        "NODE_ENV": "development"
      }
    },
    {
      "name": "WSL Debug",
      "env": {
        "NODE_ENV": "development"
      }
    }
  ]
}

常见问题

Q1：如何知道当前在哪个环境？

查看 VS Code 窗口 左下角
查看状态栏的 远程指示器
检查终端路径格式

Q2：扩展需要重复安装吗？

UI 类扩展（主题、图标）：自动同步
工具类扩展（语言支持、调试器）：部分需要 WSL 中安装
查看提示：扩展面板会显示 "Install in WSL" 按钮

Q3：如何迁移项目环境？

关闭当前文件夹
点击远程连接指示器
选择 "Reopen Folder in WSL" 或 "Reopen Folder Locally"

Q4：配置文件冲突？

VS Code 会优先使用：

.vscode/remote/settings.json（远程特定）
.vscode/settings.json（通用）
用户全局设置

总结

VS Code 的远程开发功能让你可以：

✅ 同时使用两种环境
✅ 轻松切换环境
✅ 保持各自环境的独立性
✅ 享受相同的编辑器体验

建议做法：根据项目需求选择环境，前端/简单项目用 Windows，需要 Linux 特性的项目用 WSL。两个环境可以无缝并行工作。