记一次超详细的前端分享会《vscode插件》写作实战》（上）记录了我在群里的技术分享，有相同需求的同学可以参考分享。整个过程大约需要77分钟。vscode我们战友vscode本身就是用浏览器实现的，使用的技术是Electron。可以说vscode本身对我们前端工程师是非常友好的，vscode上有很多优秀的插件供开发者使用，那么大家有没有想过开发一款适合自己团队的插件呢？写文章之前在网上找了很多资料，但是视频太少了。官网一直没有做好，完全中文。文章还是有的，但是给出的例子大多不好跑。读者需要自己配置一堆东西。官网甚至在github上提供了一套例子，但是都是用ts写的，有些运行有问题。里面的思维逻辑和写作方法不适合初学者，所以在这里写了一个比较通俗易懂的分享教程，希望能让刚入门的同学学得更好。起身吧，废话不多说，一步步探索吧。2.环境准备。前端就不用说了gitnpminstall-gyogenerator-code安装开发工具。这个哟是为了帮助我们创建项目。你可以理解为cli初始化项目的yo代码。虽然很短，但却是真的。这里我们需要选择要初始化的项目。这里主要说说插件部分，ts不是讨论的重点，所以选择第二种JavaScript。如果选择第一种，就是使用ts开发插件。输入一个插件名，package.json中的displayName也会变成()中的名字，项目名也是文件夹名，package.json中的name属性也会变成这个插件的描述-ininput，项目名也是文件夹名，package.json中的description属性也会变成这个来启动js文件中的语义检测（可以不用），jsconfig.json中的compilerOptions.checkJs也会变成true是否初始化git仓库选择自己喜欢的包管理方式完成以上步骤后，我们就会得到一个简单的工程。为了让一些第一次做插件的同学能够上手，这里目录结构暂时不做改动，下面介绍配置后，一起优化一下本项目的结构。三。官网第一个例子可能不太适合入门时理解extension.js。该文件是初始项目的入口文件。我们的故事就在这里展开。先把里面的评论全部清理一下，我会一一梳理的。解释这个基本结构。初始化有点乱，可以把下面的代码贴进去，看起来会舒服很多。constvscode=require('vscode');functionactivate(context){//1:这里是插件激活时的操作console.log('我已经激活了！！解解解解...')//1:定义一个命令(vscode.commands)//2:lulu.helloWorld可以把它当作idletdisposable=vscode.commands.registerCommand('lulu.helloWorld',function(){//3:触发弹出框vscode.window.showInformationMessage('第一个demo弹出信息！');});//4:将这个对象放到上下文中，使其生效context.subscriptions.push(disposable);}//5:插件销毁时调用的方法，比如清除一些缓存，释放一些内存函数deactivate(){}//6：工作比较忙，当然需要exportmodule.exports={activate,deactivate}上面每一行代码都做了详细的标注，然后我们按F5进入调试模式如图所示。上面会出现一个操作栏，以后我们会经常处理最后两个。系统为我们打开了一个新的窗口。这个窗口默认集成了我们当前正在开发的插件项目。下面还会有一个调试平台，会出现我们插件中console.log打印的信息。这里。官网上的这个例子需要我们ctrl+shirt+p调出输入框，然后在里面输入hellow，然后如图用力敲回车，喊上帝之手，还有bgm会在左下角响起会有这样一个弹出项，这个例子就完成了怎么配置！！我不同意他的配置方法。就是package.json中的package.jsonactivationEvents:在什么情况下，激活这个插件，就是打印一个奇怪的笑容。activationEvents.onCommand：在某个命令下激活（还有很多其他条件后面会具体列出）定义命令onthisidtofindthiscommand)title:command语句（见下图），所以在extension.js中指定了registerCommand('lulu.helloWorld'，执行命令Id时，应该执行的操作！让disposable=vscode.commands.registerCommand('lulu.helloWorld',function(){//3:触发弹框vscode.window.showInformationMessage('第一个demo弹出信息！');});题目中这个例子不太好是因为我们很少用vscode命令做某项操作，所以不会很形象的把我们带进去4.项目结构小改+提示类型一个扩展。'是的，所以我们要稍微修改一下，老朋友src已经出来了，毕竟以后要封装很多命令和操作，工程化是必要的。在最外层新建一个src文件夹extension.js，重命名为index.js，放入src文件夹，并在.package.json新建“directory.md”文件，完善插件的引入，保证最快速的了解项目新建message.js文件，放置弹窗信息code.index文件：只负责各种函数的导出和导入，不做具体操作constmessage=require('./message.js');functionactivate(context){context.subscriptions.push(message);}module.exports={activate}message.js触发各种提示框constvscode=require('vscode');module.exports=vscode.commands.registerCommand('lulu.helloWorld',function(){vscode.window.showInformationMessage('第一个demo弹出信息！');vscode.window.showWarningMessage('第一个警告信息')vscode.window.showErrorMessage('第一个错误信息！'）;}）;directory.md（这个要随时更新，不要偷懒）#目录1.索引入口文件2.消息提示信息插件3.效果如下：5.激活时机由于性能方面的考虑，我们的组件并不总是有效的，也就是说，我们的组件直到相应的时间才被激活。比如遇到js文件才会生效，遇到scss文件才会生效，只有某个命令才会生效等等情况。在package.json的activationEvents数组属性中修改。这只是一种常用的类型。具体可以去官网文档查看。"activationEvents":["onCommand:hello.cc",//执行hello命令时激活组件"onLanguage:javascript",//只有当是js文件时才激活组件（可以做js代码检测插件）in)"onLanguage:python",//当是py文件时"onLanguage:json","onLanguage:markdown","onLalanguage:typescript","onDebug",//这种生命周期也有"*","onStartupFinished"],"*"进来的时候激活，因为随时都有（不推荐这样）。OnStartupFinished友好的太多了，相当于但是是延迟执行，不会影响启动速度，因为是在浏览器启动后调用的（如果非要用""，可以用这个代替）。有个坑这里比如你有a,b两个命令，把a命令设置为触发时间，那么如果你先执行b命令，就会报错，因为你的插件还没有激活。六.生活cycle和其他库一样，生命周期是必不可少的（来自官网）onLanguageonCommandonDebugonDebugInitialConfigurationsonD??ebugResolveworkspaceContainsonFileSystemonViewonUrionWebviewPanelonCustomEditor*onStartupFinished七.window和mac的区别我们知道window和mac的大小写不一样，mac使用command键更多的。这里我将分别介绍一下快捷键。在`contributes`属性中"keybindings":[{"command":"hello.cc","key":"ctrl+f10","mac":"cmd+f10","when":"editorTextFocus"}]，八。thiswhen属性还有其他地方用到，这里提一下。以下是比较常用的。具体需要去官网查看，毕竟太多了！1.当编辑器获得焦点时"when":"editorFocus"2.编辑器文本获取焦点"when":"editorTextFocus"3.当编辑器获取焦点和四个js文件时"when":"editorFocus&&resourceLangId==javascript"4.后缀不是.js"when":"resourceExtname!=.js"5.仅在Linux和Windows环境下有效"when":"isLinuxx||isWindows"1.要正确理解when，它不是一个字符串，它是一个true或false的boolean，写成字符串会被vscode解析，所以when可以直接传true或false，需要注意这里就是when:"true"when:"false"2、从第一篇文章我们可以看出editorLangId其实是一个runtimecontext的变量，是文件类型名的常量。参考资料：https：//code.visualstudio.com...9.位置左侧，右上，上下菜单这里只介绍一下，最常用和好用的这里只介绍一下。通过这篇文章学到了很多边科知识，你可以轻松自学①.鼠标右键新建一个navigation.js文件，用来显示我们的功能是否有效，引入constvscode=require('vscode');constmessage=require('./message.js');constnavigation=require('./navigation.js');functionactivate(context){vscode.window.showInformationMessage('插件加载成功活性！'）;context.subscriptions.push(消息);context.subscriptions.push(navigation);}module.exports={activate}constvscode=require('vscode');module.exports=vscode.commands.registerCommand('lulu.nav',function(){letday=newDate();day.setTime(day.getTime()+24*60*60*1000);letdate=day.getFullYear()+"-"+(day.getMonth()+1)+"-"+day.getDate();vscode.window.showInformationMessage(`明天是：${日期}`);});上面是一个上报明天日期的函数，当然我们可以在这里请求后台接口调用今天的人员安排表等接口。在package.json导航配置中添加contributes属性。1：定义一个命令，然后定义触发这个命令的快捷方式"commands":[{"command":"lulu.nav","title":"点我导航"}],2:定义导航内容,并绑定点击事件"menus":{//在编辑器的内容区"editor/context":[{"when":"editorFocus",//你懂的"command":"lulu.nav",//引用命令"group":"navigation"//放在导航的顶部}]}②.其实右上按钮很少被插件使用，只是这里的市场没有被占领。想开发插件的同学可以带头占。"menus":{"editor/title":[{"when":"editorFocus",//你懂的"command":"lulu.nav",//引用命令"group":"navigation"//放在顶部导航}]}③。左侧导航栏，（我决定用下面的tree讲这个，因为这是重点）十。加载进度条（官网示例模糊）加载是一个很常用的功能，但是官网的示例确实不够友好。本着不希望别人踩到自己踩过的坑的原则，这里介绍一下进度条的实际使用方法。老套路定义command{"command":"lulu.progress","title":"Showprogressbar"}为了方便，我们也定义在右键菜单中{"when":"editorFocus","command":"lulu.progress","group":"navigation"}创建一个新的progress.js文件constvscode=require('vscode');module.exports=vscode.commands.registerCommand('lulu.progress',function(){vscode.window.withProgress({location:vscode.ProgressLocation.Notification,title:"加载进度xxxx...",cancelable:true},(progress)=>{//初始化进度progress.report({increment:0});setTimeout(()=>{progress.report({increment:10,message:"努力工作..”});},1000);setTimeout(()=>{progress.report({increment:40,message:"Soon..."});},2000);setTimeout(()=>{progress.report({increment:50,message:"Thisistheend..."});},3000);constp=newPromise(resolve=>{setTimeout(()=>{resolve();},5000);});returnp;})});vscode.window.withProgress第一个参数是配置，第二个参数是操作vscode.ProgressLocation.Notification的源信息，让用户知道是哪个插件的progressbartitle加载框的标题cancelable是否可以取消progress.report初始化进度消息title后面拼写的字符作为promise返回，所以调用resolve结束进度条也是一个常用的基础函数。用好，让你的插件更友好，可能是字数和图片有点多，现在写的有点卡，只能跳到下一部分继续写了。
