VSCODE插件开发API

news/2024/2/29 15:59:32/文章来源:https://blog.csdn.net/baidu_36065997/article/details/135553693

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.luyixian.cn/news_show_925465.aspx

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

相关文章

Android Studio 如何设置中文

Android Studio 是一个为 Adndroid 平台开发程序的集成开发环境(IDE)。 如何安装中文插件 在 Jetbrains 家族的插件市场上,是能够搜到语言包插件的,正常情况下安装之后只需要重启即可享受中文界面,可AndroidStudio 中…

物联网介绍

阅读引言: 本文从多方面叙述物联网的定义以及在物联网当中的各种通信的介绍。 一、物联网的定义 1.1 通用的定义 物联网(Internet of Things,IOT;也称为Web of Things)是指通过各种信息传感设 备,如传感器、…

Vue3-TS中的接口-泛型-自定义类型

1首先一般在src下新建types文件夹&#xff0c;用来存放接口类型 2定义一个接口&#xff0c;用于限制person对象的具体属性 当需要用这个类型形成数组时&#xff0c;有2种写法 export type Persons Array<PersonInter> export type Persons PersonInter[] 3在文件中使…

【目标跟踪】跨相机如何匹配像素

文章目录 前言一、计算思路二、代码三、结果 前言 本本篇博客介绍一种非常简单粗暴的方法&#xff0c;做到跨相机像素匹配。已知各相机内外参&#xff0c;计算共视区域像素投影&#xff08;不需要计算图像特征&#xff09;。废话不多说&#xff0c;直接来&#xff0c;见下图。…

C#--核心

CSharp核心知识点学习 学习内容有&#xff1a; 绪论&#xff1a;面向对象的概念 Lesson1&#xff1a;类和对象 练习&#xff1a; Lesson2&#xff1a;封装--成员变量和访问修饰符 练习: Lesson3:封装--成员方法 Lesson4&#xff1a;封装--构造函数和析构函数 知识点四 垃圾回收…

git主分支合并到本地分支起冲突的解决办法

1.原因&#xff1a;一个项目几个人共同承担&#xff0c;难免有交叉的部分&#xff0c;这个时候交叉部分的提交就会导致冲突 2.方法&#xff1a;点开该类手动进行更改&#xff1a; 一般会有两种情况&#xff1a;一个是更改&#xff0c;一个是冲突(IDEA右上角会显示)&#xff1b;…

meter报OOM错误,如何解决?

根据在之前的压测过程碰到的问题&#xff0c;今天稍微总结总结&#xff0c;以后方便自己查找。 一、单台Mac进行压测时候&#xff0c;压测客户端Jmeter启动超过2000个线程&#xff0c;Jmeter报OOM错误&#xff0c;如何解决&#xff1f; 解答&#xff1a;单台Mac配置内存为8G&…

详解java中ArrayList

目录 前言 一、ArrayList是什么 二、ArrayList使用 1、ArrayList的构造 2 、ArrayList常见操作 3、 ArrayList的遍历 4、 ArrayList的扩容机制 三、来个练习 前言 当你看到这篇文章我觉得很好笑&#xff0c;因为我开始也不懂ArrayList现在轮到你了&#xff0c;嘻嘻嘻&am…

GRE隧道(初级VPN)配置步骤

一、拓朴图&#xff1a; 要求&#xff1a;1、PC1 和 PC2 能访问充当互联网接口地址的ISP环回口地址8.8.8.8 2、PC1 和 PC2 走GRE隧道互通 二、配置步骤&#xff1a; 1、配置IP 2、R1、R2 配置nat&#xff0c;代理内网地址通过G0/0/0口上外网 acl 2000rule permit source a…

Nginx配置负载均衡实例

Nginx配置反向代理实例二 提醒一下&#xff1a;下面实例讲解是在Mac系统演示的&#xff1b; 负载均衡实例实现的效果 浏览器地址栏输入地址http://192.168.0.101/test/a.html&#xff0c;刷新页面进行多次请求&#xff0c;负载均衡效果&#xff0c;平均分配到8080端口服务和8…

