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扩展窗口手动安装：

这就是我自定义扩展的界面。

以上就是一个自定义插件的流程记录，当然，这中间缺乏了代码编辑的环节，但是，每个人想要开发的内容肯定不同，这方面可以根据官方开发手册去自己编辑代码。
但其他流程基本上是类似的，权且记录，以便于后观。