完全使用 VSCode 開發的心得和體會

小二十七發表於2021-03-09

封面圖片

前言

我剛開始是一名 Java 程式設計師,陪伴我最久的老夥計是 Java 世界裡面出名好用的是 Jetbrains 家族的重量級產品 Intelli IDEA 編輯器,不過 IDEA 主要是用來寫程式碼,文字編輯,配置編輯,我都是使用 Vim,Sublime Text 3 來處理,但是隨著我學習的程式語言越來越多,例如 Ruby,Go,JavaScript,我的電腦開始安裝很多編輯器,具體如下:

  • Intelli IDEA:用於編輯 Java 程式
  • RubyMind:用於編輯 Ruby 程式
  • GoLand:用於編輯 Go 程式
  • WebStram:編輯 JavaScript 程式
  • Sublime Text:文字、文字、JSON、XML等編輯任務
  • Vim:系統、配置檔案、少量程式碼修改等編輯任務
  • Typora:Markdown 編輯器
  • 等等……

且不說這麼多編輯器讓人眼花繚亂,光是動輒上 GB 的空間佔用,也讓我低配版的 Macbook 磁碟吃緊,而且不同軟體之間的快捷鍵,介面佈局不同,學習起來也造成很大的心智負擔。

最後還有一個理由就是 ,這麼多軟體,要買正版可不是一筆小的費用,我還沒有土豪到那個地步。

另外你問我為什麼不用盜版,如果我們程式設計師自己還用盜版軟體的話,那麼不是自己砸自己的飯碗嗎 ?

我開始思考一個問題:有沒有一款編輯器能解決我所有的編輯任務?

於是我開始清點自己對於編輯的需求,整理如下:

  • 開源免費(每年幾百美金的 Licence 去買好吃的不香嗎?)
  • 輕量級,不太佔用空間(Mac 磁碟寸土寸金)
  • 高效能,畢竟我平時有很多大檔案編輯的工作
  • 擴充套件能力強:當我切換到其他程式語言,我不需要切換工具
  • 能解決我所有的編輯需求,例如程式語言:Java、Ruby、golang,文字編輯,Markdown,XML,JSON 等

我開始想象,如果找到這樣一款編輯器,我可以用大部分的精力去學習它,然後深入研究精通它。

這樣我所有的編輯工作都用它來完成,這樣所有的編輯效率都能提高,從而整體的工作效率都能提高。

且不說降低磁碟佔用的空間,起碼也可以降低不同編輯器之間的學習成本和心智負擔。

然後我就找到了它,今天我要分享使用心得的主角:VSCode

VSCode 入門介紹

嚴格意義上來說 VSCode 並不是類似 Jetbrains 產品,它只是一款純文字編輯器,類似你在 Windows 上使用的TextPad,也類似 Mac 平臺上的 TextEdit,或者 Sublime Text,所以 VSCode 的本質工作還是文字編輯。

因為 VSCode 是基於 Electron 框架開發,所以它可以再在不安全任何外掛的情況下,對 HTML、CSS、JavaScript 提供很好的支援,也這是很多前端程式設計師一直推崇 VSCode 的原因

在原生情況下,它的核心功能還是編輯,但是相比傳統的編輯器,VSCode 提供以下幾點內建功能,所以它應該是更加適合程式設計師使用的編輯器,如下:

  • IntelliSense 智慧提示:通過機器學習分析你過往的輸入,給出程式碼補全和職能提示(和 IDE 的補全不同)
  • 內建 Git 支援:這裡不多介紹了,程式設計師應該都知道 Git。
  • 內建 Terminal 終端:Sublime Text 想要整合終端都還要裝外掛,VSCode 開箱就送了。很方便
  • 外掛市場:讓你的 VSCode 擴充套件無限可能(這才是 VSCode 的殺手鐗功能)

最後,因為它是跨平臺的編輯器,所以你也不用擔心你是用 Windows 還是 Mac 作業系統了

輕便的 VSCode

VSCode 原生包只有 100M 大小,就算不在進行擴充套件包安裝的情況下,已經可以替代 Sublime Text、Vim 幫我完成平時的編輯工作了,而且只需要進行簡單的 PATH 配置,就可以替代原來的 vim 指令:

原來的 vim 編輯:

vim fileName

使用 code 編輯

code fileName				// 使用 vscode 編輯指定檔案

另外一個是我比較常用的技巧:使用 code 快速開啟編輯目錄

cd /target/dir/
code .				// 使用 vscode 編輯當前目錄

另外 VSCode 上手曲線比 Vim 更加平緩,適合新手,也更容易獲得成就感,也就更容易堅持。

效能

