VSCode配置远程开发

Vscode的确可以算的上是一款不可多得的文本编辑器,从刚开始发布我也是一路断断续续的使用,以及关注着他的更新情况。就前段时间终于发布了一款远程开发的插件Remote Development。可谓是终于不用再本地搞一套开发环境了,直接采用了远程服务器上的环境配置。

我目前主要使用PHP开发,辅助是Golang。但是大部分的语言在vscode上都可以游刃有余的编写。

本次配置的开发机器分别为macOS Mojave和Windows7,因为这是我平时工作和生活的系统。

首先从mac环境开始吧。首先请先下载最新版本(Remote Development必须要1.35以上才可以使用)并安装好vscode编辑器。

Mac配置

操作步骤

  1. 打开VSCode,点击左侧栏”扩展”按钮

    NCCj.png

  1. 输入remote development然后选择第一项后,点击”安装”

    NGtW.png

  2. 其实一共会安装4个插件,包括Remote Development、Remote-Containers、Remote-WSL、Remote-SSH等

  3. 安装成功以后,我们的左侧栏会出现一个NcDM图标,表示安装完成了。

配置SSH免密登录

接下来就是配置SSH的免密登录了,其实这个操作网上有太多的教程了。我这里就先不介绍了,丢一篇文章吧。

Linux主机之间ssh免密登录配置

配置SSH主机信息

这一步非常重要,也是这次的主要注意的点。首先我们切换到终端,执行

1
2
3
cd ~
cd .ssh/
vim config

这个config文件内容如下

1
2
3
4
Host my-vscode-server
user root
hostname 192.168.10.10
port 22

my-vscode-server: 远程服务器别名

user : 登录远程服务器所需要的用户名

hostname : 远程服务器IP地址

port: 默认是22,如果修改了请更换为对应的端口

VSCode指定远程服务器配置文件

点击vscode左下角的连接按钮,选Connect to Host...

Nfhf.png

然后就会出现我们刚刚配置的SSH服务器信息,选择即可。

NgOs.png

然后就会打开一个新的vscode窗口,不出意外应该如下图

NBY4.png

NjkC.png

远程开发演示视频

Windows7配置

对于window配置,安装vscode以及remote development插件请参考上面的部分。我直接从ssh免密登录开始。

安装windows下的shell环境

windows下推荐安装Git for Windows安装完成后就可以在桌面上出现git shell的图标,双击打开后操作的大部分的命令都和linux上一样,比如ls、copy、等等。
由于我现在使用的是cygwin,所以可能就界面不一样但是操作的命令大同小异。

配置SSH免密登录

首先打开命令行,执行ssh-keygen,然后一路回车。完成后会在$HOME/.ssh/目录下生成id_rsa和id_rsa.pub文件。将id_rsa.pub的内容拷贝到远程主机的用户家目录下的.ssh/authorized_keys文件中。

1
2
3
1. vim authorized_keys
2. 然后将内容粘贴到authorized_keys中
3. chmod 600 authorized_keys

编辑远程服务器SSH配置文件

打开命令行,执行

1
2
3
cd ~
cd .ssh/
touch config

类容大致如下

1
2
3
4
Host my-vscode-server
user root
hostname 192.168.10.10
port 22

配置vscode remote development

依然是点击左下角的”连接远程主机”按钮,然后点击Open Configuration File...
NHsS.png
NOGN.png
点击Settings后,出现配置自定义ssh config文件,这里的路径请根据你自己的电脑上存放的$HOME/.ssh/config配置。
Ndtd.png

远程连接

到这里基本完成了配置,此时点击菜单栏左侧的Remote-SSH按钮,应该就会出现刚刚配置的远程服务器配置文件了
NAUy.png


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