VSCode自定义插件创建教程

一、媒介

对于前端步调猿来讲，最常用的开辟利器中VSCode首当其冲，由于VSCode免费，速率快，且提供了丰富插件。结合实际项目开辟需求，有时候必要借助定制化插件以提拔开辟效率，此篇博文紧张解说如何创建自定义VSCode插件。

安装脚手架

1. npm install -g yo generator-code

复制代码

初始化插件目录
终端运行 yo code，按照提示生成目录即可。

在插件的开辟过程中，会常常改动文件，可以运行pnpm watch命令，用来监听文件的改动，以及打包运行。

注⚠️：在调试插件之前，进行启动，否则在调试窗口，自定义的命令会不生效。
二、插件维护

开辟插件的文件，位于src\extension.ts，extension.ts是开辟的入口文件，如果代码量比较小可直接在这个文件中写，代码量比较大可以在其他文件中写，最后从当前文件中进行引用即可。

三、调试插件

在VSCode工具左侧，运行和调式图标，然后再点击绿色的小三角按钮大概快捷键（F5）就可以运行了。

执行完成之后，会弹出一个新的VSCode窗口，看到扩展开辟宿主字样，阐明调试窗口就开启成功了。

通过快捷键“Ctrl+Shift+P”，然后输入相应指令，比方：“Hello world”，选中条目，窗口下方会有对应的提示！如下图所示：

四、使用 vsce 生成 vsix 插件

起首，必要把自己开辟好的插件进行打包（.vsix格式的插件文件），必要安装vsce这个包，vsce是“Visual Studio Code Extensions”的缩写，是一个用于打包、发布和管理VS Code扩展的命令行工具。
这种方式可以实现即使没有发布到应用市场，也可以直接通过对应文件安装的方式进行插件安装和使用。步骤如下：

• 安装 vsce 工具
  安装命令 npm i vsce -g
  
• 打包生成 .vsix 文件
  直接使用 vsce package 命令进行打包，完成后就会生成一个 .vsix 文件，这个也就是在后续安装插件时要使用的文件。
  

   【注意⚠️】 在使用这个命令打包时，可能会出现 vsce 所必要支持的 VSCode 最低版本和当前使用版本之间存在出入，导致打包失败。必要将 VSCode 版本进行升级，而不是手动修改版本号。
  

• 安装 vsix 插件
  按照如下方式操作并选择对应的 .vsix 文件即可。
  

五、标题汇总

5.1 打开调试窗口后，输入helloworld并没有指令提示

缘故原由：当前电脑安装的VSCode版本过低，不支持当前插件的使用（由于主动生成的插件总是默认使用最新版VSCode），所以必要将插件使用的VSCode版本降低。
即package.json中的engines.vscode版本不能高于本电脑安装的VSCode版本。
5.2 插件调试无标题，打包生成 .vsix 文件后无法使用

自定义插件安装之后，如果插件没有起作用，通常有以下几个缘故原由：

• 插件版本与 VSCode 版本不兼容：VSCode会不定期更新，如果插件版本过老，可能会出现兼容性标题导致插件无法正常工作，必要更新插件。
  
• 插件未启用：有些插件必要手动启用才能生效，在调试时必要检查插件设置，确保插件已启用。
  
• 插件依赖项未安装：有些插件依赖特定的软件包或库，如果没有安装这些依赖项插件也无法正常使用。在插件安装之前必要检查其依赖项，确保已经安装。
  
• VSCode 设置标题：某些插件必要特定的VSCode设置才能正常工作，必要检查VSCode的设置是否正确，如果不正确必要进行调整。
  

以上是一些插件不生效的常见缘故原由，经过排除以上标题，发现生成的自定义插件仍然无法正常使用。

六、插件创建实战

在开辟过程中，存在以下需求：在编写代码过程中，必要遵守命名规范，那么就必要对存量代码进行转换。实现步骤如下：
1、定义命令
起首，必要在pageage.json定义，所必要的命令，如下图所示：

然后必要配置，在编辑区域选中，进行转换。配置如下所示：

在这里定义完所有的自定义的命令之后，就必要在入口文件（extension.ts）写每个命令对应的逻辑代码。
为便于注册指令，把所有命令名定义成一个常量对象，如下所示：

把所有命令，循环进行注册，如下所示：

然后写选中替换的具体实现功能逻辑，如下所示;

最后transformFun函数是具体的替换逻辑，根据不同的命令，返回对应的字符串。

添加右键菜单进行转换，必要在package.json中进行配置。如下所示：

添加快捷键功能，也必要在package.json中进行配置，部分示比方下所示：

到这里功能基本上就开辟完了哈，完成之后可以看看实际效果是什么样子的。

七、拓展阅读

• 《VSCode官方文档》
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。