已有 WSL 环境的情况下，在 Windows 本地安装 Node.js（附：VSCode 的三种工作模式）

本文介绍了在已有WSL环境下如何在Windows本地安装Node.js的三种方案：

1)直接在Windows安装Node.js（推荐）；

2)共享WSL中的Node.js；

3)双环境共存灵活切换。

---

详细说明了每种方案的安装步骤、验证方法和配置技巧，包括环境变量设置、编辑器配置等。

---

同时提供了VSCode的三种工作模式（双窗口独立、单一窗口切换、多文件夹工作区）以及常见问题解决方案。

---

最佳实践建议根据项目类型选择环境，前端项目用Windows本地，需要Linux特性的项目用WSL，两个环境可并行工作。

---

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

---

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

---

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

1. 安装 Node.js

• 访问 Node.js 官网

• 下载 LTS 版本的 Windows 安装包（.msi）

• 运行安装程序，按默认选项安装即可

---

关联阅读推荐

---

使用 Docker 的 Node.js（附：三种 Node.js 环境详细对比）

---

nodejs：nvm vs fnm 详细对比

---

2. 验证安装

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

bash

node --version
npm --version

---

Node.js官方安装程序自带的包管理器只有npm。

---

如何正确安装pnpm

既然Node.js环境已经装好（有node和npm），现在你可以用以下任何一种方法，一分钟内安装好pnpm。

---

方法一：使用npm安装（最推荐，最通用）

打开你的命令提示符（CMD） 或 PowerShell，运行以下命令：

bash

npm install -g pnpm

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

---

方法二：使用PowerShell脚本安装（Windows专用）

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

powershell

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

验证与使用

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

bash

pnpm -v

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

---

总结与建议

1. 核心原因 ：Node.js MSI安装程序不会安装pnpm，你需要手动安装。

2. 最佳行动 ：打开命令行，运行 npm install -g pnpm。

3. 后续项目 ：如果你想在特定项目中强制使用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

bash

# 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：

batch

@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 指定平台：

text

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 实例：

bash

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

text

><

可以：

1. 关闭当前远程连接 → 切回 Windows 本地

2. 选择新的远程目标 → 连接到 WSL 或其他容器

3. 重新打开文件夹 → 在不同环境打开同一项目

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

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

json

// 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 中打开多个终端：

json

// 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 支持环境特定的设置：

json

// 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本地）

bash

# Windows PowerShell
cd C:\projects\react-app
code .  # 打开本地环境

# 在 VS Code 中使用 Windows 的终端
npm install  # 使用 Windows Node.js
npm start

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

bash

# WSL 终端
cd ~/projects/node-api
code .  # 自动连接到 WSL

# 在 VS Code 中使用 WSL 终端
npm install  # 使用 WSL 中的 Node.js
npm run dev

场景3：混合开发

bash

# 同时打开两个窗口
# 窗口1：WSL 后端
wsl
cd ~/projects/backend
code .

# 窗口2：Windows 前端（新 PowerShell 窗口）
cd C:\projects\frontend
code .

---

命令行快速切换

1. 强制在特定环境打开

bash

# 强制在 Windows 中打开
code --disable-remote C:\project

# 强制在 WSL 中打开
code --remote wsl+Ubuntu /home/user/project

2. 常用命令

bash

# 查看当前连接
code --status

# 列出可用远程目标
code --list-remote

3. 使用别名

在 PowerShell 配置文件添加：

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 配置：

   bash

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

3. 性能优化：

   • WSL 项目性能：将项目放在 WSL 文件系统中（非 /mnt/c/）

   • 大型项目：考虑使用 WSL 2（如果尚未使用）

4. 环境变量管理：

   json

   // 环境特定的启动配置
   {
     "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。两个环境可以无缝并行工作。