🚀 DevSnip Pro - The Ultimate Developer Productivity Extension

⚡ The ultimate toolkit for API testing, MongoDB connections, console log cleanup, and snippet management in VS Code.

DevSnip Pro is a comprehensive Visual Studio Code extension designed to supercharge your development workflow. Whether you're building web applications, working with databases, or managing code snippets, DevSnip Pro provides all the essential tools you need in one powerful package.

✨ Key Features

DevSnip Pro combines multiple essential development tools into one seamless extension:

Feature	Description	Benefit
🌏 REST API Testing	Professional API client built into VS Code	Test endpoints without leaving your editor
💽 MongoDB Integration	Direct database connectivity and querying	Execute queries and view results in real-time
🧹 Console Log Cleanup	Intelligent code cleanup automation	Remove debug logs with one click
📸 Code Snapshots	Beautiful code sharing made simple	Create stunning visual code snippets
🧰 Advanced Tools Hub	8 professional developer utilities	Regex builder, JSON formatter, hash generator, and more
✨ Custom Snippets	Personal snippet library management	Create, organize, and share your code templates
📜 500+ Pre-built Snippets	Extensive collection across 15+ technologies	Instant access to common patterns and boilerplate
🎯 Activity Bar Integration	Quick access through VS Code sidebar	All features available with one click

🎨 Supported Technologies

DevSnip Pro provides comprehensive snippet libraries and tools for modern development:

🌐 Frontend Technologies

🎨 CSS Frameworks

⚙️ Backend & Database

📱 Mobile Development

Complete Language Support:

Frontend: JavaScript, TypeScript, React, HTML, CSS, Vue.js
Backend: Node.js, Python, PHP, Java, C#, Go, Ruby
Mobile: Flutter/Dart, Swift, Kotlin
Frameworks: Bootstrap, Tailwind CSS, React Query, Redux, React Router
Database: MongoDB, SQL
Others: JSON, YAML, Markdown, Shell Scripts, and more

🚀 Installation

Method 1: VS Code Marketplace (Recommended)

Open VS Code
Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
Search for "DevSnip Pro"
Click "Install" on the extension by Sayaib Sarkar
Reload VS Code if prompted

Method 2: Command Line

code --install-extension sayaib.hue-console

Method 3: Manual Installation

Download the .vsix file from the VS Code Marketplace
Open VS Code
Press Ctrl+Shift+P (Cmd+Shift+P on Mac)
Type "Extensions: Install from VSIX"
Select the downloaded file

🎯 Quick Start Guide

Step 1: Locate DevSnip Pro

After installation, look for the DevSnip Pro icon in VS Code's Activity Bar (left sidebar).

Step 2: Access Features

Click on the DevSnip Pro icon to open the extension panel with all available tools.

Step 3: Start Using

Choose any feature from the organized interface:

🚀 Create Custom Snippets - Build your personal code library
🛢 REST API Client - Test your APIs
🛠️ Console Log Cleanup - Clean your code
📸 Code Snapshots - Share beautiful code images
🧰 Advanced Tools Hub - Access developer utilities

Alternative Access Methods

Command Palette:

Press Ctrl+Shift+P (Cmd+Shift+P on Mac)
Type "DevSnip" to see all available commands
Select the feature you want to use

Context Menu:

Right-click in any code file to access context-specific features

📖 Feature Documentation

🌏 REST API Testing

Professional API client built directly into VS Code for seamless endpoint testing.

Features:

✅ Support for all HTTP methods (GET, POST, PUT, DELETE, PATCH, etc.)
✅ Request/response history tracking
✅ Environment variables support
✅ Beautiful JSON syntax highlighting
✅ Response time monitoring
✅ Status code validation

How to Use:

Click DevSnip Pro icon in Activity Bar
Select "🛢 REST API Client"
Enter your API endpoint URL
Choose HTTP method
Add headers and body (if needed)
Click "Send Request"
View formatted response with syntax highlighting

Example:

// Request
POST https://api.example.com/users
Content-Type: application/json

{
  "name": "John Doe",
  "email": "john@example.com"
}

// Response
{
  "id": 123,
  "name": "John Doe",
  "email": "john@example.com",
  "created_at": "2024-01-15T10:30:00Z"
}

💽 MongoDB Integration

Direct database connectivity for seamless MongoDB operations within VS Code.

Features:

✅ Connect to MongoDB databases
✅ Execute queries in real-time
✅ Built-in aggregation pipeline support
✅ Query result visualization
✅ Connection string management
✅ Database and collection browsing

How to Use:

Open Command Palette (Ctrl+Shift+P)
Type "DevSnip Pro: MongoDB"
Enter your MongoDB connection string
Browse databases and collections
Execute queries and view results

Example Queries:

