🌱

PostmanがいらなくなるかもしれないVSCodeの拡張機能Thunder Clientがすごい

2021/05/06に公開3

VSCodeの拡張機能でGUIベースのHTTPクライアントThunder Clientを試してみたらすごかったので紹介します。
https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client

Postmanのコレクションをインポートして使える

Thunder ClientはPostmanのコレクションをエクスポートしたJSONをインポートすることができます。

Thunder ClientにインポートしたいコレクションをPostmanの"Collections"で選択します。
コレクションをPostmanの"Collections"で選択

メニューから"Export"を選択し、コレクションを保存します。
メニューから"Export"を選択

VSCodeのアクティビティーバーから"Thunder Client"を選択します。
アクティビティーバーから"Thunder Client"を選択

サイドバーにThunder Clientが表示されるので"Collections"をクリックします。
"Collections"をクリック

"filter collections"の横のメニューをクリックします。
"filter collections"の横のメニューをクリック

"Import"をクリックして先程PostmanでエクスポートしたJSONを選択します。
"Import"をクリック

インポートができました。
インポート完了

Postmanと変わらない操作感

実際にリクエストをなげてみました。
Postmanを使ったことがあれば操作に迷うことはないと思います。
リクエスト

認証方式

認証方式はBasic認証、Bearerトークン、OAuth 2.0に対応しています。
認証方式

リクエストヘッダー

リクエストヘッダーの設定では自動補完が使えます。
リクエストヘッダー

リクエストボディー

リクエストボディーにはテキスト、JSON、XML、Formデータ、URLエンコードしたFormデータとGraphqlが使えます。
Graphqlではシンタックスハイライトも効きます。

リクエストボディー

テスト

テストもGUIで設定することができます。

テスト

インポート・エクスポート

作成したコレクションはインポート・エクスポートすることができ、共有することができます。

インポート・エクスポート

まとめ

今までVSCodeではREST Clientを使用していたのですが、
Thunder Clientは使用した感じもPostmanとほぼ変わらず、使いやすいです。
VSCodeのみで完結するのがとても便利なのでこれからはThunder Clientを使っていこうと思います。

Discussion

willcomwillcom

質問です。
コレクションをインポートして、Run All からコレクション内の API を一括で Run できると思います。
Postman であればコレクション内の API のうちどれを実行するか、どういう順序で実行するかを設定できますが、Thunder Client でもそれって可能なのでしょうか?
少し触ってみた感じだとコレクション内の API を全て Run することしかできなそうです…

README.md

u1u1

このプラグインはすごく便利なのだけどPostmanで対応しているAPI keyの認証に対応していないのでimportした時にAPI keyの設定が無視されてしまうのが個人的にはとても惜しい。

MeguriMeguri

APIリクエストのテストをもっと効率化したいなら、ECHOAPIもおすすめです。APIレスポンスを瞬時に確認できるので、開発のスピードが格段に上がります