VSCODE插件开发API

vscode插件开发功能很强大,但是网上的资料很少,整理下自己使用的插件接口。

安装

npm install -g yo generator-code
yo code

tips:
提示’yo’ 不是内部或外部命令,也不是可运行的程序或批处理文件。
需要新增node的环境变量:C:\Users\用户\AppData\Roaming\npm

成功之后会有模板创建的一系列问题:
? What type of extension do you want to create(您想要创建什么类型的扩展?)?

New Extension (JavaScript) New Extension (TypeScript)
新扩展名(TypeScript) New Extension (JavaScript)
新扩展(JavaScript) New Color Theme
新颜色主题 New Language Support
新语言支持 New Code Snippets
新代码段 New Keymap
新密钥映射 New Extension Pack
新扩展包 New Language Pack (Localization)
新语言包(本地化)

? What’s the name of your extension(你的是项目名什么,在应用市场的名字)? demo

? What’s the identifier of your extension(你的插件名是什么)? demo

? What’s the description of your extension(扩展的描述)

? learn vscode plugin

? Enable JavaScript type checking in ‘jsconfig.json’(在’jsconfig.json’中启用JavaScript类型检查)? Yes

? Initialize a git repository(初始化一个git仓库)? Yes

? bundel the source code with webpack (是否用webpack打包源码)? Yes

? Which package manager to use(使用哪个包管理器)? yarn

调试

在代码区 F5 打开 扩展开发宿主 ,可以在宿主环境里面调试插件效果(涉及到webview, 在宿主环境ctr+shift+P搜索webview,选择打开开发人员工具)

如果代码有更新,在宿主区ctrl+R更新挂载

发布

方法一:直接把文件夹发给别人,让别人找到vscode的插件存放目录并放进去,然后重启vscode,一般不推荐;
方法二:打包成vsix插件,然后发送给别人安装,如果你的插件涉及机密不方便发布到应用市场,可以尝试采用这种方式;
方法三:注册开发者账号,发布到官网应用市场,这个发布和npm一样是不需要审核的。

本地打包 指令

npm i @vscode/vsce -Dvsce package

根据编辑命令会生成 displayName + version + .vsiv 的插件

周期函数

├── CHANGELOG.md 插件变更记录
├── README.md
├── extension.js 插件入口main文件
├── jsconfig.json 编辑器关于js的配置
├── package.json 全局配置
├── test 测试代码文件夹
│ ├── extension.test.js
│ └── index.js
├── vsc-extension-quickstart.md
└── yarn.lock

插件默认入口文件为:extension.js

入口文件主要声明两个周期

  • activate:插件被激活时执行的方法
  • deactivate:插件被销毁时调用的方法

package.json

{// 插件的名字,应全部小写,不能有空格"name": "vscode-plugin-demo",// 插件的友好显示名称,用于显示在应用市场,支持中文"displayName": "VSCode插件demo",// 描述"description": "VSCode插件demo集锦",// 关键字,用于应用市场搜索"keywords": ["vscode", "plugin", "demo"],// 版本号"version": "1.0.0",// 发布者,如果要发布到应用市场的话,这个名字必须与发布者一致"publisher": "sxei",// 表示插件最低支持的vscode版本"engines": {"vscode": "^1.27.0"},// 插件应用市场分类,可选值: [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs]"categories": ["Other"],// 插件图标,至少128x128像素"icon": "images/icon.png",// 扩展的激活事件数组,可以被哪些事件激活扩展,后文有详细介绍"activationEvents": ["onCommand:extension.sayHello"],// 插件的主入口"main": "./src/extension",// 贡献点,整个插件最重要最多的配置项"contributes": {// 插件配置项"configuration": {},// 命令"commands": [{"command": "extension.sayHello","title": "Hello World"}],// 快捷键绑定"keybindings": [{"command": "extension.sayHello","key": "ctrl+f10","mac": "cmd+f10","when": "editorTextFocus"}],// 菜单"menus": {// 编辑器右键菜单"editor/context": [{// 表示只有编辑器具有焦点时才会在菜单中出现"when": "editorFocus","command": "extension.sayHello",// navigation是一个永远置顶的分组,后面的@6是人工进行组内排序"group": "navigation@6"},{"when": "editorFocus","command": "extension.demo.getCurrentFilePath","group": "navigation@5"},{// 只有编辑器具有焦点,并且打开的是JS文件才会出现"when": "editorFocus && resourceLangId == javascript","command": "extension.demo.testMenuShow","group": "z_commands"},{"command": "extension.demo.openWebview","group": "navigation"}],// 编辑器右上角图标,不配置图片就显示文字"editor/title": [{"when": "editorFocus && resourceLangId == javascript","command": "extension.demo.testMenuShow","group": "navigation"}],// 编辑器标题右键菜单"editor/title/context": [{"when": "resourceLangId == javascript","command": "extension.demo.testMenuShow","group": "navigation"}],// 资源管理器右键菜单"explorer/context": [{"command": "extension.demo.getCurrentFilePath","group": "navigation"},{"command": "extension.demo.openWebview","group": "navigation"}]},// 代码片段"snippets": [{"language": "javascript","path": "./snippets/javascript.json"},{"language": "html","path": "./snippets/html.json"}],// 自定义新的activitybar图标,也就是左侧侧边栏大的图标"viewsContainers": {"activitybar": [{"id": "beautifulGirl","title": "美女","icon": "images/beautifulGirl.svg"}]},// 自定义侧边栏内view的实现"views": {// 和 viewsContainers 的id对应"beautifulGirl": [{"id": "beautifulGirl1","name": "国内美女"},{"id": "beautifulGirl2","name": "国外美女"},{"id": "beautifulGirl3","name": "人妖"}]},// 图标主题"iconThemes": [{"id": "testIconTheme","label": "测试图标主题","path": "./theme/icon-theme.json"}]},// 同 npm scripts"scripts": {"postinstall": "node ./node_modules/vscode/bin/install","test": "node ./node_modules/vscode/bin/test"},// 开发依赖"devDependencies": {"typescript": "^2.6.1","vscode": "^1.1.6","eslint": "^4.11.0","@types/node": "^7.0.43","@types/mocha": "^2.2.42"},
}

