Custom API Client

A lightweight and powerful REST API client for VS Code, inspired by Thunder Client.

Features

🚀 Core Features

• HTTP Requests: Support for GET, POST, PUT, DELETE, PATCH methods
• Headers Management: Add and manage custom headers
• Body Configuration: Support for JSON and raw text
• Response Display: View status, headers, body, and response time

🌍 Environment Management

• Multiple Environments: Create environments for development, testing, and production
• Environment Variables: Use {{variable}} syntax in URLs, headers, and body
• Quick Switching: Switch between environments with one click

📁 Collections Management

• Create Collections: Organize requests in collections
• Create Folders: Categorize requests in folders
• Import/Export: Transfer collections between projects

💻 Code Generation

• cURL: Generate cURL commands for terminal
• JavaScript: Generate fetch and axios code
• Python: Generate requests code
• PHP: Generate cURL code in PHP
• Java: Generate HttpClient code

📝 History

• Auto-save: Automatically save recent requests
• Quick Access: Re-run previous requests easily

Installation

1. Clone the repository:

git clone <repository-url>
cd custom-api-client

2. Install dependencies:

npm install

3. Compile the project:

npm run compile

4. Package for VS Code:

npm run package

Usage

Sending a Simple Request

1. Open Extension: Click the icon in the Activity Bar
2. Select Method: GET, POST, PUT, DELETE, PATCH
3. Enter URL: Your API endpoint
4. Add Headers (optional): e.g., Content-Type, Authorization
5. Enter Body (optional): For POST, PUT, PATCH methods
6. Send Request: Click the "Send Request" button

Using Environment Variables

1. Go to Environments tab
2. Create New Environment: e.g., "Development"
3. Add Variables:
   • baseUrl: https://api.dev.example.com
   • apiKey: your-api-key-here
4. Use in Request:
   • URL: {{baseUrl}}/users
   • Header: Authorization: Bearer {{apiKey}}

Organizing with Collections

1. Go to Collections tab
2. Create New Collection: e.g., "User API"
3. Create Folder (optional): "Authentication", "Users", "Posts"
4. Save Request: In collection or folder

Code Generation

1. Configure Request: As usual
2. Select Language: From dropdown menu
3. Click "Generate Code"
4. Copy Code: For use in other projects

Settings

Available settings in VS Code:

• customApiClient.timeout: Request timeout (default: 30000 milliseconds)
• customApiClient.followRedirects: Follow HTTP redirects (default: true)

Commands

Available commands in VS Code:

• Custom API Client: New Request: Create a new request
• Custom API Client: Send Request: Send current request
• Custom API Client: Change Environment: Change active environment
• Custom API Client: Generate Code: Generate code from request
• Custom API Client: Import Collection: Import a collection
• Custom API Client: Export Collection: Export a collection

Keyboard Shortcuts

• Ctrl+Shift+R (or Cmd+Shift+R on Mac): Open API Client panel

Project Structure

src/
├── extension.ts           # Extension entry point
├── sidebarProvider.ts     # Sidebar and webview management
├── requestManager.ts      # HTTP request handling
├── environmentManager.ts  # Environment and variables management
├── collectionManager.ts   # Collections management
├── codeGenerator.ts       # Code generation for multiple languages
└── webview.html          # HTML/CSS/JS user interface

Development

For development and modifications:

1. Watch mode: For automatic compilation on changes

npm run watch

2. Local testing:
   • Open the project folder in VS Code
   • Press F5 to run the extension in development mode

Contributing

To contribute to the project:

1. Fork the repository
2. Create a branch for new feature: git checkout -b feature/new-feature
3. Commit changes: git commit -am 'Add new feature'
4. Push to branch: git push origin feature/new-feature
5. Create a Pull Request

License

This project is released under the MIT License.

Inspired by Thunder Client

This extension is inspired by Thunder Client and aims to provide similar features with open-source and customizable code.

Issues and Suggestions

To report issues or provide suggestions, please use GitHub Issues.