VS Code 打造個人超級工作站

語言: CN / TW / HK

效果演示

image.png

個人工作是 Web 前端,偶爾使用 Python,最近在學習 Go 、Rust、區塊鏈技術棧,偶爾也做個人應用伺服器運維,這些場景 VSCode 都能比較理想的 cover 。並且隨著 VSCode 迭代週期的加快,以及配置同步功能的官方支援,VSCode 已經逐漸成為個人最喜歡的應用程式沒有之一。

外掛強大,一站式整合開發

早年在學校寫 Java Web 時,都至少再常備 Navicat , Postman 這樣的客戶端進行 Dev 。這些功能都能使用 VSCode 外掛來平替:

https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client 類似 PostMan

https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools 類似Navicat

https://marketplace.visualstudio.com/items?itemName=tahabasri.snippets 視覺化的程式碼 Snippets

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens 顯示每一行的 Git 提交資訊

剩下的就是各語言技術棧常用的外掛,大夥都知道,就不 listing 了。

內置於 VSCode 的外掛其實可以類比於“小程式”。相對 Navicat 這種,節省掉一個客戶端,並且和VSCode 共享使用者狀態和同步的應用狀態,毫無疑問是更加方便的。

官方 Setting Sync

以往的 VSCode Setting sync 可以靠外掛實現,但或多或少都有些問題。最近官方終於支援了 setting sync 功能,相當的王炸。

https://code.visualstudio.com/docs/editor/settings-sync

使用 Github 登入即可使用,同步極為細緻,如圖可見。最關鍵的是外掛狀態也能很好的同步。像 https://marketplace.visualstudio.com/items?itemName=tahabasri.snippets 這個外掛儲存的程式碼片段也在 extension.json 檔案裡,則也走這個同步。

我們如果使用上述 VSCode 外掛替換掉日常使用的 Navicat 等客戶端,再結合同步功能,可以說便利性更上了一個臺階。在一臺新到手的機器上,我只用下載 VSCode,登入 github 開啟同步,則一百多個外掛及其狀態幾分鐘即可同步完成,瞬間完成開發環境配置,可以說相當的恐怖。

Remote - 不止運維,更是 Development

上面說瞬間完成新裝置的開發環境配置其實不對,因為具體的開發環境還沒裝,配置完成的其實是 IDE 等應用程式的狀態。

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

最初個人接觸到 Remote 套件時是想找個運維的解決方案,使用 VSCode ssh 到遠端伺服器,像編輯本地檔案一樣編輯伺服器檔案。但時至今日 Remote Development 已經相當普遍。我們可以預設只使用一個固定的遠端伺服器進行開發,程式碼也放在遠端伺服器上做 Dev 環境執行。

實際上 github 的 codespace https://github.com/codespaces 就是這樣,只不過每個 codespace 都是一個單獨的機器(ip),預設通過瀏覽器開啟但比較卡,也無法做到上百個外掛的快速初始化,而如果選擇通過本地 IDE開啟,本質上和直接本地用 VSCode remote 特定伺服器一樣。

(吐槽:github 的 codespace 居然是按時間收費的,定時還會斷開,真不如直接買個國內雲廠商便宜的輕量應用伺服器當開發機)

(上兩圖一樣)

而許多網際網路大廠內部 codebase 或 cloud IDE 往往是一個獨立的大部門,codespace 這塊實際上都有內部的產品, Remote Dev 現在也直接加入了研發新人的 Landing 流程作為預設開發配置。

每個研發新人預設發一個四核8g 的開發機,一個內網 ipv6 地址。假如內部預設使用的裝置還是 19款或更老款的破爛 MBP, Remote Dev 也能極大的拯救電腦流暢度,因為 Dev 執行都在遠端開發機上。

埠轉發

remote dev 時起本地服務,比如 localhost:8000 , 是遠端伺服器的8000 埠,並非本機的。但 VSCode 預設已經做了轉發,見 https://code.visualstudio.com/docs/remote/ssh#_forwarding-a-port-creating-ssh-tunnel 本機localhost:8000 直接打到遠端,開發體驗基本一致。

但在某些情況下會有差異,比如前端開發時,訪問 localhost:8000 實際上相當於在訪問遠端伺服器的資源(相對於純本地開發訪問本地資源),假如靜態資源較大,傳輸速度可能受到遠端伺服器網路的限制。但如果都在公司內網則這一點就不存在問題。

Remote Dev 優勢

綜上 Remote Dev 已有明顯的優勢: - 不用頻繁提程式碼。今天寫完 cmd + s , 明天 remote 到開發機接著寫,純本地機器總有物理消滅的風險,遠端開發機的安全性和程式碼倉庫伺服器也基本一致 - 拯救機器硬體,如老款 MBP - 多裝置都同時使用 Remote 一臺穩定的開發機進行開發,舒適度大於多裝置分別下載程式碼本地開發

總結

Remote Dev 再結合上文的 Setting Sync ,以及外掛優勢,真正做到了任何一臺新裝置,下載 VSCode,開啟Setting sync ,Remote 開發機,即可獲取完整的開發體驗。

個人實踐上購買了國內雲廠商的便宜應用伺服器作為開發機使用,在公司也能 remote 開發機學習實踐新知識,回家則繼續家用機 remote 到開發機無縫切換。因此 VSCode 已經成為個人的超級工作站,任何 Dev 需求能用 VSCode 滿足的,都會盡量使用 VSCode 來滿足。VSCode 已經成為個人最喜歡的應用程式,希望它也能成為你最喜歡的應用程式。

寫文章本身也是一個學習的過程,也請讀者能指出文章中的疏忽錯漏之處。如果本文對你有所幫助,歡迎點贊收藏。