vscode 簡介

VS Code，全稱是Visual Studio Code，但因?yàn)槿Q太長，微軟旗下另一款產(chǎn)品visual studio又經(jīng)常被簡稱為VS，所以這款與vs有一定淵源的代碼編輯器就被簡稱為VSCode。

它是一個(gè)免費(fèi)的、開源的跨平臺編輯器。之所以強(qiáng)調(diào)“編輯器”，我想是因?yàn)?VS Code 并無意成為一個(gè)全尺寸的集成開發(fā)環(huán)境，也就是IDE。

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

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

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

VSCode 發(fā)展歷史

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

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

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

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

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

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

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

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

VSCode 是開源與開放的平臺

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

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

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

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

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

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

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

VSCode 學(xué)習(xí)路線

簡短地了解了 VS Code 的歷史后，如果你也認(rèn)同它的設(shè)計(jì)哲學(xué)和使命，你肯定還想知道該如何把 VS Code 的這一套轉(zhuǎn)化為自己的內(nèi)力。你可以按照以下三個(gè)步驟來逐步掌握 VS Code。

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

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