前言
前段时间,我开发一个vscode代码片段插件,可以在vscode中直接把选中的代码创建成代码片段。文章发出来后,有些兄弟给了一些建议和鼓励,根据这些建议我花了一周时间给这个插件重构了,功能更强大,体验也更好了。
前文链接
说明
老版本插件可能有兄弟在使用了,这次插件升级后,会丢失前面定义的代码片段,升级插件前,一定要先把配置导出来,如果有兄弟需要,后面我会出一个升级脚本,把老的代码片段一键迁移到新版本里。
插件功能介绍
全部在vscode中操作,不需要到别的地方复制粘贴
网上有很多代码片段管理平台,但是都都没和vscode编辑器绑定,需要把代码复制到平台,如果想使用,还要从平台上复制出来,这样效率太低了,所以,我写了一个插件,把代码片段管理平台和vscode编辑器绑定,这样,就可以直接在编辑器中管理代码片段,不用再复制粘贴了。
快速创建代码片段
虽然vscode支持创建全局代码片段,但是创建的代码格式不友好,需要把多行代码转换为数组,虽然网上有转换的工具,但是还要复制粘贴。我这个插件,可以直接从编辑器里的代码创建。
代码片段代码格式如下,如果不使用工具转换,自己手动去写,还是很麻烦的。
团队共享代码片段
整个团队,只需要安装这个插件,就可以共享代码片段了。
内置常用代码片段
插件中内置了一些常用的代码片段,如果你创建的代码片段是常用的,可以给公开,这样大家都可以使用了。
安全
因为代码片段同步到你自己的gitee仓库中,所以,你的代码片段是安全的。
插件使用说明
安装插件
可以在vscode插件市场里搜索 代码片段助手
也可以打开下面链接安装
marketplace.visualstudio.com/items?itemN…
使用代码片段
安装完插件后,会自动创建内置公开代码片段文件,创建成功后,需要刷新一下,代码片段快捷键才会生效。
在js文件中输入cs,可以弹出代码片段列表,选择一个代码片段,回车后会把代码片段插入到光标处。
也可以在最左边的侧边栏里,看到代码片段列表。
可以点击预览代码片段,也可以把当前代码片段插入到当前光标位置,还可以把代码片段复制到剪切板。
创建代码片段
如果你想自己创建代码片段,必须先在gitee上注册一个账号,然后生成一个令牌,然后在vscode设置中配置你的令牌。
令牌配置完成后,然后选中你想保存的代码片段右键,可以看到代码片段的操作菜单下面有三个操作。
保存当前文件
把当前文件里所有的代码片段保存为代码片段,输入代码片段标题和描述后保存。
保存当前选中代码
把当前选中的代码保存为代码片段,输入代码片段标题和描述后保存。
编辑当前选中代码
打开新编辑器,编辑当前选中的代码片段,比如插入变量等,然后再保存。
如何在代码片段中插入变量,可以参考这篇文章。
说明
如果保存代码片段时,不想自己输入标题和描述,可以在vscode中配置openai的apiKey,使用大模型来生成标题和描述。
创建代码片段成功
保存成功后,会提示让你刷新一下vscode,因为更改代码片段文件后,需要刷新一下,代码片段快捷键才会生效。
输入cs就能看到刚才新加的代码片段了。
在左侧个人代码片段列表中,也能看到刚刚保存的代码片段。
如果你觉得你的代码片段很常用,建议把代码片段公开,这样,其他用户也能使用。如果不想公开了,可以设置为不公开。同时还支持删除。
欢迎大家公开自己的代码片段,这样,大家就可以一起使用了。
团队共享代码片段
如果想要团队共享代码片段,需要在vscode设置中配置团队名称,和gitee令牌。
支持配置多个
如果团队里的代码片段有更新,需要自己手动生成一下代码片段文件。
插件核心技术介绍
调用gitee代码片段接口
前面说了你可以放心的使用插件,不用担心代码泄漏,因为这些代码是同步到你自己gitee仓库下。
gitee对外提供了接口文档,让用户可以自己需求调用。
项目里调用gitee接口使用的是axios库
vscode插件中监听某个配置改变
插件中需要监听个人gitee令牌配置改变,当用户配置了令牌后,需要自动调用接口,刷新个人的代码片段列表。
代码如下:
动态右键菜单项
当用户没有配置个人令牌前,是不允许保存代码片段的, 所以保存代码片段的菜单不要显示出来。
菜单配置这里加上条件,编辑器是否获取焦点,并且personalToken不为空。
可以通过setContext指令设置personamToken的值
往当前光标处插入代码片段
最后
代码仓库地址: github.com/dbfu/code-s…
欢迎大家体验和提建议。