如何通过WebStorm/VSCode远程编辑Win11 WSL上的Node/Express项目？

VSCode 远程连接WSL文件系统 #

1. 安装VSCode的Remote - SSH插件
2. 编辑SSH配置文件：
   • 打开VSCode命令面板（Ctrl+Shift+P），输入Remote-SSH: Open SSH Configuration File，选择用户目录下的~/.ssh/config
   • 添加以下配置：

     Host WSL-Ubuntu
         HostName 192.168.0.59
         User myuser
         Command ssh -t myuser@192.168.0.59 "wsl ~"
         RequestTTY yes
     

3. 连接WSL：
   • 再次打开命令面板，输入Remote-SSH: Connect to Host，选择配置好的WSL-Ubuntu
   • 连接成功后，VSCode会加载WSL文件系统，直接打开你的Node/Express项目目录即可编辑

WebStorm 远程连接WSL文件系统 #

1. 打开WebStorm，进入File > Settings > Build, Execution, Deployment > Deployment
2. 添加SSH配置：
   • 点击左上角+号，选择SFTP，命名为WSL-Connection
   • 在Connection标签页：
     • Host: 192.168.0.59
     • Port: 22
     • User name: myuser
     • 点击Advanced，在Remote command输入框填写wsl ~，然后点击Test Connection确认连接正常
   • 在Mapping标签页：
     • 取消Local path勾选
     • Deployment path on server填写WSL项目的绝对路径，比如/home/your-wsl-username/your-project
3. 访问WSL文件：
   • 打开WebStorm的Remote Host工具窗口，右键项目目录选择Download and Open（或直接编辑，WebStorm会自动同步）
   • 调试运行：在Run/Debug配置中选择远程Node.js，配置为连接到WSL的Node环境即可

注意事项 #

• 确保Windows主机的SSH服务已开启，且防火墙允许22端口远程连接
• WSL内已安装好Node.js、Express等开发依赖，连接后可直接在终端运行项目
• 测试SSH连接：本地终端执行ssh WSL-Ubuntu（对应VSCode配置的Host名），确认能进入WSL的bash环境

内容的提问来源于stack exchange，提问作者Wasteland