wordpress阿里巴巴国际站,wordpress 重置主题,表格可以做网站么,网站维护要多久文章目录 VS Code扩展机制项目搭建创建UI元素活动栏按钮主边栏视图主边栏工具栏按钮侧边栏右键菜单编辑器右键菜单 项目地址 [VS Code扩展]写一个代码片段管理插件#xff08;一#xff09;#xff1a;介绍与界面搭建[VS Code扩展]写一个代码片段管理插件#xff08;二一介绍与界面搭建[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
