4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

VSCodeのSwaggerEditor拡張機能をオススメしたい

Last updated at Posted at 2021-02-26

VSCode + Swagger で検索すると、Swagger Viewer を勧める記事はたくさん出てくるものの、なぜか OpenAPI (Swagger) Editor の記事が見当たらないので、おせっかいながらヨイショしておく。

Swagger UI でプレビューできるよ

image.png
当然のことながら、エディタで Spec を書きながら、Swagger UI でリアルタイムにプレビューできます。

プレビューを ReDoc に変更することもできるよ

image.png
拡張機能の設定で、プレビュー用レンダラーに Swagger UI か ReDoc を選択できる。

OpenAPI、Swagger の入力補完が効くよ

image.png
入力補完いいですよね。タイプミスも減るし。人類の叡智。

正直、Swaggerのプロパティなんて全然覚えていないのですが、入力補完のおかげで迷わずサクサク書けます。

入力ミスを警告してくれるよ

image.png
必須プロパティが足りていない場合や、定義に存在しないプロパティが記述されていた場合などに警告してくれます。

もちろん、SwaggerとOpenAPIのどちらも対応しています。

コードジャンプが便利だよ

image.png
左ツールバーに「/API」ボタンが追加され、クリックするとファイルツリーのビューがAPI内のエイリアス一覧に変わります。

Swagger Spec はどうしても長大になり、見通しが悪くなりがちなので、コードジャンプできるのはものすごく助かります。

もちろん、Pathだけでなく各種定義にもジャンプできます。

セキュリティレポート機能があるらしい?

私は使ったことありませんが、そういう機能があるらしいです。
image.png
この紫色のボタンがそうらしい。

残念なところ

Codegen できない

Swagger Editor と Sagger UI の機能を備えてるなら、Swagger Codegen の機能もサポートしてほしかった。

Swagger UI のプレビューを保存できない

ひょっとすると方法があるのかもしれませんが、見つけられていません。

結局、SwaggerHub の方が高機能

上記2項目が不満なら SwaggerHub 使えばいいじゃん、という話になりますよね。
けど、ローカルでVSCodeでやりたいんスよ。
プロジェクトデータと一緒にGit管理したいんですよ。

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?