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”: เพื่อไม่ให้ซ้ำกับหน้าอื่น ๆ