告别输入密码!打造基于 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 连上任意服务器开始工作。
相关推荐
开开心心就好4 小时前
批量提取PDF中的图片,直接导出原图
前端·javascript·支持向量机·智能手机·pdf·html·启发式算法
Setsuna_F_Seiei6 小时前
前端转型 Agent 开发 05 之 Agent Hooks 与 Checkpointer(让 Agent 从全自动转变人为可掌控)
前端·agent·ai编程
百万蹄蹄向前冲8 小时前
风扇转了一晚上MVP专家团翻车事故
前端·人工智能
默_笙8 小时前
🏛 给 AI 配一间办公室:Harness Engineering 六大模块与它的实现
前端·javascript
linux_cfan9 小时前
videojs v10 源代码系列解读:14 · 谓词守卫:在运行时安全地调用能力
前端·javascript·音视频
kyriewen10 小时前
我扒了 10,221 条 JD:腾讯技术岗 75% 在要 AI
前端·人工智能·ai编程
郑州光合科技余经理10 小时前
同城外卖小程序开发:下单成功后,后台导出能不能对上用户端状态
开发语言·前端·git·后端·uni-app·php·ai编程
IT_陈寒11 小时前
Vue的响应式让我熬到凌晨三点,原来漏了这个小细节
前端·人工智能·后端
Blanche150011 小时前
利用 RAG 为答疑机器人扩展知识范围
前端
天若有情67311 小时前
【纯前端小工具】公历生日转农历,批量查询每年农历生日对应的公历日期(GitHub Pages在线直接用)
前端·javascript·github pages·农历转换·lunisolar·网页小工具