Additional Context Menus - VS Code Extension

🚀 Enhanced right-click context menus for Node.js development with intelligent code operations for React, Angular, Express, Next.js, TypeScript, and JavaScript projects.

🎯 Quick Start

New to Additional Context Menus? Get productive in 2 minutes:

Install the extension from VS Code Marketplace
Open any Node.js project with package.json
Right-click in a TypeScript/JavaScript file to see new context menu options
Try it out: Select some code → Right-click → "Copy Lines to File"

💡 Common Workflows

Workflow	Steps	When to Use
Extract React Component	Select JSX → Right-click → Copy/Move to File	Refactoring large components
Share Utility Function	Click in function → Right-click → Copy Function	Reusing helper functions
Quick Terminal Access	Right-click anywhere → Open in Terminal	Fast directory navigation
Bulk Save Modified Files	Right-click → Save All	Before commits or builds

✨ Features Overview

🎯 Core Functionality

🎯 Copy Function - AST-based function detection and copying with intelligent import handling
📋 Copy Lines to File - Smart code copying with import conflict resolution
✂️ Move Lines to File - Intelligent code moving with automatic cleanup
💾 Save All - Enhanced save functionality with progress feedback and read-only handling
🖥️ Open in Terminal - Cross-platform terminal integration

Extension Management (Command Palette Only)

⚙️ Enable/Disable Extension - Global extension control via command palette

Project Intelligence

🔍 Automatic Project Detection - Detects React, Angular, Express, and Next.js projects
📁 Smart File Discovery - Finds compatible files for code operations
🔧 Context-Aware Menus - Shows relevant options based on file type and project
📝 TypeScript & JavaScript Support - Full support for .ts, .tsx, .js, .jsx files

Code Operations

🧠 Lightweight Code Analysis - Uses optimized regex-based parsing for fast function detection
🔀 Import Management - Merge, duplicate, or skip import statements
📍 Smart Insertion - Intelligent code placement (smart, end, beginning)
💬 Comment Preservation - Maintains code comments during operations

Accessibility

🔍 Dual Access Patterns - Main features accessible via both command palette and right-click menu
⚙️ Management Commands - Enable/disable functionality available via command palette only
🎯 Context-Aware Display - Menus shown based on file type, project detection, and extension state
🌐 Cross-Platform Terminal - Intelligent terminal integration across Windows, macOS, and Linux

📦 Installation

From VS Code Marketplace

Open Visual Studio Code
Press Ctrl+P (Windows/Linux) or Cmd+P (macOS)
Type ext install VijayGangatharan.additional-context-menus
Press Enter

From Command Line

code --install-extension VijayGangatharan.additional-context-menus

🚀 Usage Guide

The extension automatically detects Node.js projects and enhances right-click context menus for supported file types.

🎬 Feature Demonstrations

Copy Function - Before & After

Before: Manual copy-paste with import management headaches

// In ComponentA.tsx - you want to copy this function
const validateEmail = (email: string): boolean => {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
};

After: One right-click, perfect function extraction

// Automatically copied to ComponentB.tsx with imports resolved
import { validateEmail } from './utils/validation';

// Function is now properly imported and ready to use
const isValid = validateEmail(userEmail);

Code Migration - React Component Example

Scenario: Moving a custom hook from component to shared utilities

Before: Complex manual refactoring

// Large component file with embedded hook
const UserProfile = () => {
  // Custom hook buried in component
  const useUserData = (userId: string) => {
    // Complex hook logic...
  };

  return <div>Profile Content</div>;
};

After: Clean separation with smart copy/move

// hooks/useUserData.ts - Moved via context menu
export const useUserData = (userId: string) => {
  // Hook logic properly extracted
};

// UserProfile.tsx - Import automatically managed
import { useUserData } from '../hooks/useUserData';

const UserProfile = () => {
  const userData = useUserData(currentUser.id);
  return <div>Profile Content</div>;
};

🔧 Detailed Feature Usage

Copy Function

Position cursor inside any function (arrow, regular, method, React component)
Right-click → Select "Copy Function"
Automatic detection of function boundaries using AST analysis
Smart copying includes function signature, body, and relevant comments

Supported Function Types:

✅ Regular functions: function myFunc() {}
✅ Arrow functions: const myFunc = () => {}
✅ Class methods: methodName() {}
✅ React components: const MyComponent = () => {}
✅ React hooks: const useCustomHook = () => {}
✅ Async functions: async function fetchData() {}

Copy/Move Code

