Visual Studio Code 簡單試用體驗

文/馬天翼

我沒看現場的發布會，我是睡覺突然醒了直接看到微博上刷屏的信息，從床上跳下來，下載，試用，然后冒著猝死的風險來寫答案。（早晨起來整理一下答案，fix 一些細節）

首先對 Visual Studio Code 做一個大概的介紹。首先明確一下，這個 Visual Studio Code（以下簡稱 vscode）是一個帶 GUI 的代碼編輯器，也就是只能完成簡單的代碼編輯功能，并不是一個集成開發環境（IDE）。而 Visual Studio、WebStorm 這類的開發工具是 IDE，功能強大，這兩個是不一樣的概念。

有些答案在討論配置文件是 JSON 格式的，這個已經是 Sublime、Atom 這一類編輯器的標配了。另外，關于 Web 云端開發的支持，第一版本也沒有相關的功能。目前僅僅就是一個編輯器而已，跟連接微軟的后端云服務沒啥關系。當然，可能以后的版本會加入直接連接云端進行 開發吧。

目前市場上比較常見的一些 GUI 編輯器的產品：Sublime、Notepad++、Atom、H5 Builder、Brackets 等等，包括終端下的 Vim、Emacs 等等，都是這個 vscode 的競品。我個人比較常用 Sublime，Atom 少用，所以只能對比下 Sublime。

以下從剛剛的試用情況來大概談一談編輯器獨特的地方，僅供參考。

1. 外觀

典型的 VS 風格的 UI，支持 light 和 dark 兩種 theme 切換。旁邊按鈕分別是新建、搜索、git 和調試。不過功能布局情況，完全類似 Atom。

2. 性能

Mac Air 上將近 300 萬行代碼的文件，打開需要5、6 秒，瀏覽無卡頓，無崩潰現象，繼續 coding 也不卡頓，Go to Line 也不卡頓，粘貼代碼會卡頓、問題不大。Sublime3 的最新版連打開這個文件，都要將近 2 分鐘，根本不比了。

3. 用戶體驗細節

這個我一點一點來說：

(1) 可以直接點擊 GUI 按鈕或者右鍵進行新建 File、Folder 這樣的操作。（以前的 Sublime 這方面比較差）

(2) 直接分離 tab 和關閉 tab

左邊的按鈕可以直接 split 窗口。比 Sublime 方便多了。右邊的x可以直接關閉標簽。

然后左側還可以看到一個大的藍色按鈕，可以直接 Open Folder，也比較爽。。這里也就直接暗示了以 Folder 為項目，不然很多新手弄不清楚打開文件、打開 Folder 什么的。

(3) 無插件化的代碼 diff

非常強大的一個功能，目前發現兩個方式可以啟動 diff 功能。

第一種是在左側，右鍵文件 select to compare，然后再右鍵一個文件 Compare with 'xx'，就可以出現 diff。第二種是 git 的模式下，點擊右上角的 switch to changes file，就可以啟動 diff。

然后左上角點擊...按鈕，會出現

然后點擊 switch to Inline View，可以并到一個 tab diff。

(4) 代碼補全支持 Angular 標簽、支持函數說明提示

然后簡單試了一下 HTML 和 JS 的代碼補全（C#試了貌似沒有補全，具體的再看）

HTML 的補全算不錯的，還支持 Angular 的標簽補全。

JS 的代碼補全太帥了，直接看圖吧，每個函數屬性都有說明。支持 Node 補全。。

(5) 自動提示覆蓋配置文件&懸浮提示

這種編輯器，自己改配置文件也是很常見的。目前，不支持對不同語言進行獨立配置，都是集成在一個配置文件里面；不過支持對不同項目有不同的配置文件，支持快捷鍵配置。

配置的時候有兩點很 nice：

    1. 會自動打開 Default Settings 和 User Settings，提示讓你在右側修改覆蓋自己的配置文件。這個對新手很友好、也很方便。
</p>
<p>
    2. 另外鼠標放到配置文件（JSON 格式）的 key 上，會自動懸浮提示。
</p>
<p style="text-align:center;">
    <img src="https://simg.open-open.com/show/23b7ace7cf43701aee628a27f57e8dd8.png" alt="Visual Studio Code 簡單試用體驗" height="369" width="550" /> 
</p>
<p>
    (6) 語法錯誤提示&格式化代碼&無插件化的代碼 Debug
</p>
<p style="text-align:center;">
    <img src="https://simg.open-open.com/show/c10aa7cbc2c7fc80fc0793d1967bc80f.png" alt="Visual Studio Code 簡單試用體驗" height="220" width="206" /> 
</p>
<p>
    內置了語法錯誤提示，很方便。
</p>
<p>
    右鍵代碼區域支持自動格式化代碼，挺不錯的。
