VSCode 是什么，VS Code的全稱(chēng)是Visual Studio Code，但這全名實(shí)在是太長(cháng)了，很多用戶(hù)喜歡叫它VS Code。說(shuō)起VS Code，官方定義它是一個(gè)免費的、開(kāi)源的跨平臺編輯器。之所以強調編輯器，我想是因為 VS Code 并無(wú)意成為一個(gè)全尺寸的集成開(kāi)發(fā)環(huán)境，也就是IDE。

很多人都把編輯器等同于IDE，其實(shí)從專(zhuān)業(yè)角度來(lái)講并非這樣。IDE 更為關(guān)注開(kāi)箱即用的編程體驗、對代碼往往有很好的智能理解，同時(shí)側重于工程項目，為代碼調試、測試、工作流等都有圖形化界面的支持，因此相對笨重，Java程序員常用的Eclipse定位就是IDE；而編輯器則相對更輕量，側重于文件或者文件夾，語(yǔ)言和工作流的支持更豐富和自由，VS Code 把自己定位在編輯器這個(gè)方向上，但又不完全局限于此。

如果你有興趣，可以打開(kāi)自己喜歡的編輯器官網(wǎng)看看它是怎么樣的定位?？傮w來(lái)說(shuō)，近幾年流行風(fēng)向是輕量的編輯器，這也是大勢所趨。

要理解VS Code代碼編輯器的設計思路，就需要先看看VS Code的發(fā)展軌跡。從我的角度看，不管你是學(xué)習編程語(yǔ)言，還是框架、編輯器，都應該先去看看它的來(lái)龍去脈，了解它們是怎么發(fā)展而來(lái)的，曾經(jīng)遇到了什么問(wèn)題，又是怎么解決的，這些信息都便于你從大局上提高對事情本質(zhì)的認識。

文章目錄

1 VSCode 發(fā)展歷史2 VSCode 是開(kāi)源與開(kāi)放的平臺3 VSCode 學(xué)習路線(xiàn)

VSCode 發(fā)展歷史

2011 年底，微軟從 IBM 請來(lái)了 Erich Gamma。Erich Gamma 是《設計模式》一書(shū)的作者之一，曾和肯特·貝克（Kent Beck） 一起發(fā)明了 JUnit，并且在 IBM 領(lǐng)導 Java 開(kāi)發(fā)工具的開(kāi)發(fā)工作。微軟把他請過(guò)來(lái)，就是希望他能夠打造一款在線(xiàn)的開(kāi)發(fā)工具，讓開(kāi)發(fā)者們能夠在瀏覽器里獲得 IDE 般的開(kāi)發(fā)體驗，這也就是之后為人所知的 Monaco Editor。

Erich Gamma 見(jiàn)證了 Eclipse 從崛起到逐漸臃腫，再逐漸式微的整個(gè)歷程，他深刻認識到 Eclipse 成功的一部分原因是極度的可定制化特性，任何功能在Eclipse中都可以用插件來(lái)實(shí)現；但是由于 Eclipse 的插件跟核心代碼運行在同一個(gè)進(jìn)程內，隨著(zhù)插件的增多，核心功能經(jīng)常會(huì )被插件拖累，也就更加讓人覺(jué)得笨重。

因此，在打造 Monaco Editor 時(shí)，開(kāi)發(fā)團隊非常注重核心功能的性能，盡可能地保持輕量，而對資源和性能消耗較大的功能，則運行在其他的進(jìn)程之中。

2015 年，Erich Gamma 帶領(lǐng)團隊把 Monaco Editor 移植到桌面平臺上，也就是這個(gè)專(zhuān)欄的主角 Visual Studio Code，即 VS Code。

VS Code 繼承了 Monaco Editor 的設計原則，其核心是做一個(gè)高性能的輕量級編輯器；個(gè)性化的功能，則交給插件系統來(lái)完成。這一點(diǎn)可以說(shuō)是師承 Eclipse，但同時(shí)又吸取了 Eclipse 的教訓，把插件系統運行在主進(jìn)程之外，高度可定制但同時(shí)又是可控的。