iOS解决内存泄漏工具

在iOS应用中&#xff0c;有一些工具和技术可以帮助识别和解决内存泄漏问题。以下是一些常用的工具&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.Instruments&#xff1a; Instruments 是Xcode中…

分布式搜索引擎--认识

elasticsearch的作用 elasticsearch是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;可以帮助我们从海量数据中快速找到需要的内容 。 elasticsearch结合kibana、Logstash、Beats&#xff0c;也就是elastic stack&#xff08;ELK&#xff09;。被广泛…

行为型设计模式——备忘录模式

备忘录模式 备忘录模式提供了一种状态恢复的实现机制&#xff0c;使得用户可以方便地回到一个特定的历史步骤&#xff0c;当新的状态无效或者存在问题时&#xff0c;可以使用暂时存储起来的备忘录将状态复原&#xff0c;很多软件都提供了撤销&#xff08;Undo&#xff09;操作…

使用mamba替换conda和anaconda配置环境安装软件

使用mamba替换miniconda和anaconda&#xff0c;原因是速度更快&#xff0c;无论是创建新环境还是激活环境 conda、mamba、anaconda都是蟒蛇的意思… 下载mambaforge wget https://github.com/conda-forge/miniforge/releases/latest/download/Mambaforge-Linux-x86_64.sh ba…

基于Matlab/Simulink开发自动驾驶的解决方案

文章目录 处理自动驾驶数据 仿真自动驾驶场景 设计感知算法 设计规划和控制算法 生成代码和部署算法 集成和测试 参考文献 使用 MATLAB/Simulink开发自动驾驶&#xff0c;能够深入建模真实世界的行为、减少车辆测试并验证嵌入式软件的功能&#xff0c;从而推进自动驾驶感…

Mybatis 常用条件语句,大于小于、if、for、模糊搜索、case when、choose

大于小于 方法1&#xff1a; > 大于 &#xff0c; < 小于 <if test"startTime ! null ">and a.create_time > #{startTime} </if> <if test"endTime ! null ">and a.create_time < #{endTime} </if> 方法2(建议写这…

java每日一题——ATM系统编写(答案及编程思路)

前言&#xff1a; 基础语句学完&#xff0c;也可以编写一些像样的程序了&#xff0c;现在要做的是多加练习&#xff0c;巩固下知识点&#xff0c;打好基础&#xff0c;daydayup! 题目&#xff1a;模仿银行ATM系统&#xff0c;可以创建用户&#xff0c;存钱&#xff0c;转账&…

一、MySQL 卸载

目录 1、软件的卸载准备 2、软件的卸载 方式一&#xff1a;通过控制面板卸载 方式二&#xff1a;通过mysql8的安装向导卸载 1、双击mysql8的安装向导 2、取消更新 3、选择要卸载的mysql服务器软件的具体版本 4、确认删除数据目录 5、执行删除 6、完成删除 3、清理残…

半小时实现GPT纯血鸿蒙版

仅需半小时&#xff0c;即可实现纯血鸿蒙版本的ChatGPT&#xff01; 废话少说&#xff0c;先看效果图&#xff1a; 如上图所示&#xff0c;这个小Demo实现了AI智能问答。靠右加粗的文本是用户点击底部提交按钮后出现的&#xff1b;后面靠左对齐的普通文本是来自AI的回答内容。当…

鸿蒙(HarmonyOS)应用开发指南

1. 概述 1.1 简介 鸿蒙&#xff08;即 HarmonyOS &#xff0c;开发代号 Ark&#xff0c;正式名称为华为终端鸿蒙智能设备操作系统软件&#xff09;是华为公司自 2012 年以来开发的一款可支持鸿蒙原生应用和兼容 AOSP 应用的分布式操作系统。该系统利用“分布式”技术将手机、电…