[VS Code扩展]写一个代码片段管理插件（一）：介绍与界面搭建

• VS Code扩展机制
• 项目搭建
• 创建UI元素
  • 活动栏按钮
  • 主边栏视图
  • 主边栏工具栏按钮
  • 侧边栏右键菜单
  • 编辑器右键菜单
• 项目地址

• [VS Code扩展]写一个代码片段管理插件（一）：介绍与界面搭建
• [VS Code扩展]写一个代码片段管理插件（二）：功能实现

写代码的时候，经常要输入重复的内容，虽然VS Code提供了代码片段功能，但是创建自定义代码片段时，需要写JSON格式的配置，这些JSON文件在用户文件夹下，没有统一的界面管理，而且对于我来说，制表符补全这样的高级功能并不是必需的。

变量映射可以通过内置的映射规则在插入片段时自动生成这些内容。VS Code自带的功能比较单一，我需要一个自定义的变量映射功能，可以自定义Key-Value做为可灵活配置的变量映射。

VS Code提供了一组API，用于自定义或增强软件功能，称之为VS Code插件（或扩展）。

我基于上述的考虑，写一个带有变量映射功能代码片段管理VS Code扩展：SnippetCraft。

VS Code扩展机制

首先需要大致了解VS Code的扩展机制，VS Code可以看成一个框架，可以想象是你车上的仪表台，比如时速表仪表台，中控大屏，灯光、空调控制等独立面板所在的占位。

VS Code这些框架的部分，官方称之为“容器”，整个VS Code由6个容器组成，分别是：活动栏，主边栏，编辑器，辅边栏，面板，状态栏。

每个容器中，包含扩展提供的按钮，或者视图的区域。类似仪表台控制上的控制面板，比如灯光面板上有灯的开关，有些是预留的槽位。通过增加改装件使用这些预留槽位。

这些区域，官方称之为“项目”。常用的项目有侧边栏，编辑器，状态栏，面板上的工具栏区域。扩展可以将项目添加到各种容器中。

此外，VS Code扩展还提供常用的功能，比如数据持久化，文件选择器，输入框，通知弹窗，网页视图等。

VS Code扩展是一个基础功能，通过扩展可以满足软件的所有功能增强，包括内置的核心功能，如文件管理，搜索，Git，调试器，这些都是通过扩展实现的。

VS Code为了体验一致性，禁用扩展中UI元素自定义样式。

项目搭建

请确保已安装 Node.js。使用 Yeoman 和 VS Code 扩展生成器来快速创建扩展项目。首先安装 Yeoman 和生成器：

npm install -g yo generator-code
yo code

项目会自动创建一个HelloWorld扩展。

如果手动创建项目，可以参考下面的目录结构

my-VS Code-extension/
├── .VS Code/
│   └── extensions.json
├── src/
│   └── extension.ts
├── .gitignore
├── package.json
├── tsconfig.json
├── README.md

准备图标，扩展需要一个产品展示图标。图标为128x128像素的PNG格式文件
准备活动栏按钮图标，图标为24x24像素，居中于50x40像素的块内，填充颜色为’rgb(215, 218, 224)’或’#d7dae0’。建议使用SVG格式的图标。

VS Code扩展在package.json中声明“贡献点”，“贡献点”用于描述该扩展可以为VS Code增强哪些功能，请参考官方说明

在package.json文件的contributes节点中，我们添加扩展用到的所有命令：

Command	操作
extension.snippetCraft.searchSnipps	代码片段搜索
extension.snippetCraft.insertSnipps	插入代码片段
extension.snippetCraft.deleteAllSnippets	删除全部代码片段
extension.snippetCraft.createSnipp	创建代码片段
extension.snippetCraft.refreshEntry	刷新代码片段列表
extension.snippetCraft.addEntry	添加代码片段
extension.snippetCraft.editEntry	编辑代码片段
extension.snippetCraft.editTitle	编辑代码片段标题
extension.snippetCraft.deleteEntry	删除代码片段
extension.snippetCraft.insertEntry	插入代码片段
extension.snippetCraft.addKv	添加映射
extension.snippetCraft.refreshKv	刷新映射列表
extension.snippetCraft.deleteKv	删除映射
extension.snippetCraft.editKv	编辑映射

创建UI元素

活动栏按钮

点击此按钮将打开VS Code扩展的主边栏视图。图标和名称一般为产品的Logo和名称

在package.json文件的contributes节点中，添加如下内容：

"viewsContainers": {
      "activitybar": [
        {
          "id": "snippsView",
          "title": "Snippet Craft",
          "icon": "./logo.svg"
        }
      ]
    }

完成活动栏按钮的添加

主边栏视图

主边栏中用于直观地列出代码片段的列表和映射表

在package.json文件的contributes节点中，添加如下内容：

"views": {
    "snippsView": [
    {
        "id": "view.snippetCraft.snippsView",
        "name": "Snippets列表"
    },
    {
        "id": "view.snippetCraft.dictionaryView",
        "name": "映射表"
    }
    ]
},

完成主边栏视图的添加

主边栏工具栏按钮

在package.json文件的contributes节点中，添加如下内容：

"view/title": [
    {
        "command": "extension.snippetCraft.addEntry",
        "group": "navigation",
        "when": "view == view.snippetCraft.snippsView"
    },
    {
        "command": "extension.snippetCraft.refreshEntry",
        "group": "navigation",
        "when": "view == view.snippetCraft.snippsView"
    },
    {
        "command": "extension.snippetCraft.searchSnipps",
        "group": "navigation",
        "when": "view == view.snippetCraft.snippsView"
    },
    {
        "command": "extension.snippetCraft.addKv",
        "when": "view == view.snippetCraft.dictionaryView",
        "group": "navigation"
    },
    {
        "command": "extension.snippetCraft.refreshKv",
        "when": "view == view.snippetCraft.dictionaryView",
        "group": "navigation"
    }
    
    ]
},

完成主边栏工具栏按钮的添加

侧边栏右键菜单

在package.json文件的contributes节点中，添加如下内容：

"view/item/context": [
    {
        "command": "extension.snippetCraft.editTitle",
        "group": "snippet",
        "when": "view == view.snippetCraft.snippsView"
    },
    {
        "command": "extension.snippetCraft.deleteEntry",
        "group": "snippet",
        "when": "view == view.snippetCraft.snippsView"
    },
    {
        "command": "extension.snippetCraft.insertEntry",
        "group": "snippet",
        "when": "view == view.snippetCraft.snippsView"
    },
    {
        "command": "extension.snippetCraft.editEntry",
        "group": "snippet",
        "when": "view == view.snippetCraft.snippsView"
    },
    {
        "command": "extension.snippetCraft.editKv",
        "when": "view == view.snippetCraft.dictionaryView",
        "group": "kveditor"
    },
    {
        "command": "extension.snippetCraft.deleteKv",
        "when": "view == view.snippetCraft.dictionaryView",
        "group": "kveditor"
    }
    ],

完成侧边栏右键菜单的添加

编辑器右键菜单

在编辑器区域右键弹出的上下文菜单中选择“插入Snippet”，可以选择一个已有的片段插入当前光标所在位置

当编辑器中有文本被选中时，上下文菜单的“创建Snippet”会显示，点击时选中的文本将作为代码片段被存储。

"menus": {
    "editor/context": [
    {
        "command": "extension.snippetCraft.createSnipp",
        "when": "editorHasSelection",
        "group": "snippet"
    },
    {
        "command": "extension.snippetCraft.insertSnipps",
        "group": "snippet"
    }
    ],

完成编辑器右键菜单的添加

项目地址

Github:snippet-craft