VSCode 远程开发与调试

简介

本次要用到的插件叫 Remote Development，使用这个插件可以避免每次修改代码打包后都要重新打包部署到目标服务器上进行测试。在目标服务器上进行开发就跟在本地开发一样。

远程主机配置

安装 ssh

OS	Instructions
Debian / Ubuntu	sudo apt-get install openssh-server
RHEL / Fedora / CentOS	sudo yum install openssh-server && sudo systemctl start sshd.service && sudo systemctl enable sshd.service

使用 ps -ef | grep ssh 判断是否启动成功，openssh-server 必须看到 sshd 字样才说明启动成功

客户端配置

OS	Instructions
Windows	安装Git，并将 C:\Program Files\Git\usr\bin 添加到环境变量中
macOS	已预装（Comes pre-installed）
Debian / Ubuntu	sudo apt-get install openssh-client
RHEL / Fedora / CentOS	sudo yum install openssh-client

配置 VSCode

安装 Remote Development 插件

（我这里用 Java 做测试，因此额外要安装 Java Extension Pack）

配置自动打开SSH终端

单击左下角绿标，或Ctrl + Shift + P，输入 remote ssh settings。勾选 Always reveal the SSH login terminal

连接远程主机

单击左下角绿色 Remote Development 图标

• window系统选 Remote-WSL
• Linux系统选 Rmote-SSH
  
  选择 Remote-SSH：Connect to Host -——> Configure SSH Hosts -——> 选择当前用户目录下的 ssh config 文件。之后会自动打开一个配置 config 的文件，Host 是名字标识，HostName 是远程主机的IP地址，User 是登录名。编辑完后，保存关闭。

然后依旧是，单击左下角绿色 Remote Development 图标，选择 Connect to Host。这时候出来的列表里就有我们刚刚创建的主机了。

单击后会打开一个新的窗口，让你输入密码

该图有数据表示连接成功！

先创建一个test，然后VSCode打开这个Folder

创建一个 test.html

安装一个新插件，Live Server 用于开启服务器（安装了本地的还不够，还需要在远程安装该组件）

启动 Live Server 的方法有两种

• 右键 Open With Live Server
• 右下角 Go Live