VS Code: Parallel Run Tasks

Byphunsanit

Backend, Compounds, Configurations, Debugger, Frontend, Full-stack, Microservices, Parallel, process, Project, Run, Tasks, VS Code, Workspace

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

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

VS Code: Parallel Run Tasks