This content originally appeared on DEV Community and was authored by Vijay Gangatharan
This is Part 1 of a 5-part series documenting my personal journey of building the Additional Context Menus VS Code extension – from late-night debugging sessions to shipping a solution that thousands of developers now use daily.
TL;DR 
You know that feeling when you’re copy-pasting code between files for the 50th time today, manually fixing imports, and thinking “there HAS to be a better way”? 
That frustration led me to build Additional Context Menus – a VS Code extension that finally makes right-click menus understand your React, Angular, Express, and Next.js projects. The result? A lightning-fast extension (95.9% smaller bundle! 
) that feels like it should have been built into VS Code from day one.
The Breaking Point: When I Almost Threw My Laptop 
Picture this: It’s 2 AM, I’m refactoring a massive React component for a client deadline, and I need to extract 5 custom hooks into separate files. “Simple enough,” I thought. Boy, was I wrong.
Here’s what my “simple” task looked like in VS Code:
The Copy-Paste Dance – Select function text (did I get all of it?), copy, switch files, scroll to find the right spot, paste, realize I missed the closing brace…
The Import Prayer – Manually type import { useState, useEffect } from 'react', realize it already exists, manually merge them, forget the custom types import…
The Hunt for Broken Code – Red squiggly lines everywhere because half the imports are wrong or missing
The “Oh No” Moment – Realize I accidentally included the JSX return statement in my “utility function”
After 45 minutes of what should have been a 5-minute task, I had this revelation: VS Code in 2024 had the same context menu as Notepad from 1995. 
The Aha Moment: Why Are We Still Living in the Stone Age? 
According to the 2024 Stack Overflow Developer Survey, 87% of developers use VS Code. GitHub’s State of the Octoverse shows JavaScript is the most popular language for the 11th year running. React has 18.6 million weekly NPM downloads.
Yet here we all are, manually copy-pasting code like it’s 1999! 
I started asking fellow developers about their workflows:
“How do you move functions between files?”
“Copy-paste and pray the imports work” – Sarah, React Developer“What’s your biggest VS Code frustration?”
“Import management. It’s 2024, why am I still doing this manually?” – Mike, Full-stack Developer“Ever accidentally broken your code while refactoring?”
“Every. Single. Day.” – The entire Slack channel
The Lightbulb Moment: VS Code Can Do This!
Then it hit me like a ton of bricks. I was sitting there, manually doing what computers are literally designed to do, when VS Code already has incredible APIs for:
Understanding project structure (Workspace API)
Parsing code with AST capabilities (Language Server Protocol)
Managing imports intelligently (TypeScript compiler API)- Detecting frameworks through package.json analysis
Yet when I right-clicked in my React component, I got… “Cut”, “Copy”, “Paste”.
The same three options that existed in Windows 95. 
Are you kidding me? In 2024, VS Code knows I’m in a React project, it knows TypeScript syntax, it can autocomplete my imports, but it can’t help me move a function? That’s like having a Tesla that can drive itself but still requires you to manually shift gears!
The Real Problems: What Keeps Developers Up at Night 
I spent weeks talking to developers, lurking in Discord servers, and diving deep into r/webdev frustration posts. The patterns were crystal clear:
1. Function Extraction Hell 
Every developer has been here:
// You craft this beautiful function inside a component:
const validateEmail = (email: string): boolean => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
};
// But moving it to utils.ts is a nightmare:
// 😰 Where exactly does this function start and end?
// 🤔 Did I copy the entire thing or miss a brace?
// 🔍 Where should I put it in the target file?
// 😵 How do I fix the imports in BOTH files?
// 😭 Why is there a naming conflict with another function?
Sound familiar? According to a study by Cambridge University, developers spend 35% of their time on code navigation and refactoring tasks. That’s almost 3 hours every single day! 
2. Context-Blind Operations 
VS Code is like that friend who’s really smart but completely clueless about social context:
// VS Code can't tell the difference between:
🔴 A React component (belongs in components/)
🔴 An Express route (belongs in routes/)
🔴 A utility function (belongs in utils/)
🔴 A custom hook (belongs in hooks/)
// It treats them all the same: "generic JavaScript function"
// One size fits all... fits nobody! 🤷♂
3. Import Statement Chaos 
The 2023 Developer Experience Report found that developers lose an average of 23 minutes per day just managing import statements. Here’s why:
// Every file move means this manual dance:
import React, { useState, useEffect } from 'react'; // ← Merge with existing?
import { User } from '../types/User'; // ← Already imported?
import { validateEmail } from './utils'; // ← Need to add this
// Multiply by 50+ function moves per day = 😵💫
4. Framework Ignorance 
This one hurt the most. VS Code has enough intelligence to power GitHub Copilot, but it treats every project like vanilla JavaScript:
project/
├── react-app/ // ← Should suggest component operations
├── express-api/ // ← Should suggest route operations
├── angular-app/ // ← Should suggest service operations
└── vanilla-js/ // ← Should suggest basic operations
// Same context menu for completely different development patterns! 😤
The Dream: Context Menus That Actually Understand You
I started dreaming… what if right-clicking on code gave you options that actually got it?
Options that understood:
- What you’re working on (React component vs Express route vs utility function)
Where you are (inside a function vs selecting a code block)
What frameworks you’re using (React, Angular, Express, Next.js)
What makes sense (don’t show React options in Express projects!)
Picture this magical right-click menu:
- Copy Function – “I know exactly where this function starts and ends”
Copy to Existing File – “I’ll handle the imports, you focus on coding”
Move to Existing File – “I’ll move it AND clean up both files perfectly”
Save All – “Because memorizing keyboard shortcuts is so 2010”
Imagine never having to manually fix imports again! 
Why This Actually Matters (It’s Not Just About Speed)
Here’s something most people don’t realize: developer productivity isn’t just about typing faster. It’s about maintaining flow state – that magical zone where code just flows from your brain to the screen.
Research by Mihaly Csikszentmihalyi (the guy who coined “flow state”) shows that knowledge workers are 500% more productive when in flow. But here’s the kicker: it takes an average of 23 minutes to get back into flow after an interruption (UC Irvine study).
Every time you stop coding to manually move functions, you’re not just losing 5 minutes – you’re potentially losing the next 30 minutes of productivity!
In programming, this manifests as:
- Mental context switching – “Wait, what was I trying to build again?”
Error-prone operations – Copy-paste mistakes, import failures, broken references
- Flow state disruption – Breaking deep concentration for mundane tasks
- Cognitive overload – Juggling file operations instead of solving real problems
The Reality Check: Building Something People Actually Want
“How hard could a VS Code extension be?” – Famous last words. 
Turns out, building something that doesn’t suck is surprisingly challenging. The VS Code marketplace is littered with extensions that seemed like good ideas but failed because they:
Performance Killers: 
Have massive bundles (I’m looking at you, 5MB extensions!)
Take forever to load (anything over 1 second feels broken)- Consume ridiculous memory (why does a context menu need 100MB?!)
Accuracy Nightmares:
- Function detection that thinks every
{is a function start - Project detection with more false positives than a COVID test in 2020
Import handling that creates more problems than it solves
Usability Disasters: 
Requiring 30 minutes of configuration before it works
Zero customization options (one size fits nobody)
Breaking existing workflows (why did my keyboard shortcuts stop working?!)
Forgetting that not everyone loves memorizing key combinations
Reliability Catastrophes: 
- Crashing on malformed code (because real code is never perfect)
Failing on edge cases (special characters? 32KB files? Concurrent operations?)
Silent failures with zero error reporting
Randomly different behavior based on moon phases
The bar was set pretty low, but I wanted to build something that felt native to VS Code.
What We Actually Built (The Reveal!) 
After months of late nights, user feedback, and countless iterations, Additional Context Menus evolved into something I’m genuinely proud of:
- A service-oriented architecture that doesn’t make your head hurt
- Framework detection that actually works (React, Angular, Express, Next.js)
- Lightning-fast performance (95.9% smaller bundle than the competition!)
- Smart code analysis without downloading half of npm
- Status bar indicators with cute framework emojis (
▲) 
Optional keyboard shortcuts (disabled by default – we respect your keybindings!)- Enterprise-grade testing (37 tests, 100% success rate, covers edge cases that would break other extensions)
But here’s the real success metric: Users say it feels like VS Code should have shipped with this built-in. 
What’s Coming in This Series
I’m going to take you behind the scenes of this entire journey:
-
Part 2: The architecture decisions that made or broke us (spoiler: regex vs AST was a heated debate!)
-
Part 3: How each feature actually works under the hood (with real code examples)
-
Part 4: The challenges that almost made me quit (and the breakthroughs that saved the day)
-
Part 5:
Lessons learned and what’s coming next (including features I’m excited to build)
Each post includes real code, honest mistakes, and lessons you can apply to your own projects – whether you’re building VS Code extensions or just trying to solve annoying development problems.
Try It For Yourself! 
Don’t take my word for it – see if it actually helps your workflow:
Install from VS Code:
- Open Extensions (Ctrl+Shift+X)
- Search “Additional Context Menus”
- Click Install
- Open any React/Angular/Express project
- Right-click in a .ts/.js file
Or use the command line:
code --install-extension VijayGangatharan.additional-context-menus
Pro tip: Try right-clicking inside a function, then try selecting some code and right-clicking. The context menu is smart enough to show different options!
Let’s Build Better Tools Together 
I built this because I was frustrated. Maybe you’re frustrated with different VS Code limitations. That’s awesome! The dev tool ecosystem gets better when we scratch our own itches.
Drop a comment about:
What VS Code features you wish existed- Development workflow pain points that drive you crazy
- Ideas for extensions you’d love to see
Some of the best features in Additional Context Menus came from user suggestions. Your frustration might be the next great extension!
Coming up next: Part 2 – The Architecture That Made Everything Possible (and why we almost chose completely wrong)
Follow me for more posts about building developer tools that don’t suck!
This content originally appeared on DEV Community and was authored by Vijay Gangatharan