小輕快跨平台：王的編輯器 Visual Studio Code 聖經

本書特色

市面上第一本完整說明Visual Studio Code的中文書

 

★ 全世界軟體設計師最愛的IDE編輯器。

支援上百種程式語言，語義突顯、自動完成、自動縮排，完整中斷偵錯，跨平台，內建支援SSH、GIT，可連線到遠端的Windows/Linux/MacOS上進行開發、網頁支援、雲端支援，說不完的強大，連編輯器之神vim的愛用者都忍不住跳槽，連神之編輯器Emacs的使用者也紛紛安裝，不管你是哪作業系統的使用者，快點進入這王之編輯器！

 

★ 好評襲來

Visual Studio Code（VS Code）之所以越來越受歡迎，除了因為它本身具有某些優秀品質，許多外掛程式也功不可沒。本書的一大特色就是幫助你找到合適的外掛程式，並且指導你快速上手。無論你有興趣的是各種程式語言（JavaScript/TypeScript、Java、Python 等），還是實際的開發場景（前端、雲端原生、物聯網等），本書都提供了詳盡的指引。工欲善其事，必先利其器。相信透過本書的學習，你可以把VS Code 訂製成高效又稱手的開發環境。

—微軟Java 語言開發工具團隊首席軟體開發經理 李榕

 

VS Code 是一款極為優秀的開放原始碼產品。透過本書，你除了可以全面地了解到VS Code 的許多使用技巧，還可以學習到VS Code 團隊是如何做開放原始碼的。VS Code 團隊不僅將其程式開放原始碼，而且將整個開發過程都建立於開放原始碼環境之上。對於開放原始碼專案的開發者，VS Code 有許多值得參考和學習的地方。

—開放原始碼中國創始人兼CTO 紅薯

 

VS Code 是微軟針對多語言開發者的程式編輯器，是一款程式設計利器，深受開發者喜愛。VS Code 雖然容易上手，但卻很難精通，因為有關的技術細節比較多，外掛程式生態也比較豐富。作者憑藉其在VS Code 上的多年使用和外掛程式開發經驗，為讀者們把VS Code 的整個技術架構分門別類地整理清楚，並介紹使用技巧、外掛程式、語言服務和各種開發場景，最後達到深入淺出的目的。本書作為VS Code 技術領域的標桿圖書，在技術廣度和深度上兼具極強的參考價值，適合各種語言的開發者作為學習和參考用書。

—華為雲DevCloud 研發技術總監 王亞偉

 

VS Code 的誕生加速了開發階段的數位化進程。近年來，雲端開發理念深入人心，這表示我們需要用網際網路模式重構對開發者來說最重要的工具—IDE。作者透過本書將VS Code 的精妙之處完整呈現，不管是IDE 的使用者、開放原始碼同好還是工具開發者都不應該錯過本書。

—阿里巴巴研發平台負責人 陳鑫（花名神秀）

 

作為程式設計師，我們中的大部分人對VS Code 都再熟悉不過。但是，正如「二八法則」所揭示的那樣，80% 日常用它敲程式的程式設計師很可能只用到了其20% 的核心功能。本書帶我們全面細數VS Code 的各方面，或許其中的小基礎知識就能幫助你在未來的使用過程中提升開發效率。為了儲備與開發工具相關的知識，本書值得一讀。

—著名開放原始碼軟體ECharts 核心貢獻者之一 羨轍

 

本書從開發工具的歷史入手，由淺入深地說明了VS Code 的入門和進階知識，以及VS Code 的強大生態，並教你如何為生態、社區，甚至是VS Code本身做出自己的貢獻。這是一本關於使用VS Code 進行開發的大而全，卻又不雜的好書。

—《Node.js：來一打C++ 擴充》作者、

《精通Vim：用Vim 8 和Neovim 實現高效開發》譯者死月

 

VS Code 是入門簡單卻頗具深度的開發工具，使用者可以極快上手，但隨著深入使用，又會發現達到爐火純青的境界並非易事。本書對於開發者而言，最大的優勢在於它的系統性。從入門到進階再到擴充，整個知識系統一脈相承，開發者不再侷限於許多雜湊基礎知識的拼湊，更可以利用它使VS Code成為技術團隊不可或缺的生產力！