常用API

  • 指令
    vscode.commands.registerCommand(指令名称, function () {})
    需要在package.json里面注册下

    "activationEvents": ["onCommand: 指令名称"
    ],
    "contributes": {"commands": [{"command": 指令名称,"title": 查找出来的指令名称}],}
    
  • 提示语
    vscode.window.showInformationMessage(提示语);
    -----------------vscode右下角的一些提示弹窗

  • 弹窗选择
    vscode.window.showQuickPick([下拉内容]).then(() => {})
    ctrl+P的效果,会有下拉内容,可以选择
    vscode.window.showInputBox({}).then(()=>{})
    输入框

  • 得到光标选中的词汇

const editor = vscode.window.activeTextEditor;
if(editor===undefined){return;};
const text = editor.document.getText(editor.selection); // 拿到选中的单词
  • 替换光标选中内容
editor.edit((editBuilder) => {const range = new vscode.Range(editor.selection.start, editor.selection.end);editBuilder.replace(range, item.description)
});
  • 鼠标悬停
    注册事件,package.json里面也得写
vscode.languages.registerHoverProvider('需要支持该功能的文件格式,比如javascript', 悬停后执行的方法)
new vscode.Hover(悬停显示的内容);
  • 创建webview
const panel = vscode.window.createWebviewPanel('testWebview', // viewType`appwiki: 视图标题,vscode.ViewColumn.Two, // 显示在编辑器的哪个部位{enableScripts: true, // 启用JS,默认禁用retainContextWhenHidden: true, // webview被隐藏时保持状态,避免被重置});panel.webview.html = 需要展示的html内容;// 因为webviewpanel在js里面不能直接处理,所以需要通知panel处理,通过vscode.postMessage(message)传递消息panel.webview.onDidReceiveMessage(message => {得到消息处理message });

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/619435.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matlab中any()函数用法

一、帮助文档中的介绍 B any(A) 沿着大小不等于 1 的数组 A 的第一维测试所有元素为非零数字还是逻辑值 1 (true)。实际上,any 是逻辑 OR 运算符的原生扩展。 二、解读 分两步走: ①确定维度;②确定运算规则 以下面二维数组为例 >>…

FEB(acwing)

文章目录 FEB题目描述输入格式输出格式数据范围输入样例1:输出样例1:输入样例2:输出样例2:输入样例3:输出样例3:代码题解情况1:xxxxxx:0,1,2,…&a…

Java获取文件的后缀名称

String fileName "example.txt";String fileExtension fileName.substring(fileName.lastIndexOf(".") 1); 使用lastIndexOf()方法,找到文件名中最后一个点的位置, 然后使用substring()方法,获取点后面的字符串作为文…

AI教我学编程之C#变量及实例演示

前言 在AI教我学编程之AI自刀 这篇文章中,我们知道了变量的基础类型,那么变量在C#中有什么作用呢?我们一起来看看吧! 目录 重点先知 变量 变量类型 实例演示 变量声明 实例演示 提出疑问 初始化变量 自动初始化 多变量声明 实…

【深度学习目标检测】十六、基于深度学习的麦穗头系统-含GUI和源码(python,yolov8)

全球麦穗检测是植物表型分析领域的一个挑战,主要目标是检测图像中的小麦麦穗。这种检测在农业领域具有重要意义,可以帮助农民评估作物的健康状况和成熟度。然而,由于小麦麦穗在视觉上具有挑战性,准确检测它们是一项艰巨的任务。 全…

从头开始构建大语言模型(LLM)

了解如何从头开始构建大语言模型,从而创建、训练和调整大语言模型!LLMs 在“从头开始构建大语言模型”中,你将了解如何从内到外LLMs工作。在这本富有洞察力的书中,畅销书作家塞巴斯蒂安拉施卡 (Sebastian Raschka&…

使用emu8086实现——顺序程序设计

一、实验目的 1. 掌握顺序程序设计方法 2. 掌握汇编语言编程设计方法。 二、实验内容 1.用查表的方法将一位十六进制数转换成它相应的ASCII码。 代码及注释: Data segment ;定义数据段Tab db 30h,31h,32h,33h,34h,35,36h,37h,38h,39h ;定义一个Tab的字节型…

js逆向第20例:猿人学第19题乌拉乌拉乌拉

文章目录 一、前言二、定位关键参数1、JA3/TLS指纹怎么查看2、加密值长度对比三、代码实现四、参考文献一、前言 任务十九:抓取这5页的数字,计算加和并提交结果 此题在以前用python写逆向代码是存在缺陷的,直到今年有个大佬开源了curl_cffi库,并且支持 JA3/TLS 和 http2 指…

npmvue详解

1、npm是node.js的一个软件依赖包管理工具 2、当前目录下面一般会有一个package.json文件 3、npm install 会去按照package.json文件中的依赖去下载依赖包 默认会下载到当前目录中的node_modules文件夹下,-g会进行全局安装 4、package.json文件中有两种依赖关系 …

开发日记(数据库类型、数据库时间戳、java exception)

(一)数据库类型 mysql中的datetime可以转为postgres的date (二)数据库时间戳 postgresql使用时间戳获取时分秒时间 1、select current_timestamp 2024-01-12 14:16:31.9333908 2、select current_timestamp(0) //去掉秒后面…

H7303 无电感,线性恒流,低压差,大电流,车灯/台灯 9V 12V 24V 30V

线性恒流芯片是一种用于控制电流的电子元件,通常用于驱动LED等器件。它的工作原理是通过维持输出电流的恒定来保持被驱动器件的亮度或功率稳定。 具体来说,线性恒流芯片会监测输出电流并调整电压以保持恒定的电流流过被驱动器件。以下是其基本工作步骤&…

sklearn快速实现python机器学习算法

sklearn又写作scikit-learn基于python的高效机器学习算法应用,开源机器学习工具包官网,里面有全英的教程和示例工程应用中,自己使用python从头实现一个算法耗时耗力,还难以保证架构清晰、稳定性强基本流程:实例化、fit…

MaxKey 单点登录认证系统——实现登录后自动跳转及分析思路

Maxkey单点登录系统集成业务系统应用之后,登录界面登录之后不会自动跳转业务系统,需要在首页点击相应应用之后,才能实现跳转业务系统,故以下本人提供解决方法和分析思路。 环境配置 本例使用的是CAS协议实现单点登录 Maxkey 服务…

企业如何做到安全又极速的分发传输大文件

在当代企业运营中,文件的传输和分发是至关重要的任务。然而,随着文件体积的增大和信息敏感性的凸显,企业需要找到一种既安全又能够高效传输大文件的方法。本文将深入探讨如何在企业环境中实现安全又高效的大文件传输。 一、分发大文件时需要注…

JavaScript-jQuery2-笔记

1.获取元素文本、属性、内部结构、表单中的值 获取标签中所夹的文本内容:text() 获取标签的属性值:prop(属性名) 获取表单元素的内容:如 文本框中的内容 val() 获取元素的内部html结构:html() 2.筛选选择器 筛选选择器&#xff1…

day-08 构造限制重复的字符串

思路 首先统计每个字符的个数&#xff0c;然后从后向前按照题意添加字符 解题方法 从后向前添加字符&#xff1a;1.当前字符个数<repeatLimit,直接添加 2.当前字符个数>repeatLimit,添加repeatLimit个&#xff0c;然后插入一个下一级字符 时间复杂度:O(n) 空间复杂度:…

在CentOS中,对静态HTTP服务的性能监控

在CentOS中&#xff0c;对静态HTTP服务的性能监控和日志管理是确保系统稳定运行和及时发现潜在问题的关键。以下是对这一主题的详细探讨。 性能监控 使用工具监控&#xff1a;top、htop、vmstat、iostat等工具可以用来监控CPU、内存、磁盘I/O等关键性能指标。这些工具可以实时…

【C++】map和set的模拟实现

map和set的模拟实现 插入模拟实现正向迭代器模拟实现插入完整实现map的[ ]接口模拟实现正向迭代器完整代码反向迭代器模拟实现 喜欢的点赞&#xff0c;收藏&#xff0c;关注一下把&#xff01; 在前面几篇C的博客&#xff0c;讲过了二叉搜索树&#xff0c;AVL树&#xff0c;红黑…

Halcon边缘滤波器edges_image 算子

Halcon边缘滤波器edges_image 算子 基于Sobel滤波器的边缘滤波方法是比较经典的边缘检测方法。除此之外&#xff0c;Halcon也提供了一些新式的边缘滤波器&#xff0c;如edges_image算子。它使用递归实现的滤波器&#xff08;如Deriche、Lanser和Shen&#xff09;检测边缘&…

Android中集成FFmpeg及NDK基础知识

前言 在日常App开发中,难免有些功能是需要借助NDK来完成的,比如现在常见的音视频处理等,今天就以ffmpeg入手,来学习下Android NDK开发的套路. JNI和NDK 很多人并不清除JNI和NDK的概念,经常搞混这两样东西,先来看看它们各自的定义吧. JNI和NDK 很多人并不清除JNI和NDK的概念…