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

前言

我剛開始是一名 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 可以通過直接安裝插件即可

下面推薦幾個替代 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 應該是一件很有回報的事情