告别输入密码!打造基于 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 连上任意服务器开始工作。
相关推荐
fanruitian5 小时前
uniapp android开发 测试板本与发行版本
前端·javascript·uni-app
rayufo5 小时前
【工具】列出指定文件夹下所有的目录和文件
开发语言·前端·python
RANCE_atttackkk5 小时前
[Java]实现使用邮箱找回密码的功能
java·开发语言·前端·spring boot·intellij-idea·idea
2501_944525546 小时前
Flutter for OpenHarmony 个人理财管理App实战 - 支出分析页面
android·开发语言·前端·javascript·flutter
李白你好7 小时前
Burp Suite插件用于自动检测Web应用程序中的未授权访问漏洞
前端
刘一说8 小时前
Vue 组件不必要的重新渲染问题解析:为什么子组件总在“无故”刷新?
前端·javascript·vue.js
徐同保9 小时前
React useRef 完全指南:在异步回调中访问最新的 props/state引言
前端·javascript·react.js
刘一说10 小时前
Vue 导航守卫未生效问题解析:为什么路由守卫不执行或逻辑失效?
前端·javascript·vue.js
一周七喜h10 小时前
在Vue3和TypeScripts中使用pinia
前端·javascript·vue.js
weixin_3954489110 小时前
main.c_cursor_0202
前端·网络·算法