—騰訊雲Serverless 技術專家、百度前技術經理 王俊傑

 

VS Code 作為Visual Studio 家族的產品，也是微軟在雲端原生時代提供的輕量級開發工具。韓駿透過本書，不僅將VS Code 的豐富內容向我們展現得淋漓盡致，讓我們知其然知其所以然，而且能夠使我們在讀後舉一反三地探索VS Code 的未來。

—深圳市友浩達科技有限公司CEO 張善友

 

VS Code 是全球極受歡迎的開發工具之一。韓駿老師憑藉豐富的技術經驗和生動的語言，帶大家由淺入深地學習VS Code，本書非常值得讀者閱讀學習。

—微信公眾號「程式設計師小灰」作者、《漫畫演算法》作者 魏夢舒

 

VS Code 是微軟在2015 年發佈的編輯器，隨後便快速發展起來，成為Stack Overflow 上認證的最受歡迎的編輯器。儘管我一直覺得Emacs 是最好的編輯器，但其實我使用VS Code 的頻率已經高於Emacs。本書歸納了韓駿多年的VS Code 開發經驗，能夠幫助你快速入門及進階VS Code，了解VS Code 在不同領域（如雲端運算、物聯網）的應用，以及如何進行正在火熱發展中的雲端研發等。

—ThoughtWorks 進階諮詢師、

《前端架構：從入門到微前端》作者 黃峰達（Phodal）

 

本書是VS Code 使用者和貢獻者都值得一讀的書。書中透過豐富的使用場景，由淺入深地從各個角度詳盡地介紹了VS Code。無論你是想使用VS Code的各種功能，還是想要了解它的執行機制，或是想成為其生態圈的貢獻者，本書都會是你手邊的必備寶典。

—Works Applications 副總裁 王浚立

 

和韓老師在微軟共事多年，他絕對當得起「極客」的稱呼，是當之無愧的VS Code 專家。VS Code 作為近幾年最強勢的編輯器，迅速橫掃了這個已經深耕多年的市場，並打破了微軟一向給人的「不夠開放」的固有印象。無論你使用哪種程式語言進行程式設計，使用什麼作業系統進行開發，本書都可以幫助你掌握一個高效的開發工具，使你的職業生涯如虎添翼！

—字節跳動Tech Lead 盧肇興

 

韓老師對VS Code 生態具有相當大的熱情，持續一貫地進行中文圈VS Code的技術佈道，幫助開發者更進一步地了解、使用VS Code，加強生產力。本書除了可以作為VS Code 的使用手冊，還可以使你了解微軟團隊在開發這款卓越工具背後的一些有趣故事。

—螞蟻金服技術專家 牽招

 

正確、有效地使用開發工具可以讓開發人員的開發效率倍增，而本書正是透過全面介紹VS Code 的各個功能模組及日常開發的使用場景來探索這款流行開發工具的潛能，進而幫助各個領域的開發者掌握VS Code 正確、有效的使用方法。相信這是一本值得廣大開發人員花時間好好翻閱的關於VS Code 的書。

—亞馬遜AWS 軟體工程師 勵洋

 

VS Code 的生態十分強大，包含Google 在內的許多大廠都開發了多款VS Code 外掛程式。工欲善其事，必先利其器。透過本書的學習，你一定能掌握更多關於VS Code 的技能，大幅加強程式設計效率。

—Google 軟體工程師 趙豐

 

VS Code 作為微軟擁抱開放原始碼社區的又一大成果，結合了該公司深厚的商務軟體開發底蘊和開放原始碼社區的活躍創造力，在短時間內一躍成為業界最受歡迎的程式編輯器。它幾乎融合了所有以往編輯器的優點，同時又能透過自由擴充來支援現在乃至未來的技術熱點。非Windows 平台的使用者終於可以感受原汁原味的「宇宙第一IDE」的魅力。但是，與其強大、豐富的功能相比，市面上針對它的教學材料卻少得可憐，用中文寫的就更是少之又少。本書的出現適時地彌補了這一缺憾。它不僅能幫助剛開始學習程式設計的初

學者，也能幫助從業一段時間的程式設計師。本書不僅詳細介紹了VS Code比較常用的各項功能，而且非常強調實作。每一個案例都配有詳細的步驟和畫面，幾乎可以當作一本工具書來收藏。本書作者是本人的大學同學，也是在微軟工作近10 年的資深工程師，其業務能力毋庸置疑。非常高興能看到本書的出版，以及作者為國內技術社區做出的貢獻。

—Facebook 進階工程師 萬志程（Jensen Wan）

 

VS Code 是我用過的最簡潔清爽又功能強大的編輯器。一直以來都缺乏一本詳細解析VS Code 使用技巧與設計的書。韓駿作為微軟開發工具事業部的工程師，在保持本書專業性的同時，又將VS Code 的使用和設計深入淺出地娓娓道來。能夠將技術圖撰寫得如此生動有趣，著實不易。本書對VS Code 在多場景下的使用進行了一步步的詳細解析，相當大地擴充了我的視野。我原先並不知道VS Code 可以將如此多的內容輕鬆整合在一起，讓每個人都能形成具有自己風格的、便利的開發環境。本書解答了我「不知道自己有什麼不知

道」的問題。最後，本書並非只是一本參考手冊，在某些部分，讀者不僅能從書中循序漸進地掌握VS Code 的許多不為人知的使用訣竅，還能了解到一些團隊設計背後的考量，從中學到大廠在建置優秀產品時難得一見的背後想法與洞見。讀完本書，你將大呼過癮。

—eBay 軟體工程師 吳慧珺

 

工欲善其事，必先利其器。本書透過豐富的圖示一步步指導讀者打造專屬的VS Code 開發環境，深入細緻地介紹了各種場景下的使用精髓，是一本學習VS Code 的優秀圖書。

—愛奇藝大數據服務軟體工程師 鄭浩南

作者簡介

韓駿

 

畢業於上海交通大學軟體學院，微軟開發平台事業部軟體工程師。

VS Code（Visual Studio Code）中文社區創始人，VS Code程式碼貢獻者，「玩轉VS Code」微信公眾號及知乎專欄作者，PyCon、JSConf、.NET Conf、Microsoft Tech Summit、Google Developer Group、COSCon等技術大會講師。

 

編寫過20多款VS Code外掛程式，其中Code Runner外掛程式下載量超過1000萬。

目錄

01 如何學習Visual Studio Code

1.1 學會搜尋

1.2 學會提問

1.3 學會學習

 

02 Visual Studio Code 簡介

2.1 Visual Studio Code 概覽

2.2 Visual Studio Code 簡史

2.3 Visual Studio Code 的優勢

2.4 Visual Studio Code 開發團隊

2.5 Visual Studio Code 是如何做開放原始碼的

 

03 核心元件

3.1 Electron

3.2 Monaco Editor

3.3 TypeScript

3.4 Language Server Protocol

3.5 Debug Adapter Protocol

3.6 Xterm.js

 

04 安裝與設定

4.1 概覽

4.2 Linux

4.3 macOS

4.4 Windows

 

05 快速入門

5.1 Visual Studio Code Insiders

5.2 設定

5.3 使用者介面

5.4 編輯功能

5.5 主題

5.6 快速鍵

5.7 整合終端

5.8 中文顯示

 

06 進階應用

6.1 命令列

6.2 IntelliSense

6.3 程式導覽

6.4 玩轉Git

6.5 打造自己的主題

6.6 快速建立可重複使用的程式片段

6.7 Task，把重複的工作自動化

6.8 Multi-root Workspaces

6.9 偵錯與執行

 

07 外掛程式

7.1 外掛程式市場

7.2 外掛程式管理

7.3 那些不錯的外掛程式

 

08 語言深入

8.1 概覽

8.2 Python

8.3 JavaScript

8.4 TypeScript

8.5 Java

8.6 C#

8.7 C/C++

8.8 Go

8.9 更多語言支援

 

09 前端開發

9.1 HTML

9.2 CSS、SCSS 和Less

9.3 Emmet

9.4 React

9.5 Angular

9.6 Vue

9.7 前端外掛程式推薦

 

10 雲端運算開發

10.1 微軟Azure

