开发一个自己的VSCode插件

news2024/11/13 9:32:26

1、前言

对于一个前端开发者来说,开发工具,最常用的应该就是VSCode了,因为它免费,速度快,提供了丰富了插件等优点,使得越来越多的前端开发者都来使用它了,在开发的时候如果有丰富的插件提供支持,那么我们写代码的速度会快很多,体验也有很好,有时候我们有一些自己的需求,那么可以自己尝试开发一款自己的插件来提升自己的效率,以下会讲到如何开发自己的一个插件,VSCode官方也提供了很多api,大家有时间可以多去研究一下。

以下是官方文档:Your First Extension | Visual Studio Code Extension API

如果你不知道如何下手,也可以通过微软官方对应的示例代码跑起来,去研究下对应的示例代码,代码示例地址如下所示:

github地址:GitHub - microsoft/vscode-extension-samples: Sample code illustrating the VS Code extension API.

2、快速开始

首先,我们需要提前安装Node和Git的环境,安装完之后,执行以下命令来安装对应的脚手架:

npm install -g yo generator-code

完成上面的安装后,可以通过以下命令生成基本的代码文件:

yo code

运行之后,可以选择对应的扩展类型,进行创建。

在插件的开发过程中,会经常改动文件,可以运行pnpm watch命令,用来监听文件的改动,以及打包运行。

注:所以在调试插件之前,进行启动,否则在调试窗口,自定义的命令会不生效。

3、文件目录

name-transform
├─ 📁.vscode
│  ├─ 📄extensions.json
│  ├─ 📄launch.json
│  ├─ 📄settings.json
│  └─ 📄tasks.json
├─ 📁src
│  ├─ 📁test
│  │  └─ 📄extension.test.ts
│  └─ 📄extension.ts
├─ 📄.eslintrc.json
├─ 📄.gitignore
├─ 📄.vscode-test.mjs
├─ 📄.vscodeignore
├─ 📄CHANGELOG.md
├─ 📄package.json
├─ 📄README.md
├─ 📄tsconfig.json
├─ 📄vsc-extension-quickstart.md
└─ 📄webpack.config.js

4、调试插件

在VSCode工具左侧,运行和调式图标,然后再点击绿色的小三角按钮或者快捷键(F5)就可以运行了。

执行完成之后,会弹出一个新的VSCode窗口,看到扩展开发宿主字样,说明调试窗口就开启成功了。。。

通过快捷键“Ctrl+Shift+P”,然后输入“Hello world”,选中条目,窗口下方会有对应的提示!如下所示:

5、编辑插件

开发插件的文件,位于src\extension.ts,extension.ts是开发的入口文件,如果代码量就直接在这个文件中写,代码量比较大可以在其他文件中写,最后从当前文件中进行引用就行。

6、插件功能实现

在开发过程中,可能有这样的需求,在写代码的时候,需要写命名规范的代码,那么就需要对应自己命名的代码进行转换。

1、定义命令

首先,需要在pageage.json定义,所需要的命令,如下图所示:

然后需要配置,在编辑区域选中,进行转换。配置如下所示:

在这里定义完所有的自定义的命令之后,就需要在入口文件(extension.ts)写每个命令对应的逻辑代码。

2、功能代码

把所有命令名定义成一个常量对象,如下所示:

把所有命令,循环进行注册,如下所示:

然后写选中替换的功能逻辑,如下所示;

最后transformFun函数是具体的替换逻辑,根据不同的命令,返回对应的字符串。

2.1、添加右键菜单

添加右键菜单进行转换,需要在package.json中进行配置。如下所示:

2.2 添加快捷键

添加快捷键功能,也需要在package.json中进行配置,部分示例如下所示:

到这里功能基本上就开发完了哈,完成之后可以看看实际效果是什么样子的。

7、发布插件

首先,我们需要把自己开发好的插件进行打包(.vsix),需要安装vsce,这个包,vsce是“Visual Studio Code Extensions”的缩写,是一个用于打包、发布和管理VS Code扩展的命令行工具。

安装

确保你已经安装Nodejs,然后运行如下命令:

npm install -g @vscode/vsce

使用

然后就可以进行打包和发布了。

$ cd myExtension
$ vsce package
# name-transform-0.0.1 生成了
$ vsce publish
# <publisher id>.name-transform 发布到 VS Code 插件市场了

发布扩展