Select the code block you want to transfer
Right-click → Choose "Copy to Existing File" or "Move to Existing File"
Browse compatible files (smart filtering by extension)
Select target from organized file list with last-modified timestamps
Smart insertion with configurable placement (smart/beginning/end)

Smart Features:

🧠 Import Management: Automatically merges, skips, or handles duplicate imports
📍 Intelligent Placement: Finds optimal insertion point after imports, before exports
💬 Comment Preservation: Maintains code comments during transfer
🔍 File Discovery: Shows only compatible files (.ts↔.tsx, .js↔.jsx)

Save All

Right-click anywhere → Select "Save All"
Progress feedback for operations with 5+ files
Smart filtering skips read-only files (configurable)
Detailed reporting shows success/failure/skipped counts
Error handling continues operation even if some files fail

Open in Terminal (v1.2.0+)

Right-click on any file in the editor
Select "Open in Terminal" from context menu
Smart directory selection based on configuration:
- Parent Directory: Opens folder containing the file
- Workspace Root: Opens project root directory
- Current Directory: Opens the file's exact location

Cross-Platform Terminal Support:

🪟 Windows: cmd, PowerShell, Windows Terminal
🍎 macOS: Terminal.app, iTerm2, custom terminals
🐧 Linux: gnome-terminal, konsole, xfce4-terminal, xterm
⚙️ Custom: Configure any terminal with command templates

#---

🎮 Commands & Shortcuts

Command Palette Integration

Access all features via Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

Additional Context Menus: Enable - Enable the extension
Additional Context Menus: Disable - Disable the extension
Additional Context Menus: Show Output Channel - Open debug logs for troubleshooting
Additional Context Menus: Debug Context Variables - Inspect extension state and context variables
Additional Context Menus: Refresh Context Variables - Reload project detection and refresh context

📋 Requirements

VS Code: Version 1.102.0 or higher
Node.js: Versions 16-24 supported (16+ required, 18+ recommended for development)
Project Type: Node.js project with package.json (for smart detection)
File Types: TypeScript/JavaScript files (.ts, .tsx, .js, .jsx)
Optional: Framework dependencies (React, Angular, Express, Next.js) for enhanced features

⚙️ Extension Settings

🎛️ Complete Configuration Reference

Additional Context Menus provides extensive configuration options:

Core Settings

additionalContextMenus.enabled (boolean, default: true) - Enable or disable the extension
additionalContextMenus.autoDetectProjects (boolean, default: true) - Automatically detect Node.js projects
additionalContextMenus.supportedExtensions (array, default: [".ts", ".tsx", ".js", ".jsx"]) - File extensions where context menus will be shown

Code Copy Settings

additionalContextMenus.copyCode.insertionPoint (string, default: "smart") - Where to insert copied code
- "smart" - Intelligently choose the best location
- "end" - Insert at the end of the file
- "beginning" - Insert at the beginning of the file
additionalContextMenus.copyCode.handleImports (string, default: "merge") - How to handle import statements
- "merge" - Merge with existing imports
- "duplicate" - Allow duplicate imports
- "skip" - Skip import statements
additionalContextMenus.copyCode.preserveComments (boolean, default: true) - Preserve comments when copying code

Save All Settings

additionalContextMenus.saveAll.showNotification (boolean, default: true) - Show notification after saving all files
additionalContextMenus.saveAll.skipReadOnly (boolean, default: true) - Skip read-only files when saving all

Terminal Settings (v1.2.0+)

additionalContextMenus.terminal.type (string, default: "integrated") - Type of terminal to open
- "integrated" - VS Code's built-in terminal
- "external" - Custom external terminal application
- "system-default" - Platform's default terminal
additionalContextMenus.terminal.externalTerminalCommand (string, default: "") - Custom command for external terminal
- Use {{directory}} as placeholder for directory path
- Examples: "wt -d {{directory}}" (Windows Terminal), "open -a iTerm {{directory}}" (iTerm2)
additionalContextMenus.terminal.openBehavior (string, default: "parent-directory") - Which directory to open in terminal
- "parent-directory" - Directory containing the file
- "workspace-root" - Root of the workspace
- "current-directory" - The file's directory

🖥️ Terminal Configuration Examples

Power User Setups

Windows Terminal (Recommended):

{
  "additionalContextMenus.terminal.type": "external",
  "additionalContextMenus.terminal.externalTerminalCommand": "wt -d {{directory}}",
  "additionalContextMenus.terminal.openBehavior": "parent-directory"
}

iTerm2 with Custom Profile (macOS):

