Published on

Using VS Code's REST Client extension instead of Postman

Last Modified on
Last modified on
Authors
Using VS Code's REST Client extension instead of Postman
Photo by Mick Haupt on Unsplash

These days, I have found it very difficult if not impossible to work with Postman. So I decided to see if there were any viable alternatives in VS Code. And there is! It is an extension I already had installed but had never previously used. Now I had an opportunity to do so, so I started to acquaint myself with it.

First of all, in order to be able to use it, it has to be able to recognize HTTP language. So I first created a .txt file and then I set the language to HTTP by clicking on PLAIN TEXT at the bottom of the Editor window and changing it to HTTP in the command palette that subsequently appeared.

Next, I had to set up some variables in the extension settings so that I could get started with making some HTTP requests.

I visited the extension settings and added the following inside the Rest-client settings.json under Environment variables:

"rest-client.environmentVariables": {
	"local": {
		"host": "localhost",
		"token": "test token"
	},
	"production": {
		"host": "https://interglobalmedia-weather-app.herokuapp.com",
		"token": "product token"
	},
	"$shared": {}
}

The "$shared": {} variable is already there, but I added the local and production environment variables.

Then I wanted to make a GET request to the production host, so I took the following steps:

  • I went back to my rest-client.txt file, navigated down to the bottom of the code editor window where it stated "No Environment", and clicked on it. That took me to the Code Editor Palette, and there I selected the production environment I had just created in the dropdown that appeared.

  • Next, I added the production url I used as the value of the production host in settings.json inside rest-client.txt:

https://interglobalmedia-weather-app.herokuapp.com/weather?address=london

and saved the file changes. The following screenshot is what the Code Editor window for that file looked like as a result (viewable in the transcript of this podcast on interglobalmedianetwork.com):

Send Request Link with Send Request text

Then, when I clicked on the ellipsis , the following appeared:

Send Request Link with GET Request

Then, when I clicked on "Send request", the following happened (viewable in the transcript of this podcast on interglobalmedianetwork.com):

Send Request Response

This file appears to the right of the rest-client.txt file containing the response to the GET request I made in rest-client.txt. Very cool! And there was no need to leave the code editor, to boot!

The response also appeared in a new browser window:

Response to Request in New Browser Window

There is much more to this extension than I covered right now (and I will continue to discuss it as I use it more), but this is a start for anyone new to it in the right direction.

I will be embedding this episode of Plugging in The Holes along with a transcript in the form of a post on interglobalmedianetwork.com for your hearing and reading pleasure. Bye for now!

Name of extension: REST Client

Created by: HuaChao Mao