您可以通过两种方式发布扩展:

  1. 自动使用vsce publish命令:
    vsce publish

    这种方式需要进行登录,必须使用vsce login命令提供您的个人访问令牌

  2. 手动使用vsce package将扩展打包为可安装的VSIX格式,然后将其上传到Visual Studio Marketplace发布者管理页面:

    这种方式需要提前准备以下信息:

    1、要有一个微软的账户
    2、能够访问google的网络,如果没有,在创建发布者的时候,在点击“创建按钮”的时候,页面会没反应。

    在创建发布者页面填写必填项,如下所示:

然后点击“Create”按钮就行,如果网络不行,会提示如下信息,说验证码未定义,这块会涉及谷歌的一个图形验证码。如下图所示:

创建完毕之后,可以点击New extension按钮,弹窗以下弹窗,然后把打包好的.vsix结尾的文件,上传即可。

完成之后,就等待审核就可以了,审核完成之后,就可以在VSCode左侧插件输入框中进行搜索和查看了,如下所示:

好了,这样一个自己开发的插件就大功告成了,以上就是一个插件开发的一个大概流程,具体的一些其他细节可以参考官方或者官方示例,以下是自己代码地址,一些功能或者也可用来参考,代码地址如下所示:

github: https://github.com/hanjiangxueying/name-transform

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

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

相关文章

Spring Cloud微服务项目集成MyBatis

在现代软件开发中&#xff0c;微服务架构已经成为一种流行的解决方案&#xff0c;它能够将应用程序拆分成多个小的、独立的服务。每个服务负责一个特定的业务功能&#xff0c;并可以独立部署和扩展。Spring Cloud是一个提供各种工具和框架以支持微服务开发的开源框架&#xff0…

【工具】Sublime配置Anaconda的Python环境的简单方法

1 背景 Sublime Text对Python特别友好&#xff0c;自带Python编译器。只需CtrlB就能编译并控制台输出&#xff0c;特别适合小脚本的调试。 在安装了Anaconda后&#xff0c;如何使用Sublime Text调用Anaconda的Python以及Anaconda附带的众多实用的库呢&#xff1f; 也很简单。…

一个全新低代码快速开发平台,基于Activiti7和Vue3全开放式流程,简洁且强大(附源码)

前言 在当今数字化时代&#xff0c;企业面临着快速变化的市场环境和日益复杂的业务需求。现有的软件开发模式往往存在开发周期长、成-本高、迭代速度慢等问题&#xff0c;难以满足企业对快速响应市场变化的需求。此外&#xff0c;传统的开发平台往往缺乏灵活性和扩展性&#x…

servlet内存马

参考视频&#xff1a;java内存马专题1-servlet内存马 创建javaweb项目&#xff0c;勾选servlet 我们可以将idea给的注释写法&#xff0c;改到web.xml里面 <?xml version"1.0" encoding"UTF-8"?> <web-app xmlns"http://xmlns.jcp.org/xm…

C++详解->函数模板+类模版

文章目录 前言1、反泛型编程2、函数模板(1)、函数模板概念(2)、函数模板定义格式(3)、函数模板实例化(4)函数模板参数匹配原则 3、类模版(1)类模板实例化(2)类模板实现Stack&#xff08;压/出栈函数&#xff09; 前言 此篇主要描述函数模板的概念、格式以及实例化等&#xff1b…

AppInventor做的APP支持安卓14吗?

目前MIT最新版本也是Android13&#xff0c;我们与mit同步更新。如果官方支持14我们会第一时间跟进。不过&#xff0c;根据用户反馈&#xff0c;蓝牙相关的好像不兼容~ 有关安卓 14 的补充&#xff1a;根据反馈&#xff0c;是支持14的&#xff0c;不过需要手动开启蓝牙权限 …

【HarmonyOS】鸿蒙应用实现截屏

【HarmonyOS】鸿蒙应用实现截屏 组件截屏 通过componentSnapshot的get函数&#xff0c;将需要截图的组件设置id传进去即可。 import { componentSnapshot } from kit.ArkUI; import { image } from kit.ImageKit;/*** 截图*/ Entry Component Preview struct SnapShotPage {S…

16.2 商品秒杀场景处理

16.2 商品秒杀场景处理 1. 秒杀业务流程解析2. 限速手段************************************************************************ 1. 秒杀业务流程解析 VIP秒杀 通过前端验证码限速 2. 限速手段 ********************************************************************…

VMware虚拟机Ubuntu20.04的安装和配置

Ubuntu20.04和VMware安装 Windows系统下Ubuntu20.04镜像源下载&#xff1a;Ubuntu20.04系统下载 VMware下载 百度网盘链接&#xff1a;https://pan.baidu.com/s/1Fp6GYPDFksEGCNZ0JikfAg 提取码: 8jhs 虚拟机配置Ubuntu 打开VMware点击创建新的虚拟机 - > 典型 - …

