🚀 DotFetch

Professional HTTP Client for VS Code

Modern API Testing Made Simple

📥 Marketplace • 🌐 Open VSX • 📖 Documentation • 🐛 Report Issues

✨ What is DotFetch?

DotFetch is a powerful, modern HTTP client built specifically for VS Code. Designed for developers who demand the best tools for API testing, debugging, and development workflows.

🎯 Key Benefits:

Native VS Code Integration - Seamless experience within your development environment
Environment Variables - Full support for .env files with live substitution
Comprehensive Authentication - API Key (Header & Query), OAuth 2.0 Client Credentials, Bearer Token, and Basic Auth
Developer-Friendly Security - SSL/TLS verification toggle for localhost development, password visibility toggles, and safe non-persistent credential storage
Professional UI - Dark theme optimized interface matching VS Code aesthetics with Response Body and Headers inspector tabs
Performance & Memory Protected - 10MB payload size limits and large response truncation guards

v2.1.1 Runtime Verified: DotFetch v2.1.1 keeps the hardened v2.1 request engine and adds a fully runtime-verified UI/UX polish pass across the Request Builder, Response Viewer, Sidebar, Auth/Environment presentation, keyboard workflow, and toast/micro-interaction system.

🚀 Quick Start

Installation

Install from VS Code Marketplace:

Ctrl+P → ext install FreeRave.dotfetch

Or search in Extensions:
- Open VS Code
- Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (Mac)
- Search for "DotFetch"
- Click Install
Reload VS Code and you're ready to go!

Your First Request

Open DotFetch: Ctrl+Shift+P → "DotFetch: Open HTTP Client"
Enter URL: https://jsonplaceholder.typicode.com/posts/1
Select Method: Choose from GET, POST, PUT, DELETE, etc.
Send Request: Click the Send button or press Ctrl+Enter / Cmd+Enter

🎨 Features

🔧 Core HTTP Client

Complete HTTP & Auth Support

✅ All HTTP Methods (GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS)
✅ API Key Auth (Header or Query Parameter with live preview)
✅ OAuth 2.0 (Client Credentials flow with ⚡ direct token fetching)
✅ Bearer Token & Basic Auth (with {{ENV}} variable substitution)
✅ Show/Hide Secret Toggles (👁️ / 🙈)
✅ SSL Toggle for local https://localhost / self-signed certs
✅ Request Body (JSON, Text, Form Data)
✅ Structured Key-Value Headers & Query Parameters
✅ Configurable Timeout & Network Retry

Advanced Request Features

✅ Request Collections with one-click Save & Load
✅ Ephemeral Session Token handling (prevents secret leakage)
✅ Request Templates for reusability
✅ Request History with search & filters
✅ Request validation before sending
✅ Syntax highlighting for JSON bodies

Response Analysis & Protection

✅ Formatted JSON responses with syntax highlighting
✅ Response Headers Inspector (dedicated key-value table)
✅ Visual Payload Size & Time measurement
✅ Large Response Guard (protection against huge payloads)
✅ Advanced Error Explanations & cancellation support

🌍 Environment Variables

Multi-Environment Support

✅ .env, .env.local, .env.development
✅ .env.production, .env.test
✅ Automatic environment detection
✅ Environment switching

Live Variable Substitution

✅ {{VARIABLE_NAME}} syntax
✅ Real-time highlighting
✅ Pre-send validation
✅ Missing variable warnings

Environment Tree View

✅ VS Code sidebar integration
✅ Variable explorer
✅ Copy variable values
✅ Refresh environments

📁 Collections & Organization

✅ Request Collections - Group requests by project/feature
✅ One-Click Export - Portable JSON backups
✅ Request Annotations - Save notes for documentation
✅ Save & Load - One-click request management
✅ Collection CRUD - Full create, read, update, delete operations

🔄 Import/Export

cURL Export

✅ Generate complete cURL commands
✅ Include all headers & body
✅ Clipboard integration
✅ One-click copy

cURL Import

✅ Parse complex cURL commands
✅ Auto-extract method, URL, headers
✅ Smart body detection
✅ Error handling for malformed commands

🎨 Professional UI/UX

✅ Native Dark Theme - Automatically syncs with VS Code's active theme
✅ Native VS Code Keyboard Workflow - Ctrl+Enter Send, Alt+D Focus URL, Ctrl+Alt+S Save, Ctrl+Shift+Backspace Clear, ? Help
✅ Method Color Coding - Visual HTTP method distinction
✅ Responsive Design - Works on all screen sizes
✅ Loading States - Visual feedback for all operations
✅ Context Menus & Modals - Professional fluid interactions
✅ Pretty / Raw Response Views - Fast switching between formatted and raw payloads
✅ Smart Request Indicators - Active counts/dots for Params, Headers, Auth, Body, and Notes
✅ Non-Destructive Row Toggles - Disable Params or Headers without deleting their values
✅ Inline Copy Feedback - Green ✓ Copied state only after successful clipboard writes
✅ Environment Guidance - Missing-environment variable warning plus responsive active-environment tooltip
✅ Toast System - Stacked in-WebView feedback with a maximum of three visible notifications

⌨️ Keyboard Workflow