10.2 AWS

10.3 Google Cloud Platform

10.4 阿里雲

10.5 騰訊雲

 

11 物聯網開發

11.1 裝置端開發

11.2 裝置上雲端

11.3 裝置模擬

11.4 邊緣計算

11.5 物聯網外掛程式推薦

 

12 遠端開發

12.1 遠端開發概覽

12.2 遠端開發外掛程式

12.3 SSH

12.4 容器

12.5 WSL

 

13 Visual Studio family

13.1 Visual Studio、Visual Studio Code、Visual Studio Codespaces，你都分清楚了嗎

13.2 Visual Studio Codespaces

13.3 Visual Studio Live Share

13.4 Visual Studio IntelliCode

 

14 成為Visual Studio Code的貢獻者

14.1 GitHub Issues

14.2 提問

14.3 討論

14.4 GitHub Pull requests

14.5 外掛程式

14.6 翻譯

 

15 外掛程式開發

15.1 如何打造一款優秀的Visual Studio Code 外掛程式

15.2 你的第一個Visual Studio Code外掛程式

15.3 Visual Studio Code 外掛程式的擴充能力

15.4 外掛程式開發面面觀

15.5 外掛程式開發的生命週期

序

推薦序

 

Visual Studio Code 已經迎來了5 周年的誕辰！在2015 年4 月29 日的微軟Build 開發者大會上，微軟宣佈推出Visual Studio Code。自從Visual Studio Code 第一個公開預覽版本發佈以來，這個輕量級的編輯器已經吸引了全球數以百萬計的開發者。在很短的時間內，Visual Studio Code 在全世界成了開發者們最喜愛的開發工具。如今，Visual Studio Code 已經有了超過1200 萬的月活使用者，並且保持著持續增長的趨勢。

 

從公司創立之初，微軟就有為開發者服務的基因。微軟創始人比爾· 蓋茲開發的第一款產品，就是執行在Altair 電腦上的BASIC 語言。歷經數十年，微軟一直致力於為廣大開發者與開發團隊打造最優秀和最具生產力的開發工具。微軟的使命和願景是幫助每一個人、每一個組織成就不凡。為了達成這一使命，我們希望幫助全球每一位開發者，用先進的工具與平台幫助創新者去實現他們的創意，改變世界。

 

回想2015 年， 我們非常幸運， 因為有Erich Gamma 來帶領Visual Studio Code 的開發團隊。Erich 是經典書《設計模式：可重複使用物件導向軟體的基礎》的作者之一。在加盟微軟之前，他主管開發了Eclipse 平台上的Java Development Tools（JDT） 專案。有Erich 和微軟Visual Studio 主管層之間的強強聯手，我們的團隊對開發者的需求有了深度的了解。同時，從Visual Studio 和Eclipse 數十年的開發經驗中，我們提煉了許多寶貴的經驗與教訓。

 

打造Visual Studio Code 的開發團隊不僅實力頂尖，還應用了現代化的開發模式。Visual Studio Code 基於開放原始碼且跨平台的理念，按照每月發佈的節奏來快速反覆運算產品開發，並且提供每日發佈的Insider 通道。它擁有上萬個外掛程式，生態極為活躍和豐富。

更重要的是，Visual Studio Code 是我們踐行微軟「顧客至上」文化的最佳榜樣。Erich 極佳地擁護了「開發團隊與使用者零距離」的格言。整個Visual Studio Code 開發團隊持續地與使用者溝通，基於他們的回饋來改進產品，並與社區緊密合作，在GitHub 上建立了月度工作專案。

 

透過韓駿的這本書，我希望讀者能學到更多Visual Studio Code 的使用技巧。我們很樂意看到Visual Studio Code 能繼續成為你工作與生活的一部分，也希望本書能幫助有意願學習程式設計的人成就不凡。

Happy Coding!

—微軟開發平台事業部全球資深副總裁 潘正磊（Julia Liuson）

 

序

 

那些年，我們一起追的Visual Studio Code（VS Code）

2015 年，我25 歲。Visual Studio（VS）是微軟最重要的開發工具。開發者們還在期待Visual Studio 2015 的到來。

