[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 和生成器:

1
2
npm install -g yo generator-code
yo code

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

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

1
2
3
4
5
6
7
8
9
10
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节点中,添加如下内容:

1
2
3
4
5
6
7
8
9
"viewsContainers": {
"activitybar": [
{
"id": "snippsView",
"title": "Snippet Craft",
"icon": "./logo.svg"
}
]
}

完成活动栏按钮的添加

在这里插入图片描述

主边栏视图

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

package.json文件的contributes节点中,添加如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
"views": {
"snippsView": [
{
"id": "view.snippetCraft.snippsView",
"name": "Snippets列表"
},
{
"id": "view.snippetCraft.dictionaryView",
"name": "映射表"
}
]
},

完成主边栏视图的添加
在这里插入图片描述

主边栏工具栏按钮

package.json文件的contributes节点中,添加如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
"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节点中,添加如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

"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”会显示,点击时选中的文本将作为代码片段被存储。

1
2
3
4
5
6
7
8
9
10
11
12
"menus": {
"editor/context": [
{
"command": "extension.snippetCraft.createSnipp",
"when": "editorHasSelection",
"group": "snippet"
},
{
"command": "extension.snippetCraft.insertSnipps",
"group": "snippet"
}
],

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

在这里插入图片描述

项目地址

Github:snippet-craft

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

https://blog.matoapp.net/posts/948f6f1b/

作者

林晓lx

发布于

2024-08-02

更新于

2024-09-11

许可协议

评论