{
  "additionalContextMenus.terminal.type": "external",
  "additionalContextMenus.terminal.externalTerminalCommand": "open -a iTerm {{directory}}",
  "additionalContextMenus.terminal.openBehavior": "workspace-root"
}

Linux Development Setup:

{
  "additionalContextMenus.terminal.type": "external",
  "additionalContextMenus.terminal.externalTerminalCommand": "gnome-terminal --working-directory={{directory}}",
  "additionalContextMenus.terminal.openBehavior": "parent-directory"
}

Team/Workspace Recommended Settings:

{
  "additionalContextMenus.enabled": true,
  "additionalContextMenus.autoDetectProjects": true,
  "additionalContextMenus.copyCode.insertionPoint": "smart",
  "additionalContextMenus.copyCode.handleImports": "merge",
  "additionalContextMenus.copyCode.preserveComments": true,
  "additionalContextMenus.saveAll.showNotification": true,
  "additionalContextMenus.terminal.type": "integrated"
}

🚀 Supported Frameworks

🎯 Framework-Specific Intelligence

The extension automatically detects and provides enhanced functionality:

⚛️ React Projects

Smart Component Detection: Recognizes functional and class components
JSX Support: Handles JSX syntax in function extraction and copying
Hook Extraction: Specialized support for React hooks (functions starting with 'use')
Import Optimization: Smart handling of React imports and dependencies

Example Use Cases:

Extract custom hooks from components
Move JSX components between files
Copy utility functions with proper React imports

🅰️ Angular Projects

Service Detection: Identifies Angular services and components
Decorator Support: Preserves Angular decorators during code operations
TypeScript Integration: Full TypeScript support for Angular development
Module Awareness: Understands Angular module structure

Example Use Cases:

Extract services from components
Move utility functions between Angular modules
Copy component methods with proper typing

🚂 Express Projects

Route Handler Detection: Identifies Express route handlers and middleware
Server-side Logic: Optimized for Node.js server development patterns
API Structure: Understands REST API and middleware patterns

Example Use Cases:

Extract middleware functions
Move route handlers between files
Copy utility functions for server logic

▲ Next.js Projects

Full-Stack Support: Handles both client and server-side code
API Routes: Special handling for Next.js API route patterns
SSR/SSG Functions: Supports getServerSideProps, getStaticProps
React Integration: Combines React and Next.js specific features

Example Use Cases:

Extract API route handlers
Move page components and their data fetching logic
Copy utility functions between client and server code

📝 TypeScript & JavaScript

ES6+ Syntax: Full support for modern JavaScript features
Type Safety: Maintains TypeScript types during code operations
Import/Export: Smart handling of ES modules and CommonJS
JSDoc Support: Preserves documentation comments

❓ Troubleshooting & FAQ

🚨 Common Issues & Solutions

Context Menus Not Appearing

Problem: Right-click context menus don't show Additional Context Menus options

Solutions:

Check Project Type: Ensure you're in a Node.js project with package.json
Verify File Type: Context menus appear only in .ts, .tsx, .js, .jsx files
Extension Status: Run Additional Context Menus: Debug Context Variables to check status
Refresh Detection: Use Additional Context Menus: Refresh Context Variables

Function Detection Issues

Problem: "Copy Function" doesn't detect function at cursor

Solutions:

Cursor Position: Ensure cursor is inside the function body or name
Valid Syntax: Function must have valid JavaScript/TypeScript syntax
Supported Types: Check if your function type is supported (see usage guide)
File Extension: Ensure file has correct extension (.ts, .tsx, .js, .jsx)

Terminal Not Opening

Problem: "Open in Terminal" command fails

Solutions:

Check Configuration: Verify terminal settings in VS Code preferences
Platform Support: Ensure your OS is supported (Windows/macOS/Linux)
External Terminal: If using external terminal, verify command syntax
Fallback: Extension automatically falls back to integrated terminal

Import Handling Problems

Problem: Imports not merged correctly when copying code

Solutions:

Configuration: Check additionalContextMenus.copyCode.handleImports setting
File Structure: Ensure proper ES module or CommonJS structure
Import Style: Use consistent import style throughout project

📚 Frequently Asked Questions

Q: Why are keyboard shortcuts disabled by default? A: To prevent conflicts with existing VS Code shortcuts. Use Check Keybinding Conflicts command before enabling.

Q: Can I use this extension in non-Node.js projects? A: The extension requires a Node.js project with package.json for smart detection. Basic file operations might work without it.

