DEV Community

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

Posted on β€’ Edited on

2

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

Quadratic AI

Quadratic AI – The Spreadsheet with AI, Code, and Connections

  • AI-Powered Insights: Ask questions in plain English and get instant visualizations
  • Multi-Language Support: Seamlessly switch between Python, SQL, and JavaScript in one workspace
  • Zero Setup Required: Connect to databases or drag-and-drop files straight from your browser
  • Live Collaboration: Work together in real-time, no matter where your team is located
  • Beyond Formulas: Tackle complex analysis that traditional spreadsheets can't handle

Get started for free.

Watch The Demo πŸ“Šβœ¨

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

πŸ‘‹ Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay