You might not need Postman if you use Visual Studio Code

Kheoh Yee Wei
Sep 7, 2018 · 3 min read

Manage and making API calls all in Visual Studio Code

“peeled pomelo fruit” by Charles Deluvio 🇵🇭🇨🇦 on Unsplash

In my view, Postman has become bloated, and its UI layout and hierarchy are confusing. But perhaps if you have tons of endpoints to manage, it’s still the best tool of its kind out there. Otherwise, I would like to introduce you a way you can easily manage and make API calls in Visual Studio Code!

The tool that makes this all possible is a VSCode extension called REST Client. So go ahead and install it and let me share with you what I have learnt so far with it! 😃

First off, two quick things to get you going:

  1. Open a new editor.
  2. Change the language mode to http — press ctrl+shift+p , search Change Language Mode and select http .

Now we can start writing some API calls.

REST Client supports custom variables that are prefixed with a @ . Variables are great for things we use often and everywhere, which in this case they are your access_token , api_credential , and base_url .

Note the ‘@’ character in front of each variable!

To use a custom variable, you just need to enclose it with a pair of double curly brackets like so {{custom_variable}} . We will see this in action below.

REST Client supports constructing API calls written in the standard of curl and RFC 2616 (don’t worry as you will see in a bit it’s very self-explanatory!). Let’s see what each of those might look like in practice. 🙆

cURL

cURL. Notice the {{ }}

You can write it out yourself, or if you already have APIs being called in your browser, you can easily copy and paste them as cURL. Here is how you copy in Chrome. Although Firefox has similar feature and steps to achieve it, it currently has a bug being resolved.

RFC 2616

RFC 2616

There are 3 main parts here: request line, the headers, and the request body. The headers (Line-2 and Line-3) have to come below the request line (Line-1). Then you need to leave a blank line(Line-4) before constructing the request body (Line-5–8). See? There’s nothing to it right?! Well at least that’s as far as I know about it 😆

Managing APIs

You can have multiple API constructs living in a file by separating each of them with a line of ### delimiter, like so:

Separate APIs with a line of ‘###’

To look up a specific API endpoint, you can utilize VSCode’s symbol look up capability — ctrl+shift+o — and you will see a list of your APIs!

ctrl+shift+o (btw that’s the alphabet o…). Now you can search!

And… that’s all from me! While it’s possible to take this to the advanced level, for now, give it a go and you might just find that what you have learnt here would be great for a small project or something quick and dirty that doesn’t incur much cognitive overhead. 🙇

“Lunch break in Tianjin industrial zone” by Kheoh Yee Wei

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade