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 已經成為個人最喜歡的應用程序,希望它也能成為你最喜歡的應用程序。

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