與此同時(shí)，VS Code 也有自己的使命，那就是讓開(kāi)發(fā)者在編輯器里擁有 IDE 那樣的開(kāi)發(fā)體驗，比如對源代碼有智能的理解、圖形化的調試工具、版本管理等等。

不難發(fā)現，VS Code 希望在編輯器和 IDE 之間找到一個(gè)平衡。在這樣的設計思路下，你打開(kāi)編輯器，不需要創(chuàng )建任何的項目工程文件就可以開(kāi)始使用，并高效便捷地操作文本；同時(shí)在編程語(yǔ)言插件的支持下能夠得到語(yǔ)法檢查、智能提示；你還可以借助豐富的插件 API 拓展 VS Code 以滿(mǎn)足自己的需求。

要達成這樣的目標，難度可以說(shuō)是非常大的，但 VS Code 取得了不錯的成果。究其原因，在我看來(lái)就是微軟打造了一個(gè)開(kāi)放的平臺。雖然有馬后炮的嫌疑，但讓我們一起來(lái)看看這樣的一個(gè)開(kāi)放平臺是怎么助力 VS Code 的吧。

VSCode 是開(kāi)源與開(kāi)放的平臺

首先，VS Code 的源代碼以 MIT 協(xié)議開(kāi)源。這不僅意味著(zhù)大家能夠免費獲取到 VS Code 的核心代碼，更意味著(zhù)社區能夠基于 VS Code 的代碼，開(kāi)發(fā)自己的產(chǎn)品。

業(yè)界現在比較知名的基于 VS Code 的項目有 SourceGraph、StackBlitz、CodeSandbox 等，這些產(chǎn)品可以提供非常接近VS Code 的開(kāi)發(fā)體驗，而VS Code 也經(jīng)常從它們身上吸取技術(shù)和產(chǎn)品層面的寶貴經(jīng)驗。

其次，開(kāi)發(fā)過(guò)程和反饋渠道的開(kāi)放。VS Code 源代碼托管在 GitHub 上，同時(shí)使用 GitHub 管理項目的開(kāi)發(fā)計劃和測試，每個(gè)用戶(hù)都可以在 GitHub 上了解到 VS Code 的開(kāi)發(fā)進(jìn)度。與此同時(shí)，GitHub 也是 VS Code 唯一的反饋渠道，開(kāi)發(fā)團隊根據反饋的影響程度進(jìn)行統籌安排。作為用戶(hù)，你可以近乎實(shí)時(shí)地跟開(kāi)發(fā)團隊進(jìn)行交流，了解產(chǎn)品的發(fā)展情況。

再次，接口的開(kāi)放。VS Code 自帶了 TypeScript 和 Node.js 的支持，用戶(hù)下載 VS Code 后，立刻就能夠在書(shū)寫(xiě) JavaScript 和 TypeScript 時(shí)獲得智能提示，而且無(wú)需任何配置即可立即調試 Node.js代碼。VS Code 核心團隊有 Node.js 高手，TypeScript 也是微軟官方出品的，VS Code 能把對這兩個(gè)語(yǔ)言的支持做好，似乎并不是什么值得驚訝的事情。但是 VS Code 團隊不可能精通所有語(yǔ)言，對于他們不熟悉的語(yǔ)言，VS Code 該怎么支持呢？

最好的辦法莫過(guò)于把專(zhuān)業(yè)的事情交給專(zhuān)業(yè)的人來(lái)做。為此，VS Code 為編程語(yǔ)言工作者提供了統一的 API ，即Language Server Protocol 和 Code Debugging Protocol，每種語(yǔ)言都能夠通過(guò)實(shí)現兩個(gè) API 在 VS Code 上得到類(lèi)似 IDE 的開(kāi)發(fā)和調試體驗。

