VSCodeでSwaggerをプレビューしながら修正する

業務でSwaggerの修正や検証をする機会がまあまああるのですが、修正内容の確認がちょっとめんどくさいなーと思っていました。

そんな中、「Swagger Viewer」というVSCodeの拡張機能を教えてもらったので紹介したいと思います🙌

手順

Swagger Viewerを入れる

VSCodeで「Swagger Viewer」を検索し、インストールします。

yamlファイルを作成する

ChatGPTにお願いして、yamlのサンプルコードを作ってもらいました。
試しに使ってください。

openapi: 3.0.0
info:
  title: Sample API
  version: 1.0.0
  description: This is a sample API definition.
paths:
  /users:
    get:
      summary: Get a list of users
      description: Retrieves a list of user records.
      responses:
        '200':
          description: A list of user records
          content:
            application/json:
              example:
                - id: 1
                  name: John Doe
                - id: 2
                  name: Jane Smith
    post:
      summary: Create a new user
      description: Creates a new user record.
      requestBody:
        required: true
        content:
          application/json:
            example:
              name: New User
      responses:
        '201':
          description: User created successfully
  /users/{id}:
    parameters:
      - name: id
        in: path
        required: true
        schema:
          type: integer
      get:
        summary: Get a user by ID
        description: Retrieves a user record by ID.
        responses:
          '200':
            description: The user record
            content:
              application/json:
                example:
                  id: 1
                  name: John Doe
      put:
        summary: Update a user by ID
        description: Updates a user record by ID.
        requestBody:
          required: true
          content:
            application/json:
              example:
                name: Updated User
        responses:
          '200':
            description: User updated successfully
      delete:
        summary: Delete a user by ID
        description: Deletes a user record by ID.
        responses:
          '204':
            description: User deleted successfully

プレビューを表示する

対象のyamlファイルを開いた状態で、 Shift+Alt+p をすると、プレビューが表示されます。（MacはShift+command+p らしいです。）

もしくは、対象のyamlファイルを開いた状態で、コマンドパレットから「Preview Swagger」を選択します。

修正した内容は即時反映されるので、修正にとても便利です😆

クリックも可能です。

おわり

修正内容が即確認できるので、めちゃくちゃやりやすくなりました！
是非使ってみてください～！