一、前言

VSCode是微軟家一個(gè)非常輕量化的編輯器，體量雖輕，但是卻有異常強(qiáng)大的功能。原因在于VSCode許多強(qiáng)大功能都是基于插件實(shí)現(xiàn)的，IDE只提供一個(gè)最基本的框架和基本功能，我們需要使用插件來(lái)豐富和擴(kuò)展它的功能。

由于插件的重要作用，現(xiàn)在VSCode的插件社區(qū)規(guī)模已經(jīng)非常可觀我們平時(shí)常用的大部分開發(fā)小工具都可以在這個(gè)應(yīng)用市場(chǎng)中找到。

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

但是我們的需求總是復(fù)雜多變的，總有一些場(chǎng)景是現(xiàn)有的插件無(wú)法滿足，這時(shí)候就需要我們借助VScode的開放接口，手動(dòng)實(shí)現(xiàn)我們需要的功能。

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

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

二、項(xiàng)目初始化

第一步，我們需要安裝VScode官方提供了腳手架yo，用它來(lái)生成項(xiàng)目：

// 安裝腳手架npm install -g yo generator-code

第二步，用以下命令初始化一個(gè)示例工程：

yo code

初始化過(guò)程中需要我們做一些偏好設(shè)置，按照需求選擇即可：

然后我們就可以用VSCode打開上述步驟生成的工程，可以看到目錄結(jié)構(gòu)如下，其中最重要的兩個(gè)文件是package.json和extension.js，了解了這兩個(gè)文件基本上就可以入門開發(fā)一個(gè)VSCode插件了。

三、 package.json 文件

package.json文件是VSCode擴(kuò)展的清單文件，里面包含很多字段。官方文檔對(duì)其中的每個(gè)字段也有專門的說(shuō)明：manifest。

在這里我們只關(guān)注初始化之后生成的文件，這里面主要有以下這么幾個(gè)關(guān)鍵節(jié)點(diǎn)：

1、main：指明了該項(xiàng)目的入口文件，從這里可以看到入口文件是extension.js；

2、contributes: 插件的貢獻(xiàn)點(diǎn)，插件最重要的配置。通過(guò)擴(kuò)展注冊(cè)contributes用來(lái)擴(kuò)展Visual Studio Code中的各項(xiàng)技能，官方文檔指路：contributes。

在這里 commands里面注冊(cè)了一個(gè)名為 sample.helloWorld 的命令，這個(gè)命令實(shí)際上需要在./extension.js中去實(shí)現(xiàn)（這部分劃重點(diǎn)，后面我們會(huì)講到這里）；

3、activationEvents：這個(gè)節(jié)點(diǎn)告知VScode 該插件在何種情況下才會(huì)被激活，官方文檔已經(jīng)指明了激活的時(shí)機(jī)：activationEvents，上方截圖中指明了當(dāng)我們執(zhí)行sample.helloWorld命令時(shí)才被激活，除此之外還有更多的場(chǎng)景：

• onCommand ：在調(diào)用命令時(shí)被激活

• onLanguage： 打開解析為特定語(yǔ)言文件時(shí)被激活，例如"onLanguage:python"

• * ： 只要一啟動(dòng)vscode，插件就會(huì)被激活

• onFileSystem：每當(dāng)讀取來(lái)自特定方案的文件或文件夾時(shí)

• onView： 每當(dāng)在 VS Code 側(cè)欄中展開指定 id 的視圖…

更多其他內(nèi)容大家有興趣自行參考官方文檔。

extension.js 文件

extension.js文件是上述所說(shuō)的package.json中main字段對(duì)應(yīng)的文件（文件名可自定義）。該文件中主要會(huì)導(dǎo)出兩個(gè)方法：activate和deactivate，兩個(gè)方法的執(zhí)行時(shí)機(jī)如下所示：

• activate：插件被激活時(shí)執(zhí)行的方法
• deactivate：插件被銷毀時(shí)調(diào)用的方法

五、調(diào)試和實(shí)戰(zhàn)

介紹完這個(gè)初始化工程的主要文件之后，就可以調(diào)試運(yùn)行了。F5 進(jìn)入調(diào)試模式，會(huì)打開一個(gè)新窗口如下：

這個(gè)窗口標(biāo)明了是 "擴(kuò)展開發(fā)宿主"， Ctrl + Shift +P 輸入我們之前定義的命令，執(zhí)行，右下角彈出文字：

我們生成的demo工程已經(jīng)運(yùn)行成功。接下來(lái)我們對(duì)插件稍作改動(dòng)，使其可以顯示今日日期，并且給它綁定快捷鍵，package.json改動(dòng)如下：

extionsions.js 文件改動(dòng)如下：

運(yùn)行，點(diǎn)擊 ctrl + f9，運(yùn)行正常：

除了配置快捷鍵運(yùn)行命令，也可以配置右鍵菜單，contributes可以配置menu：

運(yùn)行后，分別在編輯器和資源管理器面板右鍵可以看到這條命令：

六、總結(jié)

以上就是一個(gè)簡(jiǎn)單的入門級(jí)實(shí)戰(zhàn)教程，帶大家了解了開發(fā)一個(gè)VSCode插件的基本思路。后續(xù)大家如果遇到更復(fù)雜更定制化的需求，就可以查閱官方文檔深入學(xué)習(xí)。

插件開發(fā)有必要掌握嗎？葡萄覺得如果當(dāng)下沒(méi)有這方面需求，可以不用太深入去了解，但是作為一個(gè)自律的搬磚碼農(nóng)可以先大概了解基本思想。

因?yàn)樵谖覀儗?shí)際工作中，有時(shí)某些復(fù)雜需求往往一個(gè)插件就可以解決很多問(wèn)題，極大提升工作效率。

比如這樣一個(gè)場(chǎng)景，項(xiàng)目里我們使用了ActiveReportsJS這樣的報(bào)表控件，在寫代碼的過(guò)程中有時(shí)候需要修改一些報(bào)表的設(shè)計(jì)。那我們每次使用，要么啟動(dòng)項(xiàng)目打開報(bào)表設(shè)計(jì)器，要么通過(guò)桌面報(bào)表設(shè)計(jì)器打開報(bào)表。

但其實(shí)，通過(guò)VScode插件API提供的CustomEditor接口，我們完全可以針對(duì)特殊的報(bào)表文件實(shí)現(xiàn)高度定制化的私人編輯器，點(diǎn)擊報(bào)表文件，直接使用這個(gè)控件提供的設(shè)計(jì)器預(yù)覽文件，如下圖：

這個(gè)插件的實(shí)現(xiàn)讓我們的工作效率進(jìn)一步得到提升，避免做了很多重復(fù)性的工作。關(guān)于CustomEditor接口，VSCode 也提供了官方的示例 vscode-extension-samples ，大家有興趣的話可以了解下。

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。