这里的序号继承了上面第十一条的效果。句子上会出现你的提示信息，是不是很爽，说干就干，但还是忍不住吐槽官网的例子太粗糙了。您不需要定义命令，因为它的触发规则只需将我们的新hover.js文件悬停即可constvscode=require('vscode');constpath=require('路径');module.exports=vscode.languages.registerHoverProvider('javascript',{provideHover(document,position,token){constfileName=document.fileName;constworkDir=path.dirname(fileName);constword=document.getText(document.getWordRangeAtPosition(position));//console.log(1,document)//console.log(2,position)//console.log(3,token)console.log(4,'这是悬停文本',word)//支持markdown语法returnnewvscode.Hover(`###我只返回1.第一项：-第一个元素-第二个元素2.第二项：-第一个元素-第二个元素`);}});index.js文件如下constvscode=require('vscode');constmessage=require('./message.js');constnavigation=require('./navigation.js');constprogress=require('./progress.js');consthover=require('./hover.js');functionactivate(context){vscode.window.showInformationMessage('插件激活成功！');context.subscriptions.push(消息);context.subscriptions.push（导航）；context.subscriptions.push（进度）；context.subscriptions.push(hover);}module.exports={activate}provideHover支持markdown语法，不用引用hover其他插件也有相关展示，那么vscode会依次展示各个插件的hover效果。可以看到，当我们悬停的时候，我们可以获取到悬停的文字以及它所在的文件位置，那么我们就可以去node_modules里面找到对应的文件，然后获取到它的版本号，更新时间和官网地址，所以package.json中hover上显示细节的那些插件的原理，你！理解！现在！我们可以通过这个快捷方式找到你公司的一些词的具体含义，或者一些codes和ids的含义。十二。定义模板，为自己的团队创建快速开发``在文件中配置模板“contributes”：{“snippets”:[{“language”:“javascript”,“path”:“./snippets/cc.json"//这个是存放模板的文件}]}，./snippets/cc.json内容如下：{"名字写在这里很奇怪，让公司模板统一":{"prefix":"ccleftname","body":["for(xxxxxxxxxxxxxxxxx${2:item}of${1:array}){","\t$0","}"],"description":"我自己定义的cc真棒"}}prefix是快捷方式选择栏显示的名字,也就是你输入的字符匹配的文本体就是我们定义的模板体${1:array}就是说生成模板时光标位置的顺序，当你点击tab时，鼠标会出现在1依次,2,3这三个地方厉害了。有了这个功能，小配合自己开发的插件才叫真正的快速开发代码。十三。左边的标签和结构体只需要两个配置对象，还有你的icon的图片"viewsContainers":{"activitybar":[{"id":"xingqiu","title":"Title,andhoverdisplay","icon":"./images/planet.png"}]},"views":{"xingqiu":[{"id":"c1","name":"非凡：踏天"},{"id":"c2","name":"超越：道无边"},{"id":"c3","name":"超越:道源"},{"id":"c4","name":"超越：永恒"}]}activitybar会根据id调用对应的views视图。如果只有一个物体被完全占据，如果有多个物体，则平分区域。当它展开时，它会抢占该区域。点击折叠它。4.树结构，官网缺少例子，也没有有效的api解释（重点）先把最后的效果图放在这里，大家照着图找吧。。。第一步：新建一棵树。js文件，这里写树视图的代码createTreeView的第一个参数是id，就是我们views中定义的id。2.aNodeWithIdTreeDataProvider方法会生成一个'object'，用于定义和生成树的显示效果。接下来，我们将详细讨论它。showCollapseAll选项全部折叠。关注一个NodeWithIdTreeDataProvider。共有三个键，这里突出显示其中两个键，请看一下。第一个：getChildren方法，可以理解为获取数据源，即树数据，但它的思想是每次点击获取数据的一个子集，如{a:{name:'xx'}}，那么当你点击a时，对象{name:'xx'}将被返回。注意：第一次执行是未定义的，所以我们需要传入第一次执行时定义的树数据。上面的代码：const{c1Tree}=require('./treeData');aNodeWithIdTreeDataProvider(){getChildren:(el)=>{constarr=[];常量树=el||c1树；for(letitemintree){constactiveItem=tree[item];if(typeofactiveItem!=='object'){arr.push(`${item}:${activeItem}`)}else{Object.defineProperty(activeItem,"_cc_key",{get:function(){返回项目},enumberable:false});arr.push(activeItem)}}returnarr},}./treeData.js代码如下，这只是我目前的格式，明白原理，当然你可以自定义自己团队的代码。constc1Tree={'1':{'作者':"lulu",'宠物':{'姓名':'cc','品种':'金毛','年龄':6,}},'2':{'作者':"lulu2",'宠物':{'姓名':'cc2','品种':'金毛','年龄':9,}},'3':'单串'}module.exports={c1Tree,}原理分析getChildren返回的是一个数组，当getChildren的返回值的每一项显示在界面上时，都会传递给getTreeItem进行处理其实这个函数里面我们需要做的就是是将数据处理成getTreeItem方便使用的形式，这里不做具体的接口输出操作。这里我给每一个“对象数据”都赋予了_cc_key的属性，这是为了下面访问方便。下面是getTreeItem的结尾我再说说其他的方法。第一种：getTreeItem方法，用户每点击一个下拉项，都会在该方法中获取该项的配置。getTreeItem:(el)=>{让treeItem={};if(typeofel==='string'){treeItem={label:el,collapsibleState:0,tooltip:"hover:simplestring",//id:newDate().getTime()}}else{treeItem={标签：el._cc_key，collapsibleState:1,tooltip:"hover:expandable",//id:newDate().getTime()}}returntreeItem;},label界面collapsibleState显示的文本是否可展开，即是否有子集可用点击tooltiphover显示的提示消息id，注册一个唯一标识。这个可以省略。自己写的话，一定要保证id的唯一性。vscode.TreeItemCollapsibleState.None是不可折叠的，比直接用0更安全。vscode.TreeItemCollapsibleState。Collapsed是可折叠和可展开的。第三个：getParent获取parent，不过这次用不到，就不详细展开了。完整代码如下：constvscode=require('vscode');const{c1Tree}=require('./treeData');module.exports=vscode.window.createTreeView('c1',{treeDataProvider:aNodeWithIdTreeDataProvider(),showCollapseAll:true});函数aNodeWithIdTreeDataProvider(){return{getChildren:(el)=>{constarr=[];常量树=el||c1树；for(letitemintree){constactiveItem=tree[item];if(typeofactiveItem!=='object'){arr.push(`${item}:${activeItem}`)}else{Object.defineProperty(activeItemm,"_cc_key",{get:function(){returnitem},enumerable:false});arr.push(activeItem)}}returnarr},getTreeItem:(el)=>{让treeItem={};if(typeofel==='string'){treeItem={label:el,collapsibleState:0,tooltip:"hover:simplestring",}}else{treeItem={label:el._cc_key,collapsibleState:1,工具提示:"hover:expandable",}}returntreeItem;},getParent:()=>{返回{}}};}加入_cc_key属性是因为不想在forin的时候被循环出，可以使用'freezeattribute'可以使用禁止循环出属性的方法来禁止获取，汇编在getChildren中将字符串转化为'key:value'的形式，并在对象中加上_cc_key属性，因为后面的对象前面的key是取不到的，需要在这里输入对象。这样一个树结构就完成了。整体逻辑是不是感觉不太顺畅？不知道为什么vscode要这样设计。奇怪有没有更好的方法...15.注册账号和申请Token详细流程1：首先你要有一个账号，在这里登录https://login.live.com/，你需要配置一个邮箱地址，区域选择中国。2：注册后，可以点击这里https://aka.ms/SignupAzureDevOps3：登录后会看到下图，输入你的项目名称和项目介绍，这里我选择public。4：点击createproject跳转至如下页面5：配置Token，点击此处按照图中顺序配置最宽松的条件，因为这样不会出现莫名其妙的错误。这里要注意，点击create之后，页面可能不会刷新，可以选择重复刷新页面，也可以选择重启再做上面的过程，因为这里的token只显示一次，找不到它稍后，所以你必须复制它。6：这里我们多了一个项目16.发布和取消发布vsce是“VisualStudioCodeExtension”的缩写，是一个用于打包、发布和管理VS代码扩展的命令行工具。后面我们会用到这个家伙来打包发布插件。npminstall-gvsce方法1.控制台发布打开控制台，输入命令后面是你的登录人的名字。这里的publisher系统会让我们依次输入name，email，还有刚刚拿到的token。这里我改了名字。这个问题我以后再说。默认是登录状态，但是如果我们以后要切换用户的话需要下面的步骤，那么我们就登录vscelogin（发布者名称）。要登录，开发人员还需要输入令牌。-pxxxxxxxxtoken如果有报错1：在package.json中添加“发布者”：“发布者的名字”，如果没有，我们可以在官网添加这个名字进队2：自己生成的.md文件是不太合格，先把release清一下，release成功后两分钟左右就可以在appstore找到了（哈哈，下面的demo也是我写的demo）。当然，您必须自己安装并尝试。功能都很好。方式二、网站发布这也是官方推荐的发布方式。在这里我将演示（创建发布者帐户）。地址是：https://marketplace.visualstudio.com/manage输入名字，id会自动一致。这个id也是唯一的，所以需要设置一个好名字。你可以在这里定义你的图标，并且可以写上关联的地址信息，发布起来很方便在本网站中，您可以直接配置发布的信息。更新操作如下（拖拽更新）：17.打包发送如果我们直接在代码中发布，不需要手动打包。以下情况需要人工打包。用于网站更新升级插件插件内部，打包命令用于将安装包发送给相应的同学。vsce包会出现一个后缀为vsix的文件，如图。这个时候我们可以把它拖到网站上来更新我们的包。如果你想给别人用，如下图：然后会弹出一个文件选择框，这样就可以安装安装包了。十八。能做什么，就会做什么。你能想象出一本字典，每次你将鼠标悬停在一个id上，它都会自动找到正确的含义。使用代码在团队内快速生成组件。工作中的各种提醒，比如定时提醒你头上的bug数量，这个需要公司给你一个接口。左边一栏是今天的任务安排等等，要做什么？其实你说它强大是对的，但实际上编辑器就是编辑器。有些人想在vscode中做很多功能。最好直接做个桌面或者网站。我们做插件是因为我们要做尽可能多的功能，不需要太多操作的功能，更多定制化的功能。这里的好处是可以获取到开发者当前的编辑状态，所以一些无关紧要的繁琐工作不建议在插件中完成。这次结局就这样了，希望和你一起进步。
