Simple and intuitive API Client made into a VSCode extension ๐Ÿ˜Š

Related tags

Learning resource react javascript testing rest-api vscode visual-studio-code api-client http-requests vscode-extension visual-studio-code-extension zustand
Overview

REST API Client

Simple and intuitive API Client made into a VSCode extension.

Visual Studio Marketplace โ€ข Repository โ€ข Releases



Visual Studio Code extension to send basic HTTP/S requests and receive a response with an intuitive UI within Visual Studio code to enhance work productivity.

REST API Client preview



๐Ÿš€ Installation

โ—๏ธ This extension is best paired with a dark-colored Visual Studio Code theme.

โ—๏ธ REST API Client cannot be installed or used when using a web version of Visual Studio Code

๐Ÿ” Security and Privacy

  • REST API Client does not collect or store any of your personal information or request data
  • REST API Client uses VSCode global state API in order to store your request history and favorites collections locally.

โœจ Features

  • Send a request and receive a response from your desired API endpoint.
  • Five request method
    • GET
    • POST
    • PUT
    • PATCH
    • DELETE
  • Various request options
    • Add parameter to your API endpoint
    • Add authorization option
      • Basic Authorization
      • Bearer Token
    • Add body data
      • Form data
      • x-www-form-urlencoded
      • Raw data
        • Text
        • JavaScript
        • JSON
        • HTML
  • Code snippet of your current request, provided up to 18 different languages with their specific variants, to copy and paste to your codebase.

Code Snippet preview

  • Resizable vertical menu
  • Various response body view format
    • Pretty
      • JSON
      • HTML
      • Text
    • Raw
      • Plain Text
    • Visual HTML preview of the response data
  • Basic metadata information
    • Status code and text
    • Response size
    • Approximate time measurement to receive a response from your request
  • Copy and paste code button
  • Response headers view mode
  • History collection sidebar
  • Favorites collection sidebar
  • Intuitive icon UI to favorite a request history or delete
  • Search bar to find your specific request history
  • Click and search from the sidebar collection

Sidebar preview

๐Ÿ’ป Commands

Simply click Open Menu button or open the Command Palette and type the command below:

Command+P or Command + Shift + P on macOS and Ctrl+Shift+P on Windows/Linux


Command Description
> Start: New Request Create a API Client menu

โ—๏ธ You can only create one panel at a time.

๐Ÿ“š Tech Stacks

This project was created using the following tech stacks:

           

๐Ÿ—’ Changelog

Current version 1.0.3

Visit here for a detailed release notes

๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป Contributing

If you have a suggestion that would make this project better, please fork this repository from here and create a pull request.

I appreciate even the tiniest suggestion or contribution you make to this project.

๐Ÿชœ Step-by-step guide on how to make a pull request

  1. Fork this Project from here
  2. Create your Branch โ†’ git checkout -b feature/newFeature
  3. Code up your outstanding logic โ†’ console.log("Hello World")
  4. Commit your Changes โ†’ git commit -m "feat: Add some newFeature"
  5. Push to the Branch โ†’ git push origin feature/newFeature
  6. Vist your GitHub repository and open a Pull Request

๐Ÿ— Running the extension locally for development

  1. Run git clone from this repository
  2. Run npm install in order to install all the dependencies needed
  3. Press F5 to launch extension development mode

โš ๏ธ Bugs or Suggestions

If you found any bugs while using this extension or you have a suggestion please post it in issues.

๐Ÿ“‹ License

This extension is released under the MIT license.

