Category Archive Swagger

Byphunsanit

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