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