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.logstatements 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:
- Remove all
console.*calls - Remove unused imports
- 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:
| # | Feature | Why it's cool |
|---|---|---|
| #14 | Auto README Generator | Generate a project README from your folder structure |
| #13 | Focus Mode (Distraction Killer) | Collapse everything non-essential while you code |
| #12 | "Did You Mean?" Fix Suggestions | Typo-catching hints for common mistakes |
| #11 | Coding Session Tracker | Track time spent per file/project |
| #10 | UI Component Preview (React) | Inline previews of React components |
| #9 | Smart Snippet Predictor | Context-aware snippet suggestions |
| #8 | Dead Code Highlighter | Visually flag unreachable code |
| #7 | "Where is this used?" Heatmap | Usage frequency heatmap per function |
| #6 | File Complexity Meter | Cyclomatic complexity score per file |
| #5 | Smart Rename Preview | Preview all rename impacts before applying |
| #3 | Bug Risk Detector | Static heuristics to flag risky code patterns |
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:
- Pick an issue you like
- Comment on it — "I'd like to work on this!"
- 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.
Top comments (0)