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

推荐方案

1. 大部分情况：Windows 本地安装 Node.js（方案一）最简单
2. 需要 Linux 环境：在 WSL 中开发，VS Code 通过 WSL 扩展连接
3. 跨平台项目：使用容器化（Docker）确保环境一致

这样你就可以在保持 WSL Node.js 环境的同时，让其他 Windows 编辑器使用本地安装的 Node.js。

VS Code 可以灵活地在 WSL 环境 和 Windows 本地环境 之间切换，甚至同时使用两种环境。

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 窗口左下角，点击 远程连接指示器：

><

可以：

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

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 }

最佳实践建议

1. 项目位置规划：
   • WSL 项目：放在 /home/user/projects/
   • Windows 项目：放在 C:\Users\user\Projects\
2. Git 配置：

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

3. 性能优化：
   • WSL 项目性能：将项目放在 WSL 文件系统中（非 /mnt/c/）
   • 大型项目：考虑使用 WSL 2（如果尚未使用）
4. 环境变量管理：

   // 环境特定的启动配置
   {
     "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：如何迁移项目环境？

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

Q4：配置文件冲突？

VS Code 会优先使用：

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

总结

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

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

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