為什麼我從 Sublime Text 跳槽 Visual Studio Code?

註:本篇文章撰寫於 2017/1,內容部分若有過時敬請見諒。

基本上從大二到碩一這很長一段時間,除非需要 Visual Studio,不然 Sublime Text 一直是我的首選。Atom 則一直沒有特別去嘗試,主要是效能方面還是跟 Sublime 比起來有落差。至於 Vim 嘛……個人不太喜歡也不習慣那種操作模式,所以這篇不會拿來討論比較。

微軟在 2015/4 正式發佈了 Visual Studio Code(以下簡稱 VS Code),我從第一個版本就開始嚐鮮,不過考量到一些基本的功能還有不足、最初還沒有套件系統等等因素,一直沒有把它當作主要的編輯器來使用,但我個人一直是抱著滿大期待。

直到 2016 下半年,我認為時機已經成熟,所以開始依序把 Python、C/C++ 的開發從 Sublime 轉移到 VS Code,而 Golang 則是一開始就選用 VS Code。這篇主要是想分享一下我所認為 VS Code 的優勢,以及 push 我跳槽的一些重點功能。

VS Code 優點

開源、持續且活躍的開發

先說幾個關於 Sublime Text 的驚人事實(誤):

  1. Sublime Text 3 已經從 2013 年 Beta 到現在
