VSCode变量命名转换插件(Var-Conv)

「这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战」。

Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~


背景说明:

有一个良好的变量命名方式对于一个程序员是相当的重要的,但是入门的编程语言不同或者各自的习惯不同导致实际工作中的变量命名依然是层次不齐的,在不同的平台间,服务间的变量命名更是什么样的都有,为了应对不同的变量命令我一开始使用的是uTools中的插件,也推荐更多朋友使用,在IED中选中变量后alt+空格呼起uTools会自动匹配到变量替换的插件,但是最后升级后发现还需要搜索到插件后才能再转换,所以就想不脱离VSCode就可以直接转换变量的命名方式,通过一顿的搜索参考,终于把这个插件做了出来。 image.png

编写extension.ts:

  1. 准备一个命令对象集合,我们要遍历进行命令的注册,复杂的事情要简单做。
/**
* 指令集合
*/
const commands = {
upperCamelCase: {
title: "大驼峰写法 (帕斯卡命名法)",
search: "dtf,datuofeng,psk,pasika,ucc,uppercamelcase",
},
camelCase: {
title: "小驼峰写法 (驼峰命名法)",
search: "xtf,xiaotuofeng,cc,camelcase",
},
snake: {
title: "蛇形写法 (下划线命名法)",
search: "sx,shexing,xhx,xiahuaxian,snake,_",
},
。。。
};
  1. 注册指令函数的实现,我们使用Reflect对象来实现。
Reflect.ownKeys(commands).forEach((key) => {
if (typeof key === "string") {
const commandId = key.replace(key[0], key[0].toUpperCase());
context.subscriptions.push(
registerCommand(`var-conv.${commandId}`, (args) =>
handler(commandId, args)
)
);
}
});
  1. 在处理函数中我们通过指令对应的keyVar-Conv工具类保存的map中取出待执行的函数通过call进行调用。
function handler(key: string, args: vscode.TextEditor) {
const origin = args.document.getText(args.selection);
if (isNoEmpty(origin)) {
const conv = new VarConv(origin);
const value = conv.fns?.get(key)?.call(conv, null);
if (value) {
replace(value);
}
}
}
  1. 看一下var-conv工具函数的实现,代码来自文末的代码仓库:
// 解析对象
class VarConv {
fns: Map<string, Function> | undefined;
originVarName: string;
varSplit: string[] | undefined;
constructor(varName: string) {
this.initCommandMap();
。。。
}
initCommandMap(): void {
this.fns = new Map<string, Function>();
this.fns.set("UpperCamelCase", this.toUpperCamelCase);
this.fns.set("CamelCase", this.toCamelCase);
。。。
}
// 大驼峰写法 (帕斯卡命名法) UserName
toUpperCamelCase(separator: any) {
let vars: any[] = [];
this.varSplit?.forEach((item) => {
item = item.replace(/(^[a-z])/, (match) => {
return match.toLocaleUpperCase();
});
vars.push(item);
});
return vars.join(separator || "");
}
// 小驼峰写法 (驼峰命名法) userName
toCamelCase(separator: any) {
let vars: any[] = [];
this.varSplit?.forEach((item, index) => {
if (index !== 0) {
item = item.replace(/(^[a-z])/, (match) => {
return match.toLocaleUpperCase();
});
}
vars.push(item);
});
return vars.join(separator || "");
}
。。。
}
export default VarConv;
  1. 注释一下package.json的关键信息:
{
// 插件的Icon
"icon": "images/icon.png",
"engines": {
// vscode版本支持
"vscode": "^1.61.0"
},
// 激活的事件
"activationEvents": [
"onCommand:var-conv.UpperCamelCase",
"onCommand:var-conv.CamelCase",
],
"contributes": {
// 指令集合及名称
"commands": [
{
"command": "var-conv.UpperCamelCase",
"title": "01.大驼峰写法 (帕斯卡命名法)"
},
{
"command": "var-conv.CamelCase",
"title": "02.小驼峰写法 (驼峰命名法)"
},
],
"configuration": [
{
"title": "var-conv",
"properties": {
"var-conv.contextMenu.enabled": {
"type": "boolean",
"default": true,
"description": "是否在编辑器上下文菜单中显示变量转换的菜单"
}
}
}
],
// 菜单配置
"menus": {
"editor/context": [
{
"submenu": "var-conv/editor/context/conv",
"group": "var-conv",
"when": "config.var-conv.contextMenu.enabled"
}
],
"var-conv/editor/context/conv": [
{
"command": "var-conv.UpperCamelCase",
"group": "var-conv"
},
{
"command": "var-conv.CamelCase",
"group": "var-conv"
},
]
},
"submenus": [
{
"id": "var-conv/editor/context/conv",
"label": "变量命名转换"
}
]
}
}

代码开源:

代码同样开源到了我的Github仓库:github.com/OSpoon/var-…,有要实现类似插件功能的朋友可以当做模板来参考使用。具体的代码实现也请访问Github仓库。

操作演示:

演示.gif 插件地址还请访问marketplace.visualstudio.com/items?itemN…


欢迎关注我的公众号“前端小鑫同学”,原创技术文章第一时间推送。 ​

代码参考:

  1. github.com/imdong/Var-…
posted @   前端小鑫同学  阅读(287)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· 支付宝事故这事儿,凭什么又是程序员背锅?有没有可能是这样的...
· 在线客服系统 QPS 突破 240/秒,连接数突破 4000,日请求数接近1000万次,.NET 多
· C# 开发工具Visual Studio 介绍
· 在 Windows 10 上实现免密码 SSH 登录
· C#中如何使用异步编程
点击右上角即可分享
微信分享提示