標籤：

VSCode 抵達 1.0, 如何評價距最初發布近一年的 VSCode 正式版?

01-12

Visual Studio Code 的 3 月更新 (按經驗應該是 4 月初來) 憋到了 4 月中旬, 沒想到憋成了 1.0. 大家怎麼看經過了一年打磨的 VSCode?

問題提了將近一天, 看到了很多零零散散的肯定或批評. 作為從 0.1 版開始將其作為主力編輯器的偽全棧, 用 VS Code 寫了不少 Node.js 代碼 (TypeScript / JavaScript). 也看到 VS Code 有許多變化, 有好評價的, 也有不好評價的.

首先是去年末在 Connect 2015 上的高潮, VS Code 開源並且支持插件. 其實相比開源本身, 更令人激動的是 GitHub issues 這個超級大熔爐. 作為用戶我們能非常直接地與開發團隊交流, 提出需求, 聽聽別人的看法, 包括來自開發團隊的, 也有來自其他用戶的. 我自己雖然有很多 (沒人用的) 開源項目, 但相比純粹的開源, 更讓我認可的是這種交流方式 (當然, TypeScript 項目也同樣如此). 所以大家如果有想法或者建議, 完全可以提交 issue, 與其他人一起討論: Issues · Microsoft/vscode · GitHub.

當然, issues 也是窺見項目進展的好地方, 比如可以通過 Milestone 查看下一個迭代的進度: Milestones - Microsoft/vscode · GitHub.

作為一個 Web 前端出生的 JavaScript 工程師, 我的關注點更多的是在 JavaScript 及 TypeScript 相關的功能上. 從 0.1 到 1.0, VS Code 在對 JavaScript 的語言支持上搖搖擺擺做出了好多次改變. 這個似乎也是大家吐槽的重點. 但是作為一個正經用 VS Code 做項目開發的個人/團隊, 對著一系列的改變還是非常認可的, 不過兩個事情分開說.

挑大樑的 Salsa

在不久前的版本里, VS Code 已經開始內置 Salsa 支持. 有的同學可能不知道什麼是 Salsa, 在最初的 VS Code 版本里, JavaScript 的支持就是由基於 TypeScript 定製的語言服務完成的. 再往後, 這個分支合併到了 TypeScript 中, 成為了 TypeScript 語言服務的一部分, 並為 JavaScript 提供語言支持. 這部分也就是 Salsa 了. 得益於 Salsa, TypeScript 已經可以在項目中混寫 JavaScript, 甚至可以作為 ES-next 的編譯器使用. 而受益於 TypeScript, Salsa 賦予了 VS Code 可以與 IDE 媲美的 JavaScript 代碼提示, 自動完成與重構支持.

代碼提示

代碼導航與重構

不過相比 WebStorm 來說, VS Code 在模糊匹配上還比較弱勢, 畢竟很多時候由於各種各樣的寫法, Salsa 並不能處理模糊的情況. 但就能準確推斷的地方, Salsa 絕對是一把好手. 也由於 Salsa 是屬於 TypeScript 的一部分, 不僅 VS Code 可以由它獲益, 其他編輯器也可以通過 TypeScript 語言服務提供同樣強大的 JavaScript 支持.

當然, 要體驗完整的 VS Code JavaScript 開發體驗, 需要創建 jsconfig.json 文件. 1.0 中也在右下角提供了快捷方式, 方便用戶上手.

Linter 和 Linter

從一開始, VS Code 就提供了內建的 JavaScript 語法檢查. 但不幸的是, 項目一大, 這貨延遲可以長達好幾秒鐘. 到後來有一段時間乾脆關閉了開發過程中的語法檢查, 但即便是作為人肉 Parser 的我, 也會經常漏掉錯誤. 後來 Code 加入了 JSHint 與 ESLint 支持 (需要使用 npm 安裝對應的全局模塊 jshint 或 eslint), 默認不啟用, 當然我是果斷換上, 從此絲滑無比. 另外由於可以使用團隊共用的 .jshintrc 或 .eslintrc 配置文件, 不需要最後跑掛了測試再回頭改代碼風格 (再後來 JSHint 和 ESLint 獨立成插件, 不再內置). 對於 @王吉 所說的配置問題和默認風格, 可以將他提到的