</p>
<p>
    編輯器還帶了原生的 Debug 功能。
</p>
<p>
    目前來看，配置文件主要是前端開發方面的配置，Debug 支持 Node 和 Mono（.Net）。
</p>
<p>
    開啟 Debug 功能，必須要 Mono3.0 安裝好，我光調試 Node 也要安裝，不清楚為什么。
</p>
<p>
    點擊左側的 Debug 按鈕，會自動在目錄下生成 Debug 的配置文件。
</p>
<p style="text-align:center;">
    <img src="https://simg.open-open.com/show/52feded8007e6dee55d6ab9d13b28322.png" alt="Visual Studio Code 簡單試用體驗" height="503" width="624" /> 
</p>
<p>
    按照自己所需修改好，然后左側選擇要 Debug 的配置，然后就跑起來了。
</p>
<p style="text-align:center;">
    <img src="https://simg.open-open.com/show/24e1dc8ab2579c8e2f7995ad60e143a5.png" alt="Visual Studio Code 簡單試用體驗" height="360" width="600" /> 
</p>
<p>
    (7) 支持簡單的多行選擇
</p>
<p>
    在單詞上右鍵 Change All Occurrences，然后就可以選擇多行了。
</p>
<p style="text-align:center;">
    <img src="https://simg.open-open.com/show/92b91dabac745c2cf458a705f6b72a94.png" alt="Visual Studio Code 簡單試用體驗" height="166" width="324" /> 
</p>
<p style="text-align:center;">
    <img src="https://simg.open-open.com/show/562ead36df1d08882dd1bd26a21feb1f.png" alt="Visual Studio Code 簡單試用體驗" height="103" width="104" /> 
</p>
<p>
    現在唯一的問題就是不支持大家最關心的插件化，但是這只是剛開始，只是第一版，插件化對微軟來說也應該只是分分鐘。而且第一版放出來就支持插件 化意義也不大，因為開發者們也都不知道微軟要做這個東西，第一版放出來也沒啥插件。我要是微軟，第一版也不放，后續版本趕緊加進來就好，只要用戶多，都不 是事兒。而且右下角直接有一個笑臉可以拿來反饋信息，所以大家有什么想反饋的，直接點那個按鈕。
</p>
<p>
    綜上，說完了一些吸引人的 feature，放上我個人對其的初步評價，一個預期。
</p>
<p>
    首先，免費開放肯定是非常好的消息，Sublime 畢竟是收費的，Sublime 3 連無限期免費試用都不行了。
</p>
<p>
    其次，插件化、語言獨立配置要趕緊加到日程里面，搞出來，這才是大炮。不過，以微軟的水平，這個應該完全不是問題，而且官方文檔里面也已經說了，這個是在日程上的事情。
</p>
<p>
    再其次，用戶體驗的細節上，微軟肯定是完爆 Sublime 的，見上文。
</p>
<p>
    最后，對前端開發、Node、C#比較友好。以前搞前端開發的，特別是 Mac 和 Linux 的開發者，應該會比較傾向于這個了，估計很多都會把常用編輯器從 Sublime 換到這個了。C#開發者的話，應該還是在 Windows 上的開發者才會用的多，對他們而言，當做一個快速的編輯器不錯，比 VS 本身打開方便多了。
</p>
<p>
    其他語言方向的，如果之前用 Sublime 的，可能會比較多轉到這個。如果這款編輯器微軟真的比較重視的來發展、推廣，支持插件化、語言獨立配置之后，應該喜歡用 Sublime 來開發 Python、Ruby、Go 等等那批開發者都會切換到 vscode。
</p>
<p>
    如果說，你比較急切，上面的話都懶得看，那么我主要濃縮總結三點特性：
</p>
<p>
    1. 免費
</p>
<p>
    2. 用戶體驗細節好，IDE 版的智能特性。
</p>
<p>
    3. 流暢，完全不卡。（Atom 估計哭了，不知道微軟為啥把自己改造的不卡了）
</p>
<p>
    推出這個 vscode 對微軟來說，就是標志著他們要開始席卷了，先讓你們用上這種編輯器再說。當然對開發者來說，不管喜不喜歡用，反正不花錢多了一個選擇，挺好的。
</p>
<p>
    PS：話說到 Atom，確實到現在我都沒再用過。（經過評論指正）不過微軟 vscode 好像是 Atom Shell 套層殼子，應該是自己改了，不知道怎么改的這么快，具體情況不敢亂下結論。不過不管怎么樣，你好歹改下二進制文件的名字吧。。。
</p>
<p style="text-align:center;">
    <img src="https://simg.open-open.com/show/89498f47bd682f57ef33e71d8ae523f2.png" alt="Visual Studio Code 簡單試用體驗" height="96" width="556" /> 
</p>

</div>