这才是真正的远程开发——VS Code Remote 环境搭建

前言

“远程开发”或者“云开发”并非什么新名词，由于程序员一直在追求着“Code Anywhere”，也一直有各类不一样的产品试图知足这个需求。在各类产品中，既包括各种自称 WebIDE 的工具——如亚马逊的 Cloud九、老牌 IDE Elipse 的 Elipse Che、以及被腾讯收购的 CODING 的 WebIDE 产品等，也包括各类轻量级的在线代码编辑器，如 CodeSandbox 等一众基于 VS Code 的产品，除此以外，传统 IDE 产品也在经过扩展来加强本身的远程开发能力，好比 JetBrains 系列，一直以来都有一个 Remote 的功能，能够链接远程服务器，同步目录，也算是实现了一半的远程开发功能。

但在试用了各类工具以后，最终一一放弃，这些工具没有流行起来，并不是缺少需求，而是他们真的真的太难用了，直到 VS Code Remote 出现这一状况才有所改观。

VS Code Remote 使用体验

通过几个月的使用，我的认为 VS Code Remote 绝对是划时代的产品，并且一诞生就能让其余产品相形见绌，将来更是值得期待。

远程开发并不是仅仅是直接在服务器上编辑代码，远程开发侧重的不该该是是“远程”，而是“开发”，至于“远程”对用户而言应该是无感的，除了代码是在远程服务器上存储和运行，其余体验应该和本地开发一致，撰写代码时能享受到 IDE 带来的便利，运行代码时没必要额外去上传下载——这彷佛看起来很容易，但在VS Code Remote 出现以前，没有工具能作到。

远程开发能完美解决多设备开发的问题，同时拥有多台设备，如何在这些设备之间无缝切换？我知道你给的答案会是使用 Git 同步代码，但这会致使你离开现有设备时必须提交并推送代码，咱们不得不面对可能要提交中间代码以及可能忘记推送的问题。

使用 VS Code Remote，你能够无缝的从一台设备切换到另外一台设备，开会前在台式机上写代码，开会时拿起笔记本连上远程服务器就能继续，下班能够直接关掉公司的电脑，回到家打开家里的电脑就能够继续，设备切换历来没有如此方便，你没必要关心这一切是如何实现的，只要使用就好，由于大部分时间你并不会以为这和之前的本地开发有什么区别。

多设备测试同步状况

为了可以同屏，这里使用了一台虚拟机设备。

能够看到，同步速度很是快，既使你快速切换开发设备，也不会有任何问题。

安装及配置流程

本文原计划只介绍 VS Code 远程开发，但 VS Code Remote 几乎是一个零配置的工具，因此本文增长了远程环境配置的部分，会手把手教读者为你的 Linux 环境配置 Zsh + Powerlevel9k，以及升级 Git、安装 Node、yarn等，即便你是新手，按照本文指引，也能实现前文的效果图。

本文撰写时使用服务器配置为 2核4G，操做系统为 CentOS 7.6/7.7，若是你使用的是 Ubuntu，部分命令将可能有所不一样。

最终效果：

准备工做

• 一台可以安装 VS Code 的电脑
• 一台配置不要过低的服务器，并安装好 CentOS 7.5 或更高版本

这里最大的挑战应该就是服务器了，时逢双十一，腾讯云阿里云都有特别便宜的服务器，能够趁机来一台，找不到的能够留言。

本地环境配置

扩展安装

为了本教程对初次使用 VS Code 的用户更有指导价值，特地将 VS Code 及其扩展所有清除，全新安装了 VS Code：

远程开发必备扩展安装

在扩展中搜索 remote ，找到 Remote Development，安装便可，会为你安装包括 Remote-SSH 等所有远程开发使用的扩展，固然，本文将只针对 Remote-SSH，即在远程服务器上进行开发，容器和 WSL 的远程开发功能待读者去发掘。