2017/9 更新:等待了四年終於正式版啦!
  1. 你第一個需要安裝的套件是 Package Control
  2. 許多簡單的事情還是需要套件的支援,例如我猜你下一個裝的是 SideBarEnhancements。
  3. 開源好棒棒,但你知道 Sublime 沒有開源嗎?(來源:靠北工程師

Visual Studio Code 在早期版本就將原始碼公開在 GitHub,也是 GitHub 上成長最快速的開源專案之一。基本上主要功能的開發還是由 Microsoft 來主導,但包括 Roadmap、Issues 管理等等都是公開在 GitHub 上的。因為開源的關係,有許多 bug 也都是由社群開發者所貢獻修復,我也曾經在上面發過 PR 並且被接受,而且很快的在下一個版本就被納入了。另外,有一些不錯且重要的功能例如 Integrated Terminal(如下圖),就是由台灣的開發者在 GitHub 上許願而來的呢!

版本迭代部分,VS Code 從推出以來,大致就維持每月一版的速度在推出更新,另外也跟 Windows 10 一樣有所謂的 Insiders 版本可以體驗最新的功能。

Editor 以上,IDE 未滿

為什麼說 VS Code 的定位在 Editor 以上?從軟體介面上看到 Git、debugger 的 Tab icon 就可以略知一二,這是過去的 Editor 很少做的整合。另外,與 Atom、Sublime 相比,在套件框架的設計上,導入了許多 Visual Studio 的靈魂及元素(例如 peek definition、status bar 等等),在寫各種語言時都能有很類似的體驗。

別忘了,微軟有著數十年開發 Visual Studio 產品的經驗,而且是地表上最好的 IDE 之一(我是很想說沒有之一),這會讓我更相信 VS Code。

PS. 而且 VS Code 專案的大頭 Erich Gamma 可是傳說中的 GoF 四人幫之一啊(跪)

原生 Git 整合

與 Sublime、Atom 不同的是,VS Code 直接原生整合了 Git 的基本功能,所以包含 commit、diff、resolve conflict 等等都可以直接透過 GUI 來操作。另外,編輯器上也不需要另外安裝外掛就可以顯示哪些程式碼是有更動過的。

2017/5 更新:Atom 已更新強化 Git 與 GitHub 的整合

內建 debugger 框架

這點是讓我跳槽 VS Code 很大的原因之一,它在最初版本就考慮到對於 debugger 外掛的支援,於是設計了一個 debugger 框架以及 GUI,讓各個語言的第三方套件能夠在 VS Code 上提供一致的操作體驗,包含 breakpoint、watch、call stack 等等。

以 Sublime 來說,(我猜測)受限於 plugin API 的限制,所以即使有 debugger 外掛,大多都只能用 editor 的外觀兜出一個難看又難用的介面,以 Xdebug 為例:

至於 Atom,就我知道的來說,Node.js、Go 都有還算不錯的 debugger 套件,但因為先天設計沒有將 debugger 考慮進去的關係,各個套件的操作體驗會有所差別。

node-debugger 為例:

python-debugger 又有著完全不同的介面,而且許多功能並不支援:

逐漸豐富的套件支援

VS Code 從最一開始沒有支援第三方套件,接著加入了類似 Sublime 從 Command Palette 安裝套件的功能,到現在已經內建了套件市集的介面以及網站(Visual Studio Marketplace)。

程式語言支援的部分,除了 JavaScript、TypeScript、Node.js 可以說是第一等公民內建支援外,包含 C#PythonGoC/C++ 都已經有不錯的套件能夠提升開發的體驗。

其中,像 C#、C/C++ 及 Go 的套件是由微軟主導開發,我不知道這是不是件好事,但至少 C#、Go 的部分是開源的。整個套件的 ecosystem 雖然可能還不如 Atom、Sublime 活躍,但外掛的數量其實也快速上升當中。(但也別忘了許多功能在 VS Code 根本不需要套件 :p)

貼心之處

VS Code 和 Sublime 一樣是透過 json 來撰寫編輯器設定,不像 Atom 有 GUI 的介面,而唯一不同之處是 Sublime 會將套件的設定獨立分開來。VS Code 在近期的更新中又加入了貼心小功能,不僅把設定分門別類,以往若要 override 預設的設定需要一個一個複製到右邊,現在介面上直接提供選單讓你快速複製,如果是 boolean 的選項還可以直接選擇呢!

Python 開發為例

這邊主要簡單展示一些 VS Code 編輯器的功能,並且以 Python 為例。一般來說,我們可能需要以下這些功能來提昇開發的效率:

  • 程式碼高亮 (Syntax Highlighting)
  • 自動完成 (Auto Complete)
  • 程式碼檢查 (Linting)
  • 自動格式化 (Auto Format)
  • 程式碼巡覽 (Source Code Navigation)
  • 重構 (Refactoring)
  • 測試 (Testing)
  • 除錯 (Debugging)
  • 程式碼片段 (Code Snippets)

在 VS Code 中,基本上只需要安裝一個 Python 套件就能夠達到大部分的需求,有點像 Sublime 上 Anaconda 套件那樣 All-in-one 的概念。

程式碼高亮 (Syntax Highlighting)

程式碼高亮其實大部分的語言不需要套件就內建支援了,另外市集也有一些像 Django template、LLVM IR 等等的高亮支援可以下載。

除了高亮之外,游標移到 symbol 上的 tooltip 也可以顯示相當豐富的資訊:

自動完成 (Auto Complete)

在不安裝外掛的情況下,其實 VS Code 就具備基本的自動完成功能,不過主要是基於檔案內的 symbol,所以要有好的體驗還是需要安裝套件讓 Editor 看懂 Python。

VS Code 中的自動完成主要是用 icon 來分辨 class、variable 或是 function,識別度來說比起 Sublime 好上許多。而如果你是 Visual Studio 使用者的話,一定看起來也覺得特別熟悉 (IntelliSense)。

另外,在撰寫 function call 時,寫到每一個參數時也都有對應的 parameter hint,相當貼心。

在這邊稍為提一下實務上如果發現自動完成或 tooltip 提示功能失效或不完整,可能的解法有:

  • 若有使用 virtualenv,建議在 terminal 下進入後再用 code 指令開啟 VS Code。
  • Command Palette 中的 [Python: Select Workspace Interpreter] (如下圖)也可以指定用哪個版本的 Python。這個設定會被存在 .vscode/settings.json,並且會 override 全域設定值。
  • 對於不放在 site-packages 底下的套件,可以在 settings.json 中額外指定路徑:"python.autoComplete.extraPaths": [ "path" ]
  • 大部分 Python 套件都是基於 Jedi 這個 library,部分 case 可能是因為套件本身就無法處理或不支援。

程式碼檢查 (Linting)

Python 有許多程式碼檢查的工具,在 VS Code 的套件中,預設是使用 Pylint,當然你也可以選擇其他像 Flake8 或 pep8。

Pylint 具備了最高度的整合,不同等級的提示(錯誤、警告、資訊)會用不同顏色的蚯蚓底線標註出來。另外也可以看到 VS Code 本身內建了顯示這些警告的面板,在左下角狀態列也能很清楚的看到警告的數量。(順帶一提旁邊還可以很方便的看到目前所在的 branch)

程式碼巡覽 (Source Code Navigation)

程式碼巡覽主要分成幾個部分:

  • Go To File/Symbol/Line
  • Go To Definition
  • Peek Definition
  • Find All References

Go To Definition 就是如你所想的那樣,除了快速鍵 F12 之外,也可以按住 command 鍵再點選 symbol 就可以快速跳到定義。

接著是許多 Editor 都具備的功能,可以快速切換到特定的 symbol。這部分同樣可以透過 icon 的識別是哪種類型的 symbol。

而我最愛的功能則是 Peek Definition,這最初是微軟在 Visual Studio 2013 所加入的功能,如同它的名稱 peek 一樣,可以在不切換檔案的情況下預覽在別處的定義,甚至還可以直接修改!這個功能不限於 Python,只要程式語言的第三方套件有實作這個整合就可以使用。

Find All References 的部分則是跟 Peek Definition 有著同樣的介面,可以快速在不同引用到的地方切換。

至於 Sublime,大部分的功能都集中在下圖這個清單上,不僅因為只有文字造成識別度較低,沒有 peek 功能也比較不方便。

重構 (Refactoring)

重構的輔助主要包含幾個功能:

  • Rename Symbol
  • Extract Method
  • Extract Variable

例如在套件的輔助之下可以選取一段 statement 並把它自動拉出來包成一個 method:

不過我覺得就 Python 的 Extract Method 來說,速度有點慢,這部分應該是套件所引用到的 library 的問題。

除錯 (Debugging)

前面就有提過,我認為 debugger 框架是 VS Code 一大殺手級功能。在 debugger 介面上可以瀏覽當前變數的值,查看 call stack,而中斷點的部分依據套件不同甚至支援了 conditional breakpoint(條件成立時才觸發)。

在 VS Code 中,要進行除錯首先需要建立 launch script,而 Python 套件其實就幫我們預先寫好了許多不同的 case,例如說以 module 引入來測試、用 Integrated Terminal 執行測試,甚至 Flask、Django 的部分也寫好了。

Sublime 的部分我沒有找到什麼太好的 Python debugger,有些甚至還是直接在程式碼中插入 pdb 的程式碼來達到中斷的效果……

其他更多關於 Python 套件的功能或設定可以參考套件的 Wiki: https://github.com/DonJayamanne/pythonVSCode/wiki

結論

你如果覺得上面提到的 Python 功能整合很棒的話,許多介面 VS Code 都有提供 API 給第三方套件整合,所以如果你寫的是 Go,下載了對應的套件之後你也能享用幾乎百分之百一致的體驗。

假如是 C#,甚至還有一些更強大的功能,例如也是從 Visual Studio 上搬過來的 CodeLens:

至於 VS Code 有沒有什麼缺點,隨著版本的更新,目前是沒有感覺到有特別不好的地方,但也是有幾點可以改進,例如:

  • 一個 Editor 只能開啟一個資料夾
2017/6 更新:目前 Insiders 版本已經支援 Multi-root workspaces
  • 現階段最大檔案大小限制是 50MB (MAX_FILE_SIZE: file.ts)
2017/7 更新:目前此限制在 64 位元版本已經解除

不過基於以上提及的優點,VS Code 已經是我目前的編輯器首選。但考量到對於大型檔案的支援度,Sublime 還是保留用來開數百 MB 的 log 檔之類的用途。最後,就我的使用經驗,以下是三個編輯器粗淺的比較:

  • 顏值:Atom = VS Code > Sublime
  • 內建功能性:VS Code >> Atom > Sublime
  • 效能:Sublime >> VS Code > Atom
Sublime 啟動速度壓倒性勝利,不過有些套件會造成啟動完會頓一下。
VS Code 與 Atom 同樣是基於 Electron 框架所開發,所以記憶體使用量較大,但整體來說 VS Code 是優於 Atom。
VS Code 因為先天設計的關係,UI Thread 不太會被套件卡死,所以不像 Atom 比較常有 lag 的情形。
  • 大檔支援:Sublime >> VS Code >> Atom
  • 外掛生態系:Sublime = Atom ≥ VS Code
  • 開發活躍度:Atom = VS Code >> Sublime

現在就試試吧:https://code.visualstudio.com