vscode插件开发
作为一个前端开发相信,大家对于vscode非常熟悉。vscode是微软开源的一款基于 Electron 开发的代码编辑器。并且vscode支持通过插件来扩展编辑器的功能,比如Prettier插件帮助我们快速格式化代码,ES7+ React/Redux/React-Native snippets插件帮助我们快速快速编写react代码......这些插件极大地优化了开发体验。那么插件是如何开发的呢?接下来会详细的介绍一下如何开发一个vscode插件。
vscode为插件提供了哪些扩展能力
vscode主要提供了6种开放能力:通用能力、主题、声明类语言特性(我把它称为基础支持)、程序类语言特性(高级支持)、工作区UI扩展、调试。
如何编写一个vscode插件
开发vscode插件需要本地环境安装了node.js和git,然后借助脚手架yomen和generator-code来快速生成项目框架
// 安装yomen generator-code
npm install yo generator-code
// 根据提示选择配置,快速生成项目框架,
yo code
生成的项目目录结构如下:vscode插件的核心实现主要在package.json和extension.js文件中。package.json:插件的声明文件,包含 2 个重要配置项 activationEvents、contributes。
activationEvents主要用于指定插件的触发事件。基于性能的考虑,vscode 插件都是lazy load的,只有激活的时候才启用插件。例子中用到的是onCommand,在 Hello World 命令被调用时,插件才会被激活。
目前支持11种激活事件:
onLanguage:${language} :当打开特定语言时插件被激活
onCommand:${command}:调用某个 VSCode命令时插件被激活
onDebug:Debug 时插件被激活
workspaceContains:${toplevelfilename}:当打开包含某个命名规则的文件夹时插件被激活
onFileSystem:${scheme}:以某个协议(ftp/sftp/ssh等)打开文件或文件夹时插件被激活
onView:${viewId}:指定 id 的视图展开时插件被激活
onUri:插件的系统级URI打开时插件被激活
onWebviewPanel:webview触发时插件被激活
*:VSCode启动时插件被激活。
contributes主要是描述插件的拓展点,定义插件要扩展vscode哪部分功能。常用扩展项有代码片段(snippets)、命令(commands)、菜单(menus)、快捷键(keybindings)、主题(themes)。通常完成命令的开发后,会将其与菜单/快捷键进行关联,以便调用。
extension.js:插件的执行入口文件,通常包括激活(activate)和禁用(deactivate)2 个方法。vscode会在激活插件的时候会执行active钩子,在卸载插件的时候会执行deactivate钩子。
接下来通过开发一个jumpNpm的插件来看一下如何实现一个vscode插件 实现功能:
根据package.json里的npm包名字按commond键+点击跳转到本地node_modules下
鼠标悬浮在npm包名字上的时候,显示当前包的名字、版本、协议信息的提示
{"name": "jumpNpm","displayName": "jumpNpm","description": "","version": "0.0.1","engines": {"vscode": "^1.73.0" // 插件支持的最低vscode版本},"categories": ["Other"],"activationEvents": ["onLanguage:json" // 注册命令事件],"main": "./extension.js","contributes": {},"scripts": {"lint": "eslint .","pretest": "yarn run lint","test": "node ./test/runTest.js"},"devDependencies": {"@types/glob": "^8.0.0","@types/mocha": "^10.0.0","@types/node": "16.x","@types/vscode": "^1.73.0","@vscode/test-electron": "^2.2.0","eslint": "^8.26.0","glob": "^8.0.3","mocha": "^10.1.0","typescript": "^4.8.4"},"dependencies": {}
}
由于用在package.json里的npm包,只用打开json文件的时候激活插件,所以配置了"activationEvents": ["onLanguage:json"]
const vscode = require('vscode');
const path = require('path');
const fs = require('fs');
const utils = require('./utils');function activate(context) {// 注册如何实现跳转到定义,第一个参数表示仅对json文件生效const definitionProvider = vscode.languages.registerDefinitionProvider(['json'], {provideDefinition(document, position, token) {// 当前文件完整路径const filePath = document.fileName;if (!filePath.endsWith("package.json")) return;// 当前文件所在目录const workDir = path.dirname(filePath);// 光标所在单词const pkgName = document.getText(document.getWordRangeAtPosition(position));if (!pkgName) return// 更改 Node.js进程到package.json文件工作目录process.chdir(workDir);const destPath = utils.resolvePath(pkgName);// 判空if (destPath && fs.existsSync(destPath)) {// new vscode.Position(0, 0) 表示跳转到某个文件的第一行第一列return new vscode.Location(vscode.Uri.file(destPath),new vscode.Position(0, 0));}}})const hoverProvider = vscode.languages.registerHoverProvider('json', {provideHover: function (document, position) {const filePath = document.fileName;const workDir = path.dirname(filePath);const word = document.getText(document.getWordRangeAtPosition(position));if (!filePath.endsWith("package.json")) return;const content = require(filePath)if (content?.dependencies[word] || content?.devDependencies[word]) {// 更改 Node.js进程到package.json文件工作目录process.chdir(workDir);const destPath = utils.resolvePath(word);const packageContent = require(destPath);// hover内容支持markdown语法return new vscode.Hover(`* **名称**:${packageContent.name}\n* **版本**:${packageContent.version}\n* **许可协议**:${packageContent.license}`);}}})context.subscriptions.push(definitionProvider, hoverProvider);
}function deactivate() {}module.exports = {activate,deactivate
}
出于安全性考虑,vscode不支持直接操作dom,只能使用vscode封装的api来操作编辑器,也就是头部require的vscode对象。这里是对json文件的内容进行跳转命令,所以使用vscode.languages.registerDefinitionProvider注册一个监听json文件的provider,然后将返回的实例添加至 context.subscriptions 中。当命令被激活时,会执行相应的回调方法。
如何调试vscode
使用Yomen生成的模板自带vs code运行能力,切换到调试面板点击运行就会创建一个新的vscode窗口(Extension Development Host),可以在该窗口进行调试。每次修改了代码通过command+shift+F5
刷新
打包
插件的打包需要借助vsce这个工具打包成vsix文件
// 全局安装vsce
npm install -g vsce
// 打包
vsce package
打包后会生成一个以.vsix结尾的文件vscode插件的安装支持本地安装和插件应用市场两种安装形式。本地安装的话,可以通过以下步骤安装上一步生成的.vsix文件。
发布到应用市场安装的话,就需要在Azure DevOps上注册账号,并创建一个组织来获取PAT(Personak access tokens)。
// 登陆 需要PAT
vsce login <plublisher name>
// 打包
vsce package
// 发布
vsce publish
发布的注意事项:
PAT网站不会存储,需要自行保存
plublisher name需要和pacage.json里的保持一致
参考文章
https://code.visualstudio.com/api/get-started/your-first-extension
https://code.visualstudio.com/docs/extensionAPI/vscode-api
- END -
关于奇舞团
奇舞团是 360 集团最大的大前端团队,代表集团参与 W3C 和 ECMA 会员(TC39)工作。奇舞团非常重视人才培养,有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择,并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。
vscode插件开发相关推荐
- VSCode插件开发全攻略(六)开发调试技巧
更多文章请戳VSCode插件开发全攻略系列目录导航. 前言 在介绍完一些比较简单的内容点之后,我觉得有必要先和大家介绍一些开发中遇到的一些细节问题以及技巧,特别是后面一章节将要介绍WebView的知识 ...
- vs code 插件_[VSCode插件开发] 由浅入深,带你了解如何打造百万级产品
去年,笔者有幸在微软技术暨生态大会上做了个演讲,主题是"从零开始开发一款属于你的 Visual Studio Code 插件". 演讲内容主要覆盖了VS Code插件开发的四个方面 ...
- vscode插件开发实践与demo源码
vscode插件开发实践与demo源码 写在前面 工欲善其事必先利其器.vscode作为优秀的开发工具,给我的日常开发工作提供了极大的便利.其拓展机制更是如此. 但是,最近在做年度专业线任务时,有需要 ...
- VSCode插件开发全攻略
原文:VSCode插件开发全攻略(一)概览 作者:小茗同学 文章索引 VSCode插件开发全攻略(一)概览 VSCode插件开发全攻略(二)HelloWord VSCode插件开发全攻略(三)pack ...
- VSCode插件开发 国际化
内容来源于:vscode 插件开发技巧:国际化 对于一个好的 vscode 插件,若不支持国际化委实可惜,本文介绍一种简单的 i18n 的做法,希望对各位插件开发者有所帮助.这里会从另一个大名鼎鼎的插 ...
- VSCode插件开发 浅谈workspace问题
判断当前是否存在workspace 打开Settings, 有时可以看到这里有一个Workspace, 中文环境下叫做工作区. 什么时候会出现这个Workspace选项呢? 如果现在没有Workspa ...
- vscode 插件开发
vscode 插件开发 文章目录 vscode 插件开发 [demo] menus when语句语法有很多,这里列举几个常用的: 组间排序 几个调试快捷键: 代码为什么没生效 打开文件 这是官网给出的 ...
- VSCode 插件开发实例(WebView):微信读书 ^-^边撸代码边看小说^-^
最终效果 主要代码 package.json {"name": "WeReadForVSCodeJackieZheng","repository&qu ...
- vscode更换主题的插件_vscode插件开发:定制 vscode 主题插件扩展
vscode 自带的几款主题都很漂亮,也支持通过用户配置修改一些常用的配色,但是如果想对很多部分的配色进行修改则没那么容易.我们可以通过基于已有主题定制自己的 vscode 主题扩展来实现该目的. v ...
最新文章
- yolov3 anchor 理解
- 复习Javascript专题(二):闭包,内存,以及垃圾回收机制
- Struts result param详细设置
- [Python图像识别] 四十六.图像预处理之图像去雾详解(ACE算法和暗通道先验去雾算法)
- maven项目打包时生成dependency-reduced-pom.xml
- 从支付宝SDK的支付流程理解什么是公钥和私钥,什么是加密和数字签名
- Node.js的集群功能以及在Express的配置
- Linux基础教程之系统管理篇系统部署
- android开机动画修改实战(bootanimation)
- 《高等代数学》(姚慕生),习题1.3:n阶行列式
- google浏览器安装gliffy 安装方法及插件
- java软件开发工程师的简历
- 使用MATLAB Mapping工具箱创建和编辑地图
- 深入认识敏捷开发和面向对象
- WPF 触发器Triggers
- alter table 使用方法
- java优化for循环
- 如何做好系统测试工作?2020系统测试方案模板范例
- esp8266 OLED SSD1306程序集合
- IE兼容问题(持续补充)