除了本身佔用空間小,編輯效能也是 VSCode 值得拿得出手的地方,至少目前近半年的編輯工作中還沒有遇到過無法用 VSCode 開啟的情況,整體效能的優化比師出同門的 Atom 還要領先許多,在我接觸過的大檔案載入和編輯中沒有掉過鏈子,而且記憶體佔用率也非常低,對比 Jetbrains 動輒 3-4G 的記憶體佔用來說,可謂是輕便許多,使用 8G 版本的 Macbook 完成輕量級的程式設計工作也是沒有任何問題的

外掛擴充套件

擴充套件是 VSCode 的招牌能力了,我們看看它是如何通過擴充套件能力,VSCode 擴充套件可以通過以下2個思路解決:

  1. Extension Pack:流行的擴充套件包,通常找到對應語言的 Extension Pack 一鍵安裝即可
  2. 外掛:例如 Markdown,Vim 可以通過直接安裝外掛即可

Java Extension Pack

下面推薦幾個替代 Jetbrains 產品的 VSCode 功擴充套件包:

  • Intelli IDEA:使用 VSCode + 擴充套件包:Java Extension Pack 解決
  • RubyMind:使用 VSCode + 擴充套件包:Ruby Extension Pack 解決
  • GoLand:使用 VSCode + 擴充套件包:Go Extension Pack 解決
  • WebStorm:VSCode 原生支援
  • TypTypora:VSCode + 外掛 Markdown All in One 解決
  • 流程圖:推薦外掛:PlantUML (現在所有系統架構,設計類圖,我都通過它來實現)

通過上述外掛,VSCode 雖然在很多其他語言開發中,還不夠強大,但是滿足 80% 的功能就已經足夠了,最重要的是它帶來的方便,輕巧,遠比那些重量級的功能要好用的多

VSCode 外掛:

好用的外掛可以讓 VSCode 事半功倍,推薦幾個我在用並且覺得好用的 VSCode 外掛給大家:

  1. Code Runner:一鍵執行 32中程式語言的執行器,非常好用
  2. Atom One Dark Theme:基於Atom的 One-Dark 主題。市場上最受好評的一個黑暗主題
  3. Git Graph:Git 圖倉庫,對於 Git 倉庫提交歷史一目瞭然,非常清晰
  4. GitLens:不多說了,VSCode 必裝 Git 外掛,沒有之一
  5. LeetCode:平時刷題的小夥伴,一定要裝,整合度非常高,牆裂推薦
  6. Markwodn Preview Github Styling:類似 Github 風格的 Markdown 解析器,常用 Github 小夥伴不能錯過
  7. Peacock:多工作區標記,對於同時開啟多個工作區,反覆切換的同學,可以通過顏色標記,快速找到目標
  8. VScode-icons:一款美化後的 VScode 圖示庫,提升了很多 default icon 的美觀
  9. 等等…… 期待你自己發掘
VSCode 快捷鍵:

高效利用工具的祕訣在於熟練掌握它的快捷鍵,

所以推薦幾個常用的 VSCode 快捷鍵,幫助大家提高效率:

  1. 快速開啟使用者設定:⌘ + .
  2. 快速開啟命令皮膚:⌘ + ⇪ + P
  3. 快讀跳轉程式碼段:⌘ + ⇪ + O
  4. 快速查詢檔案:⌘ + P
  5. 跳轉到指定行:⌃ + G
  6. 檔案內搜尋:⌃ + F
  7. 跨檔案搜尋:⌃ + ⇪ + F
  8. 開啟終端:⌃ + `
  9. 建立終端:⌃ + ⇪ + `
  10. 程式碼格式化:⌥ + ⇪ + F

日常編輯常用的快捷鍵就這些

更加詳細的可以自行檢視 VSCode 鍵盤對映表(File -> Preferences -> Keymap Extensions)

VSCode 小技巧:

分享一些不為人知,高效且實用的 VSCode 實用經驗的和技巧,如下:

  1. 使用者設定分為:User Settings /Workspace Settings,它們設定頁面一樣,區別是全域性,工作區生效範圍不同
  2. 大部分的快捷操作,都可以通過控制皮膚(⌘ + ⇪ + P)的指令來完成
  3. 通過 “editor.tabSize”: 4 可以設定 tab 的空格數
  4. 通過 "files.exclude": {} 設定可以排除你在 VSCode 中不想看到的程式碼和檔案
  5. 在資源管理中直接輸入檔名,可以直接搜尋檔案
  6. 通過 View -> Apperance -> Zen Mode 進入禪模式,可以更加專注的編寫程式碼
  7. 多游標:按住 Alt + 左鍵,可以同時編輯多處文字
  8. 通過 File -> Auto Save 可以直接自動儲存,也可以通過 settings.json 進行更加個性化的設定

最近幾個月的 VSCode 使用心得就分享到這裡,未來 VSCode 依然會是我的主力編輯器,承擔的所有的寫作/文字/程式設計的工作,畢竟它這幾個月來也完成的非常出色。我相信 VSCode 在後續的版本中會越來越強大,外掛也更加完善和豐富,所以投資時間學習 VSCode 應該是一件很有回報的事情

相關文章