🍺

[coc-restclient] VimでもVSCodeのREST Clientみたいなのを使いたい

2021/06/01に公開

TypeScript

開発中のAPIを試しに叩く時、これまではターミナルで都度curlまたはChrome拡張機能を使っていました。しかし、できれば常にターミナル・Vimで作業したいため、Visual Studio Codeの拡張機能のREST ClientみたいなのをVimでも使いたいと思っていました。

まだ自力でプラグインを作るほどの実力はないので既存のプラグインを漁っていたところ、coc.nvimの拡張機能でまさに「Visual Studio Codeの拡張機能のREST Clientみたいなもの」がありました。

本記事では簡単ですがこのcoc-restclientの使い方をご紹介します。

インストール

Vimを開いてCocInstallでインストールします。

:CocInstall coc-restclient

基本的な使い方

*.httpという拡張子でファイルを作成し、以下のようにエンドポイント等を記載します。そして:CocCommand rest-client.requestと実行するとリクエストが送信され、結果が別ウィンドウに表示されます。

restclient.http

# @name Root
GET http://localhost:3000 HTTP/1.1
Content-Type: application/json

一つの*.httpファイルに複数のエンドポイントを記載して管理することもできます。この場合、各エンドポイントを###で区切っておく必要があります。

restclient.http

# @name Root
GET http://localhost:3000 HTTP/1.1
Content-Type: application/json

###

# @name Signin
POST http://localhost:3000/signin HTTP/1.1
Content-Type: application/json

{
  "email": "hoge@example.com",
  "password": "hoge"
}

###

# @name GetUsers
GET http://localhost:3000/users HTTP/1.1
Content-Type: application/json
Authorization: Bearer

今回は、リクエストヘッダーのAuthorizationにトークン(jwt)を指定して実行するAPIの動作確認をしてみます。

※http://localhost:3000のAPIはテスト用に自作したものです。画像にはjwtをマスクせず表示していますがテスト用なので問題ありません。

まずはPOST http://localhost:3000/signinでサインインしてjwtを取得してみます。

次に、GET http://localhost:3000/usersでユーザー一覧を取得してみます。Authorizationヘッダーに先ほど取得したjwtを指定せずにリクエストを送ると401エラーになります。

今度はちゃんとAuthorizationヘッダーにjwtを指定してみます。すると、意図通りユーザー一覧が返ってきます。

なお、POSTリクエスト時のリクエストボディについては、エンドポイントとリクエストヘッダーを記載している行とリクエストボディの行は1行あけておく必要があります。また、jsonで記載します。

restclient.http

# @name PostUsers
POST http://localhost:3000/users HTTP/1.1
Content-Type: application/json
Authorization: Bearer

{
  "email": "test8@example.com",
  "name": "test8",
  "password": "test8"
}

設定の変更

いちいち:CocCommand rest-client.requestと打つのは面倒なのでキーバインドを設定しておきます。以下のように<Leader>0でリクエストを送るようにしておきました（coc-restclientのREADME.mdに書かれている通りです）。

noremap <silent> <Leader>0 :CocCommand rest-client.request <cr>

また、リクエスト結果にレスポンスヘッダーを表示したくない場合は以下の設定をcoc-settings.jsonに記載します。

coc-settings.json

"rest-client.showHeaders": false

他にもいくつか設定可能項目があります。詳細はREADME.mdのconfigurationをご参照ください。

おわりに

個人的にはお気に入りのcoc.nvimの拡張機能になりました。ちなみにcoc.nvimではfannheyward/create-coc-extensionを使うと気軽にTypeScriptで拡張機能を作り始めることができそうなので、より複雑なことをしたくなったら今度こそ自作してみようかと思います。

インストール

基本的な使い方

設定の変更

おわりに

Discussion