作者 | Hugo Di Francesco

譯者 | 無明

Visual Studio Code 結合了輕量級文本編輯器的易用性和大型 IDE 風格的功能，只需要極少的配置，但充其量也只能說它“還湊合”。

在過去的幾年，我做了很多 PHP、JavaScript 以及其他與 Web 相關的開發工作（HTML、CSS、React、Python、Ruby）。對於開發人員來說，代碼編輯器是工具箱中最重要的組成部分之一。好的編輯器可以保護你的手腕和手指免受重複性勞損的傷害，在經歷長時間的編碼之後，它可以讓你的眼睛免受失明的風險。

與其他 Web 開發人員一樣，我也是從 Sublime 開始的。當時，代碼編輯器領域的競爭還沒有這麼激烈。當 Atom 變得更加成熟時，我轉向了 Atom。我很快就在 Atom 中使用 Nuclide 來協助 React 和 PHP 開發。我還使用過 VIM。我也嘗試了 Eclipse 和 IntelliJ 一小段時間，但我已經習慣了 Atom 和 Sublime 的按鍵綁定，所以感覺 Eclipse 和 IntelliJ 的不太好用。這就是我的編輯器選擇之旅。作為開發人員，我們有時喜歡走很長的路。我的意思是，它畢竟只是一款編輯器，又何必要如此煞費苦心呢？

我最新的代碼編輯器冒險之旅是 Visual Studio Code。它帶來了 IDE 風格的功能，不僅具有經典輕量級代碼編輯器的簡單性，還提供了一些我想要但 Atom 可能永遠不會提供的功能。

它是跨平臺的，並且是免費和開源的，可以在這裡下載到：

https://code.visualstudio.com/

精心設計的 GUI

VSCode 的 GUI 設計與 Atom 或 Sublime 完全不同，它從一個突出的側邊欄開始：

側邊欄包含了以下項目：

1. 資源管理器（文件樹）
2. 搜索
3. Git
4. 調試
5. 擴展

你可以通過這個菜單進行搜索，並查找能夠滿足你需求的擴展程序。我從來不在 Atom 中使用擴展搜索，但因為 VSCode 的擴展功能如此突出，我還是通過菜單安裝了一些擴展程序。

你似乎總能看到你需要使用的功能，你不需要知道所有的鍵盤快捷鍵才能成為高級用戶。

強大的默認設置

VSCode 提供了開箱即用的“JavaScript、TypeScript、JSON、HTML、CSS、Less 和 Sass”智能感知，這一點很不錯。在 Atom 中，我並沒有使用代碼提示插件，所以 VSCode 的智能感知顯得有點囉嗦，不過，這也是我之前錯過的東西。它會根據你安裝的擴展程序告訴你代碼的哪些部分是無效的。例如，當代碼中的每個 const 都被標記為錯誤時，你就該知道它不支持 ES6。

高度可發現的擴展程序

當你意識到需要安裝 ES6 插件時，它會根據當前的 workspace 向你推薦擴展程序，例如，對於 ES5/ES6，它會建議安裝“Babel ES6/ES7”擴展程序。這比在網上尋找安裝哪個插件要好得多。

VSCode 的生態系統還沒有那麼碎片化，可能是因為它還比較新。對於某項任務，通常只有一個包可用（比如用於 ES6 高亮和提示的包）。

輕鬆分屏

我老是記不住分屏的快捷鍵。VSCode 在打開文檔選項卡的右上角提供了一個圖標，可用它來切換屏幕模式。我會在編寫測試代碼時用到它，也就是說，我可以同時打開應用程序代碼和測試代碼。在將代碼從一個框架（或語言）移植到另一個框架（或語言）時，這個功能也很有用。

我從來不知道還能這麼做。為了偶爾用到的功能記住一個快捷鍵並不會帶來多大幫助，但是有了這個功能，就可以讓我避免老是來回切換選項卡。這樣可以減少上下文切換，更好的注意力聚焦可以提高生產力。

git diff 視圖

我沒有使用 git GUI，這對我來說通常不是一個大問題。在終端中使用大多數 git 命令（pull、commit、add、status、rebase）都沒有問題，只是 git diff 不太好用。VSCode 提供了 diff 視圖，我因此可以編寫更好的提交日誌消息，因為現在可以看到每個文件的全部代碼差異，而不是像以前那樣運行 git diff，然後還有記住使用 git commit 時 diff 中都包含了哪些內容。

單擊導入包

我從不在 Atom 中使用單擊導入包，因為用得不多。但一旦用到了，你就會覺得無需重新輸入文件名這一點其實是很棒的。

內置的終端 / 調試器

我會對 Atom 和 iTerm 進行分屏。但事實證明，iTerm 用得並不多。在 VSCode 中，你只需要使用 cmd +或 ctrl +就可以召喚出終端。

智能感知

能夠查看類型函數定義是非常有用的。之前，如果忘記一個函數（比如 PHP 中的 array_push）的參數順序是怎樣的，我都需要去查找 API 文檔。現在，VSCode 可以直接告訴我應該按照怎樣的順序傳遞參數，那麼我就可以繼續專注於手頭的任務。

你還可以按住 cmd 或 ctrl 鍵來查看自己定義的變量和導入的引用。

所有這些功能都有一些共同點：它們是開發工作流程的一部分，但不會一直被用到。當你需要使用它們時，它們就能幫助你提高工作效率。

一些插件

VSCode 具有很高的定製化能力和可擴展性，以下這些是我目前安裝過的一些插件：

• VSCode Atom 按鍵映射：
• https://github.com/waderyan/vscode-atom-keybindings
• Sublime 3 模式下自動關閉標籤，比如你輸入，它會自動填充與之匹配的關閉標籤：
• https://marketplace.visualstudio.com/items?staticName=formaulahendry.auto-close-tag
• 用於 VSCode 的 EditorConfig，用於設定每個 tab 的空格數量或去除尾部空格：
• https://github.com/editorconfig/editorconfig-vscode
• PHP IntelliSense：
• https://marketplace.visualstudio.com/items?staticName=felixfbecker.php-intellisense
• Babel ES6/ES7 用於現代 JavaScript 代碼的語法高亮：
• https://marketplace.visualstudio.com/items?itemName=dzannotti.vscode-babel-coloring

結 論

VSCode 是跨平臺、免費和開源的。即使你是一個頑固的 Atom 或 Sublime 粉絲，也要試一試 VSCode。它可能會讓你大吃一驚。

英文原文

https://hackernoon.com/virtualstudio-code-the-editor-i-didnt-think-i-needed-16970c8356d5

閱讀更多 InfoQ 的文章

關鍵字: Visual 編程語言 Sublime