当前位置: 首页 > Web前端 > HTML5

一个vscode插件,帮你高效工作,而我只关心你是否按时吃饭

时间:2023-04-05 18:06:25 HTML5

提醒-我要防止世界被毁灭,保护世界和平,保持体力与PM战斗,以及像我一样热爱工作至于忘记吃饭的优秀程序员的健康,在此献上我刚刚打造的沙雕VSCode插件:Remind-me。主要功能有:吃饭提醒、下班提醒、使用泽峰天气API获取当前天气、下雨提醒带伞、显示未来12小时温度曲线。ctrl+shift+,一键打开沙雕生活它们帮你高效工作,但我只关心你是否按时吃饭。————社交王他们帮你高效工作,但我只关心你是否按时吃饭。——社惠网。googletranslateFeatures提醒你吃饭下班,看看天气提醒你做某事,吃饭或下班等。显示当前天气和温度曲线快速启动:配置项名称|说明|默认提醒-me.defaultCity|拼音和中文(推荐)|南京提醒-me.hefengAppkey|和风天气KEY(免费),每天5000次调用|“”提醒我.lunchTime|用餐时间|11:30remind-me.getOffTime|下班时间|18:00Zephyr天气API每天提供5000次查询,估计是无穷无尽的。.快捷键ctrl+shift+,下雨看Enjoy!开发流程之前:vscodenode.jsnpmweatherdataAPIgenerator-codeyonpmi-gyogenerator-codeprocess开始:yocode选择Javascript或者Typescript,填写项目名称,项目描述,publisher(我已经申请配置好了,你没有初始化时没有),初始化完成后是否初始化git仓库生成目录├─.vscode├─node_modules##依赖文件夹├─test##test│.eslintrc.json│.gitattributes│.gitignore│.vscodeignore│CHANGELOG.md##变更日志│extension.js##入口│jsconfig.json##js配置文件│package-lock.json│package.json##项目配置文件│README.md└─vsc-extension-quickstart.md我们主要关注入口文件extension.js和项目配置文件package.json,//package.json{"name":"remind-me","displayName":"remind-me","description":"提醒你做某事","version":"0.0.1","publisher":"shehuiwang","engines":{"vscode":"^1.25.0"},"categories":[//类别"Other"],"activationEvents":[//触发条件"onCommand:extension.sayHello"],"main":"./extension",//入口文件"contributes":{"commands“:[//真的响应命令{"command":"extension.sayHello","title":"HelloWorld"}]},"scripts":{"postinstall":"node./node_modules/vscode/bin/install","test":"node./node_modules/vscode/bin/test"},"devDependencies":{"typescript":"^2.6.1","vscode":"^1.1.6","eslint":"^4.11.0","@types/node":"^7.0.43","@types/mocha":"^2.2.42"}}//extension.jsconstvscode=require('vscode');functionactivate(context){//package.json中的命令定义在这里);context.subscriptions.push(一次性);//订阅}exports.activate=activate;//当插件被激活时执行这个方法functiondeactivate(){}exports.deactivate=deactivate;//插件停用时执行在这个方法debug中,按F5弹出一个带有扩展开发主机标识的新窗口,在弹出的输入框中输入Helloworldctrl+shift+p回车,即可查看通知消息我们的目标函数是获取城市天气;恶劣天气提醒;显示温度曲线;定时和弹出提醒;自动启动;代码配置文件//package.json{"name":"remind-me","displayName":"Dinner","description":"提醒你做某事,午餐或下班等。","version":"1.0.1","publisher":"shehuiwang","license":"MIT","icon":"icon.png","engines":{"vscode":"^1.25.0"},"repository":{"type":"git","url":"https://github.com/kelrvins/remind-me"},"categories":["Other"],"keywords":["remind","getoffwork","lunch"],"activationEvents":["*"//据说这个配置可以在vscode启动后自动开启,但是我试了一下,触发概率是有点低,我没有找到解决方案。稍后重试],"main":"./extension","contributes":{"commands":[//ctrl+shift+p弹出命令{"command":"extension.remindMe","title":"remindme"}],"configuration":{//设置中的配置项"type":"object","title":"remindmeconfiguration","properties":{"remind-me.defaultCity":{"类型":"string","default":"南京","description":"设置默认城市(如南京或南京)"},"remind-me.hefengAppkey":{"type":"string","default":"","description":"您可以从这里获取您的私钥:https://wx.jdcloud.com/market/datas/26/10610"},"remind-me.lunchTime":{"type":"string","default":"11:30","description":"setlunchtimes"},"remind-me.getOffTime":{"type":"string","default":"18:00","description":"设置下班时间"}}},"keybindings":[{"command":"extension.remindMe","key":"ctrl+shift+,","mac":"ctrl+shift+,"}]},"scripts":{"postinstall":"node./node_modules/vscode/bin/install","test":"node./node_modules/vscode/bin/test"},"dependencies":{"web-request":"^1.0.7"},"devDependencies":{"@types/mocha":"^2.2.42","@types/node":"^7.0.43","eslint":"^4.11.0","typescript":"^2.6.1","vscode":"^1.1.6"}}主要代码注册命令extension.remindMe,并启动定时器,每60秒执行一次,到时间提醒。不知道这个垃圾代码搬运工有没有其他好的解决方案不知道//extension.jsfunctionactivate(context){letcityApi=vscode.commands.registerCommand('extension.remindMe',function(){constconfig=vscode.workspace.getConfiguration('remind-me')constreg=newRegExp(/^([01][0-9]|2[0-3]):([0-5][0-9])$/)constaddZero1=(num,len=2)=>`0${num}`.slice(-len)if((config.lunchTime&®.test(config.lunchTime))||(config.getOffTime&®.test(config.getOffTime))){if(timer)clearInterval(timer)timer=setInterval(function(){constconfigTime=vscode.workspace.getConfiguration('remind-me')const[lh,lm]=configTime.lunchTime.split(':')const[gh,gm]=configTime.getOffTime.split(':')if(lh&&lm&&addZero1(newDate().getHours())==lh&&addZero1(newDate().getMinutes())==lm){getWeatherInfo(configTime.默认城市,1)}如果(gh&&gm&&addZero1(newDate().getHours())==gh&&addZero1(newDate().getMinutes())==gm){getWeatherInfo(configTime.defaultCity,2)}},60000)//一个每分钟执行一次,不是整点,所以时间可能不准确,要不要考虑提前一分钟提醒}if(config.defaultCity){//如果配置项中有默认值,直接使用getWeatherInfo(config.defaultCity)}else{//配置项中没有默认值弹窗供用户填写constoptions={ignoreFocusOut:true,password:false,prompt:'pleaseinputyoucity(eg.beijing或北京),最好在配置文件中填写'}vscode.window.showInputBox(options).then(value=>{if(!value){vscode.window.showInformationMessage('请输入你的城市')return}constcityName=value.trim()getWeatherInfo(cityName)})}})context.subscriptions.push(cityApi)}获取城市天气WebRequest.get(`https://way.jd.com/he/freeweather?city=${encodeURI(cityName)}&appkey=${appkey}`).then(reps=>{})本来我是用axios做网络请求的,开发的时候预览没问题,但是打包成visx安装后,提示commandextension.remindMenotfound,解决这个问题只用了一个小时,然后通过查看开发者工具发现根本原因是Cannotfindmodule"axios"。找了半个小时没找到解决方案,于是找了其他开源插件看代码,发现UsingWebRequest,辛酸泪绘制温度曲线和风力天气每隔3小时提供一次温度数据,通过字符拼接显示温度曲线,效果也不错:/**//extension.js*绘制温度曲线*@param{Array}parm天气数组*/functionrenderTmpLine(parm){letarray=[]letweatherNotice=''parm.forEach(el=>{if(el.cond.code>204&&!weatherNotice){weatherNotice=`,${el.date.substr(8,2)-newDate().getDate()>0?'Tomorrow':'Today'}${el.date.substr(-5,2)}${el.cond.txt}点后`}array.push(el.tmp)})consttmpSigns=['__','','▂','?','▅','▆','▇']consttmpRange={max:Math.max.apply(Math,array),min:Math.min.apply(Math,array)}让tmpLine=''array.forEach(el=>{tmpLine+=tmpSigns[el-tmpRange.min>6?6:el-tmpRange.min]})return(tmpLine+weatherNotice+',max:'+tmpRange.max+'°C,min:'+tmpRange.min+'°C')}获取城市天气/***获取城市天气*@param{string}cityName城市名称*@param{string}operationlunch,offworklogo*/functiongetWeatherInfo(cityName,operation=0){constconfig=vscode.workspace.getConfiguration('remind-me')//获取可配置项中的数据constappkey=config.hefengAppkey?config.hefengAppkey:'YOUR_KEY'//这里是和风天气的KEYWebRequest.get(`https://way.jd.com/he/freeweather?city=${encodeURI(cityName)}&appkey=${appkey}`)。然后(reps=>{letrep=JSON.parse(reps.body)if(rep.code!=10000){vscode.window.showInformationMessage('对不起,请再试一次')return}constweatherData=rep.result.HeWeather5[0]if(weatherData.status!=='ok'){vscode.window.showInformationMessage(`对不起,${weatherData.status}`)返回}consttmpLine=renderTmpLine(weatherData.hourly_forecast)vscode.window.showInformationMessage(`接下来十二小时的温度曲线:${tmpLine}`)constisRain=weatherData.hourly_forecast[0].cond.code>=300&&weatherData.hourly_forecast[0].cond.code<500vscode.window.showInformationMessage(`${weatherData.basic.city},${weatherData.now.cond.txt},${weatherData.now.tmp}°C,接下来的两个小时${weatherData.hourly_forecast[0].cond.txt}${isRain?',请带好雨具':''}`,...[isRain?'Oh':''])//...['Oh']下雨的时候加这个,加个按钮,弹窗不会自动消失,太贴心了,以后再混如果(operation==1){vscode.window.showInformationMessage(`Dinning`)}if(operation==2){vscode.window.showInformationMessage(`Offwork`)}})}发布准备登录VisualStudioTeamServices注册开发账号并登录;新建项目:在右上角头像下的Security中新建accesstokens,注意!!访问令牌只显示一次,以后就找不到了。注意记录,创建accesstoken时一定要选择所有权限,否则发布过程中会报错。设置图标,编辑readme和changeLog,删除一些多余的文件可以上传到ExtensionMarketplace,供其他人下载使用;entervscecreate-publisher[name]其中[name]为新建账号的组织名称,填写邮箱和刚刚创建的Accesstoken输入vscepublish即可以开始上传;当看到Successfullypublished***时,上传成功!!完成附上gayhub:https://github.com/kelrvins/remind-me参考资料:http://jdc.jd.com/archives/212586https://www.cnblogs.com/caipeiyu/p/5507252.html