vscode新增圖片教程（vscode新手教程）
VSCode 是什麼，VS Code的全稱是Visual Studio Code，但這全名實在是太長了，很多使用者喜歡叫它VS Code。說起VS Code，官方定義它是一個免費的、開源的跨平臺編輯器。之所以強調“編輯器”，我想是因為 VS Code 並無意成為一個全尺寸的整合開發環境，也就是IDE。
很多人都把編輯器等同於IDE，其實從專業角度來講並非這樣。IDE 更為關注開箱即用的程式設計體驗、對程式碼往往有很好的智慧理解，同時側重於工程專案，為程式碼除錯、測試、工作流等都有圖形化介面的支援，因此相對笨重，Java程式設計師常用的Eclipse定位就是IDE；而編輯器則相對更輕量，側重於檔案或者資料夾，語言和工作流的支援更豐富和自由，VS Code 把自己定位在編輯器這個方向上，但又不完全侷限於此。
如果你有興趣，可以開啟自己喜歡的編輯器官網看看它是怎麼樣的定位。總體來說，近幾年流行風向是輕量的編輯器，這也是大勢所趨。
要理解VS Code程式碼編輯器的設計思路，就需要先看看VS Code的發展軌跡。從我的角度看，不管你是學習程式語言，還是框架、編輯器，都應該先去看看它的來龍去脈，瞭解它們是怎麼發展而來的，曾經遇到了什麼問題，又是怎麼解決的，這些資訊都便於你從大局上提高對事情本質的認識。
文章目錄
- 1 VSCode 發展歷史
- 2 VSCode 是開源與開放的平臺
- 3 VSCode 學習路線
VSCode 發展歷史
2011 年底，微軟從 IBM 請來了 Erich Gamma。Erich Gamma 是《設計模式》一書的作者之一，曾和肯特·貝克（Kent Beck） 一起發明了 JUnit，並且在 IBM 領導 Java 開發工具的開發工作。微軟把他請過來，就是希望他能夠打造一款線上的開發工具，讓開發者們能夠在瀏覽器裡獲得 IDE 般的開發體驗，這也就是之後為人所知的 Monaco Editor。
Erich Gamma 見證了 Eclipse 從崛起到逐漸臃腫，再逐漸式微的整個歷程，他深刻認識到 Eclipse 成功的一部分原因是極度的可定製化特性，任何功能在Eclipse中都可以用外掛來實現；但是由於 Eclipse 的外掛跟核心程式碼執行在同一個程序內，隨著外掛的增多，核心功能經常會被外掛拖累，也就更加讓人覺得笨重。
因此，在打造 Monaco Editor 時，開發團隊非常注重核心功能的效能，儘可能地保持輕量，而對資源和效能消耗較大的功能，則執行在其他的程序之中。
2015 年，Erich Gamma 帶領團隊把 Monaco Editor 移植到桌面平臺上，也就是這個專欄的主角 Visual Studio Code，即 VS Code。
VS Code 繼承了 Monaco Editor 的設計原則，其核心是做一個高效能的輕量級編輯器；個性化的功能，則交給外掛系統來完成。這一點可以說是師承 Eclipse，但同時又吸取了 Eclipse 的教訓，把外掛系統執行在主程序之外，高度可定製但同時又是可控的。
與此同時，VS Code 也有自己的使命，那就是讓開發者在編輯器裡擁有 IDE 那樣的開發體驗，比如對原始碼有智慧的理解、圖形化的除錯工具、版本管理等等。
不難發現，VS Code 希望在編輯器和 IDE 之間找到一個平衡。在這樣的設計思路下，你開啟編輯器，不需要建立任何的專案工程檔案就可以開始使用，並高效便捷地操作文字；同時在程式語言外掛的支援下能夠得到語法檢查、智慧提示；你還可以藉助豐富的外掛 API 拓展 VS Code 以滿足自己的需求。
要達成這樣的目標，難度可以說是非常大的，但 VS Code 取得了不錯的成果。究其原因，在我看來就是微軟打造了一個開放的平臺。雖然有“馬後炮”的嫌疑，但讓我們一起來看看這樣的一個開放平臺是怎麼助力 VS Code 的吧。
VSCode 是開源與開放的平臺
首先，VS Code 的原始碼以 MIT 協議開源。這不僅意味著大家能夠免費獲取到 VS Code 的核心程式碼，更意味著社羣能夠基於 VS Code 的程式碼，開發自己的產品。
業界現在比較知名的基於 VS Code 的專案有 SourceGraph、StackBlitz、CodeSandbox 等，這些產品可以提供非常接近VS Code 的開發體驗，而VS Code 也經常從它們身上吸取技術和產品層面的寶貴經驗。
其次，開發過程和反饋渠道的開放。 VS Code 原始碼託管在 GitHub 上，同時使用 GitHub 管理專案的開發計劃和測試，每個使用者都可以在 GitHub 上了解到 VS Code 的開發進度。與此同時，GitHub 也是 VS Code 唯一的反饋渠道，開發團隊根據反饋的影響程度進行統籌安排。作為使用者，你可以近乎實時地跟開發團隊進行交流，瞭解產品的發展情況。
再次，介面的開放。VS Code 自帶了 TypeScript 和 Node.js 的支援，使用者下載 VS Code 後，立刻就能夠在書寫 JavaScript 和 TypeScript 時獲得智慧提示，而且無需任何配置即可立即除錯 Node.js程式碼。VS Code 核心團隊有 Node.js 高手，TypeScript 也是微軟官方出品的，VS Code 能把對這兩個語言的支援做好，似乎並不是什麼值得驚訝的事情。但是 VS Code 團隊不可能精通所有語言，對於他們不熟悉的語言，VS Code 該怎麼支援呢？
最好的辦法莫過於把專業的事情交給專業的人來做。為此，VS Code 為程式語言工作者提供了統一的 API ，即Language Server Protocol 和 Code Debugging Protocol，每種語言都能夠通過實現兩個 API 在 VS Code 上得到類似 IDE 的開發和除錯體驗。
而且 VS Code 也並沒有因為 TypeScript 是微軟嫡出就給開小灶，而是對大家都一視同仁，TypeScript 能夠得到的支援，其他語言一個也不落下。比如 Rust 的語言支援，就是由 Rust 官方團隊開發和維護的，他們可以說是這個世界上最懂怎麼給 Rust 做語法支援的一群人了。
在這樣的平臺上，編輯器開發者、程式語言工作者和社羣，各自做自己最擅長的事情，把份內事做到極致。同時，從開發到測試，再到使用者反饋都是公開透明的，每個人都能參與其中，把產品往自己希望的方向推進。VS Code 的技術實踐和成果，最後也以開源的形式回饋給社羣，讓大家都能夠藉助 VS Code 去打造自己的產品，一起成功。
VSCode 學習路線
簡短地瞭解了 VS Code 的歷史後，如果你也認同它的設計哲學和使命，你肯定還想知道該如何把 VS Code 的這一套轉化為自己的內力。我在第一講 “學編輯器，到底應該‘學’什麼？” 裡講過編輯器學習的通用辦法，在 VS Code 身上也是適用的。你可以按照以下三個步驟來逐步掌握 VS Code。
- 核心編輯器的使用。VS Code 有一套自己的快捷鍵，你可以通過快捷鍵的學習瞭解核心編輯器所支援的功能。同時， VS Code 允許自定義快捷鍵的對映，如果你有自己熟悉的一套快捷鍵操作，也可以無縫地在 VS Code 上使用。除了快捷鍵，VS Code 對滑鼠操作、多游標、搜尋都有完備的支援；在程式語言的支援上面，VS Code 也向 IDE 看齊，自動補全、程式碼片段等一應俱全。掌握了核心編輯器，VS Code 就能夠勝任你的日常通用編輯器。
- 工作臺、工作區的使用。VS Code 中除了編輯器區域，還有很多其他的功能，像是資源管理器、跨檔案搜尋、外掛管理等，它們一起組成了統一的介面，我們稱之為工作臺。這個工作臺的設計，代表了 VS Code 對工作流的選擇。內建的軟體版本管理，終端模擬器，偵錯程式等，掌握這些 VS Code “欽定”的工具，進一步提升工作效率。
- VS Code 定製和外掛開發。作為一個百萬級別使用者量的工具，很多功能的預設設定不可能滿足每個人或者每個工作場景，你可以學習如何定製 VS Code 的各個部件，不能永遠按部就班；對於 VS Code 沒有實現的功能，還可以學習一下如何使用 JavaScript 書寫外掛，把自己的想法，變成工具的一部分。
通過這三個步驟，你在使用 VS Code 時就能夠“隨心所欲”了。除此之外，我也建議你關注 VS Code 每月的釋出更新日誌，官方團隊會詳細講解每個版本新增的功能。VS Code 的官方部落格也非常值得訂閱，團隊成員會經常分享開發過程的心得感悟，算得上是最前沿的技術分享。
參考連結：
- VS Code 官方部落格
- VS Code 更新日誌