一、为什么用VSCode远程开发？
VSCode的Remote-SSH插件让你像本地一样开发远程服务器上的代码，无需配置复杂的本地环境。
1.1 传统方式 vs VSCode远程开发
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| ┌─────────────────────────────────────────────────────────────────┐
│ 传统开发方式 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 1. 本地写代码 │
│ 2. 手动上传到服务器（FTP/SCP） │
│ 3. SSH到服务器 │
│ 4. 服务器上运行、调试 │
│ 5. 发现问题？重复步骤1-4 │
│ │
│ 😰 繁琐！每次改代码都要上传 │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ VSCode远程开发 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 1. VSCode直接连接服务器 │
│ 2. 本地界面操作服务器文件 │
│ 3. 本地运行、调试服务器代码 │
│ 4. 自动同步，丝滑体验 │
│ │
│ 😎 爽！就像在本地开发一样 │
│ │
└─────────────────────────────────────────────────────────────────┘
|
1.2 优势
| 优势 |
说明 |
| 无缝体验 |
像本地一样操作远程文件 |
| 环境统一 |
服务器环境直接使用 |
| 资源利用 |
利用服务器算力运行 |
| 协作方便 |
随时随地开发 |
二、安装Remote-SSH插件
2.1 安装步骤
1
2
3
4
5
| 1. 打开VSCode
2. 点击左侧 Extensions 图标（或按 Ctrl+Shift+X）
3. 搜索 "Remote - SSH"
4. 点击安装 "Remote - SSH"（由Microsoft提供）
5. 安装 "Remote - SSH: Editing Configuration Files"
|
2.2 推荐插件
| 插件 |
说明 |
| Remote - SSH |
远程连接（必装） |
| Remote - SSH: Editing |
配置文件编辑 |
| Remote Explorer |
连接管理 |
| Remote Development |
远程开发全家桶 |
三、配置SSH密钥
3.1 生成SSH密钥
1
2
3
4
5
6
7
8
9
10
11
|
ssh-keygen -t ed25519 -C "your_email@example.com"
cat ~/.ssh/id_ed25519.pub
cat ~/.ssh/id_rsa.pub
|
3.2 上传公钥到服务器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
ssh-copy-id -i ~/.ssh/id_ed25519.pub username@server_ip
cat ~/.ssh/id_ed25519.pub
ssh username@server_ip
mkdir -p ~/.ssh
chmod 700 ~/.ssh
echo "公钥内容" >> ~/.ssh/authorized_keys
chmod 600 ~/.ssh/authorized_keys
|
3.3 本地配置SSH
1
2
3
4
5
6
7
8
9
10
11
|
vim ~/.ssh/config
Host myserver
HostName server_ip或域名
User username
Port 22
IdentityFile ~/.ssh/id_ed25519
ServerAliveInterval 60
ServerAliveCountMax 3
|
四、连接远程服务器
4.1 首次连接
1
2
3
4
5
6
7
8
9
| 1. VSCode左侧点击 Remote Explorer 图标
2. 点击 + 或右键 → Connect to Host
3. 输入 SSH 连接命令：
username@server_ip -A
4. 选择 SSH 配置文件（~/.ssh/config）
5. 点击 Continue
6. 输入服务器密码
7. 等待安装远程组件
8. 成功连接！
|
4.2 连接命令示例
1
2
3
4
5
6
7
8
|
ssh username@192.168.1.100
ssh -i ~/.ssh/id_ed25519 username@192.168.1.100
ssh -p 2222 username@192.168.1.100
|
4.3 打开远程文件夹
1
2
3
4
5
6
7
| 1. 连接成功后
2. 点击 "Open Folder"
3. 输入服务器上的路径，如：
/home/username/project
或
/var/www/html
4. 点击 OK
|
五、远程开发配置
5.1 终端配置
1
2
3
4
5
6
7
8
|
{
"terminal.integrated.defaultProfile.linux": "bash",
"terminal.integrated.fontSize": 14
}
|
5.2 常用设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| {
"editor.lineNumbers": "on",
"files.autoSave": "afterDelay",
"editor.fontSize": 14,
"editor.tabSize": 4,
"editor.insertSpaces": true
}
|
5.3 安装远程插件
1
2
3
4
5
6
7
8
9
10
11
12
| 连接远程服务器后，可以安装适用于服务器的插件：
1. 搜索插件
2. 点击 Install（在远程服务器上）
3. 等待安装完成
常用远程插件：
- Python
- Node.js Debugger
- ESLint
- Prettier
- GitLens
|
六、实战场景
6.1 Web开发
1
2
3
4
5
6
7
8
| 场景：开发一个网站，部署在服务器上
1. 连接服务器
2. 打开 /var/www/mywebsite
3. 修改代码
4. 打开终端运行：npm run dev
5. 本地浏览器访问测试
6. 提交代码
|
6.2 Python开发
1
2
3
4
5
6
7
8
| 场景：在服务器上运行Python项目
1. 连接服务器
2. 打开项目目录
3. 创建虚拟环境：python -m venv venv
4. 安装依赖：pip install -r requirements.txt
5. 选择Python解释器（Ctrl+Shift+P → Python: Select Interpreter）
6. 运行代码（F5）
|
6.3 多服务器管理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
Host web-server
HostName 192.168.1.100
User ubuntu
IdentityFile ~/.ssh/id_ed25519
Host db-server
HostName 192.168.1.101
User ubuntu
IdentityFile ~/.ssh/id_ed25519
Host production
HostName example.com
User deploy
Port 22
IdentityFile ~/.ssh/production_key
|
七、常见问题
7.1 连接超时
1
2
3
4
5
6
7
8
|
sudo systemctl status sshd
sudo ufw status
sudo netstat -tlnp | grep 22
|
7.2 密钥认证失败
1
2
3
4
5
6
7
|
chmod 700 ~/.ssh
chmod 600 ~/.ssh/id_ed25519
chmod 600 ~/.ssh/config
ssh -v username@server_ip
|
7.3 远程组件安装失败
1
2
3
4
5
6
| 解决方法：
1. 检查网络连接
2. 手动安装：
- 打开命令面板（Ctrl+Shift+P）
- 输入 "Remote-SSH: Install"
- 重新安装
|
7.4 终端显示异常
1
2
3
4
5
6
7
8
|
sudo apt install -y bash
sudo apt install -y zsh
chsh -s /bin/zsh
|
八、进阶技巧
8.1 免密码登录
1
2
3
4
5
6
|
Host *
AddKeysToAgent yes
IdentityFile ~/.ssh/id_ed25519
|
8.2 保持连接
1
2
3
4
5
|
Host *
ServerAliveInterval 60
ServerAliveCountMax 3
TCPKeepAlive yes
|
8.3 端口转发
1
2
3
4
5
6
7
|
ssh -L 3306:localhost:3306 username@server_ip
ssh -R 8080:localhost:3000 username@server_ip
|
8.4 同步文件
1
2
3
4
5
|
rsync -avz --exclude='node_modules' --exclude='.git' ./ username@server_ip:/path/to/dir/
scp -r ./project username@server_ip:/path/to/dir/
|
九、安全建议
9.1 密钥安全
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
ssh-keygen -t ed25519 -C "your_email"
ssh-keygen -t ed25519 -C "new_key"
chmod 600 ~/.ssh/id_ed25519
sudo vim /etc/ssh/sshd_config
PasswordAuthentication no
sudo systemctl restart sshd
|
9.2 防火墙配置
1
2
3
4
5
|
sudo ufw allow 22/tcp
sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
sudo ufw enable
|
十、替代方案
| 工具 |
平台 |
说明 |
| JetBrains Gateway |
全平台 |
JetBrains系列远程开发 |
| Tabby |
全平台 |
SSH客户端+终端 |
| Termius |
移动端 |
手机SSH |
| PuTTY |
Windows |
经典SSH工具 |
十一、完整流程总结
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| ┌─────────────────────────────────────────────────────────────────┐
│ VSCode远程开发完整流程 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 第1步：本地生成SSH密钥 │
│ ssh-keygen -t ed25519 │
│ │
│ 第2步：上传公钥到服务器 │
│ ssh-copy-id username@server_ip │
│ │
│ 第3步：本地配置SSH │
│ vim ~/.ssh/config │
│ │
│ 第4步：VSCode安装Remote-SSH插件 │
│ │
│ 第5步：连接服务器 │
│ Remote Explorer → Connect to Host │
│ │
│ 第6步：打开远程文件夹，开始开发 │
│ │
└─────────────────────────────────────────────────────────────────┘
|
参考资料
持续更新中…欢迎收藏！
#VSCode #SSH #远程开发 #云服务器 #教程