https://gist.github.com/egamma/65c0e2a832393e3b625a 文件保存到用戶目錄下, 避免每次都需要添加到項目中. 但這樣有個壞處是全局配置和局部配置會合併到一起, 如果是團隊項目的統一配置, 可能會和編輯器的提示情況有出入.

Debugger

VS Code 的另一大亮點是 debugger, 第三方運行環境和語言也可以通過它提供的 API 快速搭建調試插件. 從插件上線以來, 已經有了適配 Chrome, Cordova, GDB, LLDB, PHP, Python, Ruby, Pascal 等一堆運行環境或語言的插件. 我司的 Ruff (JavaScript 硬體開發方案) 也在探索使用 VS Code 提供包括遠程 debug 在內的應用開發體驗.

其他細節和槽點

  • 更友好的 tasks.json 配置. 過去在 VS Code 中沒有 tasks.json 配置時執行任務 (比如 Ctrl+Shift+B 構建項目), VS Code 會生成一個包含了各種任務示例的 tasks.json 模板. 而現在會提供一個列表供用戶選擇. 終於不用一次又一次回答其他同學怎麼配置 TypeScript 編譯任務了.

  • 反饋不足的本地化. 1.0 更新後, 在包括 QQ 群, 知乎, 以及 GitHub 相關 issues (這個其實更早) 都有看到大家吐槽本地化的命令欄不能識別英文命令. 但下一個月的更新應該會有一個合理的解決方案.
  • 退化的內置 Auto Fix. VS Code 剛出來的時候, JavaScript 中如果出現了 $, process 這樣的標示符, 會提示下載對應的 typings 文件, 但忘了是在哪個版本中移除了這項功能. 雖然熟手都會自己用 tsd 或者 typings 這樣的工具, 但對新手來說少了一個友好的特性.

VS Code 從一開始選擇了鍵盤為中心, 基於 JSON 文件配置的方式, 其實一定程度上增加了對於初學者的上手難度. 但邁過這個坎兒, VS Code 已經代替了我的 Visual Studio 和 Sublime Text, 也希望它能成就更多人的生產力.

然而我推的 PR 沒在這版，挺可惜的

——

中文命令問題你可以把語言改回英文，然後關注 Don"t localize command names on the command palette · Issue #4679 · Microsoft/vscode · GitHub，我有空就推 PR 上去修。

#4433 可能也會推 PR 修

不好用的地方去提 issue Issues · Microsoft/vscode · GitHub ，才會變的更好用。在這裡吐槽不會有什麼作用的。

------

如果你從最早的版本用過來，你會發現它的進步還是很快、很明顯的：

+ 更多語言的支持；

+ Debug；

+ 插件支持；

+ 開源了；

+ 可以摺疊代碼（終於）。

現在仍然以 Sublime 作為主要工具，VS Code 只在寫 Markdown、TypeScript 的時候才會用。

VS Code 比 Atom 和 Bracket 都要好一些，不是么？

------

update at 2016-04-22 09:48:59

關於命令被翻譯的問題，昨天的 Insiders 1.0.1 做了一些改動，就是支持英文命令，但依然顯示被翻譯的版本：

在提交了反饋 Don"t localize command names on the command palette · Issue #4679 · Microsoft/vscode · GitHub 之後，目前已經有了比較合理的方案 Don"t localize command names on the command palette · Issue #4679 · Microsoft/vscode · GitHub ：

就是第一行顯示原始命令（英文），第二行顯示翻譯後的內容。

Thanks everyone for the great discussion on this topic.

Update at 2016-04-27 15:17:06

-------------

最新的 Insider 已經實現了，但是經過討論，將翻譯放在了第一行。

都能直接播放視頻了。

  • 速度一流，響應速度比 Sublime Text 還要快一點，完勝 Atom
  • 自帶的 formatter 還算好用
  • Node.js 和 Web App 開發的話，自帶功能 + 插件在完備性上已經不輸 Sublime Text 了

