✨ What is DotFetch?

DotFetch is an HTTP client that lives inside VS Code. Build a request, press Send, and read the response, without leaving your editor or copying secrets into a separate app.

🎯 Key Benefits:

• Native VS Code Integration - Request Builder tab, sidebar views, and keyboard shortcuts that only fire in the Request Builder
• Environment Variables - Your .env files become environments, with {{VARIABLE}} substitution everywhere
• Comprehensive Authentication - API Key (Header & Query), OAuth 2.0 Client Credentials, Bearer Token, and Basic Auth
• Scripts & Tests - JavaScript before and after each request: sign requests, chain tokens, test responses
• Secrets Stay Out of Storage - Passwords, tokens, and keys are never saved to History or Collections; {{VARIABLE}} references are
• Performance & Memory Protected - 10 MB response limit and a display guard for responses over 1 MB

New in v2.2.0: Pre-Request and Post-Response scripts with test() / assert(), crypto helpers for request signing, a wire-exact request pipeline (bodies and query strings sent byte for byte), status-coloured History, and full documentation.

🚀 Quick Start

Installation

1. Install from VS Code Marketplace:

   Ctrl+P → ext install FreeRave.dotfetch
   

2. Or search in Extensions:

   • Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (Mac)
   • Search for "DotFetch"
   • Click Install

Your First Request

1. Open DotFetch: click the DotFetch icon in the Activity Bar, then New Request (or Ctrl+Shift+P → "New Request")
2. Enter URL: https://jsonplaceholder.typicode.com/posts/1
3. Select Method: GET, POST, PUT, PATCH, DELETE, HEAD, or OPTIONS
4. Send Request: click Send or press Ctrl+Enter / Cmd+Enter

📖 Get Started guide: first request, first POST, first .env variable, in five minutes.

🎨 Features

🔧 Core HTTP Client

🌍 Environment Variables

📖 Environments guide

⚙️ Scripts & Tests (v2.2.0)

Run JavaScript before a request and after its response: sign requests, chain tokens between requests, and test every response.

// Pre-Request: sign the exact body that will be sent
const body = dotfetch.env.resolve(dotfetch.request.body);
dotfetch.request.headers['X-Signature'] = dotfetch.crypto.hmac('sha256', dotfetch.env.get('API_SECRET'), body);

// Post-Response: test the response and save the token for the next request
test('Login succeeded', () => assert(dotfetch.response.status === 200, `Got ${dotfetch.response.status}`));
dotfetch.env.set('ACCESS_TOKEN', dotfetch.response.json().token);

• ✅ dotfetch.request / dotfetch.response: read and change params, headers, and body
• ✅ dotfetch.env: session variables that never touch your .env files
• ✅ test() / assert(): results in a dedicated Tests tab
• ✅ dotfetch.crypto / dotfetch.utils: SHA-256, HMAC, UUID, random nonces, UTF-8 Base64
• ✅ Fails closed: a failing Pre-Request script stops the request before it is sent

📖 Scripting guide · Copy-paste examples

📁 Collections & Organization

• ✅ Request Collections - Group requests by project or feature
• ✅ Request Notes - Keep documentation next to each request
• ✅ Duplicate, Edit & Delete - Manage requests from the sidebar
• ✅ Stored outside your project - Collections and History live in VS Code's extension storage, not in Git

📖 Collections, Favorites & History guide

🔄 cURL Import/Export

📖 cURL guide

🎨 Professional UI/UX

• ✅ Native Theme - Follows VS Code's active colour theme
• ✅ Method Color Coding - Visual HTTP method distinction
• ✅ Loading States - Visual feedback for sending, retrying, and token fetching
• ✅ Smart Request Indicators - Active counts/dots for Params, Headers, Auth, Body, Scripts, 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
• ✅ Toast System - Stacked in-WebView feedback with a maximum of three visible notifications

⌨️ Keyboard Workflow

• Ctrl+Enter / Cmd+Enter — Send (press again to cancel)
• 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

Shortcuts are registered as native VS Code keybindings scoped to the DotFetch Request Builder, so they never fire while another editor or panel is active.

📸 Screenshots

Main Interface

Environment Variables

Request Collections

cURL Import/Export

🛠️ Configuration

Extension Settings

Timeout, retries, and SSL verification are defaults: each request can override them in its ⚙️ tab.

Environment Files

DotFetch detects .env* files in your workspace root:

.env                  → default
.env.local            → local
.env.development      → development   (.env.dev works too)
.env.staging          → staging       (.env.stage works too)
.env.production       → production    (.env.prod works too)
.env.test             → test

Files ending in .example, .sample, .template, .schema, .lock, .bak, .swp, or ~ are ignored.

📖 Documentation

The full guide lives in docs/:

🔧 Development

Prerequisites

• Node.js 18+
• VS Code 1.80+

Building & Verification

# Install dependencies
npm install

# Development build (watch mode)
npm run watch

# Build (bundles extension and webview)
npm run compile

# Type check
npm run typecheck

# Lint code
npm run lint

# Build, lint, and run the test suite in VS Code
npm test

Project Structure

dotfetch/
├── src/
│   ├── extension.ts          # Extension entry point, commands & activation
│   ├── webviewPanel.ts       # WebView lifecycle, message routing & History recording
│   ├── requestService.ts     # Request pipeline: scripts, substitution, auth, axios, OAuth
│   ├── scriptRunner.ts       # Pre/Post script runtime (vm), dotfetch.* APIs, test()/assert()
│   ├── environmentManager.ts # .env discovery, parsing, session overlay & {{VAR}} substitution
│   ├── dataManager.ts        # GlobalState persistence (History, Collections, Favorites)
│   ├── logger.ts             # DotFetch Output channel
│   ├── mainSidebar.ts        # Quick Actions & Favorites tree
│   ├── collectionTree.ts     # Collections tree
│   ├── historyTree.ts        # History tree (status-coloured)
│   ├── environmentTree.ts    # Environments tree
│   ├── utils/                # cURL parser & security helpers
│   ├── webview/              # Webview frontend (bundled to media/script.js)
│   │   ├── main.js           # Coordinator & message handling
│   │   ├── request.js        # Request assembly, load/save & settings
│   │   ├── auth.js           # Auth flows & live previews
│   │   ├── ui.js             # Tables, response tabs, headers & tests inspector
│   │   ├── curl.js           # cURL import/export
│   │   ├── shortcuts.js      # Keyboard shortcuts
│   │   ├── state.js          # Webview state & persistable auth schema
│   │   └── api.js            # postMessage bridge
│   └── test/
│       └── extension.test.ts # Test suite
├── media/                    # Webview HTML/CSS, compiled bundle, icons & screenshots
├── docs/                     # User documentation
├── package.json              # Extension manifest & settings
└── CHANGELOG.md              # Release notes

🤝 Contributing

Contributions are welcome. See the Contributing Guide for details.

1. Fork the repository
2. Clone your fork:

   git clone https://github.com/<your-username>/DotFetch.git
   cd DotFetch
   

3. Install dependencies: npm install
4. Start the watcher: npm run watch
5. Open in VS Code and press F5 to launch an Extension Development Host

📄 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: docs/
• Issues & feature requests: GitHub Issues