1、前言
对于一个前端开发者来说,开发工具,最常用的应该就是VSCode了,因为它免费,速度快,提供了丰富了插件等优点,使得越来越多的前端开发者都来使用它了,在开发的时候如果有丰富的插件提供支持,那么我们写代码的速度会快很多,体验也有很好,有时候我们有一些自己的需求,那么可以自己尝试开发一款自己的插件来提升自己的效率,以下会讲到如何开发自己的一个插件,VSCode官方也提供了很多api,大家有时间可以多去研究一下。
以下是官方文档:Your First Extension | Visual Studio Code Extension API
如果你不知道如何下手,也可以通过微软官方对应的示例代码跑起来,去研究下对应的示例代码,代码示例地址如下所示:
github地址:GitHub - microsoft/vscode-extension-samples: Sample code illustrating the VS Code extension API.
2、快速开始
首先,我们需要提前安装Node和Git的环境,安装完之后,执行以下命令来安装对应的脚手架:
npm install -g yo generator-code
完成上面的安装后,可以通过以下命令生成基本的代码文件:
yo code
运行之后,可以选择对应的扩展类型,进行创建。
在插件的开发过程中,会经常改动文件,可以运行pnpm watch命令,用来监听文件的改动,以及打包运行。
注:所以在调试插件之前,进行启动,否则在调试窗口,自定义的命令会不生效。
3、文件目录
name-transform
├─ 📁.vscode
│ ├─ 📄extensions.json
│ ├─ 📄launch.json
│ ├─ 📄settings.json
│ └─ 📄tasks.json
├─ 📁src
│ ├─ 📁test
│ │ └─ 📄extension.test.ts
│ └─ 📄extension.ts
├─ 📄.eslintrc.json
├─ 📄.gitignore
├─ 📄.vscode-test.mjs
├─ 📄.vscodeignore
├─ 📄CHANGELOG.md
├─ 📄package.json
├─ 📄README.md
├─ 📄tsconfig.json
├─ 📄vsc-extension-quickstart.md
└─ 📄webpack.config.js
4、调试插件
在VSCode工具左侧,运行和调式图标,然后再点击绿色的小三角按钮或者快捷键(F5)就可以运行了。
执行完成之后,会弹出一个新的VSCode窗口,看到扩展开发宿主字样,说明调试窗口就开启成功了。。。
通过快捷键“Ctrl+Shift+P”,然后输入“Hello world”,选中条目,窗口下方会有对应的提示!如下所示:
5、编辑插件
开发插件的文件,位于src\extension.ts,extension.ts是开发的入口文件,如果代码量就直接在这个文件中写,代码量比较大可以在其他文件中写,最后从当前文件中进行引用就行。
6、插件功能实现
在开发过程中,可能有这样的需求,在写代码的时候,需要写命名规范的代码,那么就需要对应自己命名的代码进行转换。
1、定义命令
首先,需要在pageage.json定义,所需要的命令,如下图所示:
然后需要配置,在编辑区域选中,进行转换。配置如下所示:
在这里定义完所有的自定义的命令之后,就需要在入口文件(extension.ts)写每个命令对应的逻辑代码。
2、功能代码
把所有命令名定义成一个常量对象,如下所示:
把所有命令,循环进行注册,如下所示:
然后写选中替换的功能逻辑,如下所示;
最后transformFun函数是具体的替换逻辑,根据不同的命令,返回对应的字符串。
2.1、添加右键菜单
添加右键菜单进行转换,需要在package.json中进行配置。如下所示:
2.2 添加快捷键
添加快捷键功能,也需要在package.json中进行配置,部分示例如下所示:
到这里功能基本上就开发完了哈,完成之后可以看看实际效果是什么样子的。
7、发布插件
首先,我们需要把自己开发好的插件进行打包(.vsix),需要安装vsce,这个包,vsce是“Visual Studio Code Extensions”的缩写,是一个用于打包、发布和管理VS Code扩展的命令行工具。
安装
确保你已经安装Nodejs,然后运行如下命令:
npm install -g @vscode/vsce
使用
然后就可以进行打包和发布了。
$ cd myExtension
$ vsce package
# name-transform-0.0.1 生成了
$ vsce publish
# <publisher id>.name-transform 发布到 VS Code 插件市场了
发布扩展
您可以通过两种方式发布扩展:
- 自动使用
vsce publish
命令:vsce publish
这种方式需要进行登录,必须使用
vsce login
命令提供您的个人访问令牌 - 手动使用
vsce package
将扩展打包为可安装的VSIX格式,然后将其上传到Visual Studio Marketplace发布者管理页面:这种方式需要提前准备以下信息:
1、要有一个微软的账户 2、能够访问google的网络,如果没有,在创建发布者的时候,在点击“创建按钮”的时候,页面会没反应。
在创建发布者页面填写必填项,如下所示:
然后点击“Create”按钮就行,如果网络不行,会提示如下信息,说验证码未定义,这块会涉及谷歌的一个图形验证码。如下图所示:
创建完毕之后,可以点击New extension按钮,弹窗以下弹窗,然后把打包好的.vsix结尾的文件,上传即可。
完成之后,就等待审核就可以了,审核完成之后,就可以在VSCode左侧插件输入框中进行搜索和查看了,如下所示:
好了,这样一个自己开发的插件就大功告成了,以上就是一个插件开发的一个大概流程,具体的一些其他细节可以参考官方或者官方示例,以下是自己代码地址,一些功能或者也可用来参考,代码地址如下所示:
github: https://github.com/hanjiangxueying/name-transform