VSCode变量命名转换插件(Var-Conv)
2023-02-18 16:41:29 时间
Dear,大家好,我是“前端小鑫同学”,?长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~
背景说明:
有一个良好的变量命名方式对于一个程序员是相当的重要的,但是入门的编程语言不同或者各自的习惯不同导致实际工作中的变量命名依然是层次不齐的,在不同的平台间,服务间的变量命名更是什么样的都有,为了应对不同的变量命令我一开始使用的是uTools中的插件,也推荐更多朋友使用,在IED中选中变量后alt+空格
呼起uTools会自动匹配到变量替换的插件,但是最后升级后发现还需要搜索到插件后才能再转换,所以就想不脱离VSCode
就可以直接转换变量的命名方式,通过一顿的搜索参考,终于把这个插件做了出来。
编写extension.ts:
- 准备一个命令对象集合,我们要遍历进行命令的注册,复杂的事情要简单做。
/**
* 指令集合
*/
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,_",
},
。。。
};
复制代码
- 注册指令函数的实现,我们使用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)
)
);
}
});
复制代码
- 在处理函数中我们通过指令对应的key从Var-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);
}
}
}
复制代码
- 看一下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;
复制代码
- 注释一下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仓库。
操作演示:
插件地址还请访问:https://marketplace.visualstudio.com/items?itemName=xiaoxintongxue.var-conv
代码参考:
相关文章
- 【架构师(第四十二篇)】 服务端开发之常用的登录鉴权方式
- 【架构师(第四十三篇)】 服务端开发之单元测试和接口测试
- 【架构师(第四十四篇)】 服务端开发之 pm2 和 nginx 介绍
- 【架构师(第四十六篇)】 服务端开发之安装 Docker
- 【架构师(第四十七篇)】 服务端开发之认识 Docker
- 【架构师(第四十八篇)】 服务端开发之 Dockerfile
- 【架构师(第四十九篇)】 服务端开发之认识 Docker-compose
- 【架构师(第五十篇)】 服务端开发之自动发布到测试机
- 【架构师(第五十一篇)】 服务端开发之技术方案设计
- 【架构师(第五十二篇)】 几个前端工具的基本使用
- 【架构师(第五十三篇)】 性能优化之 HTTP 缓存
- 【前端财富】前端工程师装机指南 (windows10)
- 最近很火的ChatGPT怎么玩?
- 小巧好用的免费虚拟机软件
- [ChatGPT解决方案]生成 nginx 自签名证书
- 完美解决文件格式转换问题
- MariaDB在Oscar故障演练平台的测试实践
- 压缩列表的源码实现
- Docker命令三板斧
- 一文教你快速注册OpenAi(ChatGPT),国内也可以!