When working with APIs, you can either test them with Postman or cURL and they are the right tools for this workflow but what if I say, there is an extension which allows you to test APIs, without leaving the comfort of VSCode, that would be pretty handy. In this article, I'll introduce you to that extension & guide you on how work with it.
The Extension
The extension is called REST Client developed by Huachao Mao along with many contributors.

Installation
The extension can be downloaded using the command palette.
ext install humao.rest-client
You can also find it on Visual Studio Marketplace.
Working
Installing the extension brings in support for two file types - .http
& .rest
. Creating a file with one of those extension will enable you to perform requests.
The JSON Placeholder API is a good place to start. In a new workspace, create a file with either .http
or .rest
as the extension. For this example, I'd be using jsonPlaceholder.rest
, this is where all the API requests will be made throughout this article.

Performing a GET Request
Let's perform a GET request to the /posts
endpoint.

First line is what initiates the actual request followed by the Content-Type of the response. Usually, when you're dealing with REST APIs, it is set to application/json
.
Those two lines is all that you need to perform a GET request. There will be small text right above the first line with a text of Send Request, click it to initiate the request.
As you initiate the request, a new pane to the right should open along with the response provided by the API. It's that simple.

Performing a POST Request
While performing a POST request, you generally have to send the data to be posted via the request's body. You can attach the data to the request's body as shown below:

On initiating the request, API should respond with the data posted.

You can perform any number of requests from a single file. To seperate multiple requests, just add ###
in between them.
Making Requests to a GraphQL API
Requests to an GraphQL can be made as well. For this example, we'll be using the GitHub API.

That's it for this article. As I explore more of this extension, I'll keep updating with more actions you can perform with this extension.