Visual Studio Code v.s Atom-IDE:Web 開發哪家強?
GitHub 最近聯手 非死book 推出了 Atom-IDE,為其 Atom 編輯器帶來了下面這些更深度的開發功能:
-
自動完成
-
大綱視圖
-
查找引用
-
定義跳轉
-
懸浮提示
-
診斷,如錯誤和警告提醒
Atom 誕生已經有三年了。作為一個深度的 Atom 用戶,作者表示自己自從 Atom 問世以來就已使用它,但在過去的幾個月里,他轉移到了 Visual Studio Code,因為 VS Code 更易用,而且提供非常好的類似 IDE 那樣對 TypeScript 的支持。所以當 Atom-IDE 推出時,作者決定對它們進行一番比較。
Atom-IDE vs. Visual Studio Code
自動完成
在 VS Code 中編寫 TypeScript JSX 代碼在導入方面已有改進。例如,編寫一個 React 組件會觸發導入另一個 React 組件的建議。Atom 暫未提供這項功能,所以復制粘貼路徑仍需要開發者手動完成。
在 VS Code 中自動補全 lodash
在 Atom 中使用 ide-typescript 自動補全 lodash
在其他地方,自動補全功能可從一個 React 組件的 Prop Type 中識別出參數,并自動建議。進一步的自動補全功能需要通過按下 ctrl-space 手動觸發。一個例子是搜索 lodash 函數,搜索“is”返回 lodash 包,而不是個別單獨的函數。這是 VS Code 中的一個自動功能。
診斷(錯誤、警告提醒)
Atom 使用傳統的 linte 工具以錯誤和警告的形式提供診斷。要在 TypeScript 文件中識別錯誤,必須先保存文件,然后運行 linter。相比之下,VS Code 無需保存文件便可自動報告錯誤。
Atom 的診斷與 非死book 的 Nuclide 相似
Atom-IDE 不好的地方在于它與現有的 linter 工具不兼容。要觸發 ide-typescript 的 linting,必須先禁用 Ruby linter。除非將來會有所改變,否則 Atom-IDE 不會成為多語言的編輯解決方案。
查找引用
Atom 在 TypeScript React 文件中的查找引用方面做得非常好,可通過按下 alt-shift-cmd-F 進行觸發。看起來這像是一個笨重的快捷方式,但它可以通過首選項中的“find-references:activate”命令進行重新映射。VS Code 中包含的此功能這樣展示:將鼠標懸停在一個引用上將突出顯示這個文件中的所有其他引用。
定義跳轉和懸浮提示
懸浮提示只會在某些時候生效,而且項目中的 React 組件并不能被識別,但 React props 會指向它們的定義。不幸的是,點擊進入定義只會將光標放置于導入語句上,還需再次點擊才能進入定義本身。
Atom 中的定義跳轉將指向 TypeScript 的導入
這是調試或逐步執行代碼時遇到的問題。但是,有第一方的支持是令人鼓舞的,并且這意味著會隨時間的推移而改進。
結論
所以,你是否應該下載 Atom Beta 并啟用 Atom-IDE?如果有勇氣和好奇心,作者推薦大家去體驗一下。另一方面,作者表示自己在日常開發中使用 VS Code 仍然比較快,并且 VS Code 有對微軟 TypeScript 語言的第一方支持。