远程开发 #

远程开发概览 #

VSCode 提供了强大的远程开发功能，可以在远程服务器、容器或 WSL 中进行开发。

text

┌─────────────────────────────────────────────────────────────┐
│                     远程开发类型                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  SSH 远程    │  │  容器开发    │  │  WSL 开发    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│                                                             │
│  ┌─────────────┐  ┌─────────────┐                          │
│  │  Codespaces  │  │  Tunnels    │                          │
│  └─────────────┘  └─────────────┘                          │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Remote - SSH #

安装扩展 #

text

1. 打开扩展面板（⌘⇧X / Ctrl+Shift+X）
2. 搜索 "Remote - SSH"
3. 安装 "Remote - SSH" 扩展

连接远程服务器 #

text

1. 按 ⌘⇧P / Ctrl+Shift+P
2. 输入 "Remote-SSH: Connect to Host"
3. 输入 SSH 连接信息
   格式：user@hostname
4. 选择配置文件
5. 输入密码

SSH 配置文件 #

创建 ~/.ssh/config 文件：

text

Host myserver
    HostName example.com
    User username
    Port 22
    IdentityFile ~/.ssh/id_rsa

使用 SSH 密钥 #

bash

# 生成 SSH 密钥
ssh-keygen -t rsa -b 4096

# 复制公钥到服务器
ssh-copy-id user@hostname

# 无密码登录
ssh user@hostname

Remote - Containers #

安装扩展 #

text

1. 打开扩展面板
2. 搜索 "Remote - Containers"
3. 安装 "Dev Containers" 扩展

开发容器配置 #

创建 .devcontainer/devcontainer.json：

json

{
    "name": "My Dev Container",
    "image": "mcr.microsoft.com/devcontainers/base:ubuntu",
    "features": {
        "ghcr.io/devcontainers/features/node:1": {}
    },
    "extensions": [
        "dbaeumer.vscode-eslint"
    ]
}

在容器中打开 #

text

1. 按 ⌘⇧P / Ctrl+Shift+P
2. 输入 "Dev Containers: Reopen in Container"
3. VSCode 构建容器并打开

Docker Compose 配置 #

创建 .devcontainer/docker-compose.yml：

yaml

version: '3'
services:
  app:
    build: .
    volumes:
      - ..:/workspace:cached
    command: sleep infinity

Remote - WSL #

安装 WSL #

powershell

# 在 PowerShell 中运行
wsl --install

安装扩展 #

text

1. 打开扩展面板
2. 搜索 "WSL"
3. 安装 "WSL" 扩展

在 WSL 中打开 #

text

1. 按 ⌘⇧P / Ctrl+Shift+P
2. 输入 "WSL: Reopen Folder in WSL"
3. 选择 WSL 发行版

WSL 命令 #

bash

# 在 WSL 中打开 VSCode
code .

# 在特定发行版中打开
code --remote wsl+Ubuntu /path/to/folder

GitHub Codespaces #

创建 Codespace #

text

1. 在 GitHub 仓库页面
2. 点击 "Code" 按钮
3. 选择 "Codespaces" 标签
4. 点击 "Create codespace"

连接 Codespace #

text

1. 在 VSCode 中
2. 点击左侧 "Remote Explorer" 图标
3. 选择 "GitHub Codespaces"
4. 点击要连接的 Codespace

VSCode Tunnels #

创建隧道 #

text

1. 按 ⌘⇧P / Ctrl+Shift+P
2. 输入 "Tunnel: Create Tunnel"
3. 登录 GitHub 账号
4. 输入隧道名称

连接隧道 #

text

1. 在另一台机器打开 VSCode
2. 按 ⌘⇧P / Ctrl+Shift+P
3. 输入 "Tunnel: Connect to Tunnel"
4. 选择要连接的隧道

远程开发技巧 #

端口转发 #

text

自动端口转发：
• 运行开发服务器时自动转发端口
• 在 "端口" 面板查看转发端口

手动端口转发：
1. 打开 "端口" 面板
2. 点击 "添加端口"
3. 输入端口号

