VS Code远程开发实战：SSH连接与代理设置详解

VS Code远程开发实战：SSH连接与代理设置详解

引用

CSDN

等

12

来源

1.

https://blog.csdn.net/u011262253/article/details/113879997

2.

https://cloud.baidu.com/article/3269262

3.

https://zhuanlan.zhihu.com/p/44044896

4.

https://blog.csdn.net/qq_53139964/article/details/141334576

5.

https://code.visualstudio.com/docs/remote/ssh

6.

https://www.cnblogs.com/ljhdo/p/13373208.html

7.

https://juejin.cn/post/7080135520902184997

8.

https://code.visualstudio.com/docs/remote/ssh-tutorial

9.

https://code.visualstudio.com/docs/remote/linux

10.

https://www.cnblogs.com/Can-daydayup/p/17643761.html#_label0

11.

https://www.cnblogs.com/Can-daydayup/p/17643761.html

12.

https://vscode.js.cn/docs/editor/debugging

在校园网环境下进行软件开发时，经常会遇到需要访问外网资源的情况。例如，访问GitHub仓库、使用npm安装包、或者访问远程API等。然而，由于校园网的限制，直接访问外网可能会遇到各种问题，如速度慢、连接不稳定等。为了解决这些问题，我们可以使用VS Code的远程开发功能，并通过SSH隧道和代理设置来实现稳定、快速的网络访问。

要实现远程开发，首先需要在本地机器上安装VS Code，并配置Remote-SSH插件。以下是具体步骤：

1. 安装VS Code：从VS Code官网下载并安装最新版本。

2. 安装Remote-SSH插件：

   • 打开VS Code，点击左侧活动栏中的扩展图标（四个方块组成的图标）。
   • 在搜索框中输入"Remote - SSH"，找到由Microsoft官方提供的Remote - SSH插件。
   • 点击"安装"按钮进行安装。

3. 配置SSH连接：

   • 确保本地机器上已经安装了OpenSSH客户端。如果没有安装，可以参考官方文档进行安装。
   • 打开终端（快捷键Ctrl + `），输入以下命令生成SSH密钥对：

     ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
     

   • 按提示操作，生成密钥对后，将公钥复制到远程服务器上：

     ssh-copy-id user@remote_host
     

4. 连接远程服务器：

   • 在VS Code中按Ctrl + Shift + P打开命令面板。
   • 输入"Remote-SSH: Connect to Host"，选择要连接的服务器。
   • 第一次连接时，VS Code会询问是否信任该主机，选择"Yes"即可。

连接到远程服务器后，需要配置代理才能访问外网。这里推荐使用SSH反向代理的方法，因为它不需要管理员权限，且配置简单。

1. 本地开启代理：

   • 确保本地已经安装并运行了代理软件，如Clash、Shadowsocks等。
   • 默认情况下，代理软件会监听本地的7890端口。

2. 通过SSH转发本地代理到服务器：

   • 在本地终端中输入以下命令：

     ssh -p <服务器SSH端口> <用户名>@<服务器IP> -R 7890:localhost:7890
     

   • 例如：

     ssh -p 22 user@example.com -R 7890:localhost:7890
     

3. 在VS Code的SSH配置中启用隧道：

   • 编辑~/.ssh/config文件，添加以下配置：

     Host myserver
         HostName <服务器IP>
         User <用户名>
         Port 22
         RemoteForward 7890 localhost:7890  # 转发本地代理端口到服务器
     

4. 服务器端配置环境变量：

   • 在服务器终端中输入以下命令：

     export http_proxy=http://127.0.0.1:7890
     export https_proxy=http://127.0.0.1:7890
     

   • 为了使配置永久生效，可以将上述命令添加到~/.bashrc文件中：

     echo 'export http_proxy=http://127.0.0.1:7890' >> ~/.bashrc
     echo 'export https_proxy=http://127.0.0.1:7890' >> ~/.bashrc
     source ~/.bashrc
     

5. 验证代理是否生效：

   • 在服务器终端中输入以下命令：

     curl -I https://www.google.com
     

   • 如果返回HTTP/1.1 200 OK，则说明代理配置成功。

为了提升开发效率，这里推荐一些常用的VS Code插件和快捷键：

必备插件

1. Git相关插件：

   • GitHub Pull Requests and Issues：在VS Code中查看和管理GitHub拉取请求和问题。
   • Git Graph：可视化Git仓库的分支和提交历史。

2. 代码格式化插件：

   • Prettier - Code formatter：自动格式化代码，保持代码风格一致。
   • EditorConfig for VS Code：帮助团队维护一致的代码风格。

3. 调试插件：

   • Debugger for Chrome：调试基于Chrome的Web应用。
   • Node.js Debugger：调试Node.js应用。

4. 其他实用插件：

   • Path Intellisense：自动补全文件路径。
   • Bracket Pair Colorizer：为匹配的括号添加颜色，便于识别。
   • Markdown Preview Enhanced：增强Markdown预览功能。

常用快捷键

1. 基本操作：

   • Ctrl + Shift + P：打开命令面板。
   • Ctrl + P：快速打开文件。
   • Ctrl + Shift + N：新建窗口。
   • Ctrl + Shift + W：关闭窗口。

2. 编辑操作：

   • Ctrl + X：剪切行。
   • Ctrl + C：复制行。
   • Alt + ↑/↓：移动行。
   • Shift + Alt + ↓/↑：复制行。
   • Ctrl + Shift + K：删除行。

3. 导航操作：

   • F12：跳转到定义。
   • Alt + ←/→：返回/前进。
   • Ctrl + T：显示所有符号。
   • Ctrl + G：跳转到指定行。

4. 搜索和替换：

   • Ctrl + F：查找。
   • Ctrl + H：替换。
   • F3 / Shift + F3：查找下一个/上一个。

5. 调试操作：

   • F5：开始调试。
   • Shift + F5：停止调试。
   • F9：切换断点。
   • F10：单步跳过。
   • F11：单步进入。

通过以上配置和技巧，你可以在校园网环境下轻松实现远程开发，并通过代理访问外网资源。这不仅能提升开发效率，还能让你的工作流程更加顺畅。希望这些技巧能对你有所帮助！