过来康康,一起来学VScode插件
一、前言
VSCode是微軟家一個非常輕量化的編輯器,體量雖輕,但是卻有異常強大的功能。原因在于VSCode許多強大功能都是基于插件實現的,IDE只提供一個最基本的框架和基本功能,我們需要使用插件來豐富和擴展它的功能。
由于插件的重要作用,現在VSCode的插件社區規模已經非??捎^我們平時常用的大部分開發小工具都可以在這個應用市場中找到。
打開VScode后,界面左邊是應用市場的入口, 在這里可以搜索我們需要的插件。
但是我們的需求總是復雜多變的,總有一些場景是現有的插件無法滿足,這時候就需要我們借助VScode的開放接口,手動實現我們需要的功能。
;
3、activationEvents:這個節點告知VScode 該插件在何種情況下才會被激活,官方文檔已經指明了激活的時機:activationEvents,上方截圖中指明了當我們執行sample.helloWorld命令時才被激活,除此之外還有更多的場景:
-
onCommand :在調用命令時被激活
-
onLanguage: 打開解析為特定語言文件時被激活,例如"onLanguage:python"
-
* : 只要一啟動vscode,插件就會被激活
-
onFileSystem:每當讀取來自特定方案的文件或文件夾時
-
onView: 每當在 VS Code 側欄中展開指定 id 的視圖…
更多其他內容大家有興趣自行參考官方文檔。
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插件的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 自定义Chrome插件Vimium
- 下一篇: 最大全零子矩阵