前言

因應遠端辦公的需求提升，
我也開始尋找屬於自己遠端辦公最佳效率的方式，
除了之前說到的 MobaXterm (可參考下文)，
能夠方便的在 windows 上面進行遠端的 terminal 操作，
本文會提供一種新的方式，透過本地的 VScode，
可以直接把遠端 (學校/公司) 的 VScode 視窗介面拉回家中辦公!

效率比遠端桌面快多了! 且利用擴充套件可支援圖片與 pdf 瀏覽。
最重要的是， VScode 不論是在 windows, mac, linux (ubuntu) 都可以使用!
非常的萬用!!!

• MobaXterm 介紹可參考：

【MobaXterm #1】在 Windows 中使用 MobaXterm VPN 連線至遠端系統 (linux, ubuntu) 遠端 ssh 顯示畫面

比較示意圖：

我們比較三種不同的方式，讀者可自行選擇自己習慣的方式 (只有習慣問題，沒有優劣之分)：

純 terminal 派

• 優：速度最快，已足夠應付 coding
• 缺：無 GUI 視窗，僅能閱讀文字文件

VScode 遠端派 (本文會介紹)

• 優：速度次快，coding 有 GUI 介面、支援檔案總管 ，可透過擴充套件瀏覽圖片, pdf
• 缺：其他應用程式視窗不可使用

遠端桌面派

• 優：只要有網路，幾乎沒什麼做不到的事情
• 缺：速度慢，畢竟是即時傳送畫面

實作大致流程圖

簡單來說，我們需要先在本地電腦掛上 VPN，
我們才能夠連線進去 (學校/公司)，再來就是透過 VScode 擴充套件的 ssh 進行連線。
就可以完成實作囉!

準備 VPN 的部分

準備 VPN 工具 – OpenVPN

step 1. 下載 OpenVPN 軟體

OpenVPN 下載網址：https://openvpn.net/community-downloads/

我們要下載的是 windows-64 位元 的檔案 (通常現在比較新的 windows 電腦都是這個，不是請自行調整)

step 2. 安裝 OpenVPN 軟體

安裝完即可。

取得 vpn 設定檔案 (副檔名為 .ovpn 的檔案，通常會由企業或學校機構提供。)

總之，這邊幫不了忙XD
請向你的 企業 或 學校機構拿到一個「副檔名為 .ovpn 的檔案」。

連線至 VPN

step 1. 匯入 「.ovpn」 設定檔

從右下角選單「右鍵」OpenVPN，選擇「匯入設定檔」，
將剛剛上一個步驟中的「.ovpn 的檔案」匯入。

step 2. 透過 VPN 連線至遠端

從右下角選單「右鍵」OpenVPN，選擇「連線」即可。

(連線時，也請向「企業」或「學校機構」取得連線使用的帳號密碼)

準備 SSH 的部分

下載 VS code 的部分就不再贅述

step 1. 下載擴充套件「 Remote – SSH 」

step 2. 在 VScode 左下角啟動連線 ssh 的功能 (記得有學校/公司 VPN 需求的請先在上一步進行連線)

這邊可以選擇

• 「Connect Current window to Host…」 ：在「本視窗」進行 ssh 連線
• 「Connect to Host…」 ：另外「開一個新視窗」進行 ssh 連線

step 3. 輸入密碼後，選擇遠端電腦的資料夾路徑

例如說，這邊以遠端的桌面 (/home/ubuntu/Desktop) 進行示範，並按下「OK」

step 4. 可以發現旁邊有各種的檔案出現了!

如果是「文字文件」直接開啟當然沒有問題，「圖片」也能直接開啟。

比起終端機 terminal 直接操作，「圖片」能直接顯示，編輯程式碼也能使用「滑鼠」，更方便了!

「VScode ssh」相比「純 termianl ssh」特色功能

檔案總管，方便使用滑鼠快速操作，比起「純 termianl ssh」更快速

例如上面的圖片所示，檔案總管的瀏覽，方便使用滑鼠快速操作，比起「純 termianl ssh」更快速

可以用滑鼠協助編輯程式碼

這個應該是 VS code 的基本功能了，現在可以直接遠端編輯，「自己在家跟在學校公司一樣」!

比起「純 termianl ssh」可以直接開啟圖片、pdf (pdf 需安裝套件)

想要在 VS code 遠端開啟 pdf，推薦可以下載「vscode-pdf」，可以直接在 VScode 顯示出 pdf 文件。

VS code 使用技巧：使用「ctrl + `」，可以直接叫出終端機 (terminal)，且可以快速多開終端機

在 VS code 中使用快速鍵「ctrl + `」就可以直接呼叫出終端機 (terminal)，

而在右方的「+」，可以快速新建終端機視窗，而且左側可以快速在不同的終端機之間切換。

如果是純 termianl ssh，要多開 terminal 還需要重新建立連線，相對來說比較麻煩
(或是也有其他方法我還不知道，不過個人目前覺得這方式很快!)

自動儲存並記憶連線ip, 方便下次連線

第二次連線後，因為ip被儲存下來了，
我們要連線非常的方便! 直接輸入密碼就可以使用了!

「VScode ssh」相比「遠端桌面」特色功能

「遠端桌面」應有盡有，但因為是畫面傳輸，速度一定相對較慢

「遠端桌面」，如 chrome remote desktop, anydesk, teamviewer
就是把遠端的畫面直接連接回自己的電腦，基本上功能「要有什麼就有什麼」。

但也因為是畫面傳輸，一定會有延遲的問題，
如果網路環境不佳，「寫 code 可能會非常的 lag」，
這光用想的就很崩潰了吧!!! 寫個 code 還會 lag，整個效率大打折扣了!

⭐文字(程式碼) 編輯器 相關文章整理⭐：
⭐VScode 相關文章整理⭐：
1.	【VScode】VScode實用快速鍵總整理
2.	【VScode】直接把 coding 的「視窗」搬回家，不要再用慢慢的遠端桌面了! VScode ssh 遠端辦公
⭐Sublime 文章連結整理⭐：
1.	【Sublime】Sublime 實用快速鍵總整理
2.	【Sublime】Python 縮排小技巧 (很爛但實用) 快速將 tab 改成「4格空白」的方法
3.	【Sublime】Sublime 將縮排 “tab” 改成 4格空白 的方法 (圖文說明) sublime indent 4 spaces
4.	【Sublime】在 sublime 啟動終端機, Sublime terminal – 圖文教學 安裝/解除安裝 terminus
⭐vim 相關文章整理⭐：
1.	【Linux】linux/ubuntu/mac vim 的 新手/初學者 的基礎使用指令 與 個人常用功能總整理 (持續更新)
⭐【喜歡我的文章嗎? 歡迎幫我按讚~ 讓基金會請創作者喝一杯咖啡! 】 如果喜歡我的文章，請幫我在下方【按五下Like】 (Google, Facebook 免註冊)，會由 「LikeCoin」 贊助作者鼓勵繼續創作，讀者們「只需幫忙按讚，完全不用出錢」哦!