這纔是真正的遠程開發——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 使用的問題，歡迎留言提問！