VS Code通过SSH编辑和运行远程服务器代码

---

VS Code基础入门使用可查看： VS Code 基础入门使用（配置）教程
其他Vs Code 配置可关注查看： Vs Code 配置专栏

---

在实际工作中，我们经常需要在远程服务器上编写或者运行代码，但是远程服务器上的编辑器往往不够好用。本文介绍如何使用 Vs Code 远程连接到服务器上，实现在本地使用 Vs Code， 编辑和运行远程服务器上的代码。这在体验上和在本地编辑代码一样，但是代码运行在远程服务器上!!!

本文分为两个部分：

1. 配置 ssh 免密登录。这可以让我们在使用 ssh 连接到远程服务器时，不需要输入密码。
2. VS Code 连接远程服务器。实现使用本地vscode，编辑运行远程服务器上的代码。

1. 配置ssh免密登录

1.1. 生成本地ssh密钥

1. 首先终端中生成ssh密钥：

注意 ：windows用户建议使用 PowerShell (CMD 不支持部分命令)

ssh-keygen -t rsa

会询问保存ssh密钥的位置及密码，保持默认直接回车三次即可。

1.2. 查看生成的密钥内容（可选）：

在终端中执行：

cd ~/.ssh  # 进入ssh密钥目录

cat id_rsa.pub # 查看密钥内容

1.3. 将密钥信息添加到远程服务器

• 对于本地电脑为Linux用户

ssh-copy-id username@ip/domain_name -p port
# 例如：ssh-copy-id username@/192.168.1.1 -p 22
# 例如：ssh-copy-id username@xxx.com -p 22

• 对于本地电脑为Windows用户，打开powershell（CMD会报错），输入下面的命令:

type $env:USERPROFILE\.ssh\id_rsa.pub | ssh username@ip/domain_name "cat >> .ssh/authorized_keys"

其中，username@ip/domain_name 中的：

• username 为远程服务器上的用户名
• ip/domain_name 为远程服务器的IP (比如：192.168.1.100) 或者域名 (比如：xxx.com)。根据实际情况，选用其中一个形式即可。

接着，输入远程服务器端的密码即可配置完成。

2. 安装vscode远程插件

在VS code 拓展中安装 Remote Development (此插件也包括其他官方remote方式，比如wsl，docker等) 或 Remote - SSH （仅仅包含ssh方式）

3. VS Code配置ssh信息

重启vs code后，左侧多出一个Remote Explore，打开，确保在Remotes界面（Tunnels/SSH），点击设置按钮configure，选择要保存的配置文件：

然后添加远程服务器的信息，例如:

Host host_name
  HostName ip/domain_name
  User user_name
  Port 22

如果有多个服务器，可以添加多个主机配置。

其中：

• host_name 是你给这个主机起的名字，可以随便取。
• ip/domain_name 是远程服务器的 ip 地址或者域名。
• your_user_name 是你在远程服务器上的用户名。
• Port 22 是 ssh 连接的端口号，默认是 22，如果你的服务器端口不是 22，需要修改为你的端口号。

配置好后，切换到Remote Explore栏，点击之前创建的ssh远程服务器后面的新建窗口图标，即可使用本地vs code对远程服务器进行编程。

此时，新的vscode窗口已经是远程服务器的环境了，可以在这里编辑代码，运行代码，调试代码等等。

我们可以在 Explore 中点击 Open Folder，选择远程服务器上的文件夹，这样就可以在本地编辑远程服务器上的文件了。体验与本地操作完全一致。

tip:

这样配置完成后，以后就可以直接使用host name代替 user_name@ip的形式，例如：

ssh user_name@ip

可以直接使用如下形式代替：

ssh host_name

4. vscode 远程下的一些奇技淫巧

使用vscode的ssh远程有以下几点奇技淫巧：

1. 替代vim，提供图形化界面的编辑器： 一些不需要权限的文件，可以在vscode的终端中直接输入code 文件名来在vscode中打开编辑。对于不熟悉vim的人来说，这是一个很好的替代方案。
2. 图形化的文件管理： 可以在vscode的终端中直接输入code 文件夹来打开文件夹。文件夹中的文件可以直接在vscode中的Explorer中查看编辑。
3. 图形化地上传、下载： 本地文件，可以直接拖拽到vscode的Exporer中上传到远程；远程文件，可以在Exporer中选中后右键，选择下载(download)，直接下载到本地。这样可以代替scp命令，传输文件更加符合直觉。