หมวดหมู่: API

VS Code: run Swagger-EditorVS Code: run Swagger-Editor

Swagger-Editor เป็นprogram ที่นิยมในการที่ใช้ในการ พัฒนา APi แบบ RESTful API โดยสามารถ run ได้อย่างอิสระ เช่น Swagger: การติดตั้ง Swagger Editor โดยใช้คำสั่งอย่าง http-server swagger-editor -a 127.0.0.1 -p 8080 แต่อยากจะให้มันใช้ใน VS Code ได้โดยการคลิก RUN AND DEBUG ก็เข้าไปทำเพิ่มเติมอีกนิด

โดยปกติ .vscode จะซ่อนอยู่ใน project root ของเรา

1 สร้างไฟล์ขึ้นมาโดยมีเนื้อหา
.vscode/launch.json

{ "configurations": [ { "name": "Start Swagger Editor", "type": "node", "request": "launch", "runtimeExecutable": "npm", "runtimeArgs": [ "run", "dev" ], "cwd": "${workspaceFolder}", "console": "integratedTerminal", "internalConsoleOptions": "neverOpen", "serverReadyAction": { "pattern": "webpack compiled|Local:.*? (https?://\\S+) |Local:\\s* (http://\\S+) ", "uriFormat": "http://localhost:8080", "action": "openExternally" }, "env": { "NODE_ENV": "development" } }, { "name": "Install Dependencies First", "type": "node", "request": "launch", "runtimeExecutable": "npm", "runtimeArgs": [ "install" ], "cwd": "${workspaceFolder}", "console": "integratedTerminal" } ], "version": "0.2.0"
}

2 สร้างไฟล์ขึ้นมาโดยมีเนื้อหา
.vscode/tasks.json

{ "tasks": [ { "label": "Run Swagger Editor (Development) ", "type": "shell", "command": "npm", "args": [ "run", "dev" ], "isBackground": true, "problemMatcher": [], "group": { "kind": "build", "isDefault": true }, "detail": "Start development server with hot reload" }, { "label": "Run Swagger Editor (Production Build) ", "type": "shell", "command": "npm", "args": [ "start" ], "isBackground": true, "problemMatcher": [], "group": "build", "detail": "Build and serve production version" }, { "label": "Run Swagger Editor (Hot Server) ", "type": "shell", "command": "npm", "args": [ "run", "hot-server" ], "isBackground": true, "problemMatcher": [], "group": "build", "detail": "Start development server accessible from all network interfaces" }, { "label": "Build Swagger Editor", "type": "shell", "command": "npm", "args": [ "run", "build" ], "problemMatcher": [], "group": "build", "detail": "Build the project for production" }, { "label": "Install Dependencies", "type": "shell", "command": "npm", "args": [ "install" ], "problemMatcher": [], "group": "build", "detail": "Install npm dependencies" }, { "label": "Run Tests", "type": "shell", "command": "npm", "args": [ "test" ], "problemMatcher": [], "group": "test", "detail": "Run all tests (unit tests, e2e tests, and linting) " }, { "label": "Lint Code", "type": "shell", "command": "npm", "args": [ "run", "lint" ], "problemMatcher": [ "$eslint-stylish" ], "group": "test", "detail": "Run ESLint to check code quality" } ], "version": "2.0.0"
}

3 ติดตั้ง Dependencies
npm install --legacy-peer-deps

🎯 วิธีใช้งาน Run and Debug

Method 1: ใช้ Run and Debug Panel

  1. กด Ctrl+Shift+D  (หรือ Cmd+Shift+D บน Mac) หรือที่เป็นรูปคลาย ๆ ลูกศร ที่มีแมลงเกาะอยู่
  2. เลือก “Start Swagger Editor” dropdown list
  3. กดปุ่มสีเขียว (Play button)

Method 2: ใช้ Keyboard Shortcut

  • กดปุ่ม F5 โดยตรง

Method 3: ใช้ Command Palette

เลือก configuration ที่ต้องการ

กด Ctrl+Shift+P  (หรือ Cmd+Shift+P)

พิมพ์ “Debug: Start Debugging”

คุณสมบัติที่ได้

  • One-Click Start: เริ่ม Swagger Editor ด้วยการกดปุ่มเดียว
  • Auto Browser: เปิดเบราว์เซอร์อัตโนมัติที่ http://localhost:8080
  • Hot Reload: อัปเดตโค้ดทันทีเมื่อมีการเปลี่ยนแปลง
  • Integrated Terminal: ใช้ terminal ใน VS Code
  • Easy Stop: กด Shift+F5 เพื่อหยุดการทำงาน

โดยอาจจะเปลี่ยนจาก port 8080 เป็นตัวอื่น เช่น 8081 ใน “uriFormat”: เพื่อไม่ให้ซ้ำกับหน้าอื่น ๆ