VSCode的Remote Development扩展包:远程开发全家桶

13次阅读

vscode Remote Development扩展包支持ssh、容器和WSL三种远程开发模式。需先安装该扩展包,再分别配置Remote-SSH连接linux服务器、Remote-Containers在docker中开发、Remote-WSL在windows子系统中开发。

VSCode的Remote Development扩展包:远程开发全家桶

如果您希望在本地编辑器中直接连接并开发远程服务器上的项目,VSCode 的 Remote Development 扩展包提供了统一入口来启用 SSH、容器和 WSL 三种远程开发模式。以下是配置与使用该扩展包的具体操作路径:

本文运行环境:MacBook Pro,macos Sequoia

一、安装 Remote Development 扩展包

Remote Development 是一个扩展包合集,包含 Remote – SSH、Remote – Containers 和 Remote – WSL 三个核心扩展,需通过 VSCode 扩展市场一次性安装。

1、启动 VSCode,点击左侧活动栏的扩展图标(或按 Cmd+Shift+X)。

2、在搜索框中输入 Remote Development

3、在搜索结果中找到官方发布的 Remote Development 扩展包(Publisher: microsoft),点击“安装”按钮。

4、安装完成后,VSCode 将自动提示重启窗口,点击“立即重启”以激活全部子扩展。

二、通过 Remote – SSH 连接远程 Linux 服务器

Remote – SSH 允许您将远程 Linux 主机作为开发环境,所有代码运行、调试和终端操作均在远端执行,本地仅负责编辑与界面渲染。

1、确保远程服务器已开启 SSH 服务,并可通过终端执行 ssh user@host 成功登录。

2、在 VSCode 中按下 Cmd+Shift+P,输入并选择 Remote-SSH: Connect to Host…

3、选择 Add New SSH Host…,输入类似 ssh user@192.168.1.100 的连接字符串

4、VSCode 将引导您选择 SSH 配置文件位置(默认 ~/.ssh/config),并自动写入新主机条目。

5、再次调用 Remote-SSH: Connect to Host…,选择刚添加的主机,等待 VSCode 在远端部署 server 后自动打开远程窗口。

三、使用 Remote – Containers 在 Docker 容器中开发

Remote – Containers 支持将当前工作区加载到指定 Docker 镜像或自定义 Dockerfile 构建的容器中,实现环境隔离与可复现开发环境。

1、在项目根目录下创建 .devcontainer/devcontainer.json 文件,或使用命令面板执行 Dev Container: Add Dev Container Configuration Files…

2、选择基础镜像(如 node.js 18)或从 Dockerfile 初始化配置。

3、修改 devcontainer.json,可添加 extensions、forwardPorts、customizations 等字段,例如设置 “extensions”: [“dbaeumer.vscode-eslint”]

4、执行 Dev Container: Reopen in Container,VSCode 将构建镜像(若未缓存)、启动容器并重载窗口。

5、此时全部文件操作、终端命令及调试器均运行于容器内部,/workspace 即为当前项目挂载路径。

四、启用 Remote – WSL 在 Windows 子系统中开发

Remote – WSL 允许 VSCode 直接加载 WSL 发行版(如 ubuntu)中的项目路径,利用 Linux 工具链进行开发,同时保留 Windows 图形界面体验。

1、确认已启用 Windows Subsystem for Linux 并至少安装一个发行版(如 Ubuntu 22.04)。

2、在 Windows 上启动 VSCode(非 WSL 内启动),打开任意本地文件夹后,按下 Cmd+Shift+P。

3、输入并选择 Remote-WSL: New Window,新窗口将自动连接至默认 WSL 发行版。

4、在新窗口中,通过文件 → 打开文件夹,浏览路径 \wsl$Ubuntuhomeusernameproject 并打开目标项目。

5、VSCode 将在 WSL 环境中安装 server 组件,此后终端、调试、git 均调用 WSL 内对应工具链。

text=ZqhQzanResources