远程扩展 #

text

在远程环境中安装扩展：

1. 打开扩展面板
2. 切换到 "SSH: 主机名" 或 "容器" 部分
3. 安装需要的扩展

同步设置 #

text

远程环境使用相同的设置：

• 使用设置同步功能
• 或创建 .vscode/settings.json

远程开发实战案例 #

案例1：SSH 连接服务器 #

text

场景：连接远程开发服务器

步骤：
1. 配置 SSH config 文件
2. 按 ⌘⇧P / Ctrl+Shift+P
3. 选择 "Remote-SSH: Connect to Host"
4. 选择配置的服务器
5. 开始远程开发

案例2：容器化开发 #

text

场景：在容器中开发 Node.js 项目

步骤：
1. 创建 .devcontainer 目录
2. 创建 devcontainer.json
3. 按 ⌘⇧P / Ctrl+Shift+P
4. 选择 "Dev Containers: Reopen in Container"
5. 容器构建完成后开始开发

案例3：WSL 开发 #

text

场景：在 Windows 上使用 WSL 开发

步骤：
1. 安装 WSL
2. 安装 VSCode WSL 扩展
3. 在 WSL 中打开项目
4. 享受 Linux 开发环境

远程开发工作流 #

text

┌─────────────────────────────────────────────────────────────┐
│                     远程开发流程                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  需要远程开发                                                │
│     │                                                       │
│     ├─────▶ SSH 远程服务器？                                 │
│     │           │                                           │
│     │           ├─ 是 ─▶ Remote-SSH: Connect to Host       │
│     │           │                                           │
│     │           └─ 否 ─▶ 容器开发？                          │
│     │                      │                                │
│     │                      ├─ 是 ─▶ Dev Containers         │
│     │                      │                                │
│     │                      └─ 否 ─▶ WSL 开发？               │
│     │                                     │                 │
│     │                                     └─ WSL: Reopen   │
│     │                                                       │
│     └─────▶ 开始远程开发                                     │
│                │                                            │
│                ├─▶ 安装扩展                                  │
│                ├─▶ 配置端口转发                              │
│                └─▶ 同步设置                                  │
│                                                             │
└─────────────────────────────────────────────────────────────┘

快捷键速查表 #

远程连接 #

功能	命令面板
SSH 连接	Remote-SSH: Connect to Host
容器打开	Dev Containers: Reopen in Container
WSL 打开	WSL: Reopen Folder in WSL
隧道连接	Tunnel: Connect to Tunnel

端口转发 #

功能	说明
查看端口	打开 “端口” 面板
添加端口	点击 “添加端口” 按钮

常见问题 #

Q: SSH 连接慢怎么办？ #

A: 检查网络连接，使用 SSH 密钥认证，优化 SSH 配置。

Q: 容器构建失败？ #

A: 检查 Docker 是否运行，查看构建日志，确保配置正确。

Q: WSL 性能问题？ #

A: 将项目放在 WSL 文件系统中，而不是 Windows 文件系统。

练习建议 #

练习1：SSH 远程开发 #

text

1. 配置 SSH config
2. 连接远程服务器
3. 在远程环境中开发
4. 使用端口转发

练习2：容器开发 #

text

1. 创建 devcontainer.json
2. 在容器中打开项目
3. 配置开发环境
4. 运行开发服务器

练习3：WSL 开发 #

text

1. 安装 WSL
2. 在 WSL 中打开项目
3. 配置 Linux 开发环境
4. 运行 Linux 命令

总结 #

恭喜你完成了 VSCode 快捷键大全的学习！现在你已经掌握了：

• 基础编辑操作 • 多光标编辑技巧 • 文件管理和搜索 • 窗口和终端操作 • 代码导航和跳转 • 调试技巧 • Git 版本控制 • 扩展管理 • 自定义快捷键 • 高级技巧 • 远程开发

继续练习这些快捷键，让它们成为你的肌肉记忆，你的开发效率将会大幅提升！