I was pair programming with a friend a few weeks ago when the disparity between our experience levels (he's been an engineer for several years, I'm graduating a bootcamp) inevitably reared its head in the form of some light ribbing between old friends; "Why don't you break out your terminal in another window? I can't stand this little window thing you got going.", he said. I replied "I like to keep my tools on hand, and sometimes you need to see the terminal in VS Code while other windows are occupied." This dialogue is hardly unique to the software development field. No matter the vocation, it is in our human nature to develop preferences and a need to shape the environments we work in. Some prefer to have their apps sequestered from their primary workspaces. Some prefer them integrated. I decidedly fall in the latter category, and as such I have taken a liking to a neat VS Code extension (available starting with versions 1.57 and later) that came our last summer - Thunder Client.
I'll get one thing out of the way - Thunder Client isn't necessary. It doesn't really do anything that Postman can't, and in fact can't do certain things that Postman can, like proxy configuration or creating variable scripts. But while it has some limitations, the most frequent use cases are fully intact, and the lightweight design makes testing apis less of a chore. Additionally, the minimal design is intuitive and favors the most common use cases. As a relative newcomer to the tech industry, I appreciate approaching apps in a simple and straightforward way. I'm far more likely to test an api endpoint than I am a mock server, after all. So, without further ado, let's take a closer look at the design and features.
If you want to install it, begin by clicking the extensions icon in VS Code and search for "Thunder Client".
You'll need to restart VS Code to complete the install, and then you'll be greeted with a welcome page detailing the extension.
Right off the bat, you'll notice that Thunder Client adopts your VS Code theme choices to seamlessly integrate into the app. Featured prominently on the left is the New Request button that opens up a tab to display the request field, which is initially populated with a test endpoint. Pass in a parameter and a value and you'll get a welcome response on the right.
As for the primary features, all major HTTP requests can be sent (GET, POST, PUT, PATCH, DELETE, OPTIONS, and HEAD). Query parameters can also be added. If you add keys and values in the URL, they automatically populate the query parameters fields. There is an auth section where you can add add Basic Auth, OAuth2.0, Ntlm, Aws, and Bearer Token. A section for adding HTTP headers as keys and values is also available. Data can be sent using JSON, XML, text, form, form-encoded, graphql and binary in the body section. The last section beneath the request bar is where we can add conditions for testing. For example, we can check for a particular response code or a particular value in the response body. In the response section we have four tabs where we can look at the Response (nicely marked up in green for "OK" status), Headers, Cookies, and Test Results. On the far right there is an object literal ( {} ) that you can use to view and copy code snippets. On the far left, you can see the Activity, Collections and Env tabs, all of which can be filtered. You can save requests to collections, duplicate them, rename them or delete. Postman collections and environments can also be imported.
In sum, if you're like me and enjoy a workspace that is focused, consistent and straight to the point, Thunder Client is a great extension for you. Happy coding!
Top comments (0)