內容目錄

前言

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

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

MobaXterm 介紹可參考：

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

</p><h1 id="比較示意圖"><span class="ez-toc-section" id="%E6%AF%94%E8%BC%83%E7%A4%BA%E6%84%8F%E5%9C%96%EF%BC%9A"/>比較示意圖：<span class="ez-toc-section-end"/></h1><p>我們比較三種不同的方式，讀者可自行選擇自己習慣的方式 (只有習慣問題，沒有優劣之分)：</p><h2 id="純-terminal-派"><span class="ez-toc-section" id="%E7%B4%94_terminal_%E6%B4%BE"/>純 terminal 派<span class="ez-toc-section-end"/></h2><ul><li>優：速度最快，已足夠應付 coding</li><li>缺：無 GUI 視窗，僅能閱讀文字文件</li></ul><h2 id="vscode-遠端派-本文會介紹"><span class="ez-toc-section" id="VScode_%E9%81%A0%E7%AB%AF%E6%B4%BE_%E6%9C%AC%E6%96%87%E6%9C%83%E4%BB%8B%E7%B4%B9"/>VScode 遠端派 (本文會介紹)<span class="ez-toc-section-end"/></h2><ul><li>優：速度次快，coding 有 GUI 介面、支援檔案總管，可透過擴充套件瀏覽圖片, pdf</li><li>缺：其他應用程式視窗不可使用</li></ul><h2 id="遠端桌面派"><span class="ez-toc-section" id="%E9%81%A0%E7%AB%AF%E6%A1%8C%E9%9D%A2%E6%B4%BE"/>遠端桌面派<span class="ez-toc-section-end"/></h2><ul><li>優：只要有網路，幾乎沒什麼做不到的事情</li><li>缺：速度慢，畢竟是即時傳送畫面</li></ul><p><a class="wp-editor-md-post-content-link" href="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-1.png"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-1.png" alt=""/></a></p><h1 id="實作大致流程圖"><span class="ez-toc-section" id="%E5%AF%A6%E4%BD%9C%E5%A4%A7%E8%87%B4%E6%B5%81%E7%A8%8B%E5%9C%96"/>實作大致流程圖<span class="ez-toc-section-end"/></h1><p>簡單來說，我們需要先在本地電腦掛上 VPN，<br/> 我們才能夠連線進去 (學校/公司)，再來就是透過 VScode 擴充套件的 ssh 進行連線。<br/> 就可以完成實作囉!</p><p><a class="wp-editor-md-post-content-link" href="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-2.png"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-2.png" alt=""/></a></p><h1 id="準備-vpn-的部分"><span class="ez-toc-section" id="%E6%BA%96%E5%82%99_VPN_%E7%9A%84%E9%83%A8%E5%88%86"/>準備 VPN 的部分<span class="ez-toc-section-end"/></h1><h2 id="準備-vpn-工具-openvpn"><span class="ez-toc-section" id="%E6%BA%96%E5%82%99_VPN_%E5%B7%A5%E5%85%B7_-_OpenVPN"/>準備 VPN 工具 – OpenVPN<span class="ez-toc-section-end"/></h2><h3 id="step-1-下載-openvpn-軟體"><span class="ez-toc-section" id="step_1_%E4%B8%8B%E8%BC%89_OpenVPN_%E8%BB%9F%E9%AB%94"/>step 1. 下載 OpenVPN 軟體<span class="ez-toc-section-end"/></h3><p>OpenVPN 下載網址：https://openvpn.net/community-downloads/</p><p><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://www.wongwonggoods.com/wp-content/uploads/2021/05/openvpn-1-1024x465.png" alt=""/></p><p>我們要下載的是 windows-64 位元的檔案 (通常現在比較新的 windows 電腦都是這個，不是請自行調整)</p><h3 id="step-2-安裝-openvpn-軟體"><span class="ez-toc-section" id="step_2_%E5%AE%89%E8%A3%9D_OpenVPN_%E8%BB%9F%E9%AB%94"/>step 2. 安裝 OpenVPN 軟體<span class="ez-toc-section-end"/></h3><p>安裝完即可。</p><h2 id="取得-vpn-設定檔案-副檔名為-ovpn-的檔案-通常會由企業或學校機構提供"><span class="ez-toc-section" id="%E5%8F%96%E5%BE%97_vpn_%E8%A8%AD%E5%AE%9A%E6%AA%94%E6%A1%88_%E5%89%AF%E6%AA%94%E5%90%8D%E7%82%BA_ovpn_%E7%9A%84%E6%AA%94%E6%A1%88%EF%BC%8C%E9%80%9A%E5%B8%B8%E6%9C%83%E7%94%B1%E4%BC%81%E6%A5%AD%E6%88%96%E5%AD%B8%E6%A0%A1%E6%A9%9F%E6%A7%8B%E6%8F%90%E4%BE%9B%E3%80%82"/>取得 vpn 設定檔案 (副檔名為 .ovpn 的檔案，通常會由企業或學校機構提供。)<span class="ez-toc-section-end"/></h2><blockquote><p> 總之，這邊幫不了忙XD<br/> 請向你的企業或學校機構拿到一個「副檔名為 .ovpn 的檔案」。</p></blockquote><h2 id="連線至-vpn"><span class="ez-toc-section" id="%E9%80%A3%E7%B7%9A%E8%87%B3_VPN"/>連線至 VPN<span class="ez-toc-section-end"/></h2><h3 id="step-1-匯入-ovpn-設定檔"><span class="ez-toc-section" id="step_1_%E5%8C%AF%E5%85%A5_%E3%80%8Covpn%E3%80%8D_%E8%A8%AD%E5%AE%9A%E6%AA%94"/>step 1. 匯入「.ovpn」設定檔<span class="ez-toc-section-end"/></h3><p>從右下角選單「右鍵」OpenVPN，選擇「匯入設定檔」，<br/> 將剛剛上一個步驟中的「.ovpn 的檔案」匯入。</p><p><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://www.wongwonggoods.com/wp-content/uploads/2021/05/openvpn-2.png" alt=""/></p><h3 id="step-2-透過-vpn-連線至遠端"><span class="ez-toc-section" id="step_2_%E9%80%8F%E9%81%8E_VPN_%E9%80%A3%E7%B7%9A%E8%87%B3%E9%81%A0%E7%AB%AF"/>step 2. 透過 VPN 連線至遠端<span class="ez-toc-section-end"/></h3><p>從右下角選單「右鍵」OpenVPN，選擇「連線」即可。</p><p>(連線時，也請向「企業」或「學校機構」取得連線使用的帳號密碼)</p><p><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://www.wongwonggoods.com/wp-content/uploads/2021/05/openvpn-3.png" alt=""/></p><h1 id="準備-ssh-的部分"><span class="ez-toc-section" id="%E6%BA%96%E5%82%99_SSH_%E7%9A%84%E9%83%A8%E5%88%86"/>準備 SSH 的部分<span class="ez-toc-section-end"/></h1><p>下載 VS code 的部分就不再贅述</p><h2 id="step-1-下載擴充套件-remote-ssh"><span class="ez-toc-section" id="step_1_%E4%B8%8B%E8%BC%89%E6%93%B4%E5%85%85%E5%A5%97%E4%BB%B6%E3%80%8C_Remote_-_SSH_%E3%80%8D"/>step 1. 下載擴充套件「 Remote – SSH 」<span class="ez-toc-section-end"/></h2><p><a class="wp-editor-md-post-content-link" href="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-3.png"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-3.png" alt=""/></a></p><h2 id="step-2-在-vscode-左下角啟動連線-ssh-的功能-記得有學校-公司-vpn-需求的請先在上一步進行連線"><span class="ez-toc-section" id="step_2_%E5%9C%A8_VScode_%E5%B7%A6%E4%B8%8B%E8%A7%92%E5%95%9F%E5%8B%95%E9%80%A3%E7%B7%9A_ssh_%E7%9A%84%E5%8A%9F%E8%83%BD_%E8%A8%98%E5%BE%97%E6%9C%89%E5%AD%B8%E6%A0%A1%E5%85%AC%E5%8F%B8_VPN_%E9%9C%80%E6%B1%82%E7%9A%84%E8%AB%8B%E5%85%88%E5%9C%A8%E4%B8%8A%E4%B8%80%E6%AD%A5%E9%80%B2%E8%A1%8C%E9%80%A3%E7%B7%9A"/>step 2. 在 VScode 左下角啟動連線 ssh 的功能 (記得有學校/公司 VPN 需求的請先在上一步進行連線)<span class="ez-toc-section-end"/></h2><p>這邊可以選擇</p><ul><li>「Connect Current window to Host…」：在「本視窗」進行 ssh 連線</li><li>「Connect to Host…」：另外「開一個新視窗」進行 ssh 連線</li></ul><p><a class="wp-editor-md-post-content-link" href="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-4-1.png"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-4-1-1024x684.png" alt=""/></a></p><h2 id="step-3-輸入密碼後-選擇遠端電腦的資料夾路徑"><span class="ez-toc-section" id="step_3_%E8%BC%B8%E5%85%A5%E5%AF%86%E7%A2%BC%E5%BE%8C%EF%BC%8C%E9%81%B8%E6%93%87%E9%81%A0%E7%AB%AF%E9%9B%BB%E8%85%A6%E7%9A%84%E8%B3%87%E6%96%99%E5%A4%BE%E8%B7%AF%E5%BE%91"/>step 3. 輸入密碼後，選擇遠端電腦的資料夾路徑<span class="ez-toc-section-end"/></h2><p>例如說，這邊以遠端的桌面 (/home/ubuntu/Desktop) 進行示範，並按下「OK」</p><p><a class="wp-editor-md-post-content-link" href="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-6.png"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-6.png" alt=""/></a></p><h2 id="step-4-可以發現旁邊有各種的檔案出現了"><span class="ez-toc-section" id="step_4_%E5%8F%AF%E4%BB%A5%E7%99%BC%E7%8F%BE%E6%97%81%E9%82%8A%E6%9C%89%E5%90%84%E7%A8%AE%E7%9A%84%E6%AA%94%E6%A1%88%E5%87%BA%E7%8F%BE%E4%BA%86"/>step 4. 可以發現旁邊有各種的檔案出現了!<span class="ez-toc-section-end"/></h2><p>如果是「文字文件」直接開啟當然沒有問題，「圖片」也能直接開啟。</p><blockquote><p> 比起終端機 terminal 直接操作，<span class="text-highlighted-inline" style="background-color: #fffd38;">「圖片」能直接顯示，編輯程式碼也能使用「滑鼠」</span>，更方便了!</p></blockquote><p><a class="wp-editor-md-post-content-link" href="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-7-2.png"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-7-2.png" alt=""/></a></p><h1 id="vscode-ssh-相比-純-termianl-ssh-特色功能"><span class="ez-toc-section" id="%E3%80%8CVScode_ssh%E3%80%8D%E7%9B%B8%E6%AF%94%E3%80%8C%E7%B4%94_termianl_ssh%E3%80%8D%E7%89%B9%E8%89%B2%E5%8A%9F%E8%83%BD"/>「VScode ssh」相比「純 termianl ssh」特色功能<span class="ez-toc-section-end"/></h1><h2 id="檔案總管-方便使用滑鼠快速操作-比起-純-termianl-ssh-更快速"><span class="ez-toc-section" id="%E6%AA%94%E6%A1%88%E7%B8%BD%E7%AE%A1%EF%BC%8C%E6%96%B9%E4%BE%BF%E4%BD%BF%E7%94%A8%E6%BB%91%E9%BC%A0%E5%BF%AB%E9%80%9F%E6%93%8D%E4%BD%9C%EF%BC%8C%E6%AF%94%E8%B5%B7%E3%80%8C%E7%B4%94_termianl_ssh%E3%80%8D%E6%9B%B4%E5%BF%AB%E9%80%9F"/>檔案總管，方便使用滑鼠快速操作，比起「純 termianl ssh」更快速<span class="ez-toc-section-end"/></h2><p>例如上面的圖片所示，檔案總管的瀏覽，方便使用滑鼠快速操作，比起「純 termianl ssh」更快速</p><p><a class="wp-editor-md-post-content-link" href="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-7-2.png"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-7-2.png" alt=""/></a></p><h2 id="可以用滑鼠協助編輯程式碼"><span class="ez-toc-section" id="%E5%8F%AF%E4%BB%A5%E7%94%A8%E6%BB%91%E9%BC%A0%E5%8D%94%E5%8A%A9%E7%B7%A8%E8%BC%AF%E7%A8%8B%E5%BC%8F%E7%A2%BC"/>可以用滑鼠協助編輯程式碼<span class="ez-toc-section-end"/></h2><p>這個應該是 VS code 的基本功能了，現在可以直接遠端編輯，「自己在家跟在學校公司一樣」!</p><p><a class="wp-editor-md-post-content-link" href="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-8.png"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-8.png" alt=""/></a></p><h2 id="比起-純-termianl-ssh-可以直接開啟圖片-pdf-pdf-需安裝套件"><span class="ez-toc-section" id="%E6%AF%94%E8%B5%B7%E3%80%8C%E7%B4%94_termianl_ssh%E3%80%8D%E5%8F%AF%E4%BB%A5%E7%9B%B4%E6%8E%A5%E9%96%8B%E5%95%9F%E5%9C%96%E7%89%87%E3%80%81pdf_pdf_%E9%9C%80%E5%AE%89%E8%A3%9D%E5%A5%97%E4%BB%B6"/>比起「純 termianl ssh」可以直接開啟圖片、pdf (pdf 需安裝套件)<span class="ez-toc-section-end"/></h2><p>想要在 VS code 遠端開啟 pdf，推薦可以下載「vscode-pdf」，可以直接在 VScode 顯示出 pdf 文件。</p><p><a class="wp-editor-md-post-content-link" href="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-9.png"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-9.png" alt=""/></a></p><h2 id="vs-code-使用技巧-使用-ctrl-+-`-可以直接叫出終端機-terminal-且可以快速多開終端機"><span class="ez-toc-section" id="VS_code_%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7%EF%BC%9A%E4%BD%BF%E7%94%A8%E3%80%8Cctrl_%E3%80%8D%EF%BC%8C%E5%8F%AF%E4%BB%A5%E7%9B%B4%E6%8E%A5%E5%8F%AB%E5%87%BA%E7%B5%82%E7%AB%AF%E6%A9%9F_terminal%EF%BC%8C%E4%B8%94%E5%8F%AF%E4%BB%A5%E5%BF%AB%E9%80%9F%E5%A4%9A%E9%96%8B%E7%B5%82%E7%AB%AF%E6%A9%9F"/>VS code 使用技巧：使用「ctrl + `」，可以直接叫出終端機 (terminal)，且可以快速多開終端機<span class="ez-toc-section-end"/></h2><p>在 VS code 中使用快速鍵「ctrl + `」就可以直接呼叫出終端機 (terminal)，</p><p>而在右方的「+」，可以快速新建終端機視窗，而且左側可以快速在不同的終端機之間切換。</p><blockquote><p> 如果是純 termianl ssh，要多開 terminal 還需要重新建立連線，相對來說比較麻煩<br/> (或是也有其他方法我還不知道，不過個人目前覺得這方式很快!)</p></blockquote><p><a class="wp-editor-md-post-content-link" href="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-10.png"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-10-1024x306.png" alt=""/></a></p><h2 id="自動儲存並記憶連線ip-方便下次連線"><span class="ez-toc-section" id="%E8%87%AA%E5%8B%95%E5%84%B2%E5%AD%98%E4%B8%A6%E8%A8%98%E6%86%B6%E9%80%A3%E7%B7%9Aip_%E6%96%B9%E4%BE%BF%E4%B8%8B%E6%AC%A1%E9%80%A3%E7%B7%9A"/>自動儲存並記憶連線ip, 方便下次連線<span class="ez-toc-section-end"/></h2><p>第二次連線後，因為ip被儲存下來了，<br/> 我們要連線非常的方便! 直接輸入密碼就可以使用了!</p><p><a class="wp-editor-md-post-content-link" href="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-5.png"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://www.wongwonggoods.com/wp-content/uploads/2021/06/vscode-ssh-5.png" alt=""/></a></p><h1 id="vscode-ssh-相比-遠端桌面-特色功能"><span class="ez-toc-section" id="%E3%80%8CVScode_ssh%E3%80%8D%E7%9B%B8%E6%AF%94%E3%80%8C%E9%81%A0%E7%AB%AF%E6%A1%8C%E9%9D%A2%E3%80%8D%E7%89%B9%E8%89%B2%E5%8A%9F%E8%83%BD"/>「VScode ssh」相比「遠端桌面」特色功能<span class="ez-toc-section-end"/></h1><h2 id="遠端桌面-應有盡有-但因為是畫面傳輸-速度一定相對較慢"><span class="ez-toc-section" id="%E3%80%8C%E9%81%A0%E7%AB%AF%E6%A1%8C%E9%9D%A2%E3%80%8D%E6%87%89%E6%9C%89%E7%9B%A1%E6%9C%89%EF%BC%8C%E4%BD%86%E5%9B%A0%E7%82%BA%E6%98%AF%E7%95%AB%E9%9D%A2%E5%82%B3%E8%BC%B8%EF%BC%8C%E9%80%9F%E5%BA%A6%E4%B8%80%E5%AE%9A%E7%9B%B8%E5%B0%8D%E8%BC%83%E6%85%A2"/>「遠端桌面」應有盡有，但因為是畫面傳輸，速度一定相對較慢<span class="ez-toc-section-end"/></h2><p>「遠端桌面」，如 chrome remote desktop, anydesk, teamviewer<br/> 就是把遠端的畫面直接連接回自己的電腦，基本上功能「要有什麼就有什麼」。</p><p>但也因為是畫面傳輸，一定會有延遲的問題，<br/> 如果網路環境不佳，「<span class="text-highlighted-inline" style="background-color: #fffd38;">寫 code 可能會非常的 lag</span>」，<br/> 這光用想的就很崩潰了吧!!! 寫個 code 還會 lag，整個效率大打折扣了!</p><table id="tablepress-code-editor" class="tablepress tablepress-id-code-editor"><thead><tr class="row-1 odd"><th colspan="2" class="column-1"><strong>⭐文字(程式碼) 編輯器相關文章整理⭐：</strong></th></tr></thead><tbody class="row-hover"><tr class="row-2 even"><td colspan="2" class="column-1"><strong>⭐VScode 相關文章整理⭐：</strong></td></tr><tr class="row-3 odd"><td class="column-1">1.</td><td class="column-2"><a href="https://www.wongwonggoods.com/draft_notes/vscode/fast-vscode/" target="_blank" rel="noopener">【VScode】VScode實用快速鍵總整理</a></td></tr><tr class="row-4 even"><td class="column-1">2.</td><td class="column-2"><a href="https://www.wongwonggoods.com/draft_notes/vscode-ssh/" target="_blank" rel="noopener">【VScode】直接把 coding 的「視窗」搬回家，不要再用慢慢的遠端桌面了! VScode ssh 遠端辦公</a></td></tr><tr class="row-5 odd"><td colspan="2" class="column-1"><strong>⭐Sublime 文章連結整理⭐：</strong></td></tr><tr class="row-6 even"><td class="column-1">1.</td><td class="column-2"><a href="https://www.wongwonggoods.com/draft_notes/sublime/fast-sublime/" target="_blank" rel="noopener">【Sublime】Sublime 實用快速鍵總整理</a></td></tr><tr class="row-7 odd"><td class="column-1">2.</td><td class="column-2"><a href="https://www.wongwonggoods.com/draft_notes/sublime-tab-to-space/" target="_blank" rel="noopener">【Sublime】Python 縮排小技巧 (很爛但實用) 快速將 tab 改成「4格空白」的方法</a></td></tr><tr class="row-8 even"><td class="column-1">3.</td><td class="column-2"><a href="https://www.wongwonggoods.com/draft_notes/sublime-tab-space/" target="_blank" rel="noopener">【Sublime】Sublime 將縮排 “tab” 改成 4格空白的方法 (圖文說明) sublime indent 4 spaces</a></td></tr><tr class="row-9 odd"><td class="column-1">4.</td><td class="column-2"><a href="https://www.wongwonggoods.com/draft_notes/sublime/sublime-terminal/" target="_blank" rel="noopener">【Sublime】在 sublime 啟動終端機, Sublime terminal – 圖文教學安裝/解除安裝 terminus</a></td></tr><tr class="row-10 even"><td colspan="2" class="column-1"><strong>⭐vim 相關文章整理⭐：</strong></td></tr><tr class="row-11 odd"><td class="column-1">1.</td><td class="column-2"><a href="https://www.wongwonggoods.com/linux/linux_basic/linux-ubuntu-vim/" target="_blank" rel="noopener">【Linux】linux/ubuntu/mac vim 的新手/初學者的基礎使用指令與個人常用功能總整理 (持續更新)</a></td></tr></tbody><tfoot><tr class="row-12 even"><th colspan="2" class="column-1">⭐【<strong><a href="https://www.wongwonggoods.com/" target="_blank" rel="noopener">喜歡我的文章嗎? 歡迎幫我按讚~ 讓基金會請創作者喝一杯咖啡! </a></strong>】<br/> 如果喜歡我的文章，請幫我在下方【<strong><a href="https://www.wongwonggoods.com/" target="_blank" rel="noopener"><font style="background-color:yellow;">按五下Like</font></a></strong>】 (<strong><a href="https://www.wongwonggoods.com/" target="_blank" rel="noopener">Google, Facebook 免註冊</a></strong>)，會由「<a href="https://like.co/" target="_blank" rel="noopener">LikeCoin</a>」贊助作者鼓勵繼續創作，讀者們「<strong><a href="https://www.wongwonggoods.com/" target="_blank" rel="noopener"><font style="background-color:yellow;">只需幫忙按讚，完全不用出錢</font></a></strong>」哦!<br/> <img data-lazyloaded="1" data-placeholder-resp="100%x100%" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMDAlIDEwMCUiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNjZmQ0ZGIiLz48L3N2Zz4=" data-src="https://www.wongwonggoods.com/wp-content/uploads/2021/05/likecoin-steps-e1620009209674.png" alt="likecoin-steps" width="100%" height="100%" class="alignnone size-full wp-image-3268"/></th></tr></tfoot></table><figure class="likecoin-embed likecoin-button"><iframe data-lazyloaded="1" src="about:blank" scrolling="no" frameborder="0" style="height:212px;width: 360px;" data-src="https://button.like.co/in/embed/howarder3/button?type=wp&amp;integration=wordpress_plugin&amp;referrer=https%3A%2F%2Fwww.wongwonggoods.com%2Fall-posts%2Fdev-tools%2Flinux-editor%2Fvscode%2Fvscode-ssh%2F"/></figure></div><div class="entry-tags"><a href="https://www.wongwonggoods.com/tag/vscode/" rel="tag"># VScode</a><a href="https://www.wongwonggoods.com/tag/%e9%9a%a8%e6%89%8b%e7%ad%86%e8%a8%98/" rel="tag"># 隨手筆記</a></div><div class="author-box ct-hidden-sm" data-type="type-2"> Howard Weng</h5><div class="author-box-bio"><p>我是 Howard Weng，很多人叫我嗡嗡。這個網站放了我的各種筆記。希望這些筆記也能順便幫助到有需要的人們！如果文章有幫助到你的話，歡迎幫我點讚哦！<br/> 另外，因為定位是「個人的隨手筆記」，有些文章內容「⚠️可能我理解有誤⚠️」或「🥱只寫到一半😴」，如果有發現這樣的情況，歡迎在該文章的最下面留言提醒我！我會儘快修正或補上！感謝大家的建議與幫忙，讓網站能變得更好🙏</p></div><div class="author-box-socials"><span><a href="https://www.facebook.com/wongwong0916/" aria-label="Facebook icon" rel="noopener"><svg class="ct-icon" width="12" height="12" viewbox="0 0 20 20"><path d="M15.2 7.2h-3.9V4.8c0-.7.5-1.2 1.2-1.2H15V0h-3C9.3 0 7.2 2.2 7.2 4.8v2.4H4.8v3.6h2.4V20h4.3v-9.2h3l.7-3.6z"/></svg></a> <a href="https://www.linkedin.com/in/howardweng/" aria-label="LinkedIn icon" rel="noopener"><svg class="ct-icon" width="12" height="12" viewbox="0 0 20 20"><path d="M.1 5.8h4.2V20H.1V5.8zm18.4 1.8c-.8-1-2-1.4-3.5-1.4-1.9 0-3.2 1-4.2 2.4h-.1l-.2-2.8H7.2c.1 1.4 0 14.2 0 14.2h4.3v-8.9c.3-1.1 1.1-1.7 2.2-1.7 1.4 0 2.1 1 2.1 3V20h4.1v-8.1c-.1-1.9-.5-3.3-1.4-4.3zM2.2 0C1 0 0 1 0 2.2c0 1.2 1 2.2 2.2 2.2 1.2 0 2.2-1 2.2-2.2C4.3 1 3.4 0 2.2 0z"/></svg></a> <a href="https://www.wongwonggoods.com" aria-label="Website icon" rel="noopener"><svg class="ct-icon" width="12" height="12" viewbox="0 0 20 20"><path d="M10 0C4.5 0 0 4.5 0 10s4.5 10 10 10 10-4.5 10-10S15.5 0 10 0zm6.9 6H14c-.4-1.8-1.4-3.6-1.4-3.6s2.8.8 4.3 3.6zM10 2s1.2 1.7 1.9 4H8.1C8.8 3.6 10 2 10 2zM2.2 12s-.6-1.8 0-4h3.4c-.3 1.8 0 4 0 4H2.2zm.9 2H6c.6 2.3 1.4 3.6 1.4 3.6C4.3 16.5 3.1 14 3.1 14zM6 6H3.1c1.6-2.8 4.3-3.6 4.3-3.6S6.4 4.2 6 6zm4 12s-1.3-1.9-1.9-4h3.8c-.6 2.1-1.9 4-1.9 4zm2.3-6H7.7s-.3-2 0-4h4.7c.3 1.8-.1 4-.1 4zm.3 5.6s1-1.8 1.4-3.6h2.9c-1.6 2.7-4.3 3.6-4.3 3.6zm1.7-5.6s.3-2.1 0-4h3.4c.6 2.2 0 4 0 4h-3.4z"/></svg></a></span></div> <a href="https://www.wongwonggoods.com/author/admin/" class="ct-author-box-more">文章: 802</a></section></div><nav class="post-navigation "> 上一 <span>文章</span> </span><span class="item-title ct-hidden-sm"> 【Python 平行運算 #3】multiprocessing – 02 | pool, map, apply_async – 用多核心來執行程式並取得結果 (內含範例程式碼) sample code </span></div></a> 下一 <span>文章</span> </span><span class="item-title ct-hidden-sm"> 【iOS】問題解決: Apple watch – autowake 出現 no complication 個人解法 (Apple watch app 與 iphone 重新同步) </span></div><figure class="ct-image-container "><img data-lazyloaded="1" data-placeholder-resp="300x300" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22300%22%20viewBox%3D%220%200%20300%20300%22%3E%3Cfilter%20id%3D%22b%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2212%22%20%2F%3E%3C%2Ffilter%3E%3Cpath%20fill%3D%22%23cfcfcf%22%20d%3D%22M0%200h300v300H0z%22%2F%3E%3Cg%20filter%3D%22url(%23b)%22%20transform%3D%22translate(.6%20.6)%20scale(1.17188)%22%20fill-opacity%3D%22.5%22%3E%3Cellipse%20fill%3D%22%23373737%22%20cx%3D%22127%22%20cy%3D%2273%22%20rx%3D%2260%22%20ry%3D%2260%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M96%20244.3L1.3%20266.1-55.9%2017.7%2038.6-4.1zm198.9%2024.2l-124-21.9L215-4.5l124%2021.9z%22%2F%3E%3Cellipse%20fill%3D%22%239d9d9d%22%20rx%3D%221%22%20ry%3D%221%22%20transform%3D%22rotate(161.5%2050.8%2087.4)%20scale(40.43315%2062.33087)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E" width="300" height="300" data-src="https://www.wongwonggoods.com/wp-content/uploads/2021/03/IMG_2437-300x300.jpg" class="attachment-medium size-medium wp-post-image" alt="newme" decoding="async" data-srcset="https://www.wongwonggoods.com/wp-content/uploads/2021/03/IMG_2437-300x300.jpg 300w, https://www.wongwonggoods.com/wp-content/uploads/2021/03/IMG_2437-150x150.jpg 150w, https://www.wongwonggoods.com/wp-content/uploads/2021/03/IMG_2437-66x66.jpg 66w, https://www.wongwonggoods.com/wp-content/uploads/2021/03/IMG_2437-200x200.jpg 200w, https://www.wongwonggoods.com/wp-content/uploads/2021/03/IMG_2437-400x400.jpg 400w, https://www.wongwonggoods.com/wp-content/uploads/2021/03/IMG_2437-600x600.jpg 600w, https://www.wongwonggoods.com/wp-content/uploads/2021/03/IMG_2437.jpg 731w" data-sizes="(max-width: 300px) 100vw, 300px" itemprop="image" style="aspect-ratio: 1/1;"/><svg width="20px" height="15px" viewbox="0 0 20 15"><polygon points="14.5,2 13.6,2.9 17.6,6.9 0,6.9 0,8.1 17.6,8.1 13.6,12.1 14.5,13 20,7.5 "/></svg></figure> </a></nav><div class="ct-comments" id="comments"><h3 class="ct-comments-title"> 1 則留言</h3><ol class="ct-comment-list"><li id="comment-87" class="pingback even thread-even depth-1"><article class="ct-comment-inner" id="ct-comment-inner-87"><footer class="ct-comment-meta"><h4 class="ct-comment-author"> <a href="https://www.wongwonggoods.com/draft_notes/mac-openvpn/" rel="external nofollow ugc" class="url">【mac】mac 使用 OpenVPN 建立 VPN 遠端連線的方法 (全圖文說明) - 嗡嗡的隨手筆記</a></h4><div class="ct-comment-meta-data"> 2021 年 9 月 9 日 / 上午 3:02 </a> <a rel="nofollow" class="comment-reply-link" href="#comment-87" data-commentid="87" data-postid="3496" data-belowelement="ct-comment-inner-87" data-respondelement="respond" data-replyto="回覆給「【mac】mac 使用 OpenVPN 建立 VPN 遠端連線的方法 (全圖文說明) - 嗡嗡的隨手筆記」" aria-label="回覆給「【mac】mac 使用 OpenVPN 建立 VPN 遠端連線的方法 (全圖文說明) - 嗡嗡的隨手筆記」">回覆</a></div></footer><div class="ct-comment-content entry-content"><p>[…] 【VScode】直接把 coding 的「視窗」搬回家，不要再用慢慢的遠端桌面了! VScode… […]</p></div></article></li></ol><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">★留個言吧！內容有誤或想要補充也歡迎與我討論！　 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/all-posts/dev-tools/linux-editor/vscode/vscode-ssh/#respond" style=";">取消回覆</a></small></h3><form id="commentform" class="comment-form"> <input type="hidden" name="comment_parent" id="comment_parent" value=""/></div></article><aside data-type="type-1" id="sidebar" itemtype="https://schema.org/WPSideBar" itemscope="itemscope"><div class="ct-sidebar" data-sticky="widgets"><div class="ct-widget widget_block" id="block-37"><h3 class="widget-title">全站搜尋 🔍🔍🔍</h3><p/><div class="gcse-search"/></div><div class="ct-widget widget_categories" id="categories-3"><h3 class="widget-title">全站分類 📚📚📚</h3><form action="https://www.wongwonggoods.com" method="get"><label class="screen-reader-text" for="cat">全站分類 📚📚📚</label><select name="cat" id="cat" class="postform"><option value="-1">選取分類</option><option class="level-0" value="377">【全部文章】 (807)</option><option class="level-1" value="241"> 000 – 【嗡嗡精選】 (159)</option><option class="level-2" value="232"> 010 – 【嗡嗡在家宅】 (26)</option><option class="level-3" value="279"> 011 -【嗡嗡開箱】 (19)</option><option class="level-3" value="337"> 012 – 在家解謎 (2)</option><option class="level-4" value="338"> Popworld 蹦世界 (2)</option><option class="level-3" value="317"> 013 – Switch (1)</option><option class="level-3" value="262"> 014 – Youtube (1)</option><option class="level-3" value="310"> 015 – Final Cut Pro X (1)</option><option class="level-3" value="387"> 016 – Gather town (1)</option><option class="level-3" value="399"> 017 – 修網路 (1)</option><option class="level-2" value="97"> 020 – 【嗡嗡粗門玩】 (13)</option><option class="level-3" value="100"> 021 – 實境解謎 (3)</option><option class="level-4" value="230"> Popworld 蹦世界 (2)</option><option class="level-4" value="99"> 城市尋寶 (1)</option><option class="level-3" value="105"> 022 – 實況相關 (2)</option><option class="level-3" value="101"> 023 – 攝影筆記 (7)</option><option class="level-3" value="219"> 024 – 旅遊筆記 (1)</option><option class="level-2" value="372"> 030 – 【自用筆記】 (4)</option><option class="level-2" value="64"> 040 – 作品集 (116)</option><option class="level-3" value="82"> 041 – 得獎作品 (8)</option><option class="level-3" value="88"> 042 – 競賽作品 (6)</option><option class="level-3" value="87"> 043 – 個人作品 (10)</option><option class="level-3" value="212"> 044 – 個人演講 ppt (2)</option><option class="level-3" value="114"> 045 – 11th 鐵人賽 – 《Google machine learning 學習筆記》 (30)</option><option class="level-3" value="95"> 046 – 12th 鐵人賽 – 【錢不夠買ps的我，只好用OpenCV來修圖了!】 (30)</option><option class="level-3" value="239"> 047 – 13th 鐵人賽 – 【今年還是不夠錢買psQQ，不如我們用PyQt自己寫一個】 (30)</option><option class="level-1" value="28"> 100 – Python (156)</option><option class="level-2" value="142"> 101 – Python 基礎語法 (17)</option><option class="level-2" value="131"> 102 – Python 字串處理 (6)</option><option class="level-2" value="148"> 103 – Python 檔案處理 (7)</option><option class="level-2" value="225"> 104 – Python 測試程式 (3)</option><option class="level-2" value="329"> 105 – Python 環境管理 (5)</option><option class="level-2" value="135"> 106 – Python 系統控制 (2)</option><option class="level-2" value="221"> 107 – Python 網頁爬蟲 (4)</option><option class="level-2" value="330"> 108 – Python 觀念理解 (2)</option><option class="level-2" value="382"> 109 – Python 進階語法 (2)</option><option class="level-2" value="144"> 110 – Python 平行運算 (7)</option><option class="level-2" value="86"> 111 – Python Chatbot (4)</option><option class="level-2" value="379"> 112 – Python JSON處理 (1)</option><option class="level-2" value="229"> 113 – Google Colab (Colaboratory) (2)</option><option class="level-2" value="234"> 114 – PyQt5 (30)</option><option class="level-2" value="30"> 115 – Python OpenCV (39)</option><option class="level-2" value="383"> 198 – Python 個人小工具 (3)</option><option class="level-2" value="340"> 199 – Python 問題解決 (22)</option><option class="level-1" value="29"> 200 – C++ (66)</option><option class="level-2" value="141"> 201 – C++ 基礎語法 (10)</option><option class="level-2" value="134"> 202 – C++ 字串處理 (6)</option><option class="level-2" value="355"> 203 – C++ 檔案處理 (1)</option><option class="level-2" value="104"> 204 – C++ 系統控制 (2)</option><option class="level-2" value="332"> 205 – C++ 觀念理解 (4)</option><option class="level-2" value="316"> 206 – Modern C++ (5)</option><option class="level-2" value="331"> 207 – C++ 程式編譯 (2)</option><option class="level-2" value="244"> 208 – C++ Makefile (7)</option><option class="level-2" value="398"> 209 – C++ rapidjson (2)</option><option class="level-2" value="150"> 210 – C++ OpenCV (6)</option><option class="level-2" value="354"> 298 – Effective Modern C++ 閱讀筆記 (2)</option><option class="level-2" value="339"> 299 – C++ 問題解決 (19)</option><option class="level-1" value="38"> 300 – Linux (90)</option><option class="level-2" value="208"> 301 – Linux 基礎指令 (6)</option><option class="level-2" value="320"> 302 – Linux 搜尋內容 (4)</option><option class="level-2" value="322"> 303 – Linux 檔案處理 (8)</option><option class="level-2" value="328"> 304 – Linux 系統控制 (9)</option><option class="level-2" value="319"> 305 – Linux 終端機操作 (9)</option><option class="level-2" value="321"> 306 – Linux 網路遠控 (19)</option><option class="level-2" value="58"> 307 – Ubuntu (6)</option><option class="level-2" value="236"> 308 – autoscript (2)</option><option class="level-2" value="209"> 309 – Bash 自動化程式撰寫 (6)</option><option class="level-2" value="341"> 399 – Linux 問題解決 (24)</option><option class="level-1" value="348"> 400 – 環境管理 / 開發工具 (61)</option><option class="level-2" value="55"> 410 – Git (18)</option><option class="level-2" value="37"> 420 – Docker (11)</option><option class="level-3" value="397"> 421 – Dockerfile (1)</option><option class="level-2" value="349"> 430 – 終端機工具 (terminals) (6)</option><option class="level-3" value="352"> 431 – MobaXterm (1)</option><option class="level-3" value="350"> 432 – tmux (4)</option><option class="level-3" value="351"> 433 – screen (1)</option><option class="level-2" value="323"> 440 – 編輯器使用 (IDE) (17)</option><option class="level-3" value="123"> 441 – VScode (6)</option><option class="level-3" value="121"> 442 – Sublime Text (7)</option><option class="level-3" value="345"> 443 – vim (2)</option><option class="level-3" value="346"> 444 – nano (1)</option><option class="level-2" value="43"> 450 – ffmpeg (9)</option><option class="level-1" value="31"> 500 – 機器學習 (44)</option><option class="level-2" value="106"> 510 – Google Machine Learning (30)</option><option class="level-2" value="152"> 520 – 深度學習 Deep Learning (6)</option><option class="level-3" value="245"> 521 – Deep Learning – Optimizers (3)</option><option class="level-2" value="240"> 530 – TensorRT (1)</option><option class="level-2" value="235"> 540 – Caffe (2)</option><option class="level-2" value="214"> 550 – Pytorch (5)</option><option class="level-1" value="207"> 600 – 學校筆記 (13)</option><option class="level-2" value="205"> 610 – 作業研究 OR (6)</option><option class="level-2" value="217"> 620 – 作業系統 OS (1)</option><option class="level-2" value="215"> 630 – 演算法 Algorithm (5)</option><option class="level-2" value="206"> 640 – 管理科學 MS (6)</option><option class="level-2" value="223"> 650 – 計算機概論 (1)</option><option class="level-1" value="276"> 700 – 面試相關 (224)</option><option class="level-2" value="211"> 710 – Python LeetCode (215)</option><option class="level-3" value="392"> 711 – BFS (5)</option><option class="level-4" value="285"> BFS (拓樸排序) (1)</option><option class="level-4" value="286"> BFS (最短路徑) (1)</option><option class="level-4" value="290"> BFS (連通圖搜索) (3)</option><option class="level-3" value="393"> 712 – DFS (30)</option><option class="level-4" value="294"> DFS (BST) (2)</option><option class="level-4" value="295"> DFS (Tree Basic) (8)</option><option class="level-4" value="299"> DFS (全部方案) (8)</option><option class="level-4" value="288"> DFS (排列 permutation) (5)</option><option class="level-4" value="284"> DFS (組合 combination) (7)</option><option class="level-3" value="394"> 713 – DP (8)</option><option class="level-4" value="296"> DP (座標型 – 一維) (3)</option><option class="level-4" value="297"> DP (座標型 – 二維) (4)</option><option class="level-4" value="305"> DP (記憶化搜索 memoization) (1)</option><option class="level-3" value="395"> 714 – Two pointers (25)</option><option class="level-4" value="302"> Two pointers (N pointers merge 多項合併) (1)</option><option class="level-4" value="303"> Two pointers (同向雙指針 →→) / Sliding window (2)</option><option class="level-4" value="300"> Two pointers (同向雙指針 →→) / slow, fast (快慢雙指針) (6)</option><option class="level-4" value="287"> Two pointers (相向雙指針 →←) / start, end (頭尾雙指針) (14)</option><option class="level-4" value="301"> Two pointers (背向雙指針 ←→) (3)</option><option class="level-3" value="289"> 715 – Binary Serach (4)</option><option class="level-3" value="298"> 716 – Linked List (11)</option><option class="level-3" value="292"> 717 – Hash Table (4)</option><option class="level-3" value="306"> 718 – Queue / Stack (1)</option><option class="level-3" value="396"> 719 – 其他問題 (3)</option><option class="level-4" value="304"> Interval (1)</option><option class="level-2" value="210"> 720 – C++ LeetCode (6)</option><option class="level-2" value="291"> 730 – Leetcode 重要題型 (2)</option><option class="level-2" value="391"> 740 – 面試問題收集 (1)</option><option class="level-1" value="389"> 800 – 技術雜記 (28)</option><option class="level-2" value="68"> 810 – Arduino (1)</option><option class="level-2" value="233"> 820 – Cloud (2)</option><option class="level-2" value="237"> 830 – Raspberry Pi 3 (9)</option><option class="level-2" value="198"> 840 – 程式設計 (6)</option><option class="level-3" value="280"> 841 – Coding Style (1)</option><option class="level-3" value="199"> 842 – 物件導向設計 OOP (2)</option><option class="level-3" value="385"> 843 – UML (2)</option><option class="level-3" value="200"> 844 – 設計模式 design pattern (1)</option><option class="level-2" value="120"> 899 – Debug / Error (10)</option><option class="level-1" value="25"> 900 – 其他筆記 (81)</option><option class="level-2" value="48"> 901 – Facebook (1)</option><option class="level-2" value="227"> 902 – Google AdSense (4)</option><option class="level-2" value="238"> 903 – Google Sheet / Excel (4)</option><option class="level-2" value="203"> 904 – iphone / iOS (6)</option><option class="level-2" value="46"> 905 – Mac / MacOS (8)</option><option class="level-2" value="157"> 906 – Windows (6)</option><option class="level-2" value="36"> 907 – Wordpress (15)</option><option class="level-2" value="380"> 908 – 健身筆記 (14)</option><option class="level-2" value="220"> 909 – 心理學筆記 (5)</option><option class="level-2" value="226"> 910 – 股票學習筆記 (1)</option><option class="level-2" value="204"> 911 – 閱讀筆記 (1)</option><option class="level-2" value="388"> 912 – Telegram (1)</option><option class="level-2" value="390"> 913 – Minecraft (1)</option><option class="level-2" value="308"> 914 – 重症醫學 (3)</option><option class="level-2" value="384"> 999 – 【草稿區】 (16)</option> </select></form> </div><div class="ct-widget widget_block" id="block-35"><h3 class="widget-title">架站理念 🏝️🏝️🏝️</h3> 這網站所寫的內容，都是一些我學習過程所留下的東西，<p><span style="background-color: #FFFF00">我盡力、但也不能保證完全都理解正確！<br/> 因此很歡迎大家留言討論或指正！</span><br/> 如果想要私下聯繫或交朋友，也可以透過：<br/> 📨 寄信至我的 Email：<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="274f485046554342551467404a464e4b0944484a">[email protected]</a><br/> 📨 或私訊fb粉專：《<span style="text-decoration:underline;"><a href="https://www.facebook.com/wongwonggoods">嗡嗡的隨手筆記</a></span>》 <br/> (粉專沒人力經營(只有我XD)，目前僅用來私訊)</p></div><div class="ct-widget widget_block" id="block-36"><h3 class="widget-title">匿名支持網站 🙏🙏🙏</h3><p>如果喜歡我創作的內容，歡迎贊助讓網站活更久!<br/> <a href="https://p.opay.tw/zKN9R"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://payment.opay.tw/Content/themes/WebStyle201404/images/allpay.png"/></a></p></div><div class="ct-widget widget_block" id="block-34"><h3 class="widget-title">斗內支持網站 🙏🙏🙏</h3><p>如果喜歡我創作的內容，歡迎贊助讓網站活更久!<br/> <span style="background-color: #FFFF00">(請用街口掃描，感謝您的贊助🙏！)</span></p><p><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://www.wongwonggoods.com/wp-content/uploads/2022/10/img_0095-683x1024.jpg" alt="donation"/></p></div><div class="ct-widget widget_block" id="block-31"><h3 class="widget-title">感恩廣告商，網站活更久 🙏</h3> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9519630739815829" data-ad-slot="3301912613" data-ad-format="auto" data-full-width-responsive="true"/> </div><div class="ct-widget widget_block" id="block-33"><h3 class="widget-title">我只放邊邊，麻煩大家了 🙏</h3> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9519630739815829" data-ad-slot="8219197374" data-ad-format="auto" data-full-width-responsive="true"/> </div><div class="ct-widget widget_recent_comments" id="recent-comments-2"><h3 class="widget-title">近期留言</h3><ul id="recentcomments"><li class="recentcomments">「<span class="comment-author-link"><a href="https://www.wongwonggoods.com" rel="external nofollow ugc" class="url">Howard Weng</a></span>」於〈<a href="https://www.wongwonggoods.com/all-posts/python/pyqt5/pyqt5-11/#comment-518">【PyQt5】Day 11 – 以 Qlabel 在 PyQt 中顯示圖片 (基於 QImage 使用 OpenCV)</a>〉發佈留言</li><li class="recentcomments">「<span class="comment-author-link">JSON</span>」於〈<a href="https://www.wongwonggoods.com/all-posts/python/pyqt5/pyqt5-11/#comment-517">【PyQt5】Day 11 – 以 Qlabel 在 PyQt 中顯示圖片 (基於 QImage 使用 OpenCV)</a>〉發佈留言</li><li class="recentcomments">「<span class="comment-author-link"><a href="https://www.wongwonggoods.com" rel="external nofollow ugc" class="url">Howard Weng</a></span>」於〈<a href="https://www.wongwonggoods.com/all-posts/python/python-testcase/python-doctest/#comment-495">【Python 測試程式 #1】利用 doctest 測試 python testcase 的優雅寫法，適用於 leetcode (doctest in function，搭配 function 的用法)</a>〉發佈留言</li><li class="recentcomments">「<span class="comment-author-link">Yuki</span>」於〈<a href="https://www.wongwonggoods.com/all-posts/python/python-testcase/python-doctest/#comment-494">【Python 測試程式 #1】利用 doctest 測試 python testcase 的優雅寫法，適用於 leetcode (doctest in function，搭配 function 的用法)</a>〉發佈留言</li><li class="recentcomments">「<span class="comment-author-link"><a href="http://kc-trip.com" rel="external nofollow ugc" class="url">K</a></span>」於〈<a href="https://www.wongwonggoods.com/all-posts/python/python_basic/python-counter/#comment-479">【Python 基礎語法 #15】python counter() 用法整理 – 快速計算資料內容的數量 (last updated: 2023/4/18)</a>〉發佈留言</li></ul></div><div class="ct-widget widget_wp_statistics_widget" id="wp_statistics_widget-3"><h3 class="widget-title">網站統計 📈📈📈</h3><ul><li><label>Online Users: </label>0</li><li><label>Today's Visits: </label>78</li><li><label>Total Visits: </label>996,097</li><li><label>網站訪客數量總計: </label>643,118</li><li><label>Total Posts: </label>807</li><li><label>Last Post Date: </label>2023 年 6 月 30 日</li></ul></div><div class="ct-sticky-widgets"><div class="ct-widget boomdevs_toc_shortcode_widget" id="boomdevs-toc-shortcode-widget-2"><div class="fit_content"><div class="bd_toc_container" data-fixedwidth=""><div class="bd_toc_wrapper" data-wrapperpadding="90px"><div class="bd_toc_wrapper_item"><div class="bd_toc_header active" data-headerpadding="2px"><div class="bd_toc_header_title"> <a href="#比較示意圖">比較示意圖：</a><ul class="menu_level_1"><li class="first"> <a href="#純-terminal-派">純 terminal 派</a></li><li> <a href="#vscode-遠端派-本文會介紹">VScode 遠端派 (本文會介紹)</a></li><li class="last"> <a href="#遠端桌面派">遠端桌面派</a></li></ul></li><li> <a href="#實作大致流程圖">實作大致流程圖</a></li><li> <a href="#準備-vpn-的部分">準備 VPN 的部分</a><ul class="menu_level_1"><li class="first"> <a href="#準備-vpn-工具-openvpn">準備 VPN 工具 - OpenVPN</a><ul class="menu_level_2"><li class="first"> <a href="#step-1-下載-openvpn-軟體">step 1. 下載 OpenVPN 軟體</a></li><li class="last"> <a href="#step-2-安裝-openvpn-軟體">step 2. 安裝 OpenVPN 軟體</a></li></ul></li><li> <a href="#取得-vpn-設定檔案-副檔名為-ovpn-的檔案-通常會由企業或學校機構提供">取得 vpn 設定檔案 (副檔名為 .ovpn 的檔案，通常會由企業或學校機構提供。)</a></li><li class="last"> <a href="#連線至-vpn">連線至 VPN</a><ul class="menu_level_2"><li class="first"> <a href="#step-1-匯入-ovpn-設定檔">step 1. 匯入「.ovpn」設定檔</a></li><li class="last"> <a href="#step-2-透過-vpn-連線至遠端">step 2. 透過 VPN 連線至遠端</a></li></ul></li></ul></li><li> <a href="#準備-ssh-的部分">準備 SSH 的部分</a><ul class="menu_level_1"><li class="first"> <a href="#step-1-下載擴充套件-remote-ssh">step 1. 下載擴充套件「 Remote - SSH 」</a></li><li> <a href="#step-2-在-vscode-左下角啟動連線-ssh-的功能-記得有學校-公司-vpn-需求的請先在上一步進行連線">step 2. 在 VScode 左下角啟動連線 ssh 的功能 (記得有學校/公司 VPN 需求的請先在上一步進行連線)</a></li><li> <a href="#step-3-輸入密碼後-選擇遠端電腦的資料夾路徑">step 3. 輸入密碼後，選擇遠端電腦的資料夾路徑</a></li><li class="last"> <a href="#step-4-可以發現旁邊有各種的檔案出現了">step 4. 可以發現旁邊有各種的檔案出現了!</a></li></ul></li><li> <a href="#vscode-ssh-相比-純-termianl-ssh-特色功能">「VScode ssh」相比「純 termianl ssh」特色功能</a><ul class="menu_level_1"><li class="first"> <a href="#檔案總管-方便使用滑鼠快速操作-比起-純-termianl-ssh-更快速">檔案總管，方便使用滑鼠快速操作，比起「純 termianl ssh」更快速</a></li><li> <a href="#可以用滑鼠協助編輯程式碼">可以用滑鼠協助編輯程式碼</a></li><li> <a href="#比起-純-termianl-ssh-可以直接開啟圖片-pdf-pdf-需安裝套件">比起「純 termianl ssh」可以直接開啟圖片、pdf (pdf 需安裝套件)</a></li><li> <a href="#vs-code-使用技巧-使用-ctrl-+-`-可以直接叫出終端機-terminal-且可以快速多開終端機">VS code 使用技巧：使用「ctrl + `」，可以直接叫出終端機 (terminal)，且可以快速多開終端機</a></li><li class="last"> <a href="#自動儲存並記憶連線ip-方便下次連線">自動儲存並記憶連線ip, 方便下次連線</a></li></ul></li><li class="last"> <a href="#vscode-ssh-相比-遠端桌面-特色功能">「VScode ssh」相比「遠端桌面」特色功能</a><ul class="menu_level_1"><li class="first last"> <a href="#遠端桌面-應有盡有-但因為是畫面傳輸-速度一定相對較慢">「遠端桌面」應有盡有，但因為是畫面傳輸，速度一定相對較慢</a></li></ul></li></ul></div></div></div></div></div><div class="layout_toggle_button"> <a href="https://www.wongwonggoods.com/all-posts/dev-tools/linux-editor/vscode/vscode-terminal-powerlevel10k/" itemprop="url" rel="bookmark">【VScode】修改 VScode terminal 字體，使得他能夠正常顯示 powerlevel10k (change vscode terminal font)</a></h4><ul class="entry-meta" data-type="simple:slash"><li class="meta-author" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><a class="ct-meta-element-author" href="https://www.wongwonggoods.com/author/admin/" title="作者 Howard Weng" rel="author" itemprop="url"><span itemprop="name">Howard Weng</span></a></li><li class="meta-date" itemprop="datePublished"><time class="ct-meta-element-date" datetime="2023-04-21T02:19:32+08:00">2023 年 4 月 21 日</time></li></ul></article><article itemscope="itemscope" itemtype="https://schema.org/CreativeWork">