在现代软件开发中，Visual Studio Code 已经成为最受欢迎的代码编辑器之一。它强大的插件生态系统让开发者能够根据自己的需求定制开发环境。本文将带你深入了解如何开发一个实用的 VS Code 插件——Key Replacer，它可以帮助开发者自动替换代码中的键值对。

项目背景与需求

在实际开发中，我们经常会等后端接口文档出来后才能写字段，但后端需要设计时间，不会很快输出所以可以通过文字先写，文档输出后统一替换，比如：

{ "[用户]":"user" } 目录下文件匹配到 key 替换值，例如 detail['[用户]']都替换出成 detail['user']

为了解决这些问题，我们开发了 Key Replacer 插件，它具有以下核心功能：

1. 自动扫描项目中的固定规则的中文键名并生成映射配置
2. 根据配置文件批量替换代码中的键值对
3. 支持自定义功能扩展，用户可以通过配置文件添加自己的处理函数

1.生成映射文件

2.填入接口协议定好的字段

3.支持自定义功能扩展，用户可以通过配置文件添加自己的处理函数

新增fun.js

以上都是针对选取后右键对内容处理替换

用户交互设计

插件提供了多种交互方式：

1. 右键菜单：在编辑器中右键点击可访问功能菜单
2. 命令面板：通过 Ctrl+Shift+P 访问所有命令
3. 快捷键：为常用功能设置快捷键，提高操作效率
4. 快速选择：通过 QuickPick 界面选择要执行的功能

使用方法

1. 安装插件： Key Replacer Extension

2. 在工作区根目录创建 key-mapping.json 文件：

   {
       "[用户]": "user",
       "[管理员]": "admin",
       "[订单]": "order"
   }
   

3. ctrl + shift + p 输入 KeyReplacer: ，会出现相关的命令

4. 常用的命令有：

• 选择 KeyReplacer:【替换】 工作区文件键值对替换并保存
• 选择 KeyReplacer:【生成】 映射文件生成 例如（{'[用户]':''}）

• 所有命令
• "KeyReplacer:【替换】 工作区文件键值对替换并保存"
• "KeyReplacer: 当前文件键值对替换并保存"
• "KeyReplacer:当前文件键值对替换 (不保存)"
• "KeyReplacer:【生成】 映射文件生成 例如（{'[用户]':''}）"
• "KeyReplacer: 当前文件更新映射文件键值对"
• "KeyReplacer: 工作区文件更新映射文件键值对"
• "KeyReplacer: 创建映射文件"
• "KeyReplacer: 重载映射文件"

自定义处理函数

通过 fun.js 配置文件，开发者可以添加自定义的文本处理函数，比如：

• 格式化选中文本
• 批量修改命名规范
• 生成特定格式的代码片段

• export  default [
    {
      id: "trim",
      title: "【替换】移除选中内容中的空格",
      fun: function(context) {
        return context.replace(/\s+/g, '');
      },
      description: "替换选中数据"
    },
    {
      id: "trimBrackets",
      title: "【替换】移除选中内容中的方括号",
      fun: function(context) {
        return context.replace(/[[\]]/g, '');
      },
      description: "替换选中数据"
    },
    {
      id: "toUpperCase",
      title: "转换为小写",
      fun: function(context) {
        return context.tolowerCase();
      },
      description: "将选中文本转换为小写"
    },
     {
      id: "toUpperCase",
      title: "转换为大写",
      fun: function(context) {
        return context.toUpperCase();
      },
      description: "将选中文本转换为大写"
    },
    {
      id: "addQuotes",
      title: "添加引号",
      fun: function(context) {
        return '"' + context + '"';
      },
      description: "为选中文本添加双引号"
    },
    {
      id: "replaceSpaces",
      title: "替换空格为下划线",
      fun: function(context) {
        return context.replace(/\s+/g, '_');
      },
      description: "将选中文本中的空格替换为下划线"
    },
    {
      id: "timestampToTime",
      title: "时间戳转为时间",
      fun: function(context) {
        return new Date(parseInt(context)).toLocaleString();
      },
      description: ""
    },
    {
      id: "stringToArray",
      title: "0-待采购 1-采购中 转数组",
      fun: function(context) {
        let arr = context.split(' ');
        let res = arr.map(item => {
          let itemArr = item.split('-');
          return {
            label:itemArr[0],
            value:itemArr[1]
          };
        });
        return JSON.stringify(res);
      },
      description: "0-待采购 1-采购中 转[{label:'待采购',value:'0'},{label:'采购中',value:'1'}]"
    },
  ];
  

  想写什么自由发挥

开发经验总结

插件开发要点

1. 合理的架构设计：采用模块化设计，将不同功能分离到不同类中
2. 用户体验优先：提供多种交互方式，满足不同用户的使用习惯
3. 错误处理机制：完善的错误处理和用户提示
4. 性能优化：使用适当的算法和数据结构提高处理效率

遇到的挑战与解决方案

1. 动态菜单实现：VS Code 不支持运行时动态注册菜单项，通过命令面板 实现类似功能
2. 配置文件热重载：使用 FileSystemWatcher 监听文件变化并重新加载配置
3. 复杂模式匹配：使用正则表达式匹配多种代码模式

结语

通过开发 Key Replacer 插件，我们不仅解决了实际开发中的问题，也深入了解了 VS Code 插件开发的技术细节。

---

项目地址：https://gitee.com/z_ciyi/key-replacer-extension

作者：Ciyi

版权声明：本文为原创文章，转载请注明出处。