那些年，組裡的前端專案用的是AngularJS，組裡購買了WebStorm 的正版軟體授權，大家紛紛表示很好用。

那一年，那些年。

我叫韓駿，大學同學都叫我韓總。我高中念的是北虹進階中學，大學念的是上海交通大學。2013 年，我正式入職微軟上海。故事，由此開始。故事的另一位主角，是現居西雅圖的VS Code 團隊核心成員呂鵬老師。早在2012 年暑期，在微軟實習時，我們就相識了。那時，我們的交集並不多。有幸的是，我們雙雙拿到了微軟正式員工的Offer，便不再糾結於讀研還是工作。2013 年7 月8 日，我和呂老師，還有其他幾位夥伴一起入職了。剛接觸呂老師時，就覺他特別有靈性，常常具有超越常人的想法與見解。入職後，我們驚奇地發現，兩個人的住所相隔如此之近，只有5 分鐘的步行距離。

這，也許是天意。由此，我們開始了長達3 年的微軟10 號交通車之旅。我已經記不清10 號交通車換了多少位交通車司機，但不變的是，每天來回3 小時路上我們都在。無數個3 小時，我們都不會孤獨，一路上，從C#、.NET、AugularJS 再到後來的TypeScript、VS Code，我們無不討論。（嗯，在此，要對10 號交通車上的所有同事說聲抱歉，打擾到你們睡覺啦。）

 

2015 年，我們有一個CMS 系統的專案，而visualstudio.com 的內容也被放在這個系統上管理。某一天，我不經意間在測試網站上發現了一個VS Code 的頁面，描述裡赫然寫著它是一個跨平台的編輯器。當時已經臨近舉辦微軟最重要的開發者大會—Build 大會，我的第一反應就是，這是一個重量級產品！我馬上喊來呂老師一起看。呂老師仔細地看著那個頁面，不等我們交流，從他看網頁的那堅定的眼神中我就能知道，我們想的是一樣的，將會是一個Big News（大新聞）。果不其然，不久後的2015 年4 月29 日，在Build 大會上，

微軟宣佈推出VS Code 的第一個預覽版本，許多開發者為之振奮，也有很多類似「VS 支援跨平台了」的標題黨出現。我當然第一時間下載下來並體驗了一下，第一印象是VS Code 的速度是如此之快，而且對Git 具有很好的支援。

 

從那時起，我的主力編輯器就逐漸轉向了VS Code。

在半年後的2015 年11 月18 日，VS Code 獲得MIT License（MIT 授權）並在GitHub 上開放原始碼，同時宣佈將支援擴充功能。在10 號交通車上，呂老師和我談到了VS Code 的發展前途，並有給VS Code 寫外掛程式的打算。到了2016 年春節後，呂老師在交通車上和我說，他正在寫Ruby 的外掛程式，詳細說了一下VS Code 的外掛程式機制。當時，VS Code 的外掛程式很少，很多語言的外掛程式都是缺失的，為其開發外掛程式可謂是一片真正的藍海。

大概過了一周，呂老師發佈了他的Ruby 外掛程式。我不禁感歎呂老師的效率之高，他可以算是最早一批抓住VS Code 機會的大佬之一。也正是憑藉這個Ruby 外掛程式作為試金石，呂老師在那年成功入職高手雲集的VS Code 團隊，開啟人生贏家之路。其實關於Ruby 外掛程式還有一個小故事，當時除了呂老師，還有一位老外也在寫Ruby 外掛程式。那時，那位老外被一個技術困難卡住了，還沒等他解決那個困難，呂老師就以迅雷不及掩耳之勢發佈了Ruby 外掛程式。後來，呂老師也說服了那位老外一起來寫這個已經發佈的外掛程式，避免重複工作。如果呂老師的Ruby 外掛程式再晚發佈幾天，也許就是另一種結果了。

 

到了2016 年6 月，呂老師已經開始準備去美國了。組裡的另一位大佬同事也發佈了REST Client 外掛程式，廣受好評。那月，Erich Gamma（VS Code 開發團隊的總負責人、《設計模式：可重複使用物件導向軟體的基礎》作者之一、JUnit 建立者之一）來到微軟上海，我也有幸親眼見到了他。我知道，我該行動了。這是一片即將變紅的藍海。以Fail Fast（快速失敗）為指導思想，我在短短一個月的時間裡接連發佈了4 款外掛程式。沒想到，這4 款外掛程式都廣受使用者的喜歡，特別是Code Runner，下載量從1 萬、10萬，一直上升到現在的1000 萬，是我開發的20 多個外掛程式中使用者最喜

歡的外掛程式之一。

 

2016 年下半年，呂老師遠赴美國，而10 號交通車上只剩我「一個人」了。但是，我追逐VS Code 的步伐並沒有停止。正巧，部門那時開始做IoT 的Developer Tooling，我馬上想到要做一個VS Code 的外掛程式。可惜，當時做一個VS Code 的IoT 外掛程式並沒有被列為一個優先專案。但是，感謝微軟的開放態度，我利用自己的個人時間開發了Azure IoT Toolkit，由於反響良好，一年後我把外掛程式貢獻出來，使Azure IoT Toolkit 被升級為微軟的官方外掛程式。

到了2017 年，IoT 外掛程式開發被正式提上議程，組裡成立了專門的團隊來開發Arduino 外掛程式。我雖然沒有實際參與外掛程式的開發，但在整個過程中提出了很多建議，在兩次組內的Bug Bash 中勇奪冠軍。外掛程式發佈後受到了Arduino 社區的很多好評，因此，我們部門也開始了VS Code 外掛程式開發的旅程，自行開發或合作開發的外掛程式超過了20 個，這些外掛程式有關的領域包含IoT、Java、Ansible、Terraform 等。

 

2018 年，我有幸在微軟技術暨生態大會上做了一次演講，主題是「從零開始開發一款屬於你的Visual Studio Code 外掛程式」，把外掛程式開發的經驗帶給更多的開發者朋友。

 

2019 年，我對VS Code 外掛程式開發有了更深入的思考。僅憑我一個人寫外掛程式又能寫多少呢，新的外掛程式還比較好寫，最耗費成本的其實是外掛程式維護，現在的20 個外掛程式維護起來已經很累了，所以授人以魚不如授人以漁，我開通了「玩轉VS Code」微信公眾號及知乎專欄，就是希望把VS Code 的一些經驗分享給更多的人，也希望有更多志同道合的朋友一起來玩轉VS Code。整個2019 年，我也在多場大會（PyCon、JSConf、.NET Conf、Google Developer Group、GitHub 官方見面會、COSCon 等）上進行了公開演講，對VS Code 進行佈道。

 

2019 年11 月30 日，又是一個特別值得紀念的日子！經歷了長時間的籌備，VS Code 中文社區終於成立了！從一個普通的藍領程式設計師到VS Code 外掛程式的「產品設計師」，到VS Code 的佈道師，再到VS Code 中文社區的創始人，我與VS Code 一起成長。

 

不知道這些年來我對VS Code 的追逐到底產生了多大的影響。但是，至少，我看到了一些變化。曾經，人們會把VS Code 當成VS，以為VS 跨平台了。如今，會有95 後的同學反過來把VS 當作VS Code：原來除了VS Code，居然還有個VS ？曾經，面對新的專案，我們會問：為什麼要做一個VS Code 的外掛程式？如今，面對新的專案，我們會問：為什麼不做一個VS Code 的外掛程式？

 

微軟的10 號交通車還在，很多當年一起入職的夥伴卻分散到了不同的地方：上海、蘇州、無錫、西雅圖。我依稀記得，在某個早晨的交通車上，我和呂老師為了一個專案中的技術問題吵到面紅耳赤，而到了中午依舊是80 分遊戲的最佳拍檔；某天下班的路上，我們為了專案中的難以重現的Bug，在交通車上開啟筆記型電腦一起來偵錯；某個晚上，我為了Code Runner 中的Bug 奮戰到淩晨兩點。那時，在交通車上，我們還經常會拿著Surface RT，看Channel 9，看Design Spec，回郵件。微軟的10 號交通車還在，承載著我那時對技術的執著與熱情，繼續行駛在光明的大路上。

 

不忘初心，莫失初衷。不言放棄，追逐所愛。