VSCode自定义插件创建教程

文章目录

    • 一、前言
    • 二、插件维护
    • 三、调试插件
    • 四、使用 vsce 生成 vsix 插件
    • 五、问题:打开调试窗口后,输入helloworld并没有指令提示
    • 六、插件创建实战
    • 七、拓展阅读

一、前言

对于前端程序猿来讲,最常用的开发利器中VSCode首当其冲,因为VSCode免费,速度快,且提供了丰富插件。结合实际项目开发需求,有时候需要借助定制化插件以提升开发效率,此篇博文主要讲解如何创建自定义VSCode插件。

在这里插入图片描述

安装脚手架

npm install -g yo generator-code

在这里插入图片描述

初始化插件目录
终端运行 yo code,按照提示生成目录即可。

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

在这里插入图片描述
注⚠️:在调试插件之前,进行启动,否则在调试窗口,自定义的命令会不生效。

二、插件维护

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

在这里插入图片描述

三、调试插件

在VSCode工具左侧,运行和调式图标,然后再点击绿色的小三角按钮或者快捷键(F5)就可以运行了。
在这里插入图片描述
执行完成之后,会弹出一个新的VSCode窗口,看到扩展开发宿主字样,说明调试窗口就开启成功了。

在这里插入图片描述
通过快捷键“Ctrl+Shift+P”,然后输入相应指令,例如:“Hello world”,选中条目,窗口下方会有对应的提示!如下图所示:

在这里插入图片描述

四、使用 vsce 生成 vsix 插件

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

这种方式可以实现即使没有发布到应用市场,也可以直接通过对应文件安装的方式进行插件安装和使用。步骤如下:

  1. 安装 vsce 工具
    安装命令 npm i vsce -g

  2. 打包生成 .vsix 文件
    直接使用 vsce package 命令进行打包,完成后就会生成一个 .vsix 文件,这个也就是在后续安装插件时要使用的文件。

【注意⚠️】 在使用这个命令打包时,可能会出现 vsce 所需要支持的 VSCode 最低版本和当前使用版本之间存在出入,导致打包失败。需要将 VSCode 版本进行升级,而不是手动修改版本号。

在这里插入图片描述

  1. 安装 vsix 插件
    按照如下方式操作并选择对应的 .vsix 文件即可。

在这里插入图片描述

五、问题:打开调试窗口后,输入helloworld并没有指令提示

在这里插入图片描述

原因:当前电脑安装的VSCode版本过低,不支持当前插件的使用(因为自动生成的插件总是默认使用最新版VSCode),所以需要将插件使用的VSCode版本降低。

package.json中的engines.vscode版本不能高于本电脑安装的VSCode版本。

六、插件创建实战

在开发过程中,存在以下需求:在编写代码过程中,需要遵守命名规范,那么就需要对存量代码进行转换。实现步骤如下:

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

在这里插入图片描述
然后需要配置,在编辑区域选中,进行转换。配置如下所示:

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

为便于注册指令,把所有命令名定义成一个常量对象,如下所示:
在这里插入图片描述
把所有命令,循环进行注册,如下所示:

在这里插入图片描述
然后写选中替换的具体实现功能逻辑,如下所示;

在这里插入图片描述
最后transformFun函数是具体的替换逻辑,根据不同的命令,返回对应的字符串。

在这里插入图片描述

添加右键菜单进行转换,需要在package.json中进行配置。如下所示:
在这里插入图片描述
添加快捷键功能,也需要在package.json中进行配置,部分示例如下所示:

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

七、拓展阅读

  • 《VSCode官方文档》

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

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

相关文章

vue功能基础元素使用

4.:inline"true"元素,能够左右元素保持在同一行 这个好处非常直观,但要注意和el-col同时使用时,就会出现el-input换行,即便调整好,放大缩小也会出现换行问题。 5.filterable 下拉框带搜索功能 6.clearable下…