只有一點不習慣——砍掉了 Tab 功能而改用 ctrl+tab 在最近編輯的文件間進行切換。Proper tabs for open files · Issue #224 · Microsoft/vscode · GitHub 這是關於這個功能的討論，185 贊同對 10 反對，但字幕組，啊不，開發組依然任性的認為目前這個實現是好的，因為在編輯過程中用戶會頻繁的在最近的幾個文件間進行切換，即使打開一堆 tab 同一時間頻繁使用的可能也只有最近的三四個。

我只想說不知道他們自己是怎麼用這個功能的...實際的使用場景是除了最近的幾個文件，可能還需要在幾個不同的應用程序中切換，比如瀏覽器、terminal 等，所以會頻繁的使用 command+tab（切換應用）和 ctrl+tab（切換文件），按起來不舒服不說，很容易誤操作啊！想切文件的時候切了應用，想切應用的時候切了文件...

再加上 OS X 的 Mission Controll 功能...當按下 ctrl+tab 並鬆開 tab 保持 ctrl 按下的狀態後，最近編輯過的文件下拉菜單保持開啟，每按一次 tab 向下切換一個文件，一個不小心手抖多按了一次錯過了想要打開的文件，怎麼向上？直覺是按一下方向鍵上吧？但是 ctrl+上在 OS X 中默認是開啟 Mission Controll...目前這個體驗簡直是*嗶*了狗了。

Plugin+Debug，還能跨平台，寫Node首選啊！

目前正在研究他的插件機制，以後自己寫個語言啥的可以集成進來

雖然小問題有一些，做正式商業項目是完全可以的

到現在還沒有一個能用的vim插件

等吧.再等一會.或許就可以對陣vim了.

代碼配色還是不夠多彩。大多主題都是修改sublime text來的，但是顏色丟失大半，原因就是不支持。

最初發布 0.1：哦...長得好看的Notepad++。

正式版1.0:我都快忘了它是個編輯器，要啥自行車？

UI很不錯，其他功能一般吧，慢慢會好的

或許這點小工作能為初學者帶來點幫助吧

倉庫鏈接：https://github.com/jeasonstudio/CN-VScode-Docs.git

歡迎加入

我就說一點吧

很多人說VS Code寫Node.js不爽，webstorm寫的比較爽，我想問一下，請問你們用webstorm寫node.js的時候debug不卡嗎？我用webstorm debug的時候巨卡，那個卡的我啊，簡直想哭。

我用vs code寫的時候，debug巨流暢，就這一點，我覺得vs code就挺爽。

除非你們告訴我你們用console去debug，那我也沒話說啊

4 月 18 日補充作答：

評論中 @歐耶@林誠@壯壯 等同學對 「VS Code 基於 Electron，是跨平台開源編輯器的主流方向，並且使用 TypeScript 解決了性能詬病」這個觀點存有異議，覺得「TypeScript跟性能有半毛錢關係」、「太扯淡了」，我感覺有必要統一說明下。

1、Atom 與 VS Code 的運行環境都是 Electron ，但從當前版本的實際性能體驗來看，Atom 比 VS Code 響應更慢。Youtube 上有性能對比的視頻，Atom Issues 里也有人討論這個話題，用過這兩款編輯器的同學自己應該可以感受得到；

2、TypeScript 比 JavaScript 性能更優（這個是個人觀點，不在此題討論）。雖然 TypeScript 最終會被編譯成 JavaScript 執行，但從軟體的健壯性和穩定性上來說，用 TypeScript（以及 ES6） 編寫的軟體其架構和性能更佳。我猜想這也是 Angular2 為什麼改用 TypeScript 的原因；

3、VS Code 源於 Monaco，Monaco 使用的是 TypeScript、C#、JavaScript。查看視頻 Meet the Visual Studio Code team ，4分鐘處 Erich Gamma 的解答。

4、鑒於我自己是一個 TypeScript 粉，所以說「使用 TypeScript 解決了性能詬病」。雖然無法考證，但也不是空穴來風胡亂答題的。

------------------

在十多年的編程經歷中，我使用過非常多的的代碼編輯器（包括 IDE），例如 FrontPage、Dreamweaver、EditPlus、EmEditor、Notepad++、Apatana、MyEclipse、TextMate、Coda、VIM、Intellij IDEA、Sublime Text、PhpStorm、Atom、Brackets、MacVIM、Xcode 等等。

