vscode 簡(jiǎn)介

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

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

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

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

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

VSCode 發(fā)展歷史

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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