Mybatis框架之责任链模式 (Chain of Responsibility Pattern)

在 MyBatis 框架中,责任链模式 (Chain of Responsibility Pattern) 被广泛应用于多个功能模块中,例如 插件拦截器、SQL 执行流程中的拦截器链、动态 SQL 的解析与处理等。这种设计模式为 MyBatis 提供了高度的扩展性和灵活性,使其能够轻松应对…

uniapp 购物弹窗组件 (微信小程序)

效果图&#xff0c;暂时只适应单规格&#xff0c;居中弹出和下方弹出&#xff0c;如需求不满足&#xff0c;请自行修改代码 &#xff08;更新于24/11/15) 居中显示效果 下方弹出效果 html <template><view class"" v-if"show":class"mod…

《C++ 中 std::random 库:生成高质量随机数的秘籍》

在 C 编程的世界里&#xff0c;随机数的生成是一个广泛应用且至关重要的领域。无论是游戏开发中的随机事件模拟、密码学中的密钥生成&#xff0c;还是统计分析中的数据抽样&#xff0c;高质量的随机数都是不可或缺的。今天&#xff0c;我们就来深入探讨一下 C 中的 std::random…

单片机学习笔记 5. 数码管静态显示

更多单片机学习笔记&#xff1a;单片机学习笔记 1. 点亮一个LED灯单片机学习笔记 2. LED灯闪烁单片机学习笔记 3. LED灯流水灯单片机学习笔记 4. 蜂鸣器滴~滴~滴~ 目录 0、实现的功能 1、Keil工程 1-1 数码管显示原理 1-2 静态与动态显示 1-3 74HC573锁存器的工作原理 1-…

React 远程仓库拉取项目部署,无法部署问题

项目场景&#xff1a; 提示&#xff1a;相关背景&#xff1a; React 远程仓库拉取项目部署&#xff0c;二次开发 问题描述 提示&#xff1a;项目中遇到的问题&#xff1a; React 远程仓库拉取项目部署&#xff0c;正确安装依赖后&#xff08;开发混乱&#xff0c;造成packg…

2024.11.19总结

自从跟HR聊了最近的工作生活并提了一些诉求后&#xff0c;HR也确实帮我解决了诉求&#xff0c;但这个结果对我来说是好是坏&#xff0c;我也说不清了。 在之前的产品线&#xff0c;做的是安全专项的owner,虽然活确实多&#xff0c;但确实能学到东西&#xff0c;能带来很大的成…

内容占位符:Kinetic Loader HTML+CSS 使用CSS制作三角形原理

内容占位符 前言 随着我们对HTML和CSS3的学习逐渐深入&#xff0c;相信大家都已经掌握了网页制作的基础知识&#xff0c;包括如何使用HTML标记构建网页结构&#xff0c;以及如何运用CSS样式美化页面。为了进一步巩固和熟练这些技能&#xff0c;今天我们一起来完成一个有趣且实…

【LC】209. 长度最小的子数组

题目描述&#xff1a; 给定一个含有 n 个正整数的数组和一个正整数 target 。找出该数组中满足其总和大于等于 target 的长度最小的 子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 示例 1&#x…

时间和空间复杂程度计算规则

时间复杂度和空间复杂度的计算是算法分析的重要部分。以下是详细的计算方法、示例&#xff0c;以及需要注意的要点。 1. 时间复杂度 时间复杂度描述算法执行所需时间随输入规模增长的增长关系&#xff0c;通常用 大 O O O 表示法 来表示&#xff0c;关注输入规模 n n n 的增…

【YOLOv8】安卓端部署-1-项目介绍

【YOLOv8】安卓端部署-1-项目介绍 1 什么是YOLOv81.1 YOLOv8 的主要特性1.2 YOLOv8分割模型1.2.1 YOLACT实例分割算法之计算掩码1.2.1.1 YOLACT 的掩码原型与最终的掩码的关系1.2.1.2 插值时的目标检测中提取的物体特征1.2.1.3 coefficients&#xff08;系数&#xff09;作用1.…

