一、前言
VSCode是微軟家一個非常輕量化的編輯器，體量雖輕，但是卻有異常強大的功能。原因在於VSCode許多強大功能都是基於外掛實現的，IDE只提供一個最基本的框架和基本功能，我們需要使用外掛來豐富和擴充套件它的功能。
由於外掛的重要作用，現在VSCode的外掛社群規模已經非常可觀我們平時常用的大部分開發小工具都可以在這個應用市場中找到。
開啟VScode後，介面左邊是應用市場的入口， 在這裡可以搜尋我們需要的外掛。
但是我們的需求總是複雜多變的，總有一些場景是現有的外掛無法滿足，這時候就需要我們藉助VScode的開放介面，手動實現我們需要的功能。
本篇主要帶大家從一個簡單外掛開發入手，更多功能更加繁雜的外掛需要根據我們的具體需求再去查閱官方文件。
二、專案初始化
第一步，我們需要安裝VScode官方提供了腳手架yo，用它來生成專案：
// 安裝腳手架
npm install -g yo generator-code
第二步，用以下命令初始化一個示例工程：
yo code
初始化過程中需要我們做一些偏好設定，按照需求選擇即可：
然後我們就可以用VSCode開啟上述步驟生成的工程，可以看到目錄結構如下，其中最重要的兩個檔案是package.json和extension.js，瞭解了這兩個檔案基本上就可以入門開發一個VSCode外掛了。
三、 package.json 檔案
package.json檔案是VSCode擴充套件的清單檔案，裡面包含很多欄位。官方文件對其中的每個欄位也有專門的說明：manifest。
在這裡我們只關注初始化之後生成的檔案，這裡面主要有以下這麼幾個關鍵節點：
1、main：指明瞭該專案的入口檔案，從這裡可以看到入口檔案是extension.js；
2、contributes: 外掛的貢獻點，外掛最重要的配置。通過擴充套件註冊contributes用來擴充套件Visual Studio Code中的各項技能，官方文件指路：contributes。
在這裡 commands裡面註冊了一個名為 sample.helloWorld 的命令，這個命令實際上需要在./extension.js中去實現（這部分劃重點，後面我們會講到這裡）；
3、activationEvents：這個節點告知VScode 該外掛在何種情況下才會被啟用，官方文件已經指明瞭啟用的時機：activationEvents，上方截圖中指明瞭當我們執行sample.helloWorld命令時才被啟用，除此之外還有更多的場景：
- onCommand ：在呼叫命令時被啟用
- onLanguage： 開啟解析為特定語言檔案時被啟用，例如"onLanguage:python"
- * ： 只要一啟動vscode，外掛就會被啟用
- onFileSystem：每當讀取來自特定方案的檔案或資料夾時
- onView： 每當在 VS Code 側欄中展開指定 id 的檢視....
更多其他內容大家有興趣自行參考官方文件。
- extension.js 檔案
extension.js檔案是上述所說的package.json中main欄位對應的檔案（檔名可自定義）。該檔案中主要會匯出兩個方法：activate和deactivate，兩個方法的執行時機如下所示：
- activate：外掛被啟用時執行的方法
- deactivate：外掛被銷燬時呼叫的方法
五、除錯和實戰
介紹完這個初始化工程的主要檔案之後，就可以除錯執行了。F5 進入除錯模式，會開啟一個新視窗如下：
這個視窗標明瞭是 "擴充套件開發宿主"， Ctrl + Shift +P 輸入我們之前定義的命令，執行，右下角彈出文字：
我們生成的demo工程已經執行成功。接下來我們對外掛稍作改動，使其可以顯示今日日期，並且給它繫結快捷鍵，package.json改動如下：
extionsions.js 檔案改動如下：
執行，點選 ctrl + f9，執行正常：
除了配置快捷鍵執行命令，也可以配置右鍵選單，contributes可以配置menu：
執行後，分別在編輯器和資源管理器皮膚右鍵可以看到這條命令：
六、總結
以上就是一個簡單的入門級實戰教程，帶大家瞭解了開發一個VSCode外掛的基本思路。後續大家如果遇到更復雜更定製化的需求，就可以查閱官方文件深入學習。
外掛開發有必要掌握嗎？葡萄覺得如果當下沒有這方面需求，可以不用太深入去了解，但是作為一個自律的搬磚碼農可以先大概瞭解基本思想。
因為在我們實際工作中，有時某些複雜需求往往一個外掛就可以解決很多問題，極大提升工作效率。
比如這樣一個場景，專案裡我們使用了ActiveReportsJS這樣的報表控制元件，在寫程式碼的過程中有時候需要修改一些報表的設計。那我們每次使用，要麼啟動專案開啟報表設計器，要麼通過桌面報表設計器開啟報表。
但其實，通過VScode外掛API提供的CustomEditor介面，我們完全可以針對特殊的報表檔案實現高度定製化的私人編輯器，點選報表檔案，直接使用這個控制元件提供的設計器預覽檔案，如下圖：
這個外掛的實現讓我們的工作效率進一步得到提升，避免做了很多重複性的工作。關於CustomEditor介面，VSCode 也提供了官方的示例 vscode-extension-samples ，大家有興趣的話可以瞭解下。
本篇到這裡就結束了，謝謝大家觀看~~