vscode自定义插件的开发过程记录

前言
本文是关于visual studio code软件上自定义插件的开发记录,将从头记录本人开发的过程,虽然网上也有很多文章,但个人在实践的过程还是会遇到不一样的问题,所以记录下来,以便于后期参考。

前期准备:
1、node.js
2、visual studio code

环境配置:
平台:windows
工具:visual studio code
库:node.js

第一步

node.js可以从官网下载安装,然后在windows系统的命令提示符或者Powershell终端中查看。
在这里插入图片描述
如果可以看到版本号表示安装正常,就可以进行下一步操作了,如果显示错误,或者显示npm和nodejs的版本不匹配,可以去官网下载最新的nodejs,然后安装升级即可。

注:
我看网上有说windows平台下可以直接通过:

npm install -g n

这条指令来升级的,但我实际测试发现不行,会报错:
在这里插入图片描述
我没有找到解决办法,就采用了最直接的方法,直接从nodejs官网下载最新安装包,然后安装更新即可。

第二步

前提条件满足后,接下来进行第二步,安装所谓的脚手架程序:
1、yeoman
这是脚手架,虽然我不太明白它究竟是干什么的,但按照网上说的安装就好了。
官网:https://yeoman.io/
2、generator-code
这是vscode的扩展代码生成器,配合上面的脚手架yo(yeoman简称)使用。

这两个包可以一起安装,如下:

npm install -g yo generator-code

等待自动安装完成即可。
在这里插入图片描述

第三步

到这一步,准备工作都做好了,接下来开始生成插件。但首先,你需要先建立一个存储插件代码的文件夹路径,你可以在电脑硬盘新建一个空文件,比如:

E:\100vscodeplugins

然后可以直接在文件夹下运行windows的cmd命令提示符,如果不知道怎么操作看下面步骤,知道的跳过即可。
文件夹下运行cmd:
在这里插入图片描述
像图片所示,选择你的文件夹路径,输入cmd然后enter键确认,cmd会自动运行,并且路径是你的当前文件夹路径:
在这里插入图片描述
如上图所示,在你的文件夹路径下,直接输入:

yo code

指令,输入后,会出现下面这样的内容:
在这里插入图片描述
如上图,注意我用红色框圈起来的内容,这是建立的步骤,是自动的,你需要做的是,每一步做出选择。
上图就是建立扩展程序的第一步,你可以使用上下键来选择,使用enter键来确认,比如此处选择默认的第一项,然后确认,进入第二项。
第二项是需要你输入扩展名,你可以随便输入一个自己的扩展名,然后enter进入下一步。
一共是7项内容,全部回答完如下:
在这里插入图片描述
注意上图每个问题后面的文字,是你回答后,程序记录下来的,有些是你输入的,比如名称、信息等,有些是选择的,比如Yes、No等。
当你全部填写完成后,程序会自动创建扩展,会生成很多文件:
在这里插入图片描述
对应本地文件夹:
在这里插入图片描述
这些都是自动生成的。
生成完成后,程序会提示你,是否直接在vscode工具中打开,如果你选择是,那么vscode会被打开,并添加你的文件夹。
在这里插入图片描述
你也可以选择否,然后自己手动再vscode中打开你自建的扩展文件夹,这没有什么区别。

第四步

目前来说,你已经建立了一个扩展了,官方自动生成的扩展,具备一个基本的“hello world”文本显示的功能,你可以先不写任何自定义功能的代码,直接用官方提供的默认代码来进行测试。

下面将说明测试插件。
当你在vscode中打开你的扩展文件夹后,在vscode的下方状态栏中,你会看到如下按钮:
在这里插入图片描述
一个Run Extension按钮,括号里是你的扩展名,点击这个测试按钮:
在这里插入图片描述
你点击后,vscode会自动新打开一个窗口,如上图,这个窗口叫做:扩展开发宿主窗口。
现在,在这个窗口中,你打开命令面板:
在这里插入图片描述
在顶部输入框内输入“Hello World”,正常情况下,下面会出现Hello World。
在这里插入图片描述
选择“Hello World”,你会看到,当前这个窗口的右下方会弹出一个提示:
在这里插入图片描述
到此,说明这个插件测试成功了。

接下来,可以对其进行打包和发布。

由于我并没有想发布到vscode市场,只想本地开发使用,所以我只进行了打包,下面说一下打包:

打包使用的是vsce这个程序包,可以用npm安装:

npm i vsce -g

在这里插入图片描述
使用vsce打包很简单,在你的扩展文件夹内:

vsce package

注意,需要在你的扩展名文件夹下,而不是之前建立的总文件下。
在这里插入图片描述
但是,如果你直接打包,多半会遇到一个报错:

Make sure to edit the README.md file before you package or publish your extension.

提示你需要编辑一下README.md文件。
这个README.md文件是之前生成扩展代码时自动生成的,应该是用于介绍扩展的,但是自动生成的是模板话的内容,所以需要修改。
如果你暂时也不知道写什么,可以在模板内容上稍作修改即可。
在这里插入图片描述

你可以将模板文件的第一段内容删掉,然后自己随便写几个文字上去,然后保存,再次打包。

打包过程会有警告内容,但可以忽略,主要是提示仓库和许可证设置,这些可以暂时不要。
在这里插入图片描述
打包成功后,会生成一个后缀为vsix的文件:
在这里插入图片描述
这个离线文件,可以在vscode扩展窗口手动安装:
在这里插入图片描述
这就是我自定义扩展的界面。
在这里插入图片描述
以上就是一个自定义插件的流程记录,当然,这中间缺乏了代码编辑的环节,但是,每个人想要开发的内容肯定不同,这方面可以根据官方开发手册去自己编辑代码。
但其他流程基本上是类似的,权且记录,以便于后观。

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

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

相关文章

STL之list容器代码详解

1 基础概念 功能: 将数据进行链式存储 链表(list)是一种物理存储单元上非连续的存储结构,数据元素的逻辑顺序是通过链表中的指针链接实现的 链表的组成:链表由一系列结点组成。 结点的组成:一个是存储数…

嵌入式学习第二十五天!(网络的概念、UDP编程)

网络: 可以用来:数据传输、数据共享 1. 网络协议模型: 1. OSI协议模型: 应用层实际收发的数据表示层发送的数据是否加密会话层是否建立会话连接传输层数据传输的方式(数据包,流式)网络层数据的…

HelpLook VS GitBook:知识库优劣详解

在信息爆炸的时代,企业要保持竞争优势,就必须善于管理和利用内部的知识资产。企业知识库作为一种集中存储和共享知识的工具,正在成为现代企业不可或缺的一部分。 HelpLook和Gitbook是提供专业知识库的两个平台,也被大众熟知。它们…

一文读懂HDMI的演变-从HDMI1.0到HDMI2.1(建议收藏)

HDMI,全称为(High Definition Multimedia Interface)高清多媒体接口,主要用于传输高清音视频信号。 HDMI System HDMI系统包括HDMI的source和HDMI的sink, 其中source 是源端,即信号的来源;Sink的接收端&a…

什么是以人为本的AI?

AI技术蓬勃发展,有望极大改善我们的日常生活。因此,人工智能专家经常围绕在我们社会中利用人工智能的最佳方式展开对话,并由此得出了以人为中心的AI方法。以人为中心的AI意为不是用机器代替人类,而是用机器来优化人类的体验。 在…

乌鸡的身高

解法&#xff1a; 只需要看身高最高的乌鸡个数是否>2.若满足则除去当前这只乌鸡的最高身高都是最高身高。 若不满足则只需要看最高的和第二高的乌鸡。 #include<iostream> #include<vector> #include<algorithm> #include<cmath> using namespac…

图像检索与识别——词袋模型(Bag-of-features models)

一、定义 计算机视觉单词袋是一种描述计算图像之间相似度的技术&#xff0c;常用于用于图像分类当中。该方法起源于文本检索&#xff08;信息检索&#xff09;&#xff0c;是对NLP“单词袋”算法的扩展。在“单词袋”中&#xff0c;我们扫描整个文档&#xff0c;并保留文档中出…

STL中push_back和emplace_back效率的对比

文章目录 过程对比1.通过构造参数向vector中插入对象&#xff08;emplace_back更高效&#xff09;2.通过插入实例对象&#xff08;调用copy函数&#xff09;3.通过插入临时对象&#xff08;调用move函数&#xff09; 效率对比emplace_back 的缺点 我们以STL中的vector容器为例。…

LeetCode 刷题 [C++] 第300题.最长递增子序列

题目描述 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c;[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序列。 题目…

Leetcode 206. 反转链表

给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1] 示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1] 示例 3&#xff1a; 输…

forwardRef和useImperativeHandle的配合使用

通过ref调用子组件里的方法 useImperativeHandle往外暴露子组件的方法&#xff0c;注意useImperativeHandle第三个参数中括号依赖&#xff0c;有这个依赖&#xff0c;childFun才能获取到最新的值

计算机基础专升本笔记十四-计算机网络基础(一)

计算机基础专升本笔记十四-计算机网络基础&#xff08;一&#xff09; 一、计算机网络的发展历程 第一代计算机网络&#xff08;数据通信&#xff09; 以数据通信为主的第一代计算机网络。主要是指美国军方用于防控系统的一种联机系统。它只是计算机网络的雏形。 第二代计算…