IDE ย่อมาจาก Integrated Development Environment แปลตรงตัวคือที่ทำงานรวมศูนย์ พูดแบบบ้าน ๆ คือ โต๊ะทำงานทั้งโต๊ะ ไม่ใช่แค่กระดาษที่เราเขียน

บทนี้ทำให้เปิดโปรแกรมพวกนี้แล้วไม่งง ว่าอะไรอยู่ตรงไหน

สไลด์ 1 — ทำไมไม่เปิดไฟล์ทีละอันเอง

เปิดทีละไฟล์แปลว่าเราต้องจำเองว่าไฟล์ไหนอยู่ที่ไหน ไฟล์ไหนเกี่ยวกับไฟล์ไหน และต้องสลับหน้าต่างไปมาตลอด

เปิดใน IDE แปลว่าไฟล์ทั้งโปรเจค ช่องแก้ไฟล์ และช่องพิมพ์คำสั่ง อยู่ในจอเดียว มองเห็นพร้อมกัน ซึ่งสำคัญมากเวลาสั่ง AI ทำงาน เพราะเราจะเห็นทันทีว่ามันไปแตะไฟล์ไหนบ้าง

สไลด์ 2 — โปรแกรมแบบนี้ มีตัวไหนให้เลือก

ตัวเลือกจุดเด่นเหมาะกับ
VS Codeฟรี คนใช้เยอะที่สุดมือใหม่เริ่มที่ตัวนี้ได้เลย
Cursorต่อยอดจาก VS Code หน้าตาแทบเหมือนกันคนที่อยากได้ฟีเจอร์สาย AI ในตัว
JetBrainsมีหลายตัวแยกตามภาษา เช่น PyCharm WebStormสายมืออาชีพที่ทำงานภาษาเดียวเป็นหลัก
ตัวอื่นที่แตกจาก VS Codeส่วนเสริมตัวเดียวกันติดตั้งได้คนที่ย้ายมาจาก VS Code ไม่ต้องเรียนใหม่

เลือกตัวไหนก็สั่งงาน AI ได้เหมือนกัน เริ่มจากตัวฟรีก่อนแล้วค่อยย้ายทีหลังได้ ไม่ต้องเสียเวลาเลือกนาน

สไลด์ 3 — ศัพท์ที่ต้องรู้ในบทนี้

  • IDE โปรแกรมทำงานรวมศูนย์ รวมที่แก้ไฟล์ ช่องคำสั่ง และค้นหาไว้ที่เดียว
  • Editor ช่องกลางจอที่เราพิมพ์และดูเนื้อไฟล์
  • Extension ส่วนเสริมที่ติดเพิ่มเข้าไปให้โปรแกรมทำอะไรได้อีก
  • Workspace โฟลเดอร์โปรเจคที่เปิดค้างไว้อยู่ตอนนี้

สี่คำนี้ใช้กับโปรแกรมทำงานทุกตัว ไม่ใช่แค่ตัวเดียว

สไลด์ 4 — ทัวร์หน้าจอ สี่โซนที่ต้องรู้จัก

  • โซนซ้าย ไฟล์ทั้งโปรเจค เป็นแผนผังว่ามีอะไรอยู่ที่ไหน
  • โซนกลาง ที่แก้ไฟล์ เปิดหลายไฟล์เป็นแท็บได้
  • โซนล่าง ช่องพิมพ์คำสั่ง ที่เดียวกับ Terminal ในบทที่แล้ว
  • โซนค้นหา ค้นทั้งโปรเจคว่าคำนี้อยู่ไฟล์ไหนบ้าง

จำสี่โซนนี้ได้ เปิดโปรแกรมไหนก็หาของเจอ เพราะทุกตัววางเหมือนกันหมด

ลองทำเลย

เปิดโปรแกรมที่ลงไว้ แล้วลากโฟลเดอร์งานของเราเข้าไปวาง จากนั้นชี้ให้ได้ว่าสี่โซนอยู่ตรงไหนบ้าง ใช้เวลาไม่ถึงสองนาที

สไลด์ 5 — Claude Code อยู่ตรงไหนในจอนี้

ใช้ได้สองแบบ

  • แบบหน้าต่างข้าง เปิดเป็นแผงข้างจอ คุยกับ AI แล้วเห็นว่าจะแก้ไฟล์ตรงไหน มีปุ่มรับหรือไม่รับก่อนแก้จริง
  • แบบพิมพ์คำสั่ง พิมพ์ claude ในช่องคำสั่ง ใช้ได้ทุกที่ที่มีช่องพิมพ์

สองทางทำงานเหมือนกัน ต่างกันแค่เห็นภาพมากน้อย มือใหม่แนะนำแบบหน้าต่างข้าง เพราะเห็นความเปลี่ยนแปลงก่อนกดรับ

สไลด์ 6 — ติดตั้งส่วนเสริม สามขั้นจบ

  • เปิดแถบส่วนเสริมในโปรแกรม
  • ค้นคำว่า Claude Code
  • กดติดตั้ง แล้วเข้าสู่ระบบครั้งเดียว

ติดตั้งส่วนเสริมไม่ได้ก็ไม่เป็นไร ยังพิมพ์ claude ในช่องคำสั่งได้เหมือนเดิม ทำงานได้ครบเท่ากัน

สไลด์ 7 — ไม่เปิดโปรแกรมนี้ ทำงานได้ไหม

ใช้ช่องคำสั่งอย่างเดียวก็พอ เมื่องานสั้นและรู้อยู่แล้วว่าจะให้ทำอะไร หรือเครื่องลงโปรแกรมเยอะไม่ได้ หรืออยากได้ความเร็วไม่ต้องเห็นภาพมาก

เปิดโปรแกรมนี้ดีกว่า เมื่ออยากเห็นว่าไฟล์ไหนถูกแก้ตรงไหน ต้องเข้าไปแก้เองบางจุด หรือเป็นงานยาวหลายวันที่ต้องเปิดหลายไฟล์

เริ่มจากช่องคำสั่งก็ได้ พอเริ่มงงว่าอะไรอยู่ตรงไหน ค่อยเปิดจอใหญ่มาช่วยมอง

เช็คลิสต์ก่อนไปบทถัดไป

  • ลงโปรแกรมสักตัวไว้ในเครื่องแล้ว
  • เปิดโฟลเดอร์งานเป็น Workspace ได้
  • ชี้ได้ว่าสี่โซนอยู่ตรงไหนบนหน้าจอ
  • รู้ว่าจะเรียก Claude Code ได้สองทาง และเลือกทางที่ถนัดแล้ว