前言
本文是关于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扩展窗口手动安装:
这就是我自定义扩展的界面。
以上就是一个自定义插件的流程记录,当然,这中间缺乏了代码编辑的环节,但是,每个人想要开发的内容肯定不同,这方面可以根据官方开发手册去自己编辑代码。
但其他流程基本上是类似的,权且记录,以便于后观。