golang Goroutine协程和Channel管道

同步/并发/并行概念 在计算机科学和软件开发中&#xff0c;同步、并发和并行是三个重要的概念&#xff0c;它们描述了程序执行的不同方式 同步 (Synchronization) 定义&#xff1a;同步指的是一种操作或任务在进行时&#xff0c;调用者需要等待该操作或任务完成才能继续执行…

SD-WAN组网技术的九大应用场景

SD-WAN组网&#xff0c;即软件定义广域网&#xff0c;为企业提供了高效、灵活且安全的网络连接。这种新兴网络技术不仅改变了传统WAN的组网方式&#xff0c;更带来了诸多应用场景和解决方案。接下来&#xff0c;我们将深入探讨SD-WAN的主要应用场景。 1、首先&#xff0c;SD-WA…

[Bugku] MISC-CTF靶场系列系列详解⑤!!!

平台为“山东安信安全技术有限公司”自研CTF/AWD一体化平台&#xff0c;部分赛题采用动态FLAG形式&#xff0c;避免直接抄袭答案。 平台有题库、赛事预告、工具库、Writeup库等模块。 ------------------------------ 社工-进阶收集 开启环境&#xff1a; --------- 下载附件…

医院AR导航系统的实现:科技助力智慧医疗构建

在快节奏的现代医疗环境中&#xff0c;患者与医护人员对高效、便捷的院内导航需求日益增长。随着科技的飞速发展&#xff0c;传统的纸质地图已难以满足复杂多变的医疗空间需求。在此背景下&#xff0c;集成AR&#xff08;增强现实&#xff09;技术的院内导航系统应运而生&#…

3.表的操作

目录 创建表 创建表案例&#xff1a; 查看表结构 修改表 1.增加新列 2.修改列的属性 3.删除列 4.修改表名 5.修改列 删除表 创建表 语法&#xff1a; CREATE TABLE [IF NOT EXISTS] table_name(field1 datatype1 [COMMENT 注释信息],field2 datatype2 [COMMENT 注释…

华清day7 24-8-5

文章目录 使用有名管道实现&#xff0c;一个进程用于给另一个进程发消息&#xff0c;另一个进程收到消息后&#xff0c;展示到终端上&#xff0c;并且将消息保存到文件上一份使用有名管道实现两个进程间相互通信 使用有名管道实现&#xff0c;一个进程用于给另一个进程发消息&a…

WPF学习(1)-Grid控件(网格布局)

Grid控件其实是一个窗体的默认控件&#xff0c;我们创建一个WPF应用程序后&#xff0c;其主窗体里面会有一个Grid控件。 Grid有两个非常关键的属性ColumnDefinitions和RowDefinitions&#xff0c;分别表示列的数量集合和行的数量集合。 ColumnDefinitions集合中的元素类型是…

终于有人把华为认证全部说清楚了

在信息技术领域&#xff0c;华为认证好比一座金字招牌&#xff0c;吸引着无数技术专业人士的青睐。 市场上关于华为认证的声音纷繁复杂&#xff0c;存在不少争议&#xff0c;让人难以辨别真伪。 今天就来好好讲讲华为认证&#xff0c;从头到尾都帮你盘盘清楚。 01 华为认证是…

论文辅导 | 基于二次分解和BO-BiLSTM组合模型采煤工作面瓦斯涌出量预测方法研究

辅导文章 模型描述 结合变分模态分解&#xff08;VMD&#xff09;、自适应噪声完备经验模态分解&#xff08;CEEMDAN&#xff09;、贝叶斯优化算法&#xff08;BO&#xff09;和双向长短期记忆神经网络&#xff08;BiLSTM&#xff09;这4种时间序列处理方法&#xff0c;建立了…

EKMA曲线及大气O3来源解析实践技术

目前&#xff0c;大气臭氧污染成为我国“十四五”期间亟待解决的环境问题。臭氧污染不仅对气候有重要影响&#xff0c;而且对人体健康、植物生长均有严重损害。为了高效、精准地治理区域大气臭氧污染&#xff0c;首先需要了解导致臭氧生成的主要前体物。因此&#xff0c;EKMA曲…

图的DFS

LeetCode2368 受限条件下可到达节点的数目 class Solution { public:int dfs(vector<vector<int>>& g,int x,int fa){int sum1;for(int y:g[x]){if(y!fa) sumdfs(g,y,x);}return sum;}int reachableNodes(int n, vector<vector<int>>& edges, …