Hadoop 学习心得

一、引言 &#xff08;一&#xff09;学习 Hadoop 的背景和目的 随着信息技术的飞速发展&#xff0c;数据量呈爆炸式增长&#xff0c;传统的数据处理方式已难以满足需求。在这样的背景下&#xff0c;为了能够在大数据领域有所发展&#xff0c;我开始学习 Hadoop。Hadoop 作为处…

【全面解读】Apache SeaTunnel常见问题全攻略

使用SeaTunnel需要安装Spark或者Flink这样的引擎么&#xff1f; 不需要&#xff0c;SeaTunnel 支持 Zeta、Spark 和 Flink 作为同步引擎的选择&#xff0c;您可以选择之一就行&#xff0c;社区尤其推荐使用 Zeta 这种专为同步场景打造的新一代超高性能同步引擎。Zeta 被社区用…

【build.gradle里的仓库】buildScript、allprojects、根级别中的repositories属性有何区别

build.gradle文件中的buildScript、allprojects、根级别下的repositories属性有何区别&#xff1a; buildScript中的repositories属性&#xff1a; buildscript { repositories {...}dependencies {...} }allprojects中的repositories属性&#xff1a; allprojects { reposi…

Elasticsearch搜索流程及原理详解

Elasticsearch搜索流程及原理详解 1. Elasticsearch概述1.1 简介1.2 核心特性1.3 应用场景2. Elasticsearch搜索流程2.1 搜索请求的发起2.2 查询的执行2.3 结果的聚合与返回3. Elasticsearch原理详解3.1 倒排索引3.2 分布式架构3.3 写入流程3.4 读取流程4. 技术细节与操作流程4…

刘艳兵-DBA046-ASSM表空间的全表扫描范围由哪些因素综合确定?

ASSM表空间的全表扫描范围由哪些因素综合确定&#xff1f; A L1/L2/L3位图块 B 段头块Auxillary Map C 段头块Extent Map D 段头块Highwater 答&#xff1a; B 段头块Auxillary Map C 段头块Extent Map D 段头块Highwater 在 Oracle 数据库中&#xff0c…

ubuntu连接orangepi-zero-2w桌面的几种方法

ubuntu连接orangepi-zero-2w桌面的几种方法 一 &#xff1a; 串口 wifi Nomachine 1 开发板通过串口连接wifi 扫描wifi nmcli dev wifi连接wifi sudo nmcli dev wifi connect wifi_name password wifi_passwd查看开发板IP ifconfig # 假设开发板IP是 192.168.2.32 使用…

STM32完全学习——系统时钟设置

一、时钟框图的解读 首先我们知道STM32在上电初始化之后使用的是内部的HSI未经过分频直接通过SW供给给系统时钟&#xff0c;由于内部HSI存在较大的误差&#xff0c;因此我们在系统完成上电初始化&#xff0c;之后需要将STM32的时钟切换到外部HSE作为系统时钟&#xff0c;那么我…

分布式系统稳定性建设-性能优化篇

分布式系统稳定性建设-性能优化篇 系统稳定性建设是系统工程的核心内容之一。以下是一些重要的方面: 架构设计: 采用模块化、松耦合的架构设计,以提高系统的可扩展性和可维护性。合理划分系统功能模块,降低单个模块的复杂度。定义清晰的接口和数据交换标准,确保各模块之间协调…

生成式语言模型 三范式 预训练、微调、强化反馈学习

ChatGPT 是一种典型的大语言模型&#xff0c;其训练过程可以分为预训练、微调和**强化学习&#xff08;RLHF&#xff09;**这三个主要阶段。以下是对这些阶段的详细讲解&#xff1a; 1. 预训练&#xff08;Pretraining&#xff09; 目标&#xff1a;让模型掌握基本的语言理解与…