它們都是非常優秀的編輯器，尤其是 Sublime Text 和 PhpStorm ，十分適合 web 開發。

只可惜它們都不夠完美，因為「一款完美的編輯器」至少應該包含以下「5F 特點」：

  • Fast，啟動速度快、打開文件速度快、文件搜索速度快；

  • Fantastic，界面設計簡潔大方，主題配色賞心悅目，布局合理，體驗流暢；

  • Fundamental，基礎功能齊全，能在文本編輯（Editor）與集成開發環境（IDE）之間取得很好的平衡；

  • Flexible，編輯器應該有豐富的擴展插件（及其生態市場），以滿足用戶個性化擴展需求；

  • Free，免費和開源。

VS Code 以上 5F 都做得非常好，它很有希望成為第一款完美的編輯器。

我之所以如此看好 VS Code，還因為它的軟體設計理念和它背後的團隊：

  1. VS Code 基於 Electron，是跨平台開源編輯器的主流方向，並且使用 TypeScript 解決了性能詬病；

  2. VS Code 由 Monaco 發展而來，其架構師為大名鼎鼎的「GoF 設計模式」作者之一 Erich Gamma；

  3. 微軟在 Visual Studio 項目中積累了長達二十年的編輯器 IDE 設計經驗；

  4. VS Code 借鑒了大量 Sublime Text 和 PhpStorm 的優秀特性與插件生態。

從軟體架構、資金資源和開發經驗來看，VS Code 團隊超過了有史以來任何一個編輯器團隊。

更令人激動的是，VS Code 完全開源和免費（終於可以不再愧疚的使用破解版編輯器了好嗎 - -），在開源社區的幫助下，VS Code 還在不斷地發展和改進中。在 Github 上僅五個月時間，就有超過 1370 多條 Issues 建議。從我的實際體驗來看，每條 Issues 都能在當天收到 VS Code 團隊的快速反饋與跟進。

VS Code 1.0 正式版中修復了許多問題，並且加入了中文語言支持（但最好還是用英文），是一款值得學習並使用的編輯器。它也是我最喜愛的編輯器之一，強烈推薦給各位程序員和編程愛好者們。

關於 VS Code 具體的特性和簡單配置，可以查看以下這份《Visual Studio Code 配置指南》，我會在 Github 上不斷完善和更新。

Visual Studio Code 配置指南 · Issue #14 · kaiye/kaiye.github.com · GitHub

剛剛更新完,只能說越來越二逼.