Q: Does this work with other frameworks like Vue or Svelte? A: Yes! The extension detects Vue and Svelte projects and provides basic functionality. Full framework-specific features are planned.

Q: How does the extension handle large files? A: The extension is optimized for performance and can handle large files. Progress indicators appear for operations with 5+ files.

Q: Can I customize where code gets inserted? A: Yes! Configure insertionPoint to "smart" (default), "beginning", or "end" in settings.

🔍 Debugging Steps

Enable Debug Output: Additional Context Menus: Show Output Channel
Check Extension State: Additional Context Menus: Debug Context Variables
Refresh Detection: Additional Context Menus: Refresh Context Variables
Review Configuration: Check all settings in VS Code preferences
Report Issues: Use GitHub Issues with debug output

🐛 Known Issues & Limitations

Project Detection: Context menus only appear in Node.js projects with package.json
Syntax Requirements: Function detection requires valid JavaScript/TypeScript syntax
Import Merging: Complex import scenarios may require manual adjustment
Large Files: Very large files (>10MB) may experience slower function detection

Reporting Issues: Please report problems on our GitHub repository with:

VS Code version
Extension version
Debug output from Show Output Channel
Steps to reproduce

Release Notes

See CHANGELOG.md for detailed release notes.

[1.2.0] - Latest

🖥️ Cross-Platform Terminal Integration: Right-click "Open in Terminal" with intelligent platform detection
🔧 Three Terminal Types: Integrated, External, and System Default with automatic fallbacks
⚙️ Configurable Directory Behaviors: Parent directory, workspace root, or current directory options
🌐 Robust Cross-Platform Support: Windows (cmd/PowerShell), macOS (Terminal.app), Linux (auto-detection)
🛠️ Enhanced GitHub Infrastructure: Updated templates, issue tracking, and comprehensive wiki
📚 Custom External Terminal Support: User-configurable commands with directory placeholders

[1.1.0] - Previous Release

📊 Status Bar Integration: Visual project status indicators with framework-specific icons
🔧 Enhanced Command System: New debug and management commands for better control
⚙️ Expanded Configuration: Enhanced settings for project detection and status management

[1.0.0] - Initial Release

Enhanced right-click context menus for Node.js development
Support for React, Angular, Express, Next.js projects
TypeScript and JavaScript intelligent code operations
Copy Function feature with AST-based function detection
Copy to Existing File with smart import handling
Move to Existing File with conflict resolution
Save All functionality with progress feedback

⚡ Performance & Reliability

🚀 Optimized for Professional Development

Build Performance:

⚡ Lightning Fast Builds: esbuild compilation in ~1 second (20x faster than webpack)
📦 Minimal Bundle Size: 47.86KB production bundle (500KB+ reduction from Babel removal)
🔄 Instant Rebuilds: Near-instant watch mode for development
🎯 Smart Bundling: Tree-shaking eliminates unused dependencies

Runtime Performance:

🧠 Intelligent Caching: Project detection and file discovery results cached
📊 Memory Efficient: Optimized for large codebases and complex project structures
⚡ Fast Function Detection: Regex-based parsing for millisecond response times
🔄 Background Processing: Non-blocking operations don't interrupt coding

🛡️ Enterprise-Grade Quality Assurance

Comprehensive Testing:

🧪 Streamlined Test Suite: E2E testing with core functionality validation
✅ High Success Rate: Comprehensive coverage with automated test infrastructure
🎯 Edge Case Coverage: Large files, special characters, rapid operations
📈 Performance Testing: Optimized testing with minimal extension packages (85.5% size reduction)
⚙️ Configuration Validation: Tested with invalid values and extreme configurations

Reliability Engineering:

🛡️ Error Boundary Protection: Continues working with malformed code
🔄 Graceful Degradation: Handles unsupported files without crashes
⚡ Concurrent Safety: Multiple commands execute simultaneously without conflicts
🎛️ Robust Configuration: Validates and sanitizes all user settings

Code Quality Standards:

📝 TypeScript Strict Mode: Type safety and compile-time error detection
🎨 ESLint Compliance: Strict linting rules for code consistency
✨ Prettier Formatting: Consistent code style across entire codebase
🔬 Production Tested: Extensively validated in real-world environments

🏗️ Technical Architecture

🎯 Service-Oriented Design

Built with clear separation of concerns and enterprise-grade patterns:

🎮 Core Managers

ExtensionManager: Coordinates lifecycle and component initialization
ContextMenuManager: Handles command registration and menu interactions

🔧 Specialized Services (Singleton Pattern)

