การทำ Parallel Run หรือการสั่งให้ VS Code รันทั้ง Backend, Frontend และ Debugger ใน Project Workspace พร้อมกันในคลิกเดียว เป็นเทคนิคที่ช่วยประหยัดเวลาได้มาก โดยเฉพาะในโปรเจกต์ที่มีความซับซ้อนสูง ( Microservices หรือ Full-stack )
คู่มือการทำ 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 ที่ต้องการ ( เช่น 7299 และ 7899 ) แล้วสั่งkill -9 - Wait Task: ใช้
nc( Netcat ) เพื่อตรวจสอบว่า Service ตื่นขึ้นมาหรือยัง ก่อนที่จะเปิด Browser ( Chrome ) เพื่อป้องกันหน้าเว็บ Error 404
Tip: ใน tasks.json ของคุณ มีการใช้ || true เพื่อให้ Task ไม่หยุดทำงานแม้ว่าจะไม่พบ Process ที่ต้อง Kill
การตั้งค่าการรันใน launch.json
คุณต้องสร้างรายการ configurations สำหรับแต่ละส่วนของแอปพลิเคชัน เช่น
- Backend ( Java / Spring Boot ): กำหนด
vmArgsเพื่อส่งค่า Profiles ( เช่นDEV, SQLSERVER) และ Path ของไฟล์ XML/SQL ให้ถูกต้อง - Frontend ( Node.js ): ใช้
node-terminalเพื่อรันคำสั่งnpm run startพร้อมเพิ่มNODE_OPTIONSเพื่อขยาย Memory ( เช่น 8GB ) ในกรณีที่โปรเจกต์มีขนาดใหญ่ - Debugger ( Chrome ): ตั้งค่า
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 ทุกอย่าง ( ทั้ง Java, Node และ Chrome ) จะถูกปิดลงพร้อมกันทันที
การจัดการความปลอดภัยและความสะดวกใน settings.json
หากคุณต้องรันคำสั่ง Terminal บ่อยๆ หรือใช้เครื่องมือเฉพาะทาง เช่น sqlcmd บน Mac คุณสามารถตั้งค่า chat.tools.terminal.autoApprove เพื่อให้ VS Code รันคำสั่งเหล่านั้นได้ทันทีโดยไม่ต้องคอยกด Confirm
ขั้นตอนการใช้งานจริง
- ไปที่แถบ Run and Debug ( Ctrl+Shift+D )
- เลือกรายการ “Run Project Parallel” จาก Dropdown ด้านบน
- กดปุ่ม Play ( F5 )
- VS Code จะทำตามลำดับดังนี้
- รัน
Kill Running Services( ล้าง Port ) - เริ่มรัน
BackendและFrontendพร้อมกัน - รัน
Wait for All Servicesในพื้นหลัง - เมื่อทุก Port เช่น ( 7299, 7899 ) ตอบสนอง Chrome จะเปิดขึ้นมาโดยอัตโนมัติ
- รัน
ข้อควรระวังสำหรับผู้ใช้ Mac ( M1 / M2 / M3 )
- Java Home: ควรระบุ Path ของ JDK ให้ชัดเจนใน
envเช่น/opt/homebrew/opt/openjdk@21เพื่อป้องกันปัญหา Version Conflict - PATH: สำหรับ Frontend อย่าลืมดึง
${env:PATH}มาด้วย เพื่อให้เรียกใช้คำสั่งจาก Homebrew ได้
อ่านเพิ่มเติม