建站
咨詢
售后
建站咨詢
新聞中心
一、vscode插件是什么?
大家對vscode肯定都不陌生，其是微軟推出的一款輕量級代碼編輯器，在使用的時候總會時不時的安裝一些插件去協助我們進行開發(fā)，這些插件就是利用vscode給我們開放的一些API的基礎上進行擴展功能的開發(fā)，從而解決開發(fā)中的一些問題，提高生產效率。這種插件化思想一方面使該代碼編輯器更輕量化;另一方面能夠充分利用社區(qū)的力量，為其提供更加多元化的插件。(下圖是我做的一個小插件的效果圖)
創(chuàng)新互聯公司為您提適合企業(yè)的網站設計?讓您的網站在搜索引擎具有高度排名，讓您的網站具備超強的網絡競爭力！結合企業(yè)自身，進行網站設計及把握，最后結合企業(yè)文化和具體宗旨等，才能創(chuàng)作出一份性化解決方案。從網站策劃到做網站、網站制作， 我們的網頁設計師為您提供的解決方案。
二、vscode插件能做什么?
vscode插件能做什么?其核心點在于vscode為其提供了哪些開放能力，只有其開放的能力才能為我們所用，就官網來看，利用vscode插件能夠做以下事情(該部分來自于vscode官網擴展能力概述部分)：
通用功能
可以在任何擴展中使用的核心功能，主要包括以下幾點：
(1)能夠添加命令、配置項、快捷鍵、菜單項、右鍵菜單;
(2)存儲工作區(qū)或全局數據;
(3)展示通知信息;
(4)使用快速選擇收集用戶的輸入;
(5)打開文件選擇器讓用戶去選擇文件或文件夾;
(6)使用Progress API去闡述長時間運行的操作;
主題化
控制vscode的外觀，包括編輯器中源代碼的顏色和vscode ui的顏色，其主要包含三種類型的主題：
(1)顏色主題：其允許將顏色應用于VS Code UI組件和編輯器中的文本;
(2)文件圖標主題：文件圖標顯示在VS Code UI中的位置，例如文件資源管理器、快速打開列表和編輯器選項卡;
(3)產品圖標主題：在整個UI中使用的一組圖標
聲明性語言特性
聲明性語言功能為編程語言添加了基本的文本編輯支持，例如括號匹配、自動縮進和語法突出顯示。
程序語言特性
編程語言功能添加了豐富的編程語言支持，例如懸停、轉到定義、診斷錯誤、IntelliSense 和 CodeLens。
擴展工作臺
工作臺是指包含標題欄、活動欄、側邊欄、控制板、編輯組、狀態(tài)欄等UI組件的整體Visual Studio Code UI。VS Code提供了各種API，允許將自己的組件添加到工作臺。
調試
可以通過編寫將 VS Code 的調試 UI 連接到特定調試器或運行時的調試器擴展來利用 VS Code 的調試功能。
三、vscode插件實戰(zhàn)
vscode插件其實是vscode對外提供了一些能力，如果不是特別需要其實沒有必要完整的學習整體內容，僅僅需要了解其大體開發(fā)思路、能夠解決的問題，之所以這么說是因為(以上純個人觀點，不一定正確)學習該部分的內容需要一定精力，但學后并不一定能夠在自己項目中得到使用，深入學習投入于產出并不成正比，所以本次我只會講述入門級內容，具體的內容扔需要讀者在需要這一部分能力的時候再深入研究。
3.1 項目初始化
官方為了方便開發(fā)人員進行vscode插件的開發(fā)，提供了對yo應的腳手架來生成對應的項目。
- // 安裝需要的包
- npm install -g yo generator-code
- // 運行
- yo code
上述命令其實安裝了兩個包(yo和generator-code)，這兩個包用途如下：
yo模塊全局安裝后就安裝了Yeoman，Yeoman是通用型項目腳手架工具，可以根據一套模板，生成一個對應的項目結構
generator-code模塊是VS Code擴展生成器，與yo配合使用才能構建項目。
3.2 重要文件
在項目生成之后，目錄結構如下所示，其中最重要的文件是package.json和extension.js，了解這兩個文件基本上就可以入門開發(fā)一個vscode插件了。
3.2.1 package.json
該文件是vscode擴展的清單文件，里面有很多字段，官方對每個字段都進行了詳細闡述，本次我們重點闡述以下初始化后期清單文件。
- {
- "name": "demo", // 插件名
- "displayName": "插件", // 顯示在應用市場的名字
- "description": "我的第一個插件測試", // 具體描述
- "version": "0.0.1", // 插件的版本號
- "engines": {
- "vscode": "^1.60.0" // 最低支持的vscode版本
- },
- "categories": [
- "Other" // 擴展類別
- ],
- // 激活事件組，在那些事件情況下被激活
- "activationEvents": [
- "onCommand:demo.helloWorld"
- ],
- // 插件的主入口文件
- "main": "./extension.js",
- // 貢獻點
- "contributes": {
- // 命令
- "commands": [
- {
- "command": "demo.helloWorld",
- "title": "Hello World"
- }
- ]
- },
- "scripts": {
- "lint": "eslint .",
- "pretest": "npm run lint",
- "test": "node ./test/runTest.js"
- },
- // 開發(fā)依賴項
- "devDependencies": {
- "@types/vscode": "^1.60.0",
- "@types/glob": "^7.1.3",
- "@types/mocha": "^8.2.2",
- "@types/node": "14.x",
- "eslint": "^7.27.0",
- "glob": "^7.1.7",
- "mocha": "^8.4.0",
- "typescript": "^4.3.2",
- "vscode-test": "^1.5.2"
- }
- }
在這份清單文件中，重點關注的主要有三部分內容：activationEvents、main以及contributes，其是整個文件中的重中之重。
main
指明了該插件的主入口在哪，只有找到主入口整個項目才能正常的運轉、
activationEvents
指明該插件在何種情況下才會被激活，因為只有激活后插件才能被正常使用，官網已經指明了激活的時機，這樣我們就可以按需設置對應時機。(具體每個時機用的時候詳細查看即可)
- onLanguage 打開解析為特定語言文件時被激活，例如"onLanguage:python"
- onCommand 在調用命令時被激活
- onDebug 在啟動調試話之前被激活
- onDebugInitialConfigurations
- onDebugResolve
- workspaceContains 每當打開文件夾并且該文件夾包含至少一個與 glob 模式匹配的文件時
- onFileSystem 每當讀取來自特定方案的文件或文件夾時
- onView 每當在 VS Code 側欄中展開指定 id 的視圖
- onUri 每當打開該擴展的系統范圍的 Uri 時
- onWebviewPanel
- onCustomEditor
- onAuthenticationRequest
- * 只要一啟動vscode，插件就會被激活
- onStartupFinished
contributes
通過擴展注冊contributes用來擴展Visual Studio Code中的各項技能，其有多個配置，如下所示：
- breakpoints 斷點
- colors 主題顏色
- commands 命令
- configuration 配置
- configurationDefaults 默認的特定于語言的編輯器配置
- customEditors 自定義編輯器
- debuggers
- grammars
- iconThemes
- jsonValidation
- keybindings 快捷鍵綁定
- languages
- menus
- problemMatchers
- problemPatterns
- productIconThemes
- resourceLabelFormatters
- snippets 特定語言的片段
- submenus
- taskDefinitions
- themes 顏色主題
- typescriptServerPlugins
- views
- viewsContainers
- viewsWelcome
- walkthroughs
3.2.2 extension.js文件
該文件時其入口文件，即package.json中main字段對應的文件(不一定叫extension.js這個名字)，該文件中將導出兩個方法：activate和deactivate，兩個方法的執(zhí)行時機如下所示：
activate
這是插件被激活時執(zhí)行的函數
deactivate
這是插件被銷毀時調用的方法，比如釋放內存等。
3.3 實戰(zhàn)
上述已經對vscode插件有了基礎的認識，下面就進行一個簡單的實戰(zhàn)，打造屬于自己的一個vscode插件，此插件的功能如下：
通過在文件編輯區(qū)域或文件名上右擊彈出按鈕，點擊按鈕獲取文件的大小、創(chuàng)建時間和修改時間;
如果獲取的是文件夾，則指明該文件是文件夾，不是文件，給予提示。
3.3.1 package.json修改項
- {
- // ……
- // 在getFileState指令下激活
- "activationEvents": [
- "onCommand:getFileState"
- ],
- // 入口文件
- "main": "./extension.js",
- "contributes": {
- // 命令
- "commands": [
- {
- "command": "getFileState",
- "title": "File State"
- }
- ],
- // 菜單項
- "menus": {
- // 編輯上下文菜單
- "editor/context": [
- {
- "when": "editorFocus",
- "command": "getFileState",
- "group": "navigation"
- }
- ],
- // 資源管理器上下文菜單
- "explorer/context": [
- {
- "command": "getFileState",
- "group": "navigation"
- }
- ]
- }
- },
- // ……
- }
3.3.2 主函數內容
- const vscode = require('vscode');
- const fs = require('fs');
- function activate(context) {
- console.log('插件已經被激活');
- // 注冊命令
- let commandOfGetFileState = vscode.commands.registerCommand('getFileState', uri => {
- // 文件路徑
- const filePath = uri.path.substring(1);
- fs.stat(filePath, (err, stats) => {
- if (err) {
- vscode.window.showErrorMessage(`獲取文件時遇到錯誤了${err}!!!`)
- }
- if (stats.isDirectory()) {
- vscode.window.showWarningMessage(`檢測的是文件夾，不是文件，請重新選擇?。?！`);
- }
- if (stats.isFile()) {
- const size = stats.size;
- const createTime = stats.birthtime.toLocaleString();
- const modifyTime = stats.mtime.toLocaleString();
- vscode.window.showInformationMessage(`
- 文件大小為:${size}字節(jié);
- 文件創(chuàng)建時間為:${createTime};
- 文件修改時間為:${modifyTime}
- `, { modal: true });
- }
- });
- const stats = fs.statSync(filePath);
- console.log('stats', stats);
- console.log('isFile', stats.isFile());
- });
- // 將命令放入其上下文對象中，使其生效
- context.subscriptions.push(commandOfGetFileState);
- }
- function deactivate() {}
- module.exports = {
- activate,
- deactivate
- }
3.3.3 效果圖
經過開發(fā)后，該插件調試效果如下所示：
3. 4 發(fā)布
插件看法完畢之后就是需要分享出去供大家使用，目前有三種方式：
直接把文件夾發(fā)給別人，讓別人找到vscode的插件存放目錄并放進去，然后重啟vscode，一般不推薦;
打包成vsix插件，然后發(fā)送給別人安裝，如果你的插件涉及機密不方便發(fā)布到應用市場，可以嘗試采用這種方式;
注冊開發(fā)者賬號，發(fā)布到官網應用市場，這個發(fā)布和npm一樣是不需要審核的。
每一種方式都可行，并且網上也有很多教程講述其發(fā)布方式，今天我重點講述一下第二種，畢竟在插件這么多的情況下，很多人更樂于開發(fā)一款屬于自己的專用插件或者特定自己領域使用的插件，完全沒必要發(fā)布到應用市場。
安裝對應的模塊vsce
- npm i vsce -g
利用vsce進行打包，生成對應的vsix文件
- vsce package
安裝到vscode
安裝完成之后就可以正常的進行使用了
四、總結
因為工作中目前還沒有遇到這種需求，此次我只是對vscode插件的開發(fā)流程進行了一個簡單的概述，并沒有進一步深入探索，待工作中有這樣的場景需要這樣的能力去解決某些問題時，能夠快速反應有這樣的解決方案，再進一步學習也為時不晚，也希望愛學習的小伙伴們也對這一部分能夠有一定了解，彌補自己知識上欠缺的一環(huán)，后續(xù)為己所用。
五、參考文獻
vscode插件編寫實戰(zhàn)
vscode插件開發(fā)全攻略
本文轉載自微信公眾號「前端點線面」，可以通過以下二維碼關注。轉載本文請聯系前端點線面公眾號。
新聞名稱：從0到1開發(fā)一款自己的Vscode插件
網站路徑：http://m.5511xx.com/article/dhicdhc.html