而且 VS Code 也并沒(méi)有因為 TypeScript 是微軟嫡出就給開(kāi)小灶，而是對大家都一視同仁，TypeScript 能夠得到的支持，其他語(yǔ)言一個(gè)也不落下。比如 Rust 的語(yǔ)言支持，就是由 Rust 官方團隊開(kāi)發(fā)和維護的，他們可以說(shuō)是這個(gè)世界上最懂怎么給 Rust 做語(yǔ)法支持的一群人了。

在這樣的平臺上，編輯器開(kāi)發(fā)者、編程語(yǔ)言工作者和社區，各自做自己最擅長(cháng)的事情，把份內事做到極致。同時(shí)，從開(kāi)發(fā)到測試，再到用戶(hù)反饋都是公開(kāi)透明的，每個(gè)人都能參與其中，把產(chǎn)品往自己希望的方向推進(jìn)。VS Code 的技術(shù)實(shí)踐和成果，最后也以開(kāi)源的形式回饋給社區，讓大家都能夠借助 VS Code 去打造自己的產(chǎn)品，一起成功。

VSCode 學(xué)習路線(xiàn)

簡(jiǎn)短地了解了 VS Code 的歷史后，如果你也認同它的設計哲學(xué)和使命，你肯定還想知道該如何把 VS Code 的這一套轉化為自己的內力。我在第一講 學(xué)編輯器，到底應該‘學(xué)’什么？ 里講過(guò)編輯器學(xué)習的通用辦法，在 VS Code 身上也是適用的。你可以按照以下三個(gè)步驟來(lái)逐步掌握 VS Code。

核心編輯器的使用。VS Code 有一套自己的快捷鍵，你可以通過(guò)快捷鍵的學(xué)習了解核心編輯器所支持的功能。同時(shí)， VS Code 允許自定義快捷鍵的映射，如果你有自己熟悉的一套快捷鍵操作，也可以無(wú)縫地在 VS Code 上使用。除了快捷鍵，VS Code 對鼠標操作、多光標、搜索都有完備的支持；在編程語(yǔ)言的支持上面，VS Code 也向 IDE 看齊，自動(dòng)補全、代碼片段等一應俱全。掌握了核心編輯器，VS Code 就能夠勝任你的日常通用編輯器。工作臺、工作區的使用。VS Code 中除了編輯器區域，還有很多其他的功能，像是資源管理器、跨文件搜索、插件管理等，它們一起組成了統一的界面，我們稱(chēng)之為工作臺。這個(gè)工作臺的設計，代表了 VS Code 對工作流的選擇。內置的軟件版本管理，終端模擬器，調試器等，掌握這些 VS Code 欽定的工具，進(jìn)一步提升工作效率。VS Code 定制和插件開(kāi)發(fā)。作為一個(gè)百萬(wàn)級別用戶(hù)量的工具，很多功能的默認設置不可能滿(mǎn)足每個(gè)人或者每個(gè)工作場(chǎng)景，你可以學(xué)習如何定制 VS Code 的各個(gè)部件，不能永遠按部就班；對于 VS Code 沒(méi)有實(shí)現的功能，還可以學(xué)習一下如何使用 JavaScript 書(shū)寫(xiě)插件，把自己的想法，變成工具的一部分。

通過(guò)這三個(gè)步驟，你在使用 VS Code 時(shí)就能夠隨心所欲了。除此之外，我也建議你關(guān)注 VS Code 每月的發(fā)布更新日志，官方團隊會(huì )詳細講解每個(gè)版本新增的功能。VS Code 的官方博客也非常值得訂閱，團隊成員會(huì )經(jīng)常分享開(kāi)發(fā)過(guò)程的心得感悟，算得上是最前沿的技術(shù)分享。

參考鏈接：

VS Code 官方博客VS Code 更新日志