安装完成后，你会发现左下角多了一个小图标，点击就能够看到用来链接远程开发的菜单了。

VS Code 扩展我的推荐

没有扩展的 VS Code 是不完整的，毕竟这是一个靠扩展才能变身 IDE 的编辑器，网上有不少 VS Code 扩展的文章，我这里只将我的使用的扩展列个清单，供各位参考（本人目前是前端开发，目前项目主要基于 Vue）：

• Setting Sync: 使用 Github Gist 服务同步你的扩展配置的工具，更换设备不再用一个一个的安装扩展了；
• Dracula Official： 吸血鬼主题，以前一直喜欢 One Dark 风格的主题，最近开始以为本主题才更舒服；
• Vim: 若是你和我同样是 Vim 用户的话，这款扩展必定一样必不可少；
• GitLens: Git 用户必备，我一直认为这款插件带来的体验超越了 JetBrains 系列产品，这也是我逐步将 VS Code 做为主力 IDE 的缘由之一，做为补充，能够再安装一个 Git History，颜值控必备；
• indent-rainbow：用颜色填充缩进，很是直观，若是有缩进错误还会变成红色，在 WebStorm 上使用没有此扩展的替代品；
• Bracket Pair Colorizer： 为括号对进行着色，既美观也实用；
• Highlight Matching Tag： 点击某 Tag 时对应的 Tag 下会有下划线标示，比较实用；
• ESLint： 若是不是上古时代过来的高手，lint 系列工具是必备的，必装；
• Prettier - Code formatter： 配合 ESLint 使用，统一美化项目代码，必装；
• EditorConfig for VS Code： 让 VS Code 也能认识 .editorconfig 文件，必装；
• Vetur： Vue 开发者必装，不装还能开发的话算你厉害；
• Debugger for Chrome： 调试工具，必装；

我习惯于打开 VS Code 的 Auto Save，延迟1秒自动保存，也推荐其余小伙伴打开这一特性；另外，ESLint 安装后，须要设置才能 Vue 项目和 React 项目中生效，请自行搜索，这里不重复

建立密钥对

若是你以前从未使用过密钥登陆服务器，也未配置过 Github、Gitlab 等服务的密钥认证，那么须要先建立密钥对，若是不须要则能够跳过此部分。

若是你使用的是 macOS，那么直接打开终端，输入ssh-keygen -t rsa，回车确认便可，默认会存储在用户名录下的 .ssh 目录；若是使用的是 Windows，那么须要安装 Git，而后在任意位置点击鼠标右键，选择“Git Bash Here”，而后输入ssh-keygen -t rsa，直接回车确认便可，默认也会存储在当前用户目录下的 .ssh 目录。

能够自行搜索 ssh-keygen 参数，对安全性要求通常的状况下默认便可。

配置密钥登陆服务器

为了免密登陆服务器，咱们须要将咱们的公钥复制到服务器，这个根据你购买的服务器不一样有所不一样，通常而言有几种状况：

• 服务器提供了初始登陆密码/购买时用户输入了密码：此种状况下，使用ssh-copy-id root@服务器IP，须要输入密码进行确认，以后再登陆就能够直接经过ssh root@服务器IP便可

• 服务器建立时就能够绑定密钥，将 id_rsa.pub 文件内容添加为密钥便可，服务器建立后，直接能够经过ssh root@服务器IP登陆

此处不赘述，若是有问题能够自行搜索

为便于测试，本人使用了一台2核4G的测试主机，服务提供商为 Hetzner，位于德国，安装的操做系统为 CentOS 7.7，固然，如下的内容对于 CentOS 7 的其余版本也通常是适用的。

点击左下角，选择 Remote-SSH: Connect to Host，而后选择 Configure SSH Hosts，选择默认生成的配置文件进行配置，Host 填写为要起的别名，HostName 填 IP 或者域名（若是你配置过的话），User 填登陆用户名：

