告别输入密码!打造基于 VS Code 的极致远程开发工作流

打造极致远程开发体验:VS Code Remote SSH 与免密登录全指南

在现代开发流程中,我们经常直接在远程服务器上进行开发(调试环境、修改线上代码等)。传统的 vim 虽然强大,但在大型项目中,如果能用 VS Code 直接编辑远程代码,效率将提升一个维度。

本文将带你实现一套最舒适的远程开发工作流:VS Code Remote 插件 + SSH 免密登录 + 多服务器配置


一、 核心利器:配置 VS Code Remote - SSH

VS Code 的 Remote - SSH 插件允许你使用本地的 VS Code 连接到远程 Linux 服务器。所有的插件、智能提示都运行在服务器端,而 UI 运行在本地,体验极其丝滑。

1. 安装插件

  1. 打开 VS Code。
  2. 点击左侧活动栏的 Extensions (扩展) 图标(或者按 Cmd+Shift+X)。
  3. 搜索 "Remote - SSH" (由 Microsoft 出品)。
  4. 点击 Install 进行安装。

2. 初次连接(使用 IP 和密码)

安装完成后,你可以尝试进行第一次连接:

  1. 点击 VS Code 左下角的 绿色图标 (Remote Window)
  2. 在弹出菜单中选择 "Connect to Host..." (连接到主机)
  3. 选择 "Add New SSH Host..."
  4. 输入连接命令:ssh root@192.168.1.100 (替换为你的用户名和 IP)。
  5. 痛点出现:此时系统会弹窗让你输入服务器密码。如果网络波动重连,你又得输一次密码。

为了解决"反复输密码"和"记忆 IP 地址"的烦恼,我们需要进行接下来的 SSH 配置。


二、 基础建设:生成 SSH 密钥

要实现免密登录,首先需要在本地生成一对 SSH 密钥。推荐使用 Ed25519 算法,它比传统的 RSA 更快、更安全。

1. 生成密钥命令

请在你的 本地终端 (Mac/Linux) 中执行以下命令(切勿在远程服务器上执行):

bash 复制代码
# -t 指定算法类型 (ed25519)
# -C 添加注释 (建议填写邮箱,便于识别)
ssh-keygen -t ed25519 -C "your_email@example.com"

执行后可以直接一路回车。

2. 产物说明

默认情况下,密钥会生成在 ~/.ssh/ 目录下:

  • id_ed25519私钥 (核心机密,相当于家门钥匙,切勿泄露)。
  • id_ed25519.pub公钥(相当于锁芯,用于分发给目标服务器)。

三、 关键步骤:配置免密登录

生成密钥后,我们需要将公钥部署到目标服务器,告诉服务器:"持有这把私钥的人可以不用密码直接进"。

使用 ssh-copy-id 一键部署

macOS 和 Linux 系统自带神器 ssh-copy-id,它会自动处理公钥上传、文件创建及权限设置。

命令格式:

Bash

css 复制代码
ssh-copy-id -i [公钥路径] [用户名]@[服务器IP]

实操示例:

Bash

perl 复制代码
# 将公钥上传到测试机
ssh-copy-id -i ~/.ssh/id_ed25519.pub root@192.168.1.100

注:执行该命令时需要输入最后一次服务器密码。验证通过后,以后连接将不再需要密码。


四、 进阶管理:SSH Config 与 VS Code 完美联动

当你管理的服务器变多时,记忆 IP 是反人类的。通过配置 SSH Config,我们可以给服务器起"别名",而 VS Code 会自动读取这些别名。

1. 编辑配置文件

在本地终端打开配置文件(如果文件不存在会自动创建):

Bash

javascript 复制代码
code ~/.ssh/config
# 或 vim ~/.ssh/config

2. 编写配置模板

你可以参考以下模板,管理多台服务器:

代码段

bash 复制代码
# ==========================================
# 全局默认配置 (Global Settings)
# ==========================================
# 建议:所有服务器默认使用同一把 ed25519 钥匙,并开启心跳保持
Host *
    AddKeysToAgent yes            # 将密钥添加到 Agent
    UseKeychain yes               # (macOS特有) 保存到钥匙串
    IdentityFile ~/.ssh/id_ed25519
    ServerAliveInterval 60        # 每60秒发送心跳,防止断线

# ==========================================
# 场景 A:开发环境 (起个好记的名字)
# ==========================================
Host dev
    HostName 192.168.1.10
    User root

# ==========================================
# 场景 B:生产环境 (自定义端口)
# ==========================================
Host prod
    HostName 47.100.xx.xx
    User admin
    Port 2222

3. 回到 VS Code 验证成果

保存上述文件后,再次打开 VS Code:

  1. 点击左下角 绿色图标 -> "Connect to Host..."
  2. 你会惊讶地发现,菜单里直接出现了 devprod 这两个选项。
  3. 点击 dev
  4. 见证奇迹:VS Code 直接打开了远程窗口,没有弹窗询问 IP,也没有询问密码。

总结

通过这套流程,我们实现了开发体验的质变:

  1. 环境隔离:在本地写代码,代码实际运行在服务器,环境一致性 100%。
  2. 极速连接:无需记忆 IP,无需输入密码,点击即连。
  3. 多端同步:只要带上你的电脑,无论在哪都能通过 VS Code 连上任意服务器开始工作。
相关推荐
狗哥哥33 分钟前
Vue 3 企业级表格组件体系设计实战
前端
尘世中一位迷途小书童42 分钟前
JavaScript 一些小特性:让你的代码更优雅高效
前端·javascript·架构
草帽lufei43 分钟前
高强度SOLO真实业务项目
前端·ai编程·trae
1024肥宅43 分钟前
告别异地登录告警!用 GitHub Self-Hosted Runner 打造“零打扰”全栈自动化部署
前端·后端·github
GDAL1 小时前
CSS重置样式表(Reset CSS
前端·css
SpringLament1 小时前
TanStack Virtual 源码解析:定高/不定高虚拟列表实现原理以及框架无关设计
前端·javascript
猪猪拆迁队1 小时前
高性能 Package构建系统设计与实现
前端·后端·node.js
UIUV1 小时前
JavaScript中instanceof运算符的原理与实现
前端·javascript·代码规范
前端fighter1 小时前
全栈项目:闲置二手交易系统(一)
前端·vue.js·后端