一個vscode插件，他們幫你高效工做，而我只在意你有沒有按時吃飯

時間  2019-11-05
標籤 一個 vscode 插件 他們 幫你 高效 只在 有沒有 按時 吃飯 简体版
原文   原文鏈接

useage

Remind-me

爲了防止世界被破壞，爲了守護世界的和平，爲了保持力量與 PM 幹架，爲了和我同樣熱愛工做而忘記吃飯的優秀程序員的身體健康，在此你們獻上我剛剛造出來的沙雕vscode插件：Remind-me。 主要功能有：提醒你吃飯下班，使用和風天氣API獲取當前天氣、下雨提醒別忘了帶傘和展現將來12小時的溫度曲線 。html

ctrl+shift+, 一鍵開啓沙雕生活

他們幫你高效工做，而我只在意你有沒有按時吃飯. ——— 社會王

They help you work efficiently, but I only care if you are eating on time. —— shehuiwang. google translatenode

Features

提醒你吃飯下班，順便看看天氣ios

Remind you to do something, eat or get off work, etc. Show current weather and temperature curvegit

Quick start:

配置項

Name | Description | Default程序員

remind-me.defaultCity | 城市名，支持拼音和中文(建議) | 南京
remind-me.hefengAppkey | 和風天氣KEY(免費),每日5000次調用 | 「」
remind-me.lunchTime | 吃飯時間 | 11:30
remind-me.getOffTime | 下班時間 | 18:00github

和風天氣API提供每日5000次查詢，估計 用不完。。web

快捷鍵 ctrl+shift+, 看看有沒有下雨

Enjoy!typescript

development process

before：

  • vscode
  • node.js
  • npm
  • 天氣數據API
  • generator-code
  • yo

npm i -g yo generator-codenpm

process

起步：json

yo code
  • 選擇Javascript或者Typescript，填寫項目名稱、項目描述，publisher(我已經申請並配置好了，你初始化的時候沒有)，是否初始化git倉庫

初始化步驟

  • 初始化完成後生成目錄
├─ .vscode
├─ node_modules ## 依賴文件夾
├─ 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": "remind you do sth",
    "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": "Hello World"
            }
        ]
    },
    "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.js
const vscode = require('vscode');
function activate(context) {
    // package.json 中的命令在這裏定義
    let disposable = vscode.commands.registerCommand('extension.sayHello', function () {
       vscode.window.showInformationMessage('Hello World!');  // 彈出消息
    });
    context.subscriptions.push(disposable); // 訂閱
}
exports.activate = activate; // 插件激活的時候執行本方法
function deactivate() {
}
exports.deactivate = deactivate; // 插件停用的時候執行本方法

debug

按F5將彈出帶有擴展開發主機標識的新窗口，ctrl+shift+p彈出的輸入框中輸入Hello world回車，便可看到通知消息。

  • 咱們的目標功能

    • 獲取城市天氣；
    • 惡劣天氣提醒；
    • 展現溫度曲線；
    • 定時並彈出提醒；
    • 自動啓動；

code