以后保存，再点击左下方进行链接，第一次链接时须要在服务器上下载安装必备的文件，稍等后便可链接成功：

查看左下角已经显示链接成功，打开终端也能够看到此时使用的是远程服务器的终端，注意咱们不少的扩展是须要安装在服务器端的，好比 Git 相关的扩展，毕竟咱们要编辑的文件是位于服务器而非本地，点击Install in SSH：XXX再安装一次便可：

实际上，最狭义的远程开发配置已经完成了，如今你就能够在服务器上建立编辑文件，运行服务，而且经过自带的端口转发在本地进行查看了：

不过这离实用还远不够，咱们还须要配置更多，好比部署开发环境，美化 Linux 终端等，这里仅之前端开发的须要，讲一下安装 Zsh，安装 Node 环境等步骤。

远程环境配置

本部分主要包括三大部分，一是 Zsh 及其扩展安装，二是升级 Git，三是 Node 环境安装。

Zsh 及其扩展安装

Zsh 是什么这里再也不介绍，你只要知道这是最强大的终端就能够，本博客以前介绍过在 macOS 里的相关安装配置，有使用 macOS 的朋友能够点击这里阅读。

更新软件库，安装 Vim 等基础工具

yum update && yum install vim
复制代码

肯定并等待安装完成便可。

教程进行到下面才发现这里还须要安装 Git，因此推荐在这里使用yum install git一并安装 Git

安装 Zsh 并设置为默认终端

安装 Zsh

yum install zsh
复制代码

肯定并等待安装完成便可。

将 Zsh 设置为默认 Shell

chsh -s /bin/zsh
复制代码

以后从新登陆远程服务器，查看默认 Shell：

咱们看到，Zsh 已经安装成功并被配置为了默认 Shell。

安装 antigen 并配置基础插件

安装 antigen

antigen 是一款 Zsh 插件管理器，固然 Zsh 插件管理器不少，不过 antigen 本人用起来比较舒服，其 Github 上有 5400 Star，也说明该项目仍是有必定的用户基础的。

咱们参考其 Github 页面上的安装指引：

直接运行curl -L git.io/antigen > antigen.zsh，就能够将 antigen.zsh 下载到当前目录，固然你能够和我同样，建立一个新目录 antigen，而后将 antigen.zsh 移动到该目录：

mkdir antigen
mv antigen.zsh ./antigen
复制代码

配置基础插件

Zsh 插件众多，做为初级用户，只要安装几个经常使用插件就能有不错的体验了，若是有额外需求自行挖掘便可，这里咱们以官方提供的模板为例进行配置：

vim ~/.zshrc
复制代码

这会建立一个 .zshrc 文件，这是 Zsh 默认的配置文件，而后咱们将 antigen 提供的默认配置内容粘贴进来并稍加修改，下面提供的内容是稍加改进的 antigen 默认配置，添加了几个本人认为必备的扩展，在本博客另外一篇文章有说起：

# 注意这里须要输入你的 antigen.zsh 文件路径
source ~/antigen/antigen.zsh

# Load the oh-my-zsh's library.
antigen use oh-my-zsh

# Bundles from the default repo (robbyrussell's oh-my-zsh).
antigen bundle git
antigen bundle heroku
antigen bundle pip
antigen bundle lein
antigen bundle command-not-found

# Auto completions bundles.
antigen bundle zsh-users/zsh-autosuggestions
antigen bundle zsh-users/zsh-completions

# Syntax highlighting bundle.
antigen bundle zsh-users/zsh-syntax-highlighting

# Load the theme.
antigen theme robbyrussell

# Tell Antigen that you're done.
antigen apply

复制代码

须要注意，复制配置内容时，前面可能会有多余的 #，请自行删除。

保存文件后退出，而后运行source ~/.zshrc便可，在这里我才发现原来没有安装 git 是没法使用antigen的，因此须要使用yum install git安装一下 git，再从新链接远程服务器，这时你就会发现，插件都安装成功了，你的终端样子也发生了变化：

