🌠

VSCodeでOpenAPI作成環境を整えるための拡張機能

2023/01/07に公開

はじめに

仕事でOpenAPI仕様に沿って、APIドキュメントを作成する機会がありました。
VSCodeに拡張機能をインストールして作成環境を整えたのですが、その時に使った拡張機能をまとめておこうと思います。
拡張機能をインストールしてLintやLive Previewをできるようにします。

なお、OpenAPIの仕様は以下のサイトで確認できます。
https://swagger.io/specification/

OpenAPI定義ファイルの新規作成、ナビゲーション、参照へのジャンプ、インテリセンス、プレビューなどができます。

名前: OpenAPI (Swagger) Editor
ID: 42Crunch.vscode-openapi
説明: OpenAPI extension for Visual Studio Code
パブリッシャー: 42Crunch
VS Marketplace リンク: https://marketplace.visualstudio.com/items?itemName=42Crunch.vscode-openapi

プレビューができます。サイドパネルだけでなく、ブラウザ上に表示することができます。
API開発中などで、ブラウザのデベロッパーツールを使いたい場合に便利かもしれません。

名前: openapi-designer
ID: philosowaffle.openapi-designer
説明: Live Preview of OpenApi Schema in VS Code.
パブリッシャー: philosowaffle
VS Marketplace リンク: https://marketplace.visualstudio.com/items?itemName=philosowaffle.openapi-designer

コード補完ができます。

名前: OpenApi Snippets
ID: proohit.openapi-snippets
説明: Provides snippets for OpenApiSpecification in VS Code
パブリッシャー: proohit
VS Marketplace リンク: https://marketplace.visualstudio.com/items?itemName=proohit.openapi-snippets

ドキュメントに対するバリデーションとリンターを提供してくれます。

名前: openapi-lint
ID: mermade.openapi-lint
説明: OpenAPI (Swagger) 2.0/3.0.x intellisense, validator, linter, converter, resolver
パブリッシャー: mermade
VS Marketplace リンク: https://marketplace.visualstudio.com/items?itemName=mermade.openapi-lint

ファイルパスを入力中に候補を表示してくれます。OpenAPI とは直接関係ありませんが、ファイル分割した際に便利でした。

名前: Path Intellisense
ID: christian-kohler.path-intellisense
説明: Visual Studio Code plugin that autocompletes filenames
パブリッシャー: Christian Kohler
VS Marketplace リンク: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

OpenAPI×VSCodeに関する記事で、よく「Swagger Viewer」という拡張機能が紹介されていると思いますが、ファイル分割に対応していなかったり（2022年8月時点）、プレビュー表示エラー時にエラー箇所がわかりにくかったので、今回は使いませんでした。