// Find documents
db.users.find({ status: "active" })

// Aggregation pipeline
db.orders.aggregate([
  { $match: { status: "completed" } },
  { $group: { _id: "$customerId", total: { $sum: "$amount" } } }
])

🧹 Console Log Cleanup

Intelligent automation to clean up console.log statements from your codebase.

Features:

✅ Project-wide console.log detection
✅ One-click removal with preview
✅ Selective deletion options
✅ Multiline console.log support
✅ Preserves important logs
✅ Undo functionality

How to Use:

Open Command Palette (Ctrl+Shift+P)
Type "DevSnip Pro: List and Remove Console Logs"
Wait for project analysis
Review detected console.log statements
Select logs to remove or click "Remove All"
Confirm deletion

Before:

function calculateTotal(items) {
  console.log('Starting calculation'); // Debug log
  let total = 0;
  console.log('Items:', items); // Debug log
  
  items.forEach(item => {
    console.log('Processing item:', item); // Debug log
    total += item.price;
  });
  
  console.log('Final total:', total); // Debug log
  return total;
}

After:

function calculateTotal(items) {
  let total = 0;
  
  items.forEach(item => {
    total += item.price;
  });
  
  return total;
}

📸 Code Snapshots

Create beautiful, shareable images of your code with customizable styling.

Features:

✅ Stunning visual code snapshots
✅ Multiple theme options
✅ Customizable styling
✅ Export in various formats
✅ Perfect for documentation and social sharing
✅ Syntax highlighting preservation

How to Use:

Select the code you want to capture
Right-click and choose "📸 DevSnip Pro: Create a Code Snapshot"
Customize theme and styling options
Export or copy the generated image

Perfect for:

📚 Documentation
🐦 Social media sharing
📝 Blog posts and tutorials
👥 Team presentations
📖 Code reviews

🧰 Advanced Developer Tools

Comprehensive suite of 8 professional utilities for common development tasks.

Tool	Purpose	Key Features
🔍 Regex Builder & Tester	Build and test regular expressions	Real-time matching, explanations
📝 JSON/XML Formatter	Format and validate data structures	Syntax highlighting, minification
🔐 Hash Generator	Generate cryptographic hashes	MD5, SHA-1, SHA-256, and more
🔤 Base64 Encoder/Decoder	Encode/decode Base64 strings	File and text support
🎨 Color Palette Manager	Manage project color schemes	Color picking, conversion tools
🔗 URL Encoder/Decoder	Handle URL encoding/decoding	Query parameters, special characters
⏰ Timestamp Converter	Convert between time formats	Unix timestamps, ISO dates
📄 Lorem Ipsum Generator	Generate placeholder text	Customizable length and format

How to Access:

Click DevSnip Pro icon in Activity Bar
Select "🧰 Advanced Developer Tools Hub"
Choose the tool you need
Use the intuitive interface for each utility

✨ Custom Snippet Management

Create, organize, and manage your personal code snippet library.

Features:

✅ Intuitive snippet creation interface
✅ Language-specific organization
✅ Smart autocomplete and prefix suggestions
✅ Import/export functionality
✅ Team sharing capabilities
✅ Search and filter options

How to Create Custom Snippets:

Select Your Code: Highlight the code you want to save
Open DevSnip Pro: Click the icon in Activity Bar
Choose "Create Custom Snippets"
Fill in Details:
- Prefix: Unique identifier (e.g., myloop)
- Name: Descriptive name (e.g., "Custom For Loop")
- Description: Brief explanation (optional)
Save: Your snippet is now available for use

Using Your Snippets:

Start typing your prefix in any file
Select from autocomplete suggestions
Press Tab to insert the snippet

Example Custom Snippet:

// Prefix: "apihandler"
// Name: "Express API Handler"
app.get('/api/${1:endpoint}', async (req, res) => {
  try {
    const ${2:data} = await ${3:service}.${4:method}();
    res.json({ success: true, data: ${2:data} });
  } catch (error) {
    res.status(500).json({ success: false, error: error.message });
  }
});

📜 Pre-built Snippet Library

Access 500+ carefully crafted snippets across 15+ technologies.

Categories:

React: Components, hooks, lifecycle methods, state management
JavaScript/TypeScript: ES6+ features, async/await, promises, utilities
Node.js: Express routes, middleware, database connections
MongoDB: Queries, aggregations, schema definitions
HTML: Semantic markup, forms, meta tags
CSS: Flexbox, Grid, animations, responsive design
Bootstrap: Components, utilities, responsive classes
Tailwind CSS: Utility classes, responsive design, components
Python: Functions, classes, decorators, file operations
PHP: Classes, functions, database operations
Flutter: Widgets, state management, navigation

How to Browse Snippets:

Open Command Palette (Ctrl+Shift+P)
Type "DevSnip Pro: Show Custom Snippets"
Browse by language or search for specific patterns
Click to view snippet details and usage

💡 Usage Examples

Example 1: API Testing Workflow

// 1. Test user registration endpoint
POST https://api.myapp.com/auth/register
Content-Type: application/json

{
  "username": "testuser",
  "email": "test@example.com",
  "password": "securepassword"
}

// 2. Test login with created user
POST https://api.myapp.com/auth/login
Content-Type: application/json

{
  "email": "test@example.com",
  "password": "securepassword"
}

// 3. Use returned token for authenticated requests
GET https://api.myapp.com/user/profile
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Example 2: MongoDB Query Development

// Connect to database
mongodb://localhost:27017/myapp

// Test user queries
db.users.find({ status: "active" }).limit(10)

// Develop aggregation pipeline
db.orders.aggregate([
  { $match: { createdAt: { $gte: new Date("2024-01-01") } } },
  { $group: { 
    _id: "$customerId", 
    totalOrders: { $sum: 1 },
    totalAmount: { $sum: "$amount" }
  }},
  { $sort: { totalAmount: -1 } }
])

Example 3: Snippet-Driven Development

// Type "rfc" for React Functional Component
import React from 'react';

const ComponentName = () => {
  return (
    <div>
      
    </div>
  );
};

export default ComponentName;

// Type "usestate" for useState hook
const [state, setState] = useState(initialValue);

// Type "useeffect" for useEffect hook
useEffect(() => {
  // Effect logic here
  
  return () => {
    // Cleanup logic here
  };
}, [dependencies]);

⚙️ Configuration

DevSnip Pro works out of the box with sensible defaults, but you can customize it to fit your workflow.

VS Code Settings

Add these settings to your VS Code settings.json:

{
  "devsnip.autoSuggest": true,
  "devsnip.snippetPreview": true,
  "devsnip.apiTimeout": 30000,
  "devsnip.mongoConnectionTimeout": 10000,
  "devsnip.codeSnapshotTheme": "dark",
  "devsnip.consoleLogCleanup.confirmBeforeDelete": true
}

Keyboard Shortcuts

You can add custom keyboard shortcuts in VS Code:

{
  "key": "ctrl+shift+s",
  "command": "sayaib.hue-console.createCustomSnippet",
  "when": "editorTextFocus"
},
{
  "key": "ctrl+shift+a",
  "command": "sayaib.hue-console.openGUI",
  "when": "editorTextFocus"
},
{
  "key": "ctrl+shift+c",
  "command": "sayaib.hue-console.listAndRemoveConsoleLogs",
  "when": "editorTextFocus"
}

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

Ways to Contribute

🐛 Report Bugs: Found an issue? Open a bug report
💡 Suggest Features: Have an idea? Submit a feature request
📝 Improve Documentation: Help make our docs better
🔧 Submit Code: Fix bugs or add features via pull requests
📦 Add Snippets: Contribute new code snippets for any language

Development Setup

# Clone the repository
git clone https://github.com/sayaib/DevSnip-Pro.git

# Navigate to project directory
cd DevSnip-Pro

# Install dependencies
npm install

# Open in VS Code
code .

# Start development
npm run watch

Snippet Contribution Guidelines

When contributing snippets:

Follow existing naming conventions
Include clear descriptions
Test snippets thoroughly
Use meaningful placeholder names
Follow language best practices

Pull Request Process

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE.txt file for details.

What this means:

✅ Free to use for personal and commercial projects
✅ Modify and distribute as needed
✅ No warranty - use at your own risk
✅ Attribution appreciated but not required

🆘 Support & Help

📚 Documentation & Resources

📖 Complete Documentation - Comprehensive guides and tutorials
🎥 Video Tutorials - Step-by-step video guides
📋 Snippet Library - Browse all available snippets

🐛 Getting Help

Found a bug or need help?

Check Existing Issues first
Search Documentation for solutions
Create a New Issue with details

When reporting issues, please include:

VS Code version
DevSnip Pro version
Operating system
Steps to reproduce
Error messages (if any)
Screenshots (if helpful)

💬 Community & Contact

🐙 GitHub: DevSnip-Pro Repository
💰 Sponsor: GitHub Sponsors
⭐ Rate & Review: VS Code Marketplace

🚀 Stay Updated

⭐ Star the repository to get notified of updates
👀 Watch releases for new features and bug fixes
📧 Follow updates on the VS Code Marketplace

🌟 Show Your Support

If DevSnip Pro has helped boost your productivity, please consider:

Made with ❤️ by Sayaib Sarkar

Happy Coding! 🚀

_{DevSnip Pro - Supercharge your development workflow with the ultimate VS Code productivity extension.}