配置文件 
// package.json
{
  "name": "remind-me",
  "displayName": "吃飯飯",
  "description": "Remind you to do something, lunch or get off work, etc.",
  "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",
      "get off work",
      "lunch"
  ],
  "activationEvents": [
    "*"   // 聽說這樣配置就能夠在vscode啓動以後自動開啓，可是我嘗試了下觸發機率有點低，沒找到解決辦法，<del>之後再試吧</del>
  ],
  "main": "./extension",
  "contributes": {
    "commands": [  // ctrl+shift+p 彈出框的命令
      {
        "command": "extension.remindMe",
        "title": "remind me"
      }
    ],
    "configuration": { // 設置中的配置項
      "type": "object",
      "title": "remind me configuration",
      "properties": {
        "remind-me.defaultCity": {
          "type": "string",
          "default": "南京",
          "description": "Set default city (eg.nanjing or 南京)"
        },
        "remind-me.hefengAppkey": {
          "type": "string",
          "default": "",
          "description": "You can get your private key from here: https://wx.jdcloud.com/market/datas/26/10610"
        },
        "remind-me.lunchTime": {
          "type": "string",
          "default": "11:30",
          "description": "set lunch times"
        },
        "remind-me.getOffTime": {
          "type": "string",
          "default": "18:00",
          "description": "set get off work time times"
        }
      }
    },
    "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.js

function activate(context) {
  let cityApi = vscode.commands.registerCommand('extension.remindMe', function() {
      const config = vscode.workspace.getConfiguration('remind-me')
      const reg = new RegExp(/^([01][0-9]|2[0-3]):([0-5][0-9])$/)
      const addZero1 = (num, len = 2) => `0${num}`.slice(-len)
      if ((config.lunchTime && reg.test(config.lunchTime))||(config.getOffTime && reg.test(config.getOffTime))) {   
        if (timer) clearInterval(timer)
        timer = setInterval(function() {
          const configTime = vscode.workspace.getConfiguration('remind-me')
          const [lh, lm] = configTime.lunchTime.split(':')
          const [gh, gm] = configTime.getOffTime.split(':')
          if ( lh && lm &&
            addZero1(new Date().getHours()) == lh &&
            addZero1(new Date().getMinutes()) == lm) {
            getWeatherInfo(configTime.defaultCity,1)
          }
          if (gh && gm &&
            addZero1(new Date().getHours()) == gh &&
            addZero1(new Date().getMinutes()) == gm) {
            getWeatherInfo(configTime.defaultCity,2)
          }
        }, 60000)  //一分鐘執行一次，不是整點的，因此時間可能不許，是否是該考慮下提早一分鐘提醒
      }
      if (config.defaultCity) { // 配置項裏有默認值直接用
        getWeatherInfo(config.defaultCity)
      } else { // 配置項裏沒有默認值彈窗讓用戶填
        const options = {
          ignoreFocusOut: true,
          password: false,
          prompt: 'please input you city (eg.beijing or 北京)，最好在配置文件裏填一下'
        }
        vscode.window.showInputBox(options).then(value => {
          if (!value) {
            vscode.window.showInformationMessage('please input you city')
            return
          }
          const cityName = 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安裝就提示command extension.remindMe not found，爲了解決這個問題剛了一個小時，後來經過查看開發者工具才發現根本緣由是Cannot find module "axios"，剛了半個小時沒能找到解決辦法，因而我找了其餘的開源插件看代碼，發現用的是WebRequest，一把辛酸淚。

繪製溫度曲線

和風天氣提供以3小時爲間隔的溫度數據，經過字符拼接的方式展現溫度曲線，效果還能夠：

溫度曲線

/**
// extension.js

 * 繪製溫度曲線
 * @param {Array} parm 天氣數組
 */
function renderTmpLine(parm) {
  let array = []
  let weatherNotice = ''
  parm.forEach(el => {
    if (el.cond.code > 204 && !weatherNotice) {
      weatherNotice = ` , ${el.date.substr(8, 2) - new Date().getDate() > 0 ? '明天' : '今天'}${el.date.substr(-5, 2)}點後有${el.cond.txt}`
    }
    array.push(el.tmp)
  })
  const tmpSigns = ['__ ', '▁▁ ', '▂  ', '▃ ', '▅  ', '▆  ', '▇  ']
  const tmpRange = {
    max: Math.max.apply(Math, array),
    min: Math.min.apply(Math, array)
  }
  let tmpLine = ''
  array.forEach(el => {
    tmpLine += tmpSigns[el - tmpRange.min > 6 ? 6 : el - tmpRange.min]
  })
  return (tmpLine + weatherNotice + ', 最高: ' + tmpRange.max + '°C, 最低 : ' + tmpRange.min + '°C')
}
獲取城市天氣 
/**
 * 獲取城市天氣
 * @param {string} cityName 城市名
 * @param {string} operation 中午餐、下班 標識
 */
function getWeatherInfo(cityName,operation=0) {
  const config = vscode.workspace.getConfiguration('remind-me') //獲取可配置項中的數據
  const appkey = config.hefengAppkey
    ? config.hefengAppkey
    : 'YOUR_KEY' // 這裏放和風天氣的KEY
  WebRequest.get(`https://way.jd.com/he/freeweather?city=${encodeURI(cityName)}&appkey=${appkey}`).
  then(reps => {
    let rep = JSON.parse(reps.body)
    if (rep.code != 10000) {
      vscode.window.showInformationMessage('sorry please try again')
      return
    }
    const weatherData = rep.result.HeWeather5[0]
    if (weatherData.status !== 'ok') {
      vscode.window.showInformationMessage(`sorry,${weatherData.status}`)
      return
    }
    const tmpLine = renderTmpLine(weatherData.hourly_forecast)
    vscode.window.showInformationMessage(`將來十二小時溫度曲線 ：${tmpLine}`)
    const isRain =
      weatherData.hourly_forecast[0].cond.code >= 300 &&
      weatherData.hourly_forecast[0].cond.code < 500
    vscode.window.showInformationMessage(
      `${weatherData.basic.city}, ${weatherData.now.cond.txt}, ${weatherData.now.tmp}°C,將來兩小時${weatherData.hourly_forecast[0].cond.txt}${isRain ? ' ,請攜帶雨具' : ''}`,
      ...[isRain ? ' 哦哦' : '']  
    ) // ...['哦哦'] 有雨的時候就加上這個，就是加個按鈕彈窗就不會自動消失，我真貼心，之後混不下去了就作產品經理
    if(operation==1){
      vscode.window.showInformationMessage(`吃飯啦`)
    }
    if(operation==2){
      vscode.window.showInformationMessage(`下班啦`)
    }
  })
}

publish

準備工做

圖片描述

  • 在右上角頭像下的Security

圖片描述

中新建一個access tokens，注意！！這個access tokens只顯示一次，之後找不着了，注意記錄，且建立access tokens的時候必定要選擇全部權限，不然發佈過程當中會報錯
圖片描述

發佈

設置好 icon，編輯好 readme 和 changeLog, 再刪除一些多餘的文件就能夠上傳到插件商店Extension Marketplace給其餘人下載使用了；

輸入vsce create-publisher [name]
這裏的 [name] 就是剛剛新建帳號的組織organizations名，填入郵箱和剛剛建立的 Access token

輸入vsce publish 便可開始上傳；

當你看到Successfully published ***的時候，上傳成功！！

finish

附上 gayhub : https://github.com/kelrvins/remind-me

參考資料：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程