VS Code: Parallel Run Tasks

การทำ 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

ขั้นตอนการใช้งานจริง

1. ไปที่แถบ Run and Debug ( Ctrl+Shift+D )
2. เลือกรายการ “Run Project Parallel” จาก Dropdown ด้านบน
3. กดปุ่ม Play ( F5 )
4. 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 ได้

อ่านเพิ่มเติม

• AI: prompt VS Code Parallel Run Tasks
• VS Code: run Swagger-Editor
• VS Code: ลดพื้นที่จาก space เป็น tab