须要注意的一点是，运行了 source ~/.zshrc后，插件可以正常进行安装，但安装完成后有时会卡住，须要重连远程服务器，这多是个 Bug，但影响不大。

安装 Powerlevel9k 并配置（可选）

若是你平时几乎不使用 Git，也不喜欢折腾，此部分可略过

Powerlevel9k 其实也是一款 Zsh 主题，但与其余主题不一样，这款主题能够经过配置实现很是强大的功能，相信我，你用过以后就会爱不释手。

咱们依旧参考其 Github 主页上的安装指引：

• 安装 Powerline 字体
• 安装 Powerlevel9k 主题

安装 Powerline 字体

为了能正常显示 Zsh 的部分主题以及下文要配置的 Powerlevel9k 主题，咱们必须安装 Powerline 字体，步骤以下：

cd ~
git clone https://github.com/powerline/fonts.git
cd fonts
./install.sh
复制代码

安装 Powerlevel9k 主题

参考安装指引中的 antigen 安装部分：

按指引修改咱们的 .zshrc 文件：

source ~/antigen/antigen.zsh
POWERLEVEL9K_INSTALLATION_PATH=$ANTIGEN_BUNDLES/bhilburn/powerlevel9k

# Load the oh-my-zsh's library.
antigen use oh-my-zsh

# Bundles from the default repo (robbyrussell's oh-my-zsh).
antigen bundle git
antigen bundle heroku
antigen bundle pip
antigen bundle lein
antigen bundle command-not-found

# Auto completions bundles.
antigen bundle zsh-users/zsh-autosuggestions
antigen bundle zsh-users/zsh-completions

# Syntax highlighting bundle.
antigen bundle zsh-users/zsh-syntax-highlighting

# Load the theme.
antigen theme bhilburn/powerlevel9k powerlevel9k

# Tell Antigen that you're done.
antigen apply
复制代码

以后运行source ~/.zshrc便可，立刻就能看到效果：

至于怎么配置这款工具，能够参考其 Github 主页，若是你想开箱即用，那能够直接使用本人的配置：

将如下内容复制到 .zshrc 文件最后保存便可， source ~/.zshrc便可生效

# Powerlevel9K配置
POWERLEVEL9K_MODE='nerdfont-complete'
POWERLEVEL9K_SHOW_CHANGESET=true
POWERLEVEL9K_VCS_GIT_HOOKS=(vcs-detect-changes git-untracked git-aheadbehind git-stash git-remotebranch git-tagname)
POWERLEVEL9K_VCS_CLEAN_FOREGROUND='black'
POWERLEVEL9K_VCS_CLEAN_BACKGROUND='green'
POWERLEVEL9K_VCS_UNTRACKED_FOREGROUND='black'
POWERLEVEL9K_VCS_UNTRACKED_BACKGROUND='yellow'
POWERLEVEL9K_VCS_MODIFIED_FOREGROUND='black'
POWERLEVEL9K_VCS_MODIFIED_BACKGROUND='yellow'
POWERLEVEL9K_VCS_UNTRACKED_ICON='\u25CF'
POWERLEVEL9K_VCS_UNSTAGED_ICON='\u00b1'
POWERLEVEL9K_VCS_INCOMING_CHANGES_ICON='\u2193'
POWERLEVEL9K_VCS_OUTGOING_CHANGES_ICON='\u2191'
POWERLEVEL9K_VCS_COMMIT_ICON="\uf417"
#POWERLEVEL9K_PROMPT_ON_NEWLINE=true
#POWERLEVEL9K_PROMPT_ADD_NEWLINE=true
#POWERLEVEL9K_RPROMPT_ON_NEWLINE=true
POWERLEVEL9K_SHORTEN_DIR_LENGTH=3
POWERLEVEL9K_SHORTEN_STRATEGY="truncate_middle"
POWERLEVEL9K_STATUS_VERBOSE=false
POWERLEVEL9K_STATUS_OK_IN_NON_VERBOSE=true
POWERLEVEL9K_STATUS_VERBOSE=false
POWERLEVEL9K_COMMAND_EXECUTION_TIME_THRESHOLD=0
#POWERLEVEL9K_MULTILINE_FIRST_PROMPT_PREFIX="%F{blue}\u256D\u2500%f"
#POWERLEVEL9K_MULTILINE_LAST_PROMPT_PREFIX="%F{blue}\u2570\uf460%f "
POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(
  context
  ssh
  root_indicator
  dir
  dir_writable)
POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=(
  vcs)
DISABLE_UPDATE_PROMPT=false
复制代码

咱们经过建立一个空的 Git仓库 能够测试一下效果：

须要自定义配置的，请自行调整，本文不进行详细说明。

升级 Git

此时若是你打开 VS Code 链接远程服务器，会发现两个问题，一个是 GitLens 等扩展会提示须要升级 Git 版本，另外一个是终端里字体显示不正常，其中第二个问题只须要到 VS Code 的配置中搜索 fonts，并修改终端字体为 Powerline 字体便可（本文最后会补充说明），第一个问题则须要咱们手动升级 Git 版本。

要升级 CentOS 软件库中的 Git 版本，步骤以下：

• 卸载已安装的 Git

yum remove git
复制代码

• 安装依赖库

yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel
yum install  gcc perl-ExtUtils-MakeMaker
复制代码

• 下载最新版本的 Git

yum install wget # 未安装过 wget，须要先安装
cd ~
wget https://mirrors.edge.kernel.org/pub/software/scm/git/git-2.24.0.tar.gz
复制代码

• 解压安装包

tar zxf git-2.24.0.tar.gz
复制代码

• 编译安装

cd git-2.24.0
make prefix=/usr/local/git all
make install
复制代码

• 添加至环境变量

echo "export PATH=$PATH:/usr/local/git/bin" >> /etc/profile
source /etc/profile
复制代码

上面的配置是将 git 路径添加到了系统环境变量，若是是非 root 用户，请参考这篇文章

能够经过git --version查看是否已经成功安装最新版本 Git，若是不是最新版本，请重复执行一次 yum remove git和make install。

安装 Node 环境

安装 Nvm

Nvm 是很是好用的 Node 版本管理工具，安装也很是简单，直接参考其Github 主页指引安装便可：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
复制代码

或者

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
复制代码

须要注意将安装时最下方的提示内容复制到你的 .zshrc 文件中：

复制完成以后执行一次source ~/.zshrc便可。以后能够经过nvm --verison 查看安装版本：

安装 Node

直接运行nvm install node安装最新 node 版本，或者经过nvm ls-remote查看可安装版本后选择须要的版本安装便可。

其余配置

目前咱们要作的工做基本完成了，这里将用来补充一些问题的解决。

VS Code 未切换至 Zsh

若是链接远程服务器发现不是 Zsh，手动运行一次 zsh 就能够了，以后再链接终端就会是 Zsh 了。

解决 VS Code 终端乱码问题

如今使用 VS Code 链接远程服务器后，打开终端会乱码：

这是由于未配置 VS Code 终端字体致使的，咱们须要确保系统中有支持 Powerline 的字体，并将终端字体设置为支持 Powerline 的字体。

若是你系统里没有相关字体，请自行安装，如 Source Code Pro for Powerline，到这里下载安装，这里不详述。

以后到 VS Code 设置项中，查找 fonts，并修改字体便可，在 Windows 下可能须要将字体设置为 Source Code Pro for Powerline：

写在最后

根据上面的教程，我相信即便是新手也能搭建好本身的远程开发环境了，若是有任何关于环境搭建或者是 VS Code 使用的问题，欢迎留言提问！