Building a VS Code Extension — Here's What It Does & Need Your Help

TL;DR — Building Dev Toolkit, an open-source VS Code extension full of developer utilities. There are 11 open issues, all beginner-friendly. Come pick one and ship something real.

The Problem

Every developer has a list of tiny friction points they tolerate every day:

• Manually hunting down leftover console.log statements before a commit
• Forgetting which imports are actually used
• Having no clue how large a folder is until it's too late
• Wondering "where is this function even called?"

None of these are hard problems individually. But nobody had packed them all into one extension. So I built one.

What is Dev Toolkit?

Dev Toolkit is a VS Code extension that bundles essential developer utilities into a single, clean package. It's written in TypeScript and lives right inside your editor.

Here's what it can do right now:

File Size Viewer

Displays the size of any file in the VS Code status bar — formatted in human-readable units (KB, MB, etc.). Also decorates the Explorer panel with per-folder and per-file sizes, with tooltips showing file count.

Console Log Remover

One command. Removes every console.* statement from your JS/TS file — or just from a selected block of code. Perfect pre-commit cleanup.

Unused Import Remover

Scans your JavaScript/TypeScript file and strips out every import that isn't actually referenced. Clean files, no clutter.

One-Click Project Cleanup

Runs three hygiene fixes in a single action:

1. Remove all console.* calls
2. Remove unused imports
3. Trim trailing whitespace

Function Reference Tracker

Locate every reference to a function across your entire workspace. Great for understanding impact before refactoring.

Code Explainer

Select any code block and get an AI-assisted explanation in a dedicated panel. Context-aware and fast.

Read Time Estimator

Shows an estimated read time for JavaScript, TypeScript, and Markdown files in the status bar. Surprisingly useful for docs and long config files.

Code Style Mood

Real-time code quality badges right in your status bar

Hover the badge for a detailed breakdown of line length, naming conventions, comment density, and function complexity.

The Stack

TypeScript    → 81.9%
CSS           → 7.3%
JavaScript    → 6.5%
HTML          → 4.3%

Built using the VS Code Extension API. Scaffolded with yo code, bundled with webpack. No heavy dependencies — just clean VS Code APIs and a bit of TypeScript magic.

What's Coming Next — And Where You Come In

This is where I need your help. There are 11 open feature issues, all tagged good first issue:

Every one of these is scoped, interesting, and genuinely useful. No filler issues.

Why Contribute?

Whether you're a student building your portfolio or an experienced dev looking to give back to open source, this project is a good fit if you want to:

• Work with TypeScript on a real, active codebase
• Learn the VS Code Extension API (very marketable skill)
• Ship a feature used by real developers
• Get your name in the contributors list
• Add a meaningful open-source contribution to your GitHub profile

No prior experience with VS Code extensions is needed. I'll help you get set up.

How to Get Started

# 1. Fork & clone the repo
git clone https://github.com/YOUR_USERNAME/DEV-TOOLKIT.git
cd DEV-TOOLKIT

# 2. Install dependencies
npm install

# 3. Compile it
npm run compile

# 4. Press F5 to launch the Extension Development Host

Full details are in CONTRIBUTING.md.

Then just:

1. Pick an issue you like
2. Comment on it — "I'd like to work on this!"
3. Fork, build, and open a PR

Links

• Repo: github.com/sidkr222003/DEV-TOOLKIT
• Open Issues: github.com/sidkr222003/DEV-TOOLKIT/issues
• Contributing Guide: CONTRIBUTING.md

If you've ever wanted to build something that other developers actually use every day — this is a great place to start. Drop a comment below or open an issue and say hi. Let's build together.