Comments
  • Extension Activation failed (Locally)

    Extension Activation failed (Locally)

    Hi, I was attempting to run the extension locally and received the following message: Activating extension 'unjinjang.rest-api-client' failed: Cannot find module '.../API-Client-VSCode-Extension/dist/extension.js' Require stack: - /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js - /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-amd.js - /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-fork.js.

    I followed the instructions on the README.

    What should I do to fix this issue?

    opened by AhmedEl-Gazzar 2
  • feat: Add global CSS style

    feat: Add global CSS style

    Summary

    When using the REST API extension text colour and background were both white resulting in not being able to see the available options. I edited all the files affected by this and removed the background and colour styles in them and added a global CSS style to change the colours based on the users vs code theme. ...

    Enhancement 
    opened by Cxxshyy 0
  • [2022/08/03] - Fix POST body raw data converted to JSON string before sending to server

    [2022/08/03] - Fix POST body raw data converted to JSON string before sending to server

    Summary

    Fix issue submitted by SAPikachu issue thread.

    Bug

    POST body raw data was being converted to a string by JSON.stringify forcing it to be converted to string unnecessarily before sending it to the server.

    opened by unwls 0
  • [2022/07/29] - Inject VSCode API directly into Webview

    [2022/07/29] - Inject VSCode API directly into Webview

    Summary

    • Change how VSCode API is used within Webview
    • Inject VSCode API directly inside Webview when it's being loaded for the first time
    • Add React memo to KeyValueTable.js to prevent unnecessary rendering when the request menu is being updated

    Changed Webview code

    <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>REST API Tester Sidebar</title>
      <link href="${resetCssSrc}" rel="stylesheet">
      <link href="${mainStylesCssSrc}" rel="stylesheet">
   </head>
    <body>
      <div id="root"></div>
      <script nonce="${nonce}">
          let vscode;

          if (typeof acquireVsCodeApi !== "undefined") {
            vscode = acquireVsCodeApi();
          }
      </script>
      <script nonce="${nonce}" src="${scriptSrc}"></script>
    </body>
  </html>`
    opened by unwls 0
  • [2022/07/22] - Add debounce and useMemo for better app performance

    [2022/07/22] - Add debounce and useMemo for better app performance

    Summary

    • Add debounce and useMemo to reduce expensive function call and unnecessary re-rendering

    Preview 1 without debounce

    Without debounce preview

    Preview 2 with debounce

    Debounce preview

    opened by unwls 0
  • [2022/07/16] - ์ฝ”๋“œ ๋ฆฌํŒฉํ† ๋ง, package.json ์—…๋ฐ์ดํŠธ

    [2022/07/16] - ์ฝ”๋“œ ๋ฆฌํŒฉํ† ๋ง, package.json ์—…๋ฐ์ดํŠธ

    Summary

    • package.json ํ”„๋กœ์ ํŠธ ์ •๋ณด ์ถ”๊ฐ€ ๋ฐ ์—…๋ฐ์ดํŠธ
    • ํ”„๋กœ์ ํŠธ ์ด๋ฆ„ ์—…๋ฐ์ดํŠธ, REST API Tester -> REST API Client
    • ์ž˜๋ชป ์‚ฌ์šฉ๋œ Pascal Casing or Camel Casing ์ˆ˜์ •
    • ์‚ฌ์šฉ์ž collection์—์„œ URL ํด๋ฆญ ์‹œ API Client ํ™”๋ฉด์„ ๋„์›Œ์ฃผ๋Š” ๊ณผ์ •์—์„œ, URL input ๊ฐ’์„ uncontrolled ๋ฐฉ์‹์œผ๋กœ ๋ณ€๊ฒฝํ•˜๋Š” ์ฝ”๋“œ ์‚ญ์ œ
    opened by unwls 0
  • [2022/07/16] - Sidebar Collection timestamp ๋ฒ„๊ทธ ํ˜„์ƒ ํ•ด๊ฒฐ

    [2022/07/16] - Sidebar Collection timestamp ๋ฒ„๊ทธ ํ˜„์ƒ ํ•ด๊ฒฐ

    Bug fix

    • Sidebar History collection์—์„œ favorite ์ ์šฉ๋œ collection์ด ์‚ญ์ œ๋  ๊ฒฝ์šฐ, ์‚ญ์ œ๋œ favorite collection์€ ์ด์ƒํ•˜๊ฒŒ timestamp ๊ฐ’์„ 19,000์ผ๋กœ ํ‘œ์‹œ๋˜๋Š” ๋ฒ„๊ทธ ํ•ด๊ฒฐ.
    • ๋ฌธ์ œ์˜ ์›์ธ์€, ์ƒˆ๋กœ์šด favorite collection ๊ธฐ๋ก์ด ์ถ”๊ฐ€๋  ๋•Œ, history collection์— ์—†๋Š” favorite collection์˜ ์‹œ๊ฐ„ ๊ฐ’์„ null๋กœ ๋ฐ”๊ฟ”์ฃผ๊ณ  ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ˜–
    • src/utils/filterDuplicatesFromObject.js ํ•จ์ˆ˜์—์„œ ๋ฌธ์ œ์˜ ์ฝ”๋“œ ํ•œ ์ค„์„ ์ œ๊ฑฐํ–ˆ์Šต๋‹ˆ๋‹ค.
    opened by unwls 0
  • [2022/07/15] - HTTP/S ์š”์ฒญ CodeSnippet ์ œ๊ณต ๊ธฐ๋Šฅ ๊ตฌํ˜„ + ์ฝ”๋“œ ๋ฆฌํŒฉํ† ๋ง

    [2022/07/15] - HTTP/S ์š”์ฒญ CodeSnippet ์ œ๊ณต ๊ธฐ๋Šฅ ๊ตฌํ˜„ + ์ฝ”๋“œ ๋ฆฌํŒฉํ† ๋ง

    Summary

    • ์‚ฌ์šฉ์ž๊ฐ€ HTTP/s ์š”์ฒญ ๋ณด๋‚ด๋Š” ์ •๋ณด๋ฅผ 18๊ฐœ์˜ ์–ธ์–ด๋กœ ์ฝ”๋“œํ™” ํ•ด์ฃผ ์ฃผ๋Š” ๊ธฐ๋Šฅ ๊ตฌํ˜„
    • CodeEditor ์ปดํฌ๋„ŒํŠธ ์กฐ๊ธˆ ๋” ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฆฌํŒฉํ† ๋ง
    • ๋ณต์‚ฌ ๊ธฐ๋Šฅ ๋ฆฌํŒฉํ† ๋ง
    • Webpack ์„ธํŒ… ๋ณ€๊ฒฝ

    Bug fix

    • Extension์ด dispose ๋์„ ๋•Œ ๋‹ค์‹œ ์‹คํ–‰ ์•ˆ ๋˜๋Š” ๋ฒ„๊ทธ ํ•ด๊ฒฐ
    • Extension์ด dispose ๋์„ ๋•Œ Sidebar ๋ˆŒ๋Ÿฌ์„œ HTTP/s ์š”์ฒญ ๋ชป ๋ณด๋‚ด๋Š” ๋ฒ„๊ทธ ํ•ด๊ฒฐ
    • Sidebar collection ํด๋ฆญ ํ›„ history ๊ธฐ๋ก์„ ๋‹ค์‹œ ์š”์ฒญ ๋ณด๋‚ด๋ฉด URL input์ด null ๊ฐ’์œผ๋กœ ํ‘œ์‹œ๋˜๋Š” ๋ฒ„๊ทธ ํ•ด๊ฒฐ

    Preview 1

    CodeSnippet feature demo

    Preview 2

    CodeSnippet feature demo 2

    opened by unwls 0
  • Good first issue ideas ๐Ÿš€

    Good first issue ideas ๐Ÿš€

    If anybody is interested in contributing, I have some ideas which could get you started!

    1. ~~Webview request panel UI gets automatically filled up when the request from collection sidebar is sent~~
    2. Button to change the webview panel view into side by side
    3. Feature to send a GraphQL request would be a decent starting point.
    4. More options when sending post requests
    5. ~~Feature to automatically fill key, value tables when JSON file is uploaded (could be params or headers)~~ sergptz
    6. Feature to send non-string data's when sending request

    Feel free to drop by a comment with any questions regarding the project! โ˜บ๏ธ

    good first issue 
    opened by unwls 20
Releases(1.1.0)
Owner
REST API Client
Simple and intuitive API Client made into a VSCode extension.
REST API Client
GitHub https://marketplace.visualstudio.com/items?itemName=unjinjang.rest-api-client
The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 5 support

bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with

SnapAppointments 9.7k Dec 30, 2022
Intuitive and dynamic Chrome Dev Tool Extension for Three.js debugging

sceneSniff An intuitive and dynamic Chrome Dev Tool Extension for Three.js debugging sceneSniff is an in browser developer tool for Three.js projects.

OSLabs Beta 59 Dec 8, 2022
๐Ÿบ Integrates Laravel Pint into your VSCode projects for automatic code formatting

Laravel Pint for VS Code This extension is NOT official from the Laravel team. Take a look into the official project. Integrates Laravel Pint into you

Open Southeners 34 Dec 8, 2022
Unofficial API client for the Tidbyt API. Use this client to control Tidbyt devices and integrate with other services.

Tidbyt Client for Node.js Unofficial API client for the Tidbyt API. Use this client to control Tidbyt devices and integrate with other services. Insta

Nicholas Penree 19 Dec 17, 2022
StarkNet support extension for VSCode. Visualize StarkNet contracts: view storage variables, external and view functions, and events.

StarkNet Explorer extension This VSCode extension quickly shows relevant aspects of StarkNet contracts: Storage variables of the current contract, and

Crytic 6 Nov 4, 2022
Optimized dracula theme vscode extension for flutter, web, electron and golang development.

Optimized Dracula Theme A color theme inspired by dracula color theme. This color theme is not based on dracula color theme. The color styles are simi

wuchuran 1 Jul 11, 2022
VSCode extension that creates overlay for your Broadcasting Software of choice.

BSOverlay VSCode extension that creates an overlay for your Broadcasting Software of choice. Documentation Please refer to the Wiki Section. Installin

chocoearly44 4 Sep 30, 2022
A vscode extension to quickly print variable, variable type, tensor shape etc by using shortcuts

Quick Python Print This repo is inspired by "Python Quick Print". "Python Quick Print" can quickly print out variables on the console by using shortcu

weida wang 5 Oct 28, 2022
VSCode extension for managing text selection.

Selection Manager This Visual Studio Code extension will allow you to manage selected text. The aim of this extension is to increase productivity by u

Sanel Hadลพini 2 Apr 12, 2022
VSCode extension for the rickroll-lang programming language (incomplete)

Rickroll-Lang VSCode Extension The Rick Roll programming language is a rickroll based, process oriented, dynamic, strong, esoteric programming languag

Siddhesh Zantye 6 Oct 10, 2022
NextJS VScode extension to visualize component tree.

Nexus A component tree extension for NextJS Report Bugs ยท Request Features Table of Contents About The Project Built With Installation Getting Started

OSLabs Beta 62 Nov 24, 2022
JSDoc generator for JavaScript, TypeScript using AI. (VSCode extension)

JSDoc generator for JavaScript, TypeScript using AI. (VSCode extension)

Amir Reza Dalir 3 Aug 18, 2022
๐Ÿ’ป VSCode Extension for AdonisJS

?? Official AdonisJS extension for VSCode Features Use all Adonis Assembler commands ( make:* ) Migrate and seed your database ( db:*, migration:* ) V

Julien Ripouteau 50 Nov 9, 2022
VSCode extension with helpful code snippets for SolidJS.

Solid Snippets VSCode extension with helpful code snippets for SolidJS. GET THE EXTENSION Snippets Trigger Content Languages JSX sinputโ†’ Input two-way

SolidJS Community 11 Dec 8, 2022
a vscode extension for http response data auto transform ts type.

Api2ts ่ฟ™ๆ˜ฏไธ€ไธช่‡ชๅŠจๅฐ† http ็š„ๅ“ๅบ”ๆ•ฐๆฎ่ฝฌๅŒ–ไธบ ts ็š„็ฑปๅž‹๏ผŒไฝฟ็”จ json-to-ts ๅš็š„ใ€‚ Features ๆก†้€‰้…็ฝฎ้กนๅŽ๏ผŒไฝฟ็”จๅฟซๆท้”ฎ alt+Q : ่ฏทๆฑ‚ๅ‚ๆ•ฐ้…็ฝฎๆ–‡ไปถ ๅœจๆ น็›ฎๅฝ•ไธ‹ๅˆ›ๅปบ Api2ts.config.json ๆ–‡ไปถ๏ผŒ้…็ฝฎ้กนๅฆ‚ไธ‹๏ผš { "baseURL": "http

phy-lei 6 Jun 30, 2022
An enhanced VSCode extension for the Move programming language.

Move Analyzer Plus Provides language support for the Move programming language. Install on the VSCode Extension Marketplace: Move Analyzer Plus on the

The Moving Company 10 Aug 12, 2022
๐Ÿ”Ž (Draft!) VSCode extension to show the search results in a tree view

vscode-search-tree ?? (Draft!) VSCode extension to show the search results in a tree view The work on this extension is on-pause for now since VSCode

Oleksii Trekhleb 16 Sep 7, 2022
Lightweight VSCode extension for Ruby.

vscode-ruby-light Lightweight VSCode extension for Ruby. Install Install via Visual Studio Marketplace: Ruby Light - Visual Studio Marketplace For Dia

Ryo Nakamura 23 Jan 2, 2023
๐Ÿงช A Japa extension for VSCode

?? Japa extension for VSCode Features Run tests without typing anything. Either with a shortcut, or via Code Lenses Support multiple workspaces Suppor

Julien Ripouteau 10 Sep 27, 2022