Ctrl+Enter / Cmd+Enter — Send Active Request
Alt+D — Focus and select the URL field
Ctrl+Alt+S / Cmd+Alt+S — Save Request to Collection
Ctrl+Shift+Backspace / Cmd+Shift+Backspace — Clear Request Form
? — Toggle Keyboard Shortcuts Help
Escape — Close Active Modal

Host-level shortcuts are registered through native VS Code keybindings and are scoped to the active DotFetch Request Builder, preventing actions from firing while another editor or panel is active.

📸 Screenshots

Main Interface

Environment Variables

Request Collections

cURL Import/Export

🛠️ Configuration

Extension Settings

DotFetch contributes the following settings:

{
  "dotfetch.timeout": {
    "type": "number",
    "default": 10000,
    "description": "Default request timeout in milliseconds"
  },
  "dotfetch.sslVerify": {
    "type": "boolean",
    "default": true,
    "description": "Enable SSL certificate verification (disable for localhost or self-signed certs)"
  },
  "dotfetch.autoSave": {
    "type": "boolean",
    "default": true,
    "description": "Automatically save requests to history"
  },
  "dotfetch.maxHistory": {
    "type": "number",
    "default": 50,
    "description": "Maximum number of requests to keep in history"
  }
}

Environment Files

DotFetch automatically detects these environment files in your workspace:

.env                    # Base environment
.env.local            # Local overrides
.env.development      # Development specific
.env.production       # Production settings
.env.test            # Test environment

📖 Usage Guide

Basic Request

Open DotFetch from the sidebar or command palette
Enter URL in the URL field
Select HTTP Method from dropdown
Add Headers (optional) - one per line: Key: Value
Add Body (optional) - JSON or text
Click Send or press Enter

Using Environment Variables

Create .env file in your workspace root:

API_BASE_URL=https://api.example.com
API_KEY=your_secret_key

Use in requests:

URL: {{API_BASE_URL}}/users
Headers:
Authorization: Bearer {{API_KEY}}

Variables highlight in real-time and validate before sending

Managing Collections

Create Collection: Click "New Collection" → Enter name
Save Request: Fill request → Click "Save" → Select collection
Load Request: Expand collection → Click request name
Organize: Drag and drop to reorder collections

cURL Operations

Export to cURL:

Fill request details
Click "Export cURL"
Command copied to clipboard

Import from cURL:

Click "Import cURL"
Paste cURL command
Click "Import" - fields auto-populate

🔧 Development

Prerequisites

Node.js 16+
VS Code 1.74+
TypeScript 5.0+

Building & Verification

DotFetch uses automated quality gates alongside manual runtime verification.

# Install dependencies
npm install

# Development build (watch mode)
npm run watch

# Production build (bundles extension and webview)
npm run compile

# Type check
npm run typecheck

# Lint code
npm run lint

Runtime verification covers all authentication flows, networking behavior, credential persistence boundaries, response limits, and SSL/TLS handling.

Project Structure

dotfetch/
├── src/
│   ├── extension.ts          # Main extension entry point & activation
│   ├── webviewPanel.ts       # WebView lifecycle, message routing & HTML builder
│   ├── requestService.ts     # Axios execution engine, SSL Agent & OAuth handler
│   ├── dataManager.ts        # GlobalState persistence (History & Collections)
│   ├── environmentManager.ts # Environment variable loading & interpolation
│   ├── collectionTree.ts     # Sidebar Collections tree view provider
│   ├── historyTree.ts        # Sidebar History tree view provider
│   ├── environmentTree.ts    # Sidebar Environment tree view provider
│   ├── webview/              # Modular Frontend (MVC Architecture)
│   │   ├── main.js           # Central webview coordinator & entry point
│   │   ├── request.js        # Request assembling, execution & draft/wire separation
│   │   ├── auth.js           # Comprehensive Auth flows, live previews & RFC validation
│   │   ├── ui.js             # Key-value tables, response tabs & headers inspector
│   │   ├── shortcuts.js      # Keybindings & shortcut customization
│   │   ├── curl.js           # cURL command generator & parser
│   │   ├── state.js          # Canonical webview state & auth schema factory
│   │   └── api.js            # PostMessage abstraction layer
│   └── test/
│       └── extension.test.ts # Test suite
├── media/
│   ├── index.html            # Webview HTML template
│   ├── script.js             # Compiled webview IIFE bundle (via esbuild)
│   ├── styles.css            # Dark theme & glassmorphic styling
│   └── icon.png              # Extension icon
├── package.json              # Extension manifest & configuration schemas
├── tsconfig.json             # TypeScript configuration
└── CHANGELOG.md              # Detailed release notes

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

Fork the repository

Clone your fork:

git clone https://github.com/yourusername/dotfetch.git
cd dotfetch

Install dependencies:
```
npm install
```
Start development:
```
npm run watch
```
Open in VS Code and press F5 to debug

Testing

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run specific test file
npm test -- --grep "Environment Manager"

📄 License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

🙏 Acknowledgments

VS Code Team for the amazing extension platform
Axios for the reliable HTTP client
Our Community for feedback and contributions

📞 Support

Documentation: Full Docs
Issues: GitHub Issues
Discussions: GitHub Discussions
Email: support@dotfetch.dev

Made with ❤️ for the developer community

⭐ Star us on GitHub • 🐛 Report Bug • 💡 Request Feature