原创 笨笨狗吞噬者 2025-01-11 09:02 重庆
点击关注公众号，“技术干货” 及时达！
点击关注公众号，“技术干货” 及时达！
前言
最近两周花时间做了两个vscode插件，在这之前我是没什么vscode 插件开发经验的，倒是认识vscode插件大佬，Simon_He，看他做了不少实用高质量的插件。整个过程下来学到了很多东西，在此分享我的开发过程。
收获
其实，两周之前我都没有搞过vscode插件开发，基本上就是零经验开始的。我去网上翻阅官方文档，安装脚手架，生成模板项目，理清需求，开发，调试，发布。整个过程基本上没啥大的阻碍，除了国际化，分组需求带来的数据存储这两个困扰了我一会，其他的基本上靠官方文档和chatgpt都能解决，实在解决不了就去google。不得不说，chatgpt真的可以当一个搜索引擎来用，某些方面可以大大提高工作效率。
Alias Manager
背景
这个最开始起源于上上周阮一峰老师的周刊，里面有篇文章介绍了 git alias。给我打开了新世界的大门，我感觉这个命令很好啊，由此萌生了做一个vscode插件的想法。晚上下班之后，我在varlet群里面分享了我的想法，耗子哥说我不如做一个系统级的别名管理插件。到家后我就去了解了下 linux alias 命令，有了基本的概念和简单的实践之后，我理了思路，简单设计了下ui，因为周日要加班，所以花了大概一天多做了第一版出来。
别名
可能有些掘友不是很清楚 alias，可以看下这个文章
效果
因为实现的功能很多，考虑到篇幅，这里就只放一部分效果图
点击按钮即可运行
支持分组管理别名
思路
因为这个插件包含的东西比较多，别名的crud，别名分组，分组的curd，国际化，排序，备注等等，不太好详细说每一个点的思路，简单分享下分组的思路，对其他部分感兴趣的掘友可以去点击文末的github链接查看源码。
为了实时生效，通常会把 alias 命令存储在 .zshrc 文件中，每次有新的改动就执行 source ~/.bashrc。所以别名的crud其实就在操作文件。
但是分组是一个新的东西，它和别名没一点关系，这个东西就是为了便捷管理别名，肯定不能加到文件里面。我的思路是备份一份 alias 到 插件的全局状态下，也就是 context.globalState，这个是跟着插件走的，只要不卸载插件，数据就一直在
这就很明朗了，但凡涉及别名数据改动的地方就去修改 globalState，分组的crud和数据的显示也根据这里的数据处理，就算把全局状态清空了也不会影响存储在文件中的原数据。
Copy Filename Pro
背景
日常开发过程中，难免遇到那种要复制文件名字的场景，比如 app-upload-image.vue，复制 app-upload-image 到剪切板。
我就去vscode extensions里找，很遗憾没找到，有个使用量很高的插件，有人提pr实现这个功能，但是作者不维护了。
然后去varlet社区群里面问，也没有找到合适的，就思索着自己做一个。
效果
已打开的文件也支持复制
插件也做了国际化，如果你安装了 Chinese (Simplified) 插件，插件也能切换到中文
思路
我要支持三个命令
复制文件名（带拓展名）
复制文件名（不带拓展名）
复制目录名
vscode 本身支持获取文件路径，所以我们要做的就很简单了，获取这个路径，然后处理得到路径中的文件名或者目录名。
代码
node的 path 模块能够很好地实现文件名和目录名获取，vscode官方提供了 clipboard 用于处理剪切板的内容。
所以，核心逻辑就很简单，总共不到三十行代码
工具推荐
这里分享下我写库常用的一些工具
工具库 rattail
这个库是 varlet作者 haoziqaq 开源的
打包工具 tsup
发版工具 @varlet/release
结语
如果感觉插件帮助到了你，欢迎 star
Alias Manager
Copy Filename Pro
如有疑问或建议，欢迎评论区留言。
点击关注公众号，“技术干货” 及时达！
