Visual Studio Code Swagger 導入 yaml API

便利機能

API設計書をyamlファイルで受け取る機会があり、何で開けばいいか分からない中、VScodeにいいプラグインがあることを見つけたので紹介したいと思います

「Swagger Viewer」

VScodeの拡張機能を開いて、「Swagger Viewer」をインストール ほぼこれだけ!笑

下記のテストコードを貼り付け

swagger: '2.0'
info:
  version: 1.0.0
  title: Test Web API
  description: リクエストパラメータに不備がある場合はステータスコード:400で返却する<br/>
    IDによるデータ取得時に該当データが存在しない場合はステータスコード:404で返却する<br/>
    原則としてAPI内でエラーが発生した場合はステータスコード:500で返却する
  contact:
    name: やっこさん
host: 999.999.999.999
basePath: /test-api/rest
schemes:
  - http
consumes:
  - application/json
produces:
  - application/json
tags:
  - name: 製品
paths:
  /products:
    get:
      tags:
        - 製品
      summary: 【API-001】製品マスタ取得
      description: 製品マスタ情報を一覧取得する
      operationId: getProducts
      produces:
        - application/json
      responses:
        '200':
          description: 製品マスタ情報
          schema:
            type: array
            items:
              $ref: '#/definitions/product'

definitions:
  product:
    description: 製品マスタ情報
    type: object
    properties:
      product_code:
        description: 製品コード
        type: string
        example: '01'
      product_name:
        description: 製品名
        type: string
        example: '冷奴製造機'

言語に「YAML」を選択する

「Shift」+「alt」+「p」で右側にSwagger UIが表示されます

もし、「Shift」+「alt」+「p」で表示されない場合、VScodeが「制限モード」になっているかもしれません。その場合ツールバーの下部の「管理」をクリックして、次の画面で「信頼する」をクリックしてください