ProjectDetectionService: Detects Node.js projects and frameworks (React, Angular, etc.)
ConfigurationService: Manages settings and real-time configuration changes
FileDiscoveryService: Discovers compatible files with smart filtering
FileSaveService: Handles bulk save operations with progress feedback
CodeAnalysisService: Lightweight regex-based function detection (replaces Babel AST for 500KB+ bundle reduction)
TerminalService: Cross-platform terminal integration with three modes (integrated/external/system-default)

⚡ Performance Optimizations

Intelligent Caching: Project detection and file discovery results
Lazy Loading: Services initialize only when needed
Background Processing: Non-blocking operations
Memory Management: Automatic cache cleanup on workspace changes

🔒 Reliability Patterns

Error Boundaries: Graceful handling of malformed code
Fallback Mechanisms: Automatic degradation for unsupported scenarios
Event-Driven: Reactive updates to workspace and configuration changes
Resource Cleanup: Proper disposal of all resources and listeners

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for detailed guidelines.

🛠️ Development Setup

Prerequisites: Node.js 16-24 required for development

# 1. Clone and setup
git clone https://github.com/Vijay431/additional-contexts-menu.git
cd additional-contexts-menu
npm install

# 2. Build and test
npm run build
npm test

# 3. Launch development environment
# Press F5 in VS Code to launch Extension Development Host

📋 Available Development Commands

Command	Description	Performance
`npm run build`	Build extension using TypeScript esbuild config	⚡ ~1 second
`npm run watch`	Watch mode for development	🔄 Instant rebuilds
`npm run package`	Production build with optimizations	📦 47.86KB output
`npm run lint`	Run ESLint on src directory	🎨 Code quality
`npm run format`	Format code using Prettier	✨ Consistent style
`npm test`	Default optimized testing with minimal extension package	🧪 85.5% smaller, faster
`npm run test:full`	Full project testing with complete environment	🔄 Backwards compatibility
`npm run create-minimal`	Create minimal extension package for testing	📦 1MB vs 250MB

📄 License

This extension is licensed under the MIT License.

👨‍💻 Developer

Vijay Gangatharan

🙏 Acknowledgments

Special thanks to:

The VS Code Extension API team for excellent documentation
The TypeScript and JavaScript developer communities
All contributors and users who provide feedback and suggestions

🚀 Enjoy productive coding with Additional Context Menus! 🚀

If this extension helps your workflow, please consider leaving a review ⭐

Additional Context Menus

Vijay Gangatharan

Additional Context Menus - VS Code Extension

🎯 Quick Start

💡 Common Workflows

✨ Features Overview

🎯 Core Functionality

Main Features (Command Palette + Right-Click Menu)

Extension Management (Command Palette Only)

Project Intelligence

Code Operations

Accessibility

📦 Installation

From VS Code Marketplace

From Command Line

🚀 Usage Guide

🎬 Feature Demonstrations

Copy Function - Before & After

Code Migration - React Component Example

🔧 Detailed Feature Usage

Copy Function

Copy/Move Code

Save All

Open in Terminal (v1.2.0+)

🎮 Commands & Shortcuts

Command Palette Integration

📋 Requirements

⚙️ Extension Settings

🎛️ Complete Configuration Reference

Core Settings

Code Copy Settings

Save All Settings

Terminal Settings (v1.2.0+)

🖥️ Terminal Configuration Examples

Power User Setups

🚀 Supported Frameworks

🎯 Framework-Specific Intelligence

⚛️ React Projects

🅰️ Angular Projects

🚂 Express Projects

▲ Next.js Projects

📝 TypeScript & JavaScript

❓ Troubleshooting & FAQ

🚨 Common Issues & Solutions

Context Menus Not Appearing

Function Detection Issues

Terminal Not Opening

Import Handling Problems

📚 Frequently Asked Questions

🔍 Debugging Steps

🐛 Known Issues & Limitations

Release Notes

[1.2.0] - Latest

[1.1.0] - Previous Release

[1.0.0] - Initial Release

⚡ Performance & Reliability

🚀 Optimized for Professional Development

🛡️ Enterprise-Grade Quality Assurance

🏗️ Technical Architecture

🎯 Service-Oriented Design

🎮 Core Managers

🔧 Specialized Services (Singleton Pattern)

⚡ Performance Optimizations

🔒 Reliability Patterns

🤝 Contributing

🛠️ Development Setup

📋 Available Development Commands

📄 License

👨‍💻 Developer

🙏 Acknowledgments