vscode插件开发-脚手架搭建

news2025/1/16 11:00:48

安装插件模版

首先我们需要安装Node.js和Git

然后使用以下命令安装Yeoman和VS代码扩展生成器

pnpm install -g yo generator-code

生成脚手架

确保安装好yo和generator-code后,我们使用以下命令生成脚手架

yo code

然后会询问我们想要创建什么类型的扩展、扩展名等基本信息

// 您想要创建什么类型的扩展
What type of extension do you want to create? (Use arrow 
keys)
  New Extension (TypeScript) // 新扩展(TypeScript)
  New Extension (JavaScript) // 新扩展(JavaScript)
  New Color Theme // 新颜色主题
  New Language Support // 新的语言支持
  New Code Snippets // 新的代码片段
  New Keymap // 新Keymap
  New Extension Pack // 新的扩展包
  New Language Pack (Localization) // 新语言包(本地化)
  New Web Extension (TypeScript) // 新的Web扩展(TypeScript)
  New Notebook Renderer (TypeScript) // 新的笔记本渲染器(TypeScript)
// 您的扩展名是什么?
What's the name of your extension?
// 您的扩展的标识符是什么
What's the identifier of your extension?
// 你的扩展的描述是什么
What's the description of your extension?
// 是否初始化git仓库
Initialize a git repository?
// 用webpack捆绑源代码(选no则用ts 将ts编译为js运行)
Bundle the source code with webpack?
// 要使用哪个包管理器
Which package manager to use? (Use arrow keys)
  npm 
  yarn 
  pnpm 

之后会为我们生成下面这种结构的脚手架,选择不同的扩展类型生成的文件可能不同,我这里选择的是New Extension (TypeScript)(extension为入口文件)

下面是优化后的extension文件中的注释

运行插件

我们可以通过以下命令安装依赖、编译插件

npm install npm run compile

执行后会为我们生成一个编译后的文件out

此时在 Visual Studio Code 中按 F5 键启动调试器,然后按 Ctrl+Shift+P 打开命令面板,输入 "helloWorld" 并运行该命令,就可以实现一个简单的提示插件。

更多可以查看vscode插件开发者官网

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

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

相关文章

系列五十五、新版idea Ctrl + Y无法删除代码行问题

一、新版idea Ctrl Y无法删除代码行问题 1.1、idea版本 1.2、解决 https://blog.csdn.net/qq_46921028/article/details/131374801

AI时代Python金融大数据分析实战:ChatGPT让金融大数据分析插上翅膀【文末送书-38】

文章目录 Python驱动的金融智能:数据分析、交易策略与风险管理Python在金融数据分析中的应用 实战案例:基于ChatGPT的金融事件预测AI时代Python金融大数据分析实战:ChatGPT让金融大数据分析插上翅膀【文末送书-38】 Python驱动的金融智能&…

OpenCASCADE开发指南<四>:OCC 数据类型和句柄

一个软件首先要规定能处理的数据类型, 其次要实现三项最基本的功能——引用管理、内存管理和异常管理。在 OCC 中,这三项功能分别对应基础类中的句柄、内存管理器和异常类。 1 数据类型 在基本概念篇里,已经介绍了 OCC 数据类型的分类&…

(2021 AAAI) Self_MM

《Learning Modality-Specific Representations with Self-Supervised Multi-Task Learning for Multimodal Sentiment Analysis》 Abstract 表征学习是多模态学习中一项重要而富有挑战性的任务。有效的模态表示应该包含两部分特征:一致性和差异性。由于多模态标注的统一性,…

Java集合中经典的 5种设计模式,打死也要记住啊!

集合 一、 迭代器模式(Iterator Pattern)二、 工厂模式(Factory Pattern)三、 装饰器模式(Decorator Pattern)四、 适配器模式(Adapter Pattern)五、 组合模式(Composite Pattern) Java 集合框架中的 List、Set、Map 以及其实现类都使用了多种经典的设计模式 一、 迭代器模式(I…

《汇编语言》- 读书笔记 - 第17章-外传之 DOSBox-X 调用 int 13 读写磁盘

《汇编语言》- 读书笔记 - 第17章-外传之 DOSBox-X 调用 int 13 读写磁盘 总结dosbox-x.conf 不完美读取成功写入成功参考资料 总结 DOSBox 中访问 int 13h 始终没反应。网上查了下有人说是没支持,建议使用 DOSBox-X 经过无数遍尝试后: 环境状态Win11…

云计算 3月13号 (OSI 七层模型:物理层、数据链路层、网络层、传输层、会话层、表示层、应用层)

走进网络 1.认识计算机 1.计算机网络是由计算机和通讯构成的,网络研究的是“通信”。 ------1946 世界上第一台计算机 2.终端:只有输入和输出功能,没有计算和处理功能。 3.数据:一串数字(二进制数)&#…

【el-dialog】解决同一组件使用俩个el-dialog,内容被遮罩层覆盖的问题

如果需要在一个 Dialog 内部嵌套另一个 Dialog或者同一组件有多个Dialog时,需要使用 append-to-body属性 ,只要在第二次弹框上面加上属性

第十四届蓝桥杯省赛真题 Java A 组【原卷】

文章目录 发现宝藏【考生须知】试题 A \mathrm{A} A : 特殊日期试题 B: 与或异或试题 C : \mathrm{C}: C: 平均试题 D: 棋盘试题 E : \mathrm{E}: E: 互质数的个数试题 F: 阶乘的和试题 G: 小蓝的旅行计划试题 H: 太阳试题 I: 高塔试题 J \mathrm{J} J : 反异或 01 串 发现…

MongoDB常见面试题总结(一)MongoDB面试题及答案

1. MongoDB的特点: 你能简要介绍一下MongoDB吗?它与关系型数据库的主要区别是什么? MongoDB是一个开源、面向文档的NoSQL数据库,它采用了BSON(Binary JSON)格式存储数据。以下是MongoDB与关系型数据库的主…

【开发】微服务整合Sentinel

目录 前言 1W:什么是Sentinel? 2W:为什么使用Sentinel? 3W:如何使用Sentinel? 1. 在pom.xml中导入Sentinel依赖坐标 2. 配置控制台 3. 访问API接口的任意端点 流量控制 1. 簇点链路 2. 快速入门…

【HTML】1px边框与1px分割线

对比图 箭头标注的是处理过的 1px分割线 使用transform的scaleY进行缩小 码 <div class"mini-heriz"></div><br><div style"border: solid 1px black; width: 300px;height: 1px;"></div> <style> .mini-heriz {wi…

Java的变量类型详解

目录 局部变量 实例变量 类变量&#xff08;静态变量&#xff09; 参数变量 实例分析 总结 在Java这门静态类型的编程语言中&#xff0c;如何巧妙地使用变量&#xff0c;就像是掌握了一把精准的雕刻刀&#xff0c;能让你在编码的世界里自由地创造。变量在Java中的应用无处…

2024年了,SEO优化是不是已经穷途末路了呢?(川圣SEO)蜘蛛池

baidu搜索&#xff1a;如何联系八爪鱼SEO&#xff1f; baidu搜索&#xff1a;如何联系八爪鱼SEO&#xff1f; baidu搜索&#xff1a;如何联系八爪鱼SEO&#xff1f; 2024年了&#xff0c;SEO优化是不是已经穷途末路了呢&#xff1f;#蜘蛛池SEO SEO优化并没有穷途末路。虽然随…

pcl弧度角度换算:rad2deg,deg2rad

角度弧度换算公式: 代码及结果在:cmath 中cos sin等常用函数的坑(弧度角度换算)-CSDN博客 pcl也有自带的rad2deg,deg2rad: 头文件 #include<pcl/common/angles.h> 代码如下 #include <iostream> #include<pcl/common/angles.h> int main() {vector<…

Linux编程4.3 网络编程-数据封装

1、数据封装 2、Internet协议&#xff08;IP&#xff09; IP的主要目的是为数据输入/输出网络提供基本算法&#xff0c;为高层协议提供无连接的传送服务。这意味着在IP将数据递交给接收站点以前不在传输站点和接收站点之间建立对话&#xff08;虚拟链路&#xff09;。它只是封…

「哈哥赠书活动 - 50期」-『AI赋能写作:AI大模型高效写作一本通』

⭐️ 赠书 - 《AI赋能写作&#xff1a;AI大模型高效写作一本通》 ⭐️ 内容简介 本书以ChatGPT为科技行业带来的颠覆性革新为起点&#xff0c;深入探讨了人工智能大模型如何为我们的创作提供强大支持。本书旨在帮助创作者更好地理解AI的价值&#xff0c;并充分利用其能力提升写…

ubuntu安装开源汇编调试器NASM

安装 安装很简单&#xff0c;直接在终端输入以下命令即可 sudo apt-get install nasm 安装完成后&#xff0c;如果可以查看到nasm的版本号即可视为安装成功 nasm -version 测试 创建汇编文件 创建一个asm文件 vim hello.asm 文件内容如下 section .datahello: db …

《ElementPlus 与 ElementUI 差异集合》el-button 属性 type=“text“ 被删除

差异 element-ui el-button中&#xff0c;属性 type"text" 定义文字按钮&#xff0c;也是链接按钮&#xff1b;element-plus el-button中&#xff0c;改为新增属性 link 并与其它 type 值配合使用&#xff1b; // element-ui <el-button type"text"&g…

网络流量监控软件AnaTraf:优化性能、排除故障的最佳选择

目录 导言 网络流量监控的重要性 AnaTraf网络万用表的功能与优势 网络故障排除与优化网络性能 结论 导言 在当今数字化时代&#xff0c;计算机网络已经成为企业和组织的核心基础设施。然而&#xff0c;网络流量的管理和监控对于确保网络性能的稳定和优化至关重要。本文将介…