VSCode烦人的远程交互UI讲解

一、准备工作（必做）

在开始配置前，请确保以下条件满足：

条件	说明	验证方法
本地环境	安装 VSCode（1.50 + 版本），系统自带 SSH 客户端Visual Studio Code	Windows 10 + 自带 OpenSSH；macOS/Linux 默认预装；可通过`ssh -V`命令检查
远程服务器	运行 Linux/macOS 系统，开启 SSH 服务（默认 22 端口），网络可达	服务器执行`systemctl status sshd`；本地尝试`ssh user@server-ip`测试连接
账号信息	拥有远程服务器的用户名、IP 地址、端口号（默认 22）及密码 / 密钥	准备好`user@server-ip:port`格式的连接信息

二、安装 Remote-SSH 插件

打开 VSCode，点击左侧活动栏的扩展图标 （或按Ctrl+Shift+X/Cmd+Shift+X）
在搜索框输入Remote - SSH，找到微软官方发布的插件（图标为蓝色远程图标）
点击Install 安装，安装完成后左侧会出现远程资源管理器图标（蓝色电脑图标）

三、配置 SSH 连接（两种方式）

方式 1：快速添加主机（适合临时连接）

打开命令面板：F1或Ctrl+Shift+P/Cmd+Shift+PVisual Studio Code
输入并选择**Remote-SSH: Connect to Host...**Visual Studio Code

选择Add New SSH Host... ，输入完整连接命令：

bash 复制代码

ssh username@server-ip -p port  # 端口默认22可省略，如ssh root@192.168.1.100

选择 SSH 配置文件保存位置（推荐默认路径）：
- Windows：C:\Users\你的用户名\.ssh\config
- macOS/Linux：~/.ssh/config
点击Connect，输入密码即可连接

方式 2：手动编辑 config 文件（推荐，适合长期使用）

手动配置可保存多个服务器信息，支持自定义名称与高级参数，便于管理。

打开命令面板，选择Remote-SSH: Open Configuration File...
选择配置文件路径（同方式 1），按以下格式添加主机配置（注意缩进规范）：

bash 复制代码

# 示例：配置名为my-server的远程主机
Host my-server  # 自定义主机名（连接时直接选择）
  HostName 192.168.1.100  # 服务器IP/域名（必填）
  User root  # 登录用户名（必填）
  Port 22  # SSH端口（默认22可省略）
  IdentityFile C:/Users/yourname/.ssh/id_rsa  # 密钥文件路径（可选，用于密钥认证）
  PreferredAuthentications publickey,password  # 认证顺序（可选）

保存文件，配置立即生效

四、配置密钥认证（推荐，更安全便捷）

密钥认证避免重复输入密码，安全性更高，步骤如下：

1. 生成 SSH 密钥对（本地执行）

Windows/macOS/Linux 通用命令 ：
bash 复制代码
```
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
```
- 一路回车使用默认路径（~/.ssh/id_rsa），可设置密码短语增强安全性
生成成功后，在~/.ssh目录下会生成两个文件：
- id_rsa：私钥（妥善保管，切勿泄露）
- id_rsa.pub：公钥（用于上传到服务器）

2. 上传公钥到远程服务器

方法 A：自动上传（推荐）

bash 复制代码

ssh-copy-id -i ~/.ssh/id_rsa.pub username@server-ip  # 输入密码确认

方法 B：手动上传（无 ssh-copy-id 时）

bash 复制代码

# 本地执行
cat ~/.ssh/id_rsa.pub  # 复制公钥内容

# 登录远程服务器，执行
mkdir -p ~/.ssh && chmod 700 ~/.ssh
echo "复制的公钥内容" >> ~/.ssh/authorized_keys
chmod 600 ~/.ssh/authorized_keys  # 权限必须为600，否则SSH拒绝使用

3. 在 VSCode 中启用密钥认证

在 config 文件中添加IdentityFile字段指向私钥路径：

bash 复制代码

Host my-server
  HostName 192.168.1.100
  User root
  IdentityFile C:/Users/yourname/.ssh/id_rsa  # Windows路径用正斜杠
  # IdentityFile ~/.ssh/id_rsa  # macOS/Linux路径

五、连接远程服务器

点击 VSCode 左侧远程资源管理器图标（蓝色电脑）
在SSH Targets下找到已配置的主机名（如 my-server）
点击主机名旁的连接图标 （或右键选择Connect to Host in New Window）
首次连接会提示选择远程系统类型（Linux/macOS/Windows），选择后等待 VSCode 在服务器安装VSCode ServerVisual Studio Code
连接成功后，左下角状态栏会显示SSH: 主机名，表示已进入远程环境Visual Studio Code

六、远程开发基础操作

1. 打开远程文件夹

点击左侧资源管理器 → Open Folder ，选择远程服务器上的目录（如/home/user/project）
输入密码 / 密钥验证后即可访问远程文件系统

2. 安装远程插件

远程环境下安装的插件仅对当前远程会话生效，不会影响本地
推荐安装：C/C++ 、Python 、Git等开发必备插件，提升远程开发体验

3. 终端操作

打开集成终端（Ctrl+），自动连接到远程服务器的 shell 环境，可执行 Linux 命令
支持多终端窗口，方便同时执行编译、运行、调试等操作

实际例子:

如何添加远程服务器:

点那个加号就行了,然后输入: ssh 用户名@你的ip地址

进入服务器后

打开左侧文件夹: 按ctrl+k和ctrl+o (按了之后就会出现文件夹, 然后还会出现一个专属通道)
打开下方bash, ctrl + `(esc下面那个)

点击左下角召唤窗口:

这个窗口是 VSCode 远程开发功能的入口面板: 主要用来关闭远程链接和链接到主机

按ctrl+shift+p召唤窗口:

这个窗口是 VSCode 的命令面板（Command Palette），它是 VSCode 所有功能的 "总入口"，核心作用是让你通过搜索关键词快速执行各种操作，无需在菜单中逐层查找，大幅提升操作效率。

简单来说，远程开发入口面板是 "远程开发的专用菜单"，而命令面板是 "VSCode 的万能搜索框"。前者是后者的一个子集，提供了更便捷的远程操作入口。

按ctrl + `(ESC下面)召唤bash

如果连了服务器就是服务器bash, 如果没链接就是本地local的bash

关于配置文件的事情:

你需要为每个连接分配一个唯一的 Host 名称，这样 VS Code 才能正确识别和区分不同的用户连接。

bash 复制代码

# 第一个连接：root 用户
Host 47.201.11.202-root
  HostName 47.201.11.202
  User root

# 第二个连接：Howrun1 用户
Host 47.201.11.202-howrun1
  HostName 47.201.11.202
  User Howrun1

修改后，当你在 VS Code 中选择 Remote-SSH: Connect to Host... 时，就会看到两个清晰的选项：

47.201.11.202-root
47.201.11.202-howrun1