VSCode变量命名转换插件（Var-Conv）

前端小鑫同学

发布于 2022-12-26 09:19:25

1.1K0

发布于 2022-12-26 09:19:25

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": "变量命名转换"
      }
    ]
  }
}

复制代码