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 ติดตั้ง Dependenciesnpm install --legacy-peer-deps
🎯 วิธีใช้งาน Run and Debug
Method 1: ใช้ Run and Debug Panel
- กด Ctrl+Shift+D (หรือ Cmd+Shift+D บน Mac) หรือที่เป็นรูปคลาย ๆ ลูกศร ที่มีแมลงเกาะอยู่
- เลือก “Start Swagger Editor” dropdown list
- กดปุ่มสีเขียว (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”: เพื่อไม่ให้ซ้ำกับหน้าอื่น ๆ