vscode 远程开发

前言

前几天在群里看见群友发布的新闻,vscode宣布支持远程开发了。之前我们只能通过扩展商店的第三方插件进行远程编辑,然后我从来没有成功过。可能是我太菜了,也可能是我的 ssh 策略设置得太严格了。不成功我就没试了。直到前几天 vscode 官方支持远程编辑,我一眼就心动了。

至于我为什么这么兴奋,主要还是在 Windows 下进行开发没有 Linux 下来得爽。而且有时候我会在其他设备上编辑代码,比如手机上这样很容易造成代码分叉,到时候合并代码又是一件麻烦的事情。如果我们使用 vscode 远程开发进行远程编辑那就能很好的避免这种问题,同时我们能在本地使用现代的 IDE 并且享受 远程 Linux 优质的开发环境

使用 vscode 远程开发相较于扩展商店的第三方插件最大的优势就是不用在远程服务器预装任何软件,直接使用 ssh 进行链接。

新闻地址: https://code.visualstudio.com/blogs/2019/05/02/remote-development

注意: 目前 vscode 稳定版还不支持 远程开发功能,等支持了我会更新本篇博客。如果你和我一样想体验 vacode 的远程开发功能请下载预览版。

目前 vscode 稳定版已支持 远程开发 版本须在 1.35 以上

使用稳定版的朋友直接跳过 预览版安装 即可其它步骤是一样的,如果你没有安装稳定版,请安装。

在稍后的步骤中我将给出下载地址,不急一步一步的来。

安装 vscode 预览版

前往 https://code.visualstudio.com/insiders/ 下载预览版并进行安装。预览版 和稳定版并不冲突可以同时存在。安装的时候一路确认就好,或者将你需要的勾上。安装步骤比稳定版简单,在这里我就不过多介绍了。

安装 git

我个人比较喜欢 unix 格式的 命令行终端所以安装了 git windows 版命令行是 unix 式的如果你不喜欢可以不安装。

前往 https://git-scm.com/download/win 下载并进行安装。

git windows 版的详细安装方式请查看 https://www.jianshu.com/p/414ccd423efc 毕竟别人写的蛮不错的我就没必要再写一份了

安装 openssh

openssh 是一定要装的 cscode 预览版的远程编辑功能就是 调用的 openssh ,这里如果是老手的话可能会觉得 git win 版不是支持 openssh 么为什么的还要装。然而 cscode 是调用的 cmd 去连接 ssh 就算是将 vscode 的终端设置为 git 的 bash 也不顶用。

如果你使用 的是 win10 就不用安装 openssh 了因为已经自带了,如果你是使用的 win7 那么还是要装一下。

openssh 我使用的是 PowerShell 团队实现的客户端。

前往 https://github.com/PowerShell/Win32-OpenSSH/releases/latest 下载 PowerShell 实现的客户端,将下载好的压缩文件解压缩到 C:\Program Files (x86)\

然后将 openssh 添加进系统编辑环境 鼠标右键点击我的电脑选择属性选择高级设置然后选择环境变量然后就可以编辑变量环境了

选中 PATH 然后点编辑

然后将 ;C:\Program Files (x86)\OpenSSH-Win64 添加进 PATH 注意前面有一个 ; 这是分割不同变量路径的

然后点击确认就可以退出所有窗口了,最后在 CMD 输入 ssh 试一下如果没有报错那就安装成功了

创建 ssh key

vscode 官方 建议(必须)使用 ssh key 进行连接,然而我个人也是用的 ssh key 进行登录。

打开 git bash 输入 ssh-keygen -t ecdsa -b 521 -C "niconiconi" 进行创建,建议不设置密码。创建好后将公匙 id_ecdsa.pub 复制 到远程 的 Linux 服务器上。

这里我还是演示一下吧。

打印公匙信息

cat .ssh/id_ecdsa.pub

输出信息如下

Administrator[email protected] MINGW64 ~
$ cat .ssh/id_ecdsa.pub
ecdsa-sha2-nistp521 AAAAE2VjZHNhLXNoYTItbmlzdHA1MjEAAAAIbmlzdHA1MjEAAACFBABP2XGWS8T82+/PanZOZ8pxqNkN+mi83/zSoNxbjDOJ+MxMy+pFSF7Dl8XjEb5RCl4+spvY5xcO+99koD6YDHGIQwCZSW6ax1zT/2rHRs2fMG3z5G1no5EkRr3hWA9JhseNu2F1HicQc74qvzZbCB6L2BgziPYS3x329d2b1zIqV40sSA== niconiconi

[email protected] MINGW64 ~
$

复制公匙信息

ecdsa-sha2-nistp521 AAAAE2VjZHNhLXNoYTItbmlzdHA1MjEAAAAIbmlzdHA1MjEAAACFBABP2XGWS8T82+/PanZOZ8pxqNkN+mi83/zSoNxbjDOJ+MxMy+pFSF7Dl8XjEb5RCl4+spvY5xcO+99koD6YDHGIQwCZSW6ax1zT/2rHRs2fMG3z5G1no5EkRr3hWA9JhseNu2F1HicQc74qvzZbCB6L2BgziPYS3x329d2b1zIqV40sSA== niconiconi

打开你的 ssh 客户端 连接到远程服务器

新建一个用户专门来做远程编辑,当然你也可以不新建使用已有用户进行运行。这里我为了方便演示所以新建了

sudo adduser vscode

切换到 vscode 用户

sudo su - vscode

新建 .ssh 目录

mkdir ~/.ssh

赋予 .ssh 目录正确的权限,不然 ssh 会拒绝承认这个目录的哦

chmod 700 ~/.ssh

创建 ~/.ssh/authorized_keys 文件并将刚才复制的 公匙粘贴进去

然后再赋予 ~/.ssh/authorized_keys 正确的权限

chmod 400 ~/.ssh/authorized_keys

ok 到这里 远程的ssh 就设置完成了

回到本地的电脑下接着操作。

为了方便的进行连接,我们创建一个 ssh 配置文件进行链接,注意喔 win7 于 win10 的转发设置不一样哦。

在 Windows 当前用户目录下的 .ssh 目录下创建 config 文件并写入以下内容

Host Tokyo
    HostName 8.8.8.8 #这里改成你的服务器 IP
    User vscode
    ForwardAgent yes
    IdentityFile C:/Users/Administrator/.ssh/id_ecdsa #使用的 ssh key 
    #ProxyCommand connect -H 127.0.0.1:1080 %h %p #HTTP代理需要的自己加 适用于 win7
    #ProxyCommand D:/Program Files/Git/mingw64/bin/connect.exe -H 127.0.0.1:10808 %h %p 适用于 win10 win10 自带的 openssh 并不支持转发所以 使用 Git

到这里 ssh 的配置就正式完成了

vscode 连接远程服务器

打开 vscode 选择扩展 搜索 Remote Development 扩展并进行安装,我这里截图中已经安装上了

安装好后 按 F1 键,然后搜索 remote-ssh

就是截图中的第一个,左键确认,然后选择我们刚才在 ssh config 中新建的 Tokyo 配置文件然后就自动进行远程链接了

链接好后类似于这样

到这里远程链接就算是成功了。

那我们怎么打开文件了?和Windows 下差不多

然后选择文件夹就可以了,如果没有那就用终端新建一个,远程模式下 vscode 的终端是默认连接到远程的。

ok 到这里 vocode 远程编辑就演示完了。祝你玩得愉快

扩展阅读

这一个小结是我实际使用的感受。

如果你想使用补全的话需要在远程服务器上安装插件,按 ATL + SHIFT + f 格式化代码,会提示安装,选对应语言的插件

vscode ssh 远程开发,官方声明只支持 x86 的 Linux 我试过是真的

vscode 远程开发已目前支持 ARM 设备,我在树莓派上试过了

vscode 远程开发还是很吃远程服务器的性能的。如果远程服务器性能不佳,那么不建议在远程服务器上安装任何插件,安装了的可以卸载。不然会造成 ssh 频繁断掉,最后甚至连接不了 ssh。我个人比较建议使用 双核,2048M 内存以上的服务器。这样会获得比较好的体验

防止 ssh 断联

鉴于国内的网络环境复杂,ssh 连接 可能没有多一会就断了,这就非常的不好了。我个人建议修改 ssh 远程的配置 开启心跳模式

心跳模式

编辑 /etc/ssh/sshd_config

将下面两行的注释拿掉

#ClientAliveInterval 30
#ClientAliveCountMax 0

并修改为

ClientAliveInterval 5
ClientAliveCountMax 3

意思为 5 秒发送一个空数据,超时为三次

0%