การทำ Parallel Run หรือการสั่งให้ VS Code รันทั้ง Backend, Frontend และ Debugger ใน Project Workspace พร้อมกันในคลิกเดียว เป็นเทคนิคที่ช่วยประหยัดเวลาได้มาก โดยเฉพาะในโปรเจกต์ที่มีความซับซ้อนสูง
คู่มือการทำ Parallel Run ใน VS Code
หัวใจสำคัญของการทำ Parallel Run ใน VS Code ประกอบด้วย 3 ส่วนหลัก คือ Tasks , Configurations และ Compounds โดยไฟล์พวกนี้จะซ่อนอยู่ใน root folder/.vscode
การเตรียมสภาพแวดล้อมด้วย tasks.json
ก่อนจะรันแอปใหม่ เราควรล้างกระบวนการเก่าที่ค้างอยู่ใน Port ออกก่อน เพื่อป้องกัน Error “Port already in use” และสร้าง Task สำหรับรอความพร้อม
- Kill Task: ใช้
lsofค้นหา PID ของ Port ที่ต้องการ แล้วสั่งkill -9 - Wait Task: ใช้
ncเพื่อตรวจสอบว่า Service ตื่นขึ้นมาหรือยัง ก่อนที่จะเปิด Browser เพื่อป้องกันหน้าเว็บ Error 404
Tip: ใน tasks.json ของคุณ มีการใช้ || true เพื่อให้ Task ไม่หยุดทำงานแม้ว่าจะไม่พบ Process ที่ต้อง Kill
การตั้งค่าการรันใน launch.json
คุณต้องสร้างรายการ configurations สำหรับแต่ละส่วนของแอปพลิเคชัน เช่น
- Backend : กำหนด
vmArgsเพื่อส่งค่า Profiles และ Path ของไฟล์ XML/SQL ให้ถูกต้อง - Frontend : ใช้
node-terminalเพื่อรันคำสั่งnpm run startพร้อมเพิ่มNODE_OPTIONSเพื่อขยาย Memory ในกรณีที่โปรเจกต์มีขนาดใหญ่ - Debugger : ตั้งค่า
urlให้ตรงกับ Port ของ Frontend และใส่preLaunchTaskให้รอจนกว่า Backend และ Frontend จะพร้อม
การรวมร่างด้วย compounds
นี่คือส่วนที่ทำให้เกิด “Parallel Run” โดยการสร้าง Group ชื่อว่า “Run Project Parallel”
"compounds": [ { "name": "Run Project Parallel", "configurations": [ "Backend", "Frontend", "Chrome" ], "stopAll": true }
]
- configurations: ระบุชื่อ Name จากส่วน configurations ที่ต้องการให้รันพร้อมกัน
- stopAll: true: เมื่อเรากด Stop ใน VS Code ทุกอย่าง จะถูกปิดลงพร้อมกันทันที
การจัดการความปลอดภัยและความสะดวกใน settings.json
หากคุณต้องรันคำสั่ง Terminal บ่อย ๆ หรือใช้เครื่องมือเฉพาะทาง เช่น sqlcmd บน Mac คุณสามารถตั้งค่า chat.tools.terminal.autoApprove เพื่อให้ VS Code รันคำสั่งเหล่านั้นได้ทันทีโดยไม่ต้องคอยกด Confirm
ขั้นตอนการใช้งานจริง
- ไปที่แถบ Run and Debug
- เลือกรายการ “Run Project Parallel” จาก Dropdown ด้านบน
- กดปุ่ม Play
- VS Code จะทำตามลำดับดังนี้
- รัน
Kill Running Services - เริ่มรัน
BackendและFrontendพร้อมกัน - รัน
Wait for All Servicesในพื้นหลัง - เมื่อทุก Port เช่น ตอบสนอง Chrome จะเปิดขึ้นมาโดยอัตโนมัติ
- รัน
ข้อควรระวังสำหรับผู้ใช้ Mac
- Java Home: ควรระบุ Path ของ JDK ให้ชัดเจนใน
envเช่น/opt/homebrew/opt/openjdk@21เพื่อป้องกันปัญหา Version Conflict - PATH: สำหรับ Frontend อย่าลืมดึง
${env:PATH}มาด้วย เพื่อให้เรียกใช้คำสั่งจาก Homebrew ได้
อ่านเพิ่มเติม