人見人愛的 Visual Studio Code

Visual Studio Code 簡稱VSC

沒錯，我就是來給大家安利 VSC 的。

對於前端領域的開發者來說，這是一款無比「感性」的編輯器，我所認識的大部分人都已經在使用它，並且網路上有很多很有趣的分享和資料，可能我會說一些，但，這不是最主要的。

（2017年10月31日）

issues很多啊，可見有多熱門。

你能看見它是微軟碟機動的開源項目 Microsoft/vscode ，（國際大廠，品質有保證），並且你也可以很方便的下載 Visual Studio Code - Code Editing. Redefined ，它支持 Mac Windows Linux 跨平台的體驗非常一致，理論上它可以服務於任何一門語言的開發工作，不僅僅是我們所熟知的前端領域。

說到前端領域由於大家的「追新」，每年不管是框架，UI庫，各種NPM模塊，函數庫，都像「割韭菜」一茬一茬的換，編輯器也是如此。從Subilme Text到Atom，然後自己搭建vim環境，而今天想和大家分享的，正是VSC。

我非常喜歡VSC內嵌的Terminal特性，由於在日常的開發過程中，很需要終端環境來啟動一些服務，比如伺服器，debug服務等等，或是查看一些日誌。

可以通過 ctrl + ` 來快速開啟Terminal。

以前在來回切換的過程中感覺很麻煩，後來就轉用了WebStorm（自帶Terminal）一直到VSC的到來，又換回了編輯器。（窮買不起好機器，WebStorm項目開多了一卡一卡的。）

在Node.js的領域，集成調試一直是很麻煩的時期，但是VSC就集成的很好 Build Node.js Apps with VS Code ，在編輯器中調試，體驗上與使用WebStorm中的Debug功能很類似。

另外在智能提示方面，VSC提供的能力堪比WebStorm，只是模糊匹配稍遜一籌。Visual Studio Code Key Bindings 快捷鍵也是我很看重的一個方面，整體來看，這是我很需要的一款編輯器。

目前我安裝了八個插件，但有些並不一定是前端領域使用的插件：

Debugger for Chrome

Debugger for Chrome - Visual Studio Marketplace

可以在Chrome瀏覽器中調試JS的擴展

Go

Go - Visual Studio Marketplace

集成Go語言的開發擴展，包括語法高亮，智能提示，以及各種服務包

HTML Snippets

HTML Snippets - Visual Studio Marketplace

快速的寫HTML標籤，在編寫過程中，自動補全標籤閉合等

Path Intellisense

Path Intellisense - Visual Studio Marketplace

在導入某文件時可以自動補全路徑，搜索當前路徑下的文件名

Project Manager

Project Manager - Visual Studio Marketplace

管理項目時用，很方便的訪問和切換項目，並且自動檢測Git等

vscode-icons

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

icon美化，各種類型的icon圖標

Python

Python - Visual Studio Marketplace

支持Python環境的擴展

weex

weex - Visual Studio Marketplace

支持Weex的擴展

不過你可以在市場中搜索前端領域需要的插件，Visual Studio Marketplace 。正常情況下，首頁推薦位置的插件，基本上都是非常優秀和穩定的。由於VSC是基於TS寫的，基本上可以判定，它的插件體系也可以用JavaScript來寫，所以它對前端來說，是相當的友好。Building extensions for VS Code 如果你想擴展，這篇文章就不得不看了。VSC團隊給了一套工具和腳手架工程，來輔助你快速的開發VSC擴展，基本上按流程走下來，很快可以開發一款插件。

你想不想當一個Code貢獻者？

Github是個資源集中地

對於編輯器文檔實在看不明白可以閱讀 jeasonstudio/CN-VScode-Docs （如果英文實在看不明白，推薦閱讀這個中文翻譯版）

哦，對了，現在VSC已經官方漢化，跟隨你系統的語言版本而來。

如果有幸閱讀到了此處，你對烹飪感興趣的話推薦關注鄙人的《每周例行》。當然如果你想聯繫我，可以給我發送私信或關注我的微信公眾號fed-talk。

推薦閱讀：