摘要本文主要介绍vscode插件开发的流程，以及一些小技巧！开发使用了vscode、node和一些依赖。为了快速预览，我在这个项目中使用了httpserve和socket。我为什么使用套接字？这篇文章会详细说明这个项目的诞生主要是因为懒。在反复反复的工作中，我开始出现了一些问题。累了，一键开发、快速生成、修改方便、模块化的概念很早就诞生了。然而，这一切在登陆页面中都不像在框架中那样容易实现。所以这次偶然遇到了vscode这个插件，可以实现一些功能。我开始了它的奇妙旅程。开发一、准备1、vscode插件开发，我们需要申请微软的开发令牌，用于打包上线使用。没有这个令牌，就无法完成打包！移至：微软vscdeo开发者管理系统创建项目进入个人token页面申请从token中获取token，这里一定要注意复制并保存token，否则需要申请新的token关闭后就找不到了！2、VScode插件制作工具：官方推荐Yeoman和VSCodeExtensionGenerator。使用以下命令安装：//安装自动化工具npminstall-gyogenerator-code//生成开发项目文件yocode//运行_----_╭──────────────────────────────────────────────────╮||│欢迎来到视觉│|--(o)--|│工作室代码扩展│`--------′│生成器！│(_′U`_)╰────────────────────────────╯/___A___\/|~|__'.___.'__′`|°′Y`？您要创建什么类型的扩展？(使用箭头键)>NewExtension(TypeScript)NewExtension(JavaScript)NewColorThemeNewLanguageSupportNewCodeSnippetsNewKeymapNewExtensionPack(上下移动以显示更多选择)//在os系统上，使用向上和下键选择要创建的类型//在win系统中输入1,2,3回车选择至此开发所需的准备工作就绪，生成的工程目录结构如下：├──.vscode//资源配置文件├──CHANGELOG.md//变更记录文件，将显示在vscode插件市场├──extension.js//扩展源代码文件├────jsconfig.json├───package.json//资源配置文件├──README.md//插件介绍文件，将在vscode插件市场展示├──test//测试文件└──vsc-extension-quickstart.医学博士；二、项目配置我们打开package.json文件！1、下图是我们开发出来的最终效果。侧边栏有两个按钮，一个是复制，一个是预览。点击CopyTopic按钮后，有两栏，一栏是模板，一栏是历史项目文件夹的名称。2.下图是我们状态栏的代码。红框1是vscode侧边activity栏的按钮配置代码。里面有名字和图标图片！basket2是点击后的一列，里面有name和要执行的task的id。打开vscode后会执行id对应的程序方法！3.下图是默认的文件夹地址，主要用来获取用户的工程目录！后期用户可以在vscode的settings.json文件中配置，非常方便。4.下图是我们的项目依赖关系。项目依赖分为两部分，一是开发使用，二是项目使用，即打包后需要使用的依赖！这些将被放置在依赖项中。笔者在安装过程中遇到了cnpm安装不成功的情况，用npm安装后就ok了。项目中使用了代码的部分功能！//这里生成的代码是hzcj-project-vs-cli.view当用户点击文件夹名称时会调用该方法createCommand(context,'hzcj-project-vs-cli.view',function(args){if(!liveView.pageIsOpen){cp.exec('开始http://127.0.0.1:8108/index.html');}liveView.socket.emit('message',"http://localhost:8109/"+args+"/index.html")})//这里的代码是raw栏中的项目目录，会在栏中显示，携带方法名vscode.window.registerTreeDataProvider('hzcj-project-vs-view.special',newSpecialTreeData({root:conf.project,command:'hzcj-project-vs-cli.view'}),);2、以下是creat.js文件中的一些代码片段，主要是复制粘贴文件使用！constpath=require('路径');constshell=require('shelljs');constmkdirp=require('mz-modules/mkdirp');module.exports=classDownload{constructor(){}copy(sourceDir,targetDir,option={dir:'',hide:true}){}formatNumber(n){}getDate(){}异步初始化（demoPath,projectPath,pkgName){constself=这;让projectName=self.getDate()+"-"+pkgName;constsourceDir=path.join(projectPath,projectName);等待mkdirp（sourceDir）；self.copy(demoPath,sourceDir);返回源目录；}};3、下面是LiveView.js文件中的一些代码片段，主要是为了快速预览！constfs=require('fs');varhttp=require('http')varsio=require('socket.io')constcp=require('child_process');constvscode=require('vscode');module.exports=classLiveView{constructor(){this.clientServe=nullthis.projectServe=nullthis.socket=nullthis.pageIsOpen=falsethis.conf=vscode.workspace.getConfiguration('hzcj');}初始化（路径）{this.creatClientServe（路径）；this.creatProjectServe();这个.creatSocket();//返回这个；}creatClientServe(path){//客户端窗口服务this.clientServe=http.createServer((req,res)=>{varurl=req.url;letisScoket=url.indexOf('socket.io/?EIO')>-1?真:假;if(url.indexOf('socket.io/?EIO')>-1){返回；}if(url=='/'||url.indexOf('html')>-1&&!isScoket){res.writeHead(200,{'Content-Type':'text/html'});fs.readFile(path+'/src/index.html',function(err,data){if(err){console.error(err);return;}res.end(data);});}elseif(url!='/'&&!isScoket){varsurl=url;vartype=surl.substr(surl.lastIndexOf(".")+1,surl.length)res.writeHead(200,{'Content-type':"text/"+type});fs.readFile(path+"/src"+surl,function(err,data){if(err){console.error(err);return;}res.end（数据）；});}}).listen(8108);//创建thhp构建服务//打开页面cp.exec('starthttp://127.0.0.1:8108/index.html');}creatProjectServe(){this.projectServe=http.createServer((req,res)=>{varurl=decodeURI(req.url);//console.log("==========url=",__dirname,url)//respone.writeHead(200,{'Content-Type':'text/html'});if(url=='/'||url.indexOf('html')>-1){res.writeHead(200,{'Content-Type':'text/html'});fs.readFile(this.conf.project+url,function(err,data){if(err){console.error(err);return;}res.end(data);});}elseif(url!='/'){varsurl=url;vartype=surl.substr(surl.lastIndexOf(".")+1,surl.length)res.writeHead(200,{'内容类型':"文本/"+类型});fs.readFile(this.conf.project+surl,function(err,data){if(err){console.error(err);return;}res.end(data);});}}).listen(8109)}creatSocket(){this.socket=sio.listen(this.clientServe)//监听httpserver//console.log("=====listen===openServer")this.socket.on('connection',()=>{this.socket.emit('message','Serversocketisworking!');this.pageIsOpen=true;this.socket.on('myotherevent',function(data){console.log(data);});this.socket.on('disconnect',function(){//在这里监听断开连接，可以知道是谁断开了连接console.log("=====socket===:disconnected");this.pageIsOpen=false;});});}};