+ Salsa,之前JavaScript弄的好好的,忽然加入個Salsa,錯誤檢查沒了,非要另外裝個eslint才行.然後一裝嚇一跳,一堆格式錯誤,什麼代碼2空格縮進你寫了4空格,行末不必要的分號,參數跟小括弧前必須空一格等等,光是取消這些規則就花了我半天時間,最後才發現vscode團隊提供了之前默認的[.eslintrc.json](https://gist.github.com/egamma/65c0e2a832393e3b625a),不過我相信大部分人都沒找到在哪裡.

+ 然後就是本地化支持,你漢化菜單就好了,幹嘛**漢化命令**啊.之前的命令裝插件,我只需要輸入exte

現在裝個插件,居然要用中文命令

是不是有種日了狗的感覺?不用提醒我改locale,你以為我閑的沒事會有之前版本的截圖么?

ctrl + shift + p &> 配置語言 （手動再見）

今天剛下，感覺還不錯呀。

巨硬今年給開發者不少福利呀。

作為VSC0.1版本發布之後就把它拿來當作備用編輯器的「老用戶」，我來把（我眼中的）Visual Studio Code發展歷程理一理：

第一階段：（0.1~0.3）

bug滿天飛，超級不穩定，經常出現自動補全神秘消失的狀況，那個時候我基本處於觀望狀態，不怎麼使用

第二階段：（0.5~0.9）

穩定了許多，而且有不少重大改進，向我用得上的就有：docker的支持改進，支持docker-compose.yaml，C#不再依賴mono，git的undo功能，支持jsx和tsx，等等

但是作為一個偽前端，我還是不經常使用（對後端語言支持還是不如JavaScript和TypeScript好）

第三階段：（0.10）

別看就一個大版本號，這一版小版本還是挺多的。VS Code在這個階段開始支持插件，開源，流暢度也開始下降了（以前有比肩Sublime的流暢度，現在打字快了就會有點卡，不過還是比atom流暢），不過開源以及插件系統還是挺讓人欣慰的，社區出現了不少實用的插件，我在這裡就安利幾個：

Python | Visual Studio Marketplace

Python是我最常用的語言，所以這個插件一推出，我使用VSC的頻率就大大增加，直到現在，VSC已經成了我的主力編輯器，這個插件支持自動補全，Code Format，Lint，Debug，單元測試，還有rename symbols，Go to / peek definition這樣的功能，基本上和IDE無甚區別了（還有最重要的一點：不要錢，嘿嘿）

（知乎上傳不了動圖，想要看插件效果的可以自行打開鏈接查看）

C/C++ Clang | Visual Studio Marketplace

C++的自動補全插件，基於clang的parser搞得（還有一個基於gnu tag搞得，喜歡的可以自行搜索），目前還有些問題，不過拿來做那種幾個文件的大作業倒是可以的

Git History | Visual Studio Marketplace

VSC集成的Git工具還是不完整，其中缺少的一個重要的功能就是History了，這個插件和Python插件處於同一個作者之手

ESLint | Visual Studio Marketplace

和

TSLint | Visual Studio Marketplace

這兩個就不多說啦

最後溫馨提示：在用任何插件之前，都請仔細閱讀插件的readme頁面！仔細閱讀插件的readme頁面！仔細閱讀插件的readme頁面！

第四階段：（1.0）

終於開始支持本地化了，從0.1開始我就經常看著locales下面那一排空的文件發獃，什麼時候能有本地化支持，等到實現本地化了之後，大家又開始吐槽，其實我覺得這個本地化做的還是挺良心的（可能是我習慣快捷鍵+滑鼠的操作模式？），各種自動補全的函數的文檔都漢化了，連license都漢化了，而且翻譯也沒什麼錯，值得吐槽的就只有那個坑爹的命令面板了

最後貼幾點我是用VSC作為主力編輯器的理由吧：

* VisualStudio風格的界面（沒錯我就是那麼庸俗（攤手））

* 和VisualStudio一致的快捷鍵，0學習成本

* 不像Atom那麼卡（窮，電腦配置差）

就這樣，補作業去也~

看了這個問題特意下載用了一天, 主要和Atom對比下:

1. 啟動速度: 實測稍微比Atom(v1.7.1)快一點點, 就一點點, 沒有大家所說的啟動可以完爆Atom的感覺.

2. 外觀: Atom的外觀可定製性比VSCode要高很多, 具體請體驗兩者的Materialize主題 根本不在一個級別上.

3. 插件: Atom完爆VSCode

4. Git支持: 首先Atom的Tree View帶有顯示那些文件是modified/unstaged, 比較直觀和美觀, 但是原生沒有Git支持(吐槽下自帶的各種跳轉Github功能也是雞肋). VSCode自帶基本的Git操作, 但是...竟然只有Commit Push Pull, 沒有看到任何關於Branch的操作. Atom我還沒有找到個插件比較直觀和方便地操作Git.

5. 項目路徑: VSCode的調試功能感覺還可以的樣子(雖然還沒嘗試). VSCode的Workspace Directory這塊做的比較棒, 有點Webstorm的意思, 相比之下Atom簡直太蠢, 經常性啟動丟失上一次工作路徑, 需要重新Add Folder, 更關鍵的是, 它竟然還沒有Open Recent的菜單... 要是多個項目一起用Atom需要經常性得重新導入項目

目前還是會繼續使用Atom!

...

To Be Added

推薦閱讀：

※Atom、Sublime Text、VSCode 三者比較，各有哪些優勢和弱勢？
※VScode 不能自動補全結束標籤？
※vcxsrv轉發vbox的vs code莫名卡頓，誰的鍋，怎麼解決？
※什麼編輯器適合寫Vue？
※visual studio code 可以配置c++ 一鍵編譯運行嗎？

TAG:微軟Microsoft | JavaScript | NET | TypeScript | VisualStudioCode |