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

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

背景说明:


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


操作演示:


82.png




相关文章
|
3月前
|
自然语言处理 API C++
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
SmartVscode插件深度解析:自然语言控制VS Code的革命性工具及其开源框架App-Controller
|
8天前
|
机器学习/深度学习 人工智能 自然语言处理
|
6天前
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
153 7
|
6月前
|
iOS开发 MacOS
【Mac系统】解决Vscode中LeetCode插件不能刷剑指offer题库
文章讨论了解决Mac系统中Vscode里LeetCode插件无法刷剑指Offer题库的问题,并提供了一些相关的使用技巧和资源链接。
342 1
|
3月前
|
开发工具 C++ git
利用VS Code提升开发效率的五大插件推荐
本文推荐了五款能显著提升开发效率的VS Code插件:ESLint用于代码质量和风格检查;Prettier自动格式化代码;GitLens增强Git功能;Live Server提供前端实时预览;Docker支持容器管理。
|
4月前
|
自然语言处理 JavaScript 开发者
通义灵码插件:VSCode 的智能编程助手
通义灵码插件:VSCode 的智能编程助手
1847 3
|
4月前
|
前端开发 JavaScript 编译器
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
【10月更文挑战第11天】2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
1117 0
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
|
6月前
|
前端开发 Go
vscode10大常用插件
本文介绍了前端开发中常用的工具及VSCode必备插件。推荐使用VSCode作为入门工具,并介绍了WebStorm和HBuilder等其他选项。VSCode插件包括:Open-In-Browser、live-server、Beautify、Code Runner、Image Preview、Path Intellisense、Turbo Console Log、css-auto-prefix、Bracket Pair Colorizer 和 Auto Rename Tag,这些插件能够显著提升开发效率和代码质量。此外,还提供了录制Gif图的工具GifCam。
197 5
|
5月前
|
人工智能 C++ 开发者
verilog vscode 与AI 插件
【9月更文挑战第11天】在Verilog开发中,使用Visual Studio Code(VS Code)结合AI插件能显著提升效率。VS Code提供强大的编辑功能,如语法高亮、自动补全和代码格式化;便捷的调试功能,支持多种调试器;以及丰富的插件生态。AI插件则可自动生成代码、优化现有代码、检测并修复错误,还能自动生成文档。常用插件包括Verilog AI Assistant和Verilog Language Server,可根据需求选择合适的工具组合,提高开发效率和代码质量。
390 2
|
6月前
|
前端开发 IDE 开发工具
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
154 6

热门文章

最新文章