DEV Community

Cover image for Vs-Code Extension - Project Setup and Basic functionalities
Ganesh Raja
Ganesh Raja

Posted on • Updated on

Vs-Code Extension - Project Setup and Basic functionalities

I want to build a simple Pomodoro extension for VS-code. The main reason is I want to store every Pomodo I work on So in future I can find which day was more productive and it will be helpful for me to improve my VSCode extension building Skills as well.

So to get started. We need to Install npm package called yo and set up a new vs-code extension Project. It does the basic setups and creates a folder structure project. we can open the code in VSCode and click F5 to execute the plugin in development mode. It will open a new VS Code. Open command panel and execute Hello world. This is a simple VS Code extension.

I created a new file called pomodo.js inside the folder and created Three major functions.

Start Pomodoro Timer - When the command is executed this will trigger the Work Timer
Start Work Timer - For Every second it updates the VSCode Status Bar to Display the Current Timer. For testing, I kept it as 5 mins.
Start Rest Timer - It will display the rest time similar to Work Timer. Once it's done it will display a message saying Pomodoro is done.

I have attached my pomodo.js for reference here.
Tomorrow will go detailed into code

For full code check Repo simple-pomodoro-timer

const vscode = require("vscode");

let WORK_TIME = 25;
let REST_TIME = 5;

const vsCodeStatusBar = vscode.window.createStatusBarItem(vscode.StatusBarAlignment["Right"], 10);

const startPomodoTimer = () => {
  vsCodeStatusBar.text = "Pomodo Started";
  vsCodeStatusBar.show();
  startWorkTimer();
};
const appendZero = (num) => (num <= 9 ? "0" + num : num);

const updateStatusBar = (min, sec, icon) => {
  vsCodeStatusBar.text = icon + " " + appendZero(min) + " : " + appendZero(sec);
};

const timer = (countDownTime, callEverySecond = null, counterisDone = null, icon = null) => {
  let countDownTimer = countDownTime;
  let timerId = setInterval(function () {
    countDownTimer -= 1000;
    let min = Math.floor(countDownTimer / (60 * 1000));
    let sec = Math.floor((countDownTimer - min * 60 * 1000) / 1000);

    if (countDownTimer <= 0) {
      clearInterval(timerId);
      if (counterisDone) counterisDone();
    } else {
      if (callEverySecond) callEverySecond(min, sec, icon);
    }
  }, 1000);
  // return timerId;
};

const startWorkTimer = () => {
  const pomodoCountDown = 5 * 60 * 1000;
  const tomatodIcon = "🍅";
  timer(pomodoCountDown, updateStatusBar, startRestTimer, tomatodIcon);
};
const pomodoDone = () => {
  vsCodeStatusBar.text = "Pomodo Done!!!";
};

const startRestTimer = () => {
  const restCountDown = 1 * 60 * 100;
  const restIcon = "🌴";
  timer(restCountDown, updateStatusBar, pomodoDone, restIcon);
};

exports.startPomodoTimer = startPomodoTimer;

Enter fullscreen mode Exit fullscreen mode

Top comments (0)