告别输入密码!打造基于 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 连上任意服务器开始工作。
相关推荐
wearegogog1232 小时前
基于 MATLAB 的卡尔曼滤波器实现,用于消除噪声并估算信号
前端·算法·matlab
Drawing stars2 小时前
JAVA后端 前端 大模型应用 学习路线
java·前端·学习
品克缤2 小时前
Element UI MessageBox 增加第三个按钮(DOM Hack 方案)
前端·javascript·vue.js
小二·3 小时前
Python Web 开发进阶实战:性能压测与调优 —— Locust + Prometheus + Grafana 构建高并发可观测系统
前端·python·prometheus
小沐°3 小时前
vue-设置不同环境的打包和运行
前端·javascript·vue.js
qq_419854053 小时前
CSS动效
前端·javascript·css
烛阴3 小时前
3D字体TextGeometry
前端·webgl·three.js
桜吹雪4 小时前
markstream-vue实战踩坑笔记
前端
C_心欲无痕4 小时前
nginx - 实现域名跳转的几种方式
运维·前端·nginx
花哥码天下4 小时前
恢复网站console.log的脚本
前端·javascript·vue.js