DEV Community

Cover image for VS Code Tip of the Week: The Thunder Client Extension
Nick Taylor for VS Code Tips

Posted on • Originally published at community.vscodetips.com

VS Code Tip of the Week: The Thunder Client Extension

This week's VS Code Tip off the Week is the Thunder Client extension.

Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code

There's amazing tools out there like Postman, Postwoman (now Hoppscotch), etc. but I like the fact that I can use this directly within VS Code.

Typing thund in the VS Code Command Palette

Select Thunder Client New Request from the available items in the list.

The Thunder Client New Request window open in VS Code

The New Request window opens with a test GET request to https://www.thunderclient.com/welcome.

Click the SEND button to make the GET request. A response from thunderclient.com is returned.

The response from the GET request to https://www.thunderclient.com/welcome. The value is the following JSON: {<br>
  "message": "Welcome to Thunder Client",<br>
  "about": "Thunder Client is a hand-crafted lightweight Rest API Client extension for VS Code.",<br>
  "createdBy": "Ranga Vadhineni",<br>
  "github": "github.com/rangav/thunder-client-support",<br>
  "twitter": "twitter.com/thunder_client",<br>
  "auth": "Supported Authentication methods Basic Auth, Bearer Token & OAuth 2.0",<br>
  "graphql": "The client supports Graphql Query & Variables",<br>
  "support": "For Bugs & Feature requests please submit on github",<br>
  "share": "Please spread the word about Thunder Client"<br>
}

There's a lot more you can do with the extension, so I encourage you to check out their repository on GitHub!

GitHub logo rangav / thunder-client-support

Thunder Client is a lightweight Rest API Client Extension for VS Code.

Thunder Client

installs version

Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code, hand-crafted by Ranga Vadhineni with simple and clean design. The source code is not open source. You can report any Bugs Or Feature requests here.

Story behind Thunder Client

  • Read Launch Blog Post on Medium

Menu

How to Use

  • Install the Extension, Click Thunder Client icon on the Action Bar.
  • From Sidebar click New Request button to test API
  • Video: youtube.com/watch?v=NKZ0ahNbmak
  • Minimum vscode version now required is v1.63.0

Tech

  • Thunder Client is built with Javascript, Typescript, Flexbox, Ace Editor, Got, Nedb




Happy VS Coding!

Discussion (16)

Collapse
drsimplegraffiti profile image
Abayomi Ogunnusi

Can thunder client publish the end points as documents?

Collapse
ranga_vadhineni profile image
Ranga Vadhineni

Hi, I am creator of Thunder Client

can you please provide more details what you meant by end points as documents?

Collapse
drsimplegraffiti profile image
Abayomi Ogunnusi • Edited on

Kindly refer to the image link below...
dev-to-uploads.s3.amazonaws.com/up...

For example, In postman you can publish all endpoints as collections that can be shared between developers....

Thread Thread
ranga_vadhineni profile image
Ranga Vadhineni • Edited on

You can save requests to collections in Thunder Client also, you can share with your team by saving the requests data to git(see documentation on GitHub)

also you export a collection to json file.

You can generate code snippet too.

dev-to-uploads.s3.amazonaws.com/up...

Thread Thread
drsimplegraffiti profile image
Abayomi Ogunnusi

Thanks for the reply... I will definitely check Thunder Client

Collapse
cavo789 profile image
Christophe Avonture

Hi Ranga
Just to say: Thanks ! Your extension is a must have.

Thread Thread
ranga_vadhineni profile image
Ranga Vadhineni

Glad you like the extension, let me know if you have any questions.

Thread Thread
cavo789 profile image
Christophe Avonture

Did you know if there is any good tutorials on how to use it with OAuth2 authentication ?

Thread Thread
ranga_vadhineni profile image
Ranga Vadhineni
Thread Thread
cavo789 profile image
Christophe Avonture

Thanks Ranga! I think it's not my use case: the tutorial is using "Client Credentials" for the Grant type while, I think, I need to use "Authorization Code".

The app I'm trying to use is indeed using such code that I, then, need to pass back to the calling application. My redirect URL is using a "/saveCode" URI and, I think, I need to give him the generated code (once logged in).

I continue to try / search on Google...

Thread Thread
ranga_vadhineni profile image
Ranga Vadhineni • Edited on

OAuth2 - Authorization Code is also easy to test.

Can you create a new issue on our Github page, I will share some screenshots that might be helpful.

Collapse
nickytonline profile image
Nick Taylor Author

Hmm, I’m not sure. Maybe @ranga_vadhineni, the creator of Thunder Client, can chime in. 😎

Collapse
mooktar profile image
mooktar

Basically, thunder client satisfy my need right now.

Collapse
nickytonline profile image
Nick Taylor Author • Edited on

Jane Foster as Thor in Thor Love and Thunder

Collapse
pdfreviewer profile image
pdfreviewer • Edited on

I've been long for such an extension for VSCode. A great tool to use to test web APIs.

Collapse
ranga_vadhineni profile image
Ranga Vadhineni

Hi All, just want to post an update.

  • Our Code Snippet feature now supports more languages including Flutter Dart & Php Laravel
  • The code snippet is updated in real-time as you make changes to request Image description