VSCode 远程开发

介绍

VSCode 是由 Microsoft 推出的一款轻量级的代码编辑器，支持多种编程语言，拥有丰富的插件生态。

VSCode Remote 是一款由微软推出的远程开发工具，可以帮助开发者在本地使用 VSCode 远程开发功能。本文将介绍 VSCode Remote 的基本使用方法，帮助你更好地使用 VSCode 远程开发功能。

环境准备

我的本地一台安装了 Windows 11 的电脑，上面安装了 VSCode, Docker, WSL2 等工具。远程服务器是一台安装了 Ubuntu 20.04 的云服务器。

Remote SSH

Remote SSH 扩展允许您在任何远程计算机、虚拟机或具有正在运行的 SSH 服务器的容器上打开远程文件夹，并充分利用 VS Code 的功能集。连接到服务器后，您可以与远程文件系统上任何位置的文件和文件夹进行交互。

安装 Remote SSH

打开 VSCode，点击左下角的 远程资源管理器 图标，然后点击 SSH

点击SSH之后,会自动安装Remote - SSH插件，这里会显示安装进度。

安装完成之后会提示添加一个新的 SSH 主机，点击添加新的SSH主机，然后输入远程服务器的 IP 地址和用户名，然后回车即可。

比如这样

ssh root@justcurd.com

使用 Remote SSH

完成上面的所有操作之后，点击左下角的 远程资源管理器 图标，然后点击 连接到主机，选择刚刚添加的 SSH 主机，点击连接等待下一步操作。

• 第一次连接,会让你选择远程服务器的类型,这里选择Linux,下一步选择继续即可

• 输入密码,连接成功后,会在左下角显示连接成功的信息
  

• 连接成功之后，VSCode 会在远程服务器上安装一些必要的依赖，这个过程可能会比较慢，耐心等待即可。
  

使用 Remote SSH 开发

• 连接成功之后，我们现在可以在 VSCode 中打开远程服务器上的文件夹，编辑文件，运行命令等。

点击左下角的 远程资源管理器 图标，然后点击 连接到主机，选择刚刚添加的 SSH 主机，这个时候会打开一个新的 VSCode 窗口，提示你输入密码，输入密码之后，就可以

在远程服务器上编辑文件了。

• 在远程服务器上编辑文件

打开 VSCode 的终端,创建一个我们的工程目录

mkdir myproject
cd myproject
touch index.js

此时,我们在远程服务器上创建了一个 myproject 目录,并且在 myproject 目录下创建了一个 index.js 文件。

这个时候，我们可以在终端中输入code . 会打开一个新的窗口,资源管理器中会显示我们的 myproject 目录,我们可以在这个目录下编辑文件。

但是,当我们打开一个新的目录的时候，还是会提示我们输入密码，使用起来不是很方便，我们可以通过配置 SSH 免密登录来解决这个问题。

配置 Remote SSH 免密登录

在桌面右键打开 Git Bash，输入以下命令

ssh-keygen -t rsa 

全部回车确认，生成密钥对

生成之后，我们可以在 ~/.ssh 目录下看到生成的密钥对，id_rsa 是私钥，id_rsa.pub 是公钥。

然后发送公钥到远程服务器

ssh-copy-id -i ~/.ssh/id_rsa.pub root@justcurd.com

在最后输入密码，完成之后，我们就可以免密登录了。

最后总结

• 安装 Remote SSH 插件
• 添加 SSH 主机
• 连接到 SSH 主机
• 在远程服务器上编辑文件
• 配置 SSH 免密登录

Remote - WSL

什么是 WSL

WSL 是 Windows Subsystem for Linux 的缩写，是 Windows 提供的一个 Linux 子系统，可以让你在 Windows 上运行 Linux 程序,而无需单独的虚拟机或双引导。

准备 WSL

前置条件

• Windows 10 或者 Windows 11

• 开启 WSL 功能

在控制面板中找到 程序，点击 启用或关闭 Windows 功能，勾选 适用于 Linux 的 Windows 子系统 和 Hyper-V，然后点击确定，重启电脑。

安装 WSL

在管理员模式下打开 PowerShell 或 Windows 命令提示符，输入以下命令

wsl --install

默认安装的是 Ubuntu，安装完成之后。安装成功之后，我肯可以在这里看到 Ubuntu 的文件夹

版本可能和我的不一样，但没关系。

命令执行完成之后，会提示你输入用户名和密码，输入之后，就可以使用 WSL 了。

现在已经安装了 WSL，我们可以在 VSCode 中连接WSL来开发了。

使用 VSCode 连接 WSL

在 VSCode 中，点击左下角的 远程资源管理器 图标，然后点击 WSL,之后会自动安装相关插件，安装完成之后,会自动连接到 WSL并打开一个新的 VSCode 窗口,和上面的 SSH 连接方式一样,操作也都一样。

当第二次连接的时候,点击左下角的远程资源管理器,选择 使用发行版连接到WSL……,选择 Ubuntu 即可。

WSL常见问题