本文针对环境为本地机器：MacOS，长途环境 Windows 10。
什么是 VSCode Remote – SSH
VSCode remote 为 VSCode 供给的长途开发的功用，通过各种技能计划能够直接在本地机器中对长途代码进行开发，便利各种安全开发、统一环境等场景。
SSH remote 为 VSCode remote 中供给的运用 SSH 协议来完结长途开发的计划，类似于 SSH 登陆到长途主机进行开发，不过 VSCode 内部进行了封装和优化。
本机环境装备
因为本地运用 MacOS，无需特别制造装置，开箱即用，不过记得提早装置 developer tools。
假如运用的对错 MacOS，可参阅 文档 装置 SSH 客户端。
长途环境装备
因为长途运用的 win10，所以需求装置 OpenSSH。
首要确认 OpenSSH 的装置状况：
Get-WindowsCapability -Online | Where-Object Name -like 'OpenSSH*'
假如没有装置可依照需求挑选装置客户端和服务端：
# Install the OpenSSH Client
Add-WindowsCapability -Online -Name OpenSSH.Client~~~~0.0.1.0
# Install the OpenSSH Server
Add-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0
然后发动 sshd 服务：
Start-Service sshd
将 sshd 添加到主动发动：
Set-Service -Name sshd -StartupType 'Automatic'
为了保证安全需求保证防火墙规矩装备：
if (!(Get-NetFirewallRule -Name "OpenSSH-Server-In-TCP" -ErrorAction SilentlyContinue | Select-Object Name, Enabled)) {
Write-Output "Firewall Rule 'OpenSSH-Server-In-TCP' does not exist, creating it..."
New-NetFirewallRule -Name 'OpenSSH-Server-In-TCP' -DisplayName 'OpenSSH Server (sshd)' -Enabled True -Direction Inbound -Protocol TCP -Action Allow -LocalPort 22
} else {
Write-Output "Firewall rule 'OpenSSH-Server-In-TCP' has been created and exists."
}
可能的错误和处理
装备
在本地 VSCode 中装置 Remote Development extension pack 或者 Remote - SSH 插件，即可开始运用 Remote SSH 进行开发。Remote Development extension pack 包括 Remote - SSH 等三个包。
装置后能够看到 VSCode 界面多出两个按钮，一个是左下角的 Remote 状况按钮：
一个是左边按钮栏的 Remote Explorer：
点击 Remote 按钮，能够进入 Remote 菜单，也可运用 Show Remote Menu 进入：
衔接
新衔接
创立新衔接有多个手段，假如是新的 SSH 衔接，咱们能够通过 Connect To Host，然后 Add New SSH Host 依照提示输入 SSH 衔接指令，一般而言直接输入 username@host 即可，username 为长途机器的用户名，host 没有特别装备一般则为长途机器的 IP，windows 中的 IP 可通过 cmd 运用 ipconfig 指令查看。回车后需求假如衔接成功将会提示输入密码，输入 windows 账号对应的密码即可。
需求留意首要需求保证长途机器能够正常运用 SSH 进行衔接，假如长途机器 IP 无法直接拜访，比方在公司内网，则可能需求连入公司 VPN 后再进行衔接。运用前可直接运用 ssh username@host 指令尝试衔接。
此外，还能够通过将 SSH 指令添加到 ssh config 文件中来便利衔接，假如运用上面的 Add New SSH Host，VSCode 会主动将装备添加到 ssh config 文件中，咱们也能够主动更改文件，一般 MacOS 中直接修正 ~/.ssh/config 文件即可，运用 Remote Menu 中的 Open SSH Configure File 也能够直接运用 VSCode 翻开对应的装备文件。一般一条 SSH 装备包括以下内容：
Host SSH-name # 称号标识
HostName 1.1.1.1 # host name，一般为 IP
User hello # user name
如用到其它自定义参数，如 ControlPersist、ControlPath 等，可自行按需装备。
二次衔接
依照上述添加成功后，以后衔接则可直接在 Remote Menu 中挑选对应的衔接，或者在 Remote Explorer 中直接挑选对应的装备进行衔接。
衔接后
假如衔接时未挑选开发对应的文件夹，点击左边的 Open Folder 后 VSCode 将会提示你挑选需求开发的文件夹：
且此处的 Clone Repository 也是将仓库 Clone 到长途机器上。
衔接后左下角的 Remote 按钮将会展示当时 Remote 衔接的方法和称号，且 Remote Menu 菜单中将会多出 Setting 等几个菜单。
运用
开发时一般情况下就能够直接当做本地开发，不过需求知道，除了 VSCode 是咱们本地机器上的，其它的如代码、shell 等全部都是在长途机器上，所以一定要搞清楚环境是在长途而不是在本地。
开发时体验根本与本地开发无异，但是在长途机器较为卡顿是仍是会发现无论是创立文件、terminal 中输入指令等都会存在一定的延迟。VSCode 也对这些做了一定的优化，比方在 terminal 中会用灰色来提示当时输入还在传输中：
或者是文件操作是 Explorer 会展示 loading 提示操作中：
端口映射
此外还有一个长途开发经常见的问题，服务拜访。如咱们在进行开发时，本地需求起 server 来预览，但是因为 shell、环境、代码等都是远端的，所以 http 服务也是远端机器供给，此时要拜访远端机器供给的服务，则需求端口转发。VSCode Remote 自带了端口转发的功用：
能够看到 VSCode remote 在下方多了一个 Port Forward 状况栏按钮，且面板区域多了一个 PORTS 面板，点开后能够装备端口的映射。
以 create-react-app 为例，create-react-app 默认端口为 3000，咱们能够添加一个 3000 到 3000 的端口映射，则咱们在拜访本地的 localhost:3000 时， VSCode 会将恳求转发到远端机器的 3000 端口上，以此完结本地机器直接拜访长途服务的意图。且 VSCode 会主动监听端口的服务拜访，比方 create-react-app 发动后 VSCode 会主动添加一个 3000 到 3000 的映射。
此外假如想要修正映射联系可在映射项目右键，可修正对应的本地和长途端口，以及拜访协议。比方需求需求让 create-react-app 应用以 https 协议运行，咱们能够运用 HTTPS=true npm start 发动项目，然后将端口映射的协议修正为 https，即可在本地的 https://localhost:3000 中拜访到。
总结
总的来说，VSCode Remote 的 SSH 装备简单，运用便利，在一些场景下能够发挥巨大作用。比方：
- 紧迫情况下直接调试开发长途机器中的代码
- 长途机器存在特别环境
- 代码因为安全问题无法直接拜访
此外 VSCode Remote 还供给了其它多种 Remote 衔接的方法，以用于不同的场景，只能说一句：真香。
参阅资料
- code.visualstudio.com/docs/remote…
- learn.microsoft.com/en-us/windo…
本文正在参加「金石计划」
