VSCode自定义插件创建教程
一、媒介对于前端步调猿来讲，最常用的开辟利器中VSCode首当其冲，由于VSCode免费，速率快，且提供了丰富插件。结合实际项目开辟需求，有时候必要借助定制化插件以提拔开辟效率，此篇博文紧张解说如何创建自定义VSCode插件。
https://i-blog.csdnimg.cn/direct/eaec379a78804e77811aa3801255497a.png
安装脚手架
npm install -g yo generator-code
https://i-blog.csdnimg.cn/direct/08b5729f3ea24ef9b7b38be420e7cdf5.png
初始化插件目录
终端运行 yo code，按照提示生成目录即可。
https://i-blog.csdnimg.cn/direct/8aae43f7344b481a96b0427abb9b1880.png
在插件的开辟过程中，会常常改动文件，可以运行pnpm watch命令，用来监听文件的改动，以及打包运行。
https://i-blog.csdnimg.cn/direct/f2493f54900e4a4fb111893174974b93.png
注⚠️：在调试插件之前，进行启动，否则在调试窗口，自定义的命令会不生效。
二、插件维护
开辟插件的文件，位于src\extension.ts，extension.ts是开辟的入口文件，如果代码量比较小可直接在这个文件中写，代码量比较大可以在其他文件中写，最后从当前文件中进行引用即可。
https://i-blog.csdnimg.cn/direct/ffc7aa933a3d4ec89ccf330ae501c333.png
三、调试插件
在VSCode工具左侧，运行和调式图标，然后再点击绿色的小三角按钮大概快捷键（F5）就可以运行了。
https://i-blog.csdnimg.cn/direct/47a4d7a207314313a3cef0bed0978b6e.png
执行完成之后，会弹出一个新的VSCode窗口，看到扩展开辟宿主字样，阐明调试窗口就开启成功了。
https://i-blog.csdnimg.cn/direct/7b3fad371fba4351b7d3fc7ffe136647.png
通过快捷键“Ctrl+Shift+P”，然后输入相应指令，比方：“Hello world”，选中条目，窗口下方会有对应的提示！如下图所示：
https://i-blog.csdnimg.cn/direct/35b073572d5f4c52a8bb7f3897ddaea5.png
四、使用 vsce 生成 vsix 插件
起首，必要把自己开辟好的插件进行打包（.vsix格式的插件文件），必要安装vsce这个包，vsce是“Visual Studio Code Extensions”的缩写，是一个用于打包、发布和管理VS Code扩展的命令行工具。
这种方式可以实现即使没有发布到应用市场，也可以直接通过对应文件安装的方式进行插件安装和使用。步骤如下：
[*] 安装 vsce 工具
安装命令 npm i vsce -g
[*] 打包生成 .vsix 文件
直接使用 vsce package 命令进行打包，完成后就会生成一个 .vsix 文件，这个也就是在后续安装插件时要使用的文件。
【注意⚠️】 在使用这个命令打包时，可能会出现 vsce 所必要支持的 VSCode 最低版本和当前使用版本之间存在出入，导致打包失败。必要将 VSCode 版本进行升级，而不是手动修改版本号。
https://i-blog.csdnimg.cn/direct/6ad36999f05a4e8990a6f58a5c7ca0a8.png
[*]安装 vsix 插件
按照如下方式操作并选择对应的 .vsix 文件即可。
https://i-blog.csdnimg.cn/direct/1ff15fa617af4fe686be0b0949320399.png
五、标题汇总
5.1 打开调试窗口后，输入helloworld并没有指令提示
https://i-blog.csdnimg.cn/direct/26f5ce53ed8046a69f13ad0f095808b8.png
缘故原由：当前电脑安装的VSCode版本过低，不支持当前插件的使用（由于主动生成的插件总是默认使用最新版VSCode），所以必要将插件使用的VSCode版本降低。
即package.json中的engines.vscode版本不能高于本电脑安装的VSCode版本。
5.2 插件调试无标题，打包生成 .vsix 文件后无法使用
自定义插件安装之后，如果插件没有起作用，通常有以下几个缘故原由：
[*]插件版本与 VSCode 版本不兼容：VSCode会不定期更新，如果插件版本过老，可能会出现兼容性标题导致插件无法正常工作，必要更新插件。
[*]插件未启用：有些插件必要手动启用才能生效，在调试时必要检查插件设置，确保插件已启用。
[*]插件依赖项未安装：有些插件依赖特定的软件包或库，如果没有安装这些依赖项插件也无法正常使用。在插件安装之前必要检查其依赖项，确保已经安装。
[*]VSCode 设置标题：某些插件必要特定的VSCode设置才能正常工作，必要检查VSCode的设置是否正确，如果不正确必要进行调整。
以上是一些插件不生效的常见缘故原由，经过排除以上标题，发现生成的自定义插件仍然无法正常使用。
https://i-blog.csdnimg.cn/direct/9e118f54748d4ea692f16af800b3e095.png
六、插件创建实战
在开辟过程中，存在以下需求：在编写代码过程中，必要遵守命名规范，那么就必要对存量代码进行转换。实现步骤如下：
1、定义命令
起首，必要在pageage.json定义，所必要的命令，如下图所示：
https://i-blog.csdnimg.cn/direct/f2c9490e1142433eab08894bc6b92a92.png
然后必要配置，在编辑区域选中，进行转换。配置如下所示：
https://i-blog.csdnimg.cn/direct/7410aa64a7ae498a86f6c3f8b0cc61fd.png
在这里定义完所有的自定义的命令之后，就必要在入口文件（extension.ts）写每个命令对应的逻辑代码。
为便于注册指令，把所有命令名定义成一个常量对象，如下所示：
https://i-blog.csdnimg.cn/direct/2cc1961cf8324395954cfc7072c0509d.png
把所有命令，循环进行注册，如下所示：
https://i-blog.csdnimg.cn/direct/ace112d7c5b44d658612398432089161.png
然后写选中替换的具体实现功能逻辑，如下所示;
https://i-blog.csdnimg.cn/direct/7996b8ee9a5146a4af0bd2b904021998.png
最后transformFun函数是具体的替换逻辑，根据不同的命令，返回对应的字符串。
https://i-blog.csdnimg.cn/direct/599f1aee260e4b13af42a5279d2f2e72.png
添加右键菜单进行转换，必要在package.json中进行配置。如下所示：
https://i-blog.csdnimg.cn/direct/db2c24e237bc414db460ec91f1e96874.png
添加快捷键功能，也必要在package.json中进行配置，部分示比方下所示：
https://i-blog.csdnimg.cn/direct/96b739e91bc3402abc6e544842372a93.png
到这里功能基本上就开辟完了哈，完成之后可以看看实际效果是什么样子的。
https://i-blog.csdnimg.cn/direct/21f34b2816be42d6a19e5c1b594125ed.gif#pic_center
七、拓展阅读
[*]《VSCode官方文档》
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]