一、前言

VSCode是微軟家一個非常輕量化的編輯器，體量雖輕，但是卻有異常強大的功能。原因在于VSCode許多強大功能都是基于插件實現的，IDE只提供一個最基本的框架和基本功能，我們需要使用插件來豐富和擴展它的功能。

由于插件的重要作用，現在VSCode的插件社區規模已經非?？捎^我們平時常用的大部分開發小工具都可以在這個應用市場中找到。

打開VScode后，界面左邊是應用市場的入口， 在這里可以搜索我們需要的插件。

但是我們的需求總是復雜多變的，總有一些場景是現有的插件無法滿足，這時候就需要我們借助VScode的開放接口，手動實現我們需要的功能。

![](https://img-blog.csdnimg.cn/img_convert/c4b6a03567970492ff0f9faf1c08ce7e.png

本篇主要帶大家從一個簡單插件開發入手，更多功能更加繁雜的插件需要根據我們的具體需求再去查閱官方文檔。

二、項目初始化

第一步，我們需要安裝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 ，大家有興趣的話可以了解下。

![](https://img-blog.csdnimg.cn/img_convert/87f2be26ab32f0cd4faa97abc0a0c476.png

本篇到這里就結束了，謝謝大家觀看~~

總結

以上是生活随笔為你收集整理的过来康康，一起来学VScode插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。