บทเรียน 86 · Frontend · Agentic Workflow

Claude Code คืออะไร และติดตั้งใน VS Code

~20 นาที · บทแรกของกลุ่ม Agentic Workflow · ควรผ่านกลุ่มสร้างแอป Next.js (บท 79–85) มาก่อน เพราะจะใช้โปรเจกต์นั้นเป็นที่ทดลอง

ที่ผ่านมาเวลาติดอะไร คุณอาจเปิดหน้าแชท AI แล้ววางโค้ดถาม ได้คำตอบ ก็อปกลับมาวาง รัน build แล้วถ้ายังพังก็ก็อป error กลับไปถามใหม่
สไลด์ชุดนี้พาไปอีกแบบ: ให้ AI เข้ามาทำงานในโฟลเดอร์โปรเจกต์ของคุณเอง — อ่านไฟล์เอง รันคำสั่งเอง แก้โค้ดเอง แล้วรัน build ซ้ำเองจนผ่าน
ฟังดูสะดวกกว่ามาก และมันก็สะดวกจริง แต่มันคือคนละเรื่องกับแชท: ตัวที่แก้ไฟล์และรันคำสั่งในเครื่องคุณได้ ต้องมีคนตัดสินว่าให้มันทำอะไรได้บ้าง และต้องมีขั้นตอนทำงานที่ชัด ซึ่งคือเรื่องของบท 87
บทนี้ทำสามอย่าง: แยกให้ออกว่า Claude Chat · Claude Code · Claude Cowork ต่างกันยังไง (สไลด์หน้า 5–7) · ติดตั้ง Claude Code ใน VS Code (สไลด์หน้า 8–10) · และรู้จักระบบสิทธิ์ก่อนกดอนุญาตครั้งแรก

🧰 ของที่ใช้ตรวจในบทนี้

VS Code                      1.136.0     # code --version
Claude Code for VS Code      2.1.261     # code --list-extensions --show-versions
Claude Code (ตัวที่ติดมากับ extension)  2.1.261 (Claude Code)   # --version
node                         v24.14.0
โปรเจกต์ทดลอง                create-next-app (next 16.3.5) แบบเดียวกับบท 79–85

ข้อมูลวิธีติดตั้งและระบบสิทธิ์ทั้งหมดเปิดจากเอกสารทางการ code.claude.com/docs เมื่อ 15 ก.ย. 2026 (docs.claude.com เปิดแล้วพาไปหน้าเดียวกัน) — ไม่ได้เขียนจากความจำ
ผลรันทุกก้อนในบทนี้ก็อปจากหน้าจอจริง · ผมไม่ได้ส่ง prompt ให้ Claude เลยสักครั้ง (ผลตอบของ AI ไม่ซ้ำกันทุกรอบ เอามาโชว์เป็น “ผลรันจริง” ไม่ได้) จึงรันแค่ --version กับ --help
⚠️ Claude Code ออกเวอร์ชันใหม่ถี่มาก ถ้าหน้าจอของคุณไม่ตรงกับบทนี้ ให้เชื่อเอกสารทางการฉบับปัจจุบัน

กลุ่มนี้เรียนอะไร — สไลด์หน้า 1–4

สไลด์ชื่อ Agentic Workflow — With Claude Code ผู้สอนคือ Joey Wasin (Software engineer ที่ ODDS) หน้า 3 แบ่งเนื้อหาเป็นสี่ท่อน:

ท่อนในสไลด์คำโปรยในสไลด์เรียนในบทไหน
01 SetupSetup & install Claude Codeบท 86 (บทนี้)
02 Agentic WorkflowAI-driven processบท 87 เป็นต้นไป
03 PromptingAnatomy of a good promptบทถัด ๆ ไปของกลุ่ม
04 RecapWhy we should know agentic workflowท้ายกลุ่ม

หน้า 4 คือหน้าคั่น “Setup” และหน้า 5 คือหน้าคั่น “Introduction ClaudeAI” — ไม่มีเนื้อหาเพิ่ม

Claude ตัวเดียว แต่มีสามหน้าตา — สไลด์หน้า 6–7

สไลด์หน้า 6 ชื่อ “ClaudeAI Assistance” เป็นภาพหน้าเว็บ claude.com ที่มีช่องพิมพ์ “How can I help you today?” ส่วนหน้า 7 วางภาพหน้าเว็บของผลิตภัณฑ์สามตัวเรียงกัน: Claude Chat · Claude Code · Claude Cowork

ทั้งสามตัวใช้โมเดล Claude คิดเหมือนกัน สิ่งที่ต่างคือ “มือ” ของมันเอื้อมไปถึงอะไรได้บ้าง:

🔧 เทียบกับของจริง

นึกถึงตอนก๊อกน้ำที่บ้านรั่ว:
Chat คือโทรปรึกษาช่าง — คุณเล่าอาการ ส่งรูปให้ดู ช่างบอกว่าให้ขันตรงไหน แต่คุณเป็นคนลงมือขันเอง ถ้ายังรั่วก็โทรกลับไปเล่าใหม่
Code คือเรียกช่างมาที่บ้านแล้วให้เข้าห้องน้ำได้ — ช่างเปิดดูท่อเอง ลองเปิดน้ำเอง ขันเอง แล้วเปิดน้ำเช็คซ้ำเองจนไม่รั่ว · คุณยืนดูอยู่ข้าง ๆ และช่างต้องขออนุญาตก่อนทุบกระเบื้อง
Cowork คือจ้างผู้รับเหมา — บอกเป้าหมาย “รีโนเวทห้องน้ำ” แล้วไปทำอย่างอื่น เย็น ๆ กลับมาตรวจงาน

ที่ไม่เหมือนกัน: ช่างจริงที่ขันผิดจะรู้ตัวจากน้ำที่ยังหยด แต่ AI รู้ว่าผิดได้เฉพาะเมื่อมีอะไรฟ้องให้เห็น — build พัง · tsc ฟ้อง · test แดง · ถ้าโค้ดผิดแบบที่ build ผ่าน (เหมือนลืม key ในบท 78) มันก็อาจรายงานว่า “เสร็จแล้ว” อย่างมั่นใจ
และช่างจริงรู้เองว่าห้องไหนห้ามเข้า แต่ agent รู้แค่ขอบเขตที่คุณตั้งให้ — เรื่องนี้คือหัวข้อ “สิทธิ์” ข้างล่าง

🗣 ศัพท์ที่เพิ่งเรียนไป
AI assistant แบบแชท (chat assistant)
AI ที่รับข้อความเข้า ตอบข้อความออก ไม่มีมือไปแตะไฟล์หรือเครื่องของคุณ · เหมาะกับคำถามที่คำตอบคือ “ความเข้าใจ” · ถาม senior ได้ว่า “เรื่องนี้ถามแชทพอ หรือควรให้ agent เข้าไปดูโค้ดจริง”
agent / agentic
AI ที่ลงมือทำได้ ไม่ใช่แค่ตอบ — เลือกเองว่าจะเปิดไฟล์ไหน รันคำสั่งอะไร แล้วดูผลเพื่อตัดสินใจขั้นต่อไป · เอกสารทางการเรียก Claude Code ว่า agentic coding tool · คำว่า agentic workflow ในชื่อสไลด์คือ “ขั้นตอนทำงานที่มี agent เป็นคนลงมือ”
tool (เครื่องมือของ agent)
ความสามารถแต่ละอย่างที่ agent เรียกใช้ได้ เช่น อ่านไฟล์ · แก้ไฟล์ · ค้นในโปรเจกต์ · รันคำสั่ง shell · เอกสารทางการเขียนไว้ตรง ๆ ว่าถ้าไม่มี tool, Claude ทำได้แค่ตอบเป็นข้อความ · ถาม AI ได้ว่า “which tools will you need for this task?”

แชทถาม-ตอบ กับ agent — ความต่างที่ทำให้ต้องมีขั้นตอน

สมมติหน้า All Recipes ที่ทำในบท 85 build พังด้วย error เรื่อง type หนึ่งบรรทัด · สองวิธีแก้หน้าตาแบบนี้:

ใช้แชท — คุณคือคนเดินงาน

  • คุณรัน npx next build เอง แล้วก็อป error ไปวาง
  • แชทเดาว่าน่าจะอยู่ไฟล์ไหน เพราะมันไม่เห็นไฟล์จริง
  • คุณเปิดไฟล์เอง แก้ตามเอง
  • รัน build ใหม่เอง · ยังพังก็วนกลับไปข้อ 1
  • ✅ ไม่มีอะไรในเครื่องเปลี่ยนโดยที่คุณไม่ได้ลงมือ

ใช้ Claude Code — agent เดินงาน

  • agent รัน build เอง อ่าน error เอง
  • ค้นในโปรเจกต์หาไฟล์ที่เกี่ยวข้องจริง แล้วเปิดอ่าน
  • แก้ไฟล์เอง (อาจแก้หลายไฟล์)
  • รัน build ซ้ำเองจนผ่าน แล้วรายงานกลับ
  • ⚠️ ไฟล์ในเครื่องเปลี่ยน และคำสั่งถูกรันจริง — ต้องมีคนคุม

วงจรฝั่งขวามีชื่อเรียกในเอกสารทางการว่า agentic loop ซึ่งแบ่งเป็นสามช่วงที่ปนกันไปมา:

prompt ของคุณ │ ▼ ┌─► 1. gather context หาข้อมูล — ค้นไฟล์ · อ่านโค้ด · อ่าน error │ │ │ ▼ │ 2. take action ลงมือ — แก้ไฟล์ · รันคำสั่ง │ │ │ ▼ │ 3. verify results ตรวจผล — รัน build / test ซ้ำ │ │ └── ยังไม่เสร็จ ─┘ เสร็จแล้ว ─► รายงานกลับ * คุณกดขัดจังหวะเพื่อเปลี่ยนทิศได้ทุกจุด

สังเกตว่าทุกลูกศรคือการตัดสินใจของ AI ไม่ใช่ของคุณ · ถ้าคุณสั่งกว้าง ๆ ว่า “ทำหน้า recipes ให้สวยขึ้น” มันก็จะวนลูปนี้ไปตามความเข้าใจของมันเอง แก้ไปกี่ไฟล์ก็ได้ — นี่คือเหตุผลที่สไลด์ท่อนที่ 02 ต้องมีขั้นตอน (workflow) ที่ชัด ว่าจะวางแผนก่อน ลงมือเมื่อไหร่ ตรวจยังไง แล้วค่อย commit ซึ่งคือเนื้อหาของ บท 87

งานสี่งานนี้ แต่ละงานควรใช้ Chat หรือ Code?

  1. อยากเข้าใจว่า useEffect ต่างจาก useMemo ยังไง ยังไม่ได้เปิดโปรเจกต์ไหนเลย
  2. เปลี่ยนชื่อ prop title เป็น name ใน component การ์ดสูตรอาหาร ซึ่งถูกใช้อยู่ 7 ไฟล์ แล้วต้อง build ผ่าน
  3. ร่างข้อความอีเมลถึงอาจารย์ขอเลื่อนส่งงาน
  4. โปรเจกต์ที่เพิ่ง clone มาจากเพื่อน รัน npx next dev ไม่ขึ้น อยากรู้ว่าติดตรงไหน

ทายก่อนกดเฉลย — แล้วคิดด้วยว่าข้อไหน “ใช้ได้ทั้งคู่ แต่ตัวหนึ่งเหนื่อยน้อยกว่า”

  1. Chat — คำตอบคือความเข้าใจ ไม่มีไฟล์ให้แก้ ไม่มีคำสั่งให้รัน · ใช้ Code ก็ถามได้ แต่ไม่ได้อะไรเพิ่ม
  2. Code — งานกระจายหลายไฟล์ ต้องค้นให้ครบทุกที่ และต้องรัน build ยืนยัน · ถ้าใช้แชท คุณต้องหาเองทั้ง 7 ไฟล์ ลืมไฟล์เดียวก็พัง
    แต่ข้อนี้คือตัวอย่างที่ agent แก้ไฟล์ในเครื่องคุณ 7 ไฟล์ — ก่อนสั่งควรมี git commit ไว้ย้อนกลับได้
  3. Chat — ไม่เกี่ยวกับโค้ดหรือไฟล์ในเครื่องเลย
  4. Code — สาเหตุอาจอยู่ได้หลายที่ (ยังไม่ได้ npm install · เวอร์ชัน node · ไฟล์ .env) agent เปิดดูเองและลองรันเองได้ ส่วนแชทต้องรอคุณก็อปมาให้ทีละอย่าง
    ⚠️ แต่นี่คือโค้ดที่คุณยังไม่ได้อ่าน — เป็นสถานการณ์ที่เอกสารทางการแนะนำให้ใช้โหมด Manual ซึ่งถามก่อนแก้ไฟล์ (ดูหัวข้อสิทธิ์)

กฎหยาบ ๆ: คำตอบเป็น “ความรู้” → Chat · คำตอบเป็น “ไฟล์ที่เปลี่ยน” หรือ “ผลรันคำสั่ง” → Code

ตาราง: งานแบบไหนใช้ตัวไหน

ลักษณะงานตัวที่เหมาะเพราะอะไร
ถามแนวคิด · ขอคำอธิบาย · เทียบสองวิธีChatผลลัพธ์คือความเข้าใจ ไม่ต้องแตะไฟล์
ถามเรื่องโค้ดชิ้นเล็กที่ก็อปไปวางได้ทั้งก้อนChatบริบทพอดีกับที่วาง · ไม่มีอะไรในเครื่องเปลี่ยน
งานเขียนทั่วไป (อีเมล · สรุป · แปล)Chatไม่เกี่ยวกับโปรเจกต์
แก้ bug ที่ต้องไล่ดูหลายไฟล์ · แก้ build / tsc / eslint errorCodeต้องค้นไฟล์จริงและรันคำสั่งตรวจซ้ำ
เพิ่ม feature · refactor ที่กระทบหลายไฟล์Codeแก้ได้ครบทุกจุดแล้วรัน build ยืนยันเอง
ทำความเข้าใจโปรเจกต์ที่เพิ่งได้มาCode (โหมด Plan หรือ Manual)อ่านไฟล์จริงได้ทั้งโปรเจกต์ · ใช้โหมดที่ไม่แก้อะไรก่อน
งานหลายขั้นที่ข้ามไฟล์และเครื่องมือ ผลงานเป็นเอกสาร เช่น deck · spreadsheet · research แล้วกลับมาตรวจทีหลังCoworkตามคำโปรยในสไลด์หน้า 7: ให้เป้าหมาย แล้วกลับมาตรวจงาน (ตัวอย่างผลงานมาจากหน้าผลิตภัณฑ์ทางการ)
⚠️ ตาราง Cowork บทนี้บอกได้แค่ตามสไลด์

สไลด์พูดถึง Cowork แค่ภาพหน้าเว็บหนึ่งภาพ และเอกสาร code.claude.com/docs เป็นเอกสารของ Claude Code เท่านั้น · บทนี้จึงไม่ลงรายละเอียดความสามารถของ Cowork เกินกว่าคำโปรยในสไลด์และตัวอย่างผลงานบนหน้าผลิตภัณฑ์ · ทั้งกลุ่ม Agentic Workflow ใช้ Claude Code เป็นหลัก

ติดตั้ง Claude Code ใน VS Code — สไลด์หน้า 8–10

สไลด์หน้า 9 ชื่อ “Claude Code Plugins” เป็นภาพหน้าต่าง EXTENSIONS: MARKETPLACE ของ VS Code พิมพ์ค้นว่า claude แล้วเจอ extension ชื่อ Claude Code for VS Code ผู้เผยแพร่คือ Anthropic (มีเครื่องหมายยืนยันสีฟ้าหน้าชื่อ)
ฝั่งซ้ายของสไลด์มีหัวข้อเดียว เขียนว่า “Claude Code for VS Code: Claude’s raw power is directly in your terminal in the extension chat of VS Code.” — แปลแบบภาษาคนคือ ความสามารถเต็ม ๆ ของ Claude Code มาอยู่ในแผงแชทของ extension ใน VS Code
⚠️ คำว่า “in your terminal” ในประโยคนี้อย่าอ่านว่าติดตั้ง extension แล้วจะพิมพ์ claude ใน terminal ได้ทันที — ผลรันจริงข้างล่างแสดงว่าไม่ได้ (ดูหัวข้อ “กับดัก”)

⚠️ ดูชื่อผู้เผยแพร่ก่อนกด Install

ใน Marketplace ค้นคำว่า “claude” แล้วเจอหลายตัว · ตัวที่ถูกต้องคือผู้เผยแพร่ Anthropic ที่มีเครื่องหมายยืนยัน และมีรหัส extension เป็น anthropic.claude-code · extension ตัวนี้จะได้สิทธิ์อ่าน-แก้ไฟล์และรันคำสั่งในเครื่องคุณ ติดตั้งผิดตัวคือยื่นกุญแจบ้านให้คนแปลกหน้า

ขั้นตอนตามเอกสารทางการ

  1. เช็คของที่ต้องมี — เอกสารระบุว่าต้องใช้ VS Code 1.94.0 ขึ้นไป และบัญชี Anthropic (บัญชี Claude แบบเสียเงิน หรือบัญชี Claude Console · ไม่ต้องใช้ API key)
  2. เปิดหน้า Extensions — กด Cmd+Shift+X (Mac) หรือ Ctrl+Shift+X (Windows/Linux) ค้นคำว่า “Claude Code” แล้วกด Install
  3. เปิดแผง Claude Code — คลิกไอคอนรูปประกาย (Spark) มุมขวาบนของ editor (ไอคอนนี้จะโผล่เฉพาะตอนเปิดไฟล์อยู่) หรือกด Cmd+Shift+P / Ctrl+Shift+P พิมพ์ “Claude Code” แล้วเลือกเช่น “Open in New Tab”
  4. Sign in — ครั้งแรกจะมีหน้าจอให้กด Sign in แล้วยืนยันใน browser
  5. ถ้าติดตั้งแล้วไม่เห็น extension ให้รีสตาร์ต VS Code หรือสั่ง “Developer: Reload Window” จาก Command Palette

สไลด์หน้า 10 “Claude Code In VSCode” คือหน้าตาหลังเปิดแผงครั้งแรก: แท็บ Claude Code ข้างโฟลเดอร์โปรเจกต์ pea-playground มีข้อความ // TODO: Everything. Let's start. และกล่องข้อความ Tackle your toughest work with Opus 5. Switch anytime with /model. (คือบอกว่าตอนนั้นใช้โมเดล Opus 5 และเปลี่ยนโมเดลได้ด้วยคำสั่ง /model)
สังเกตว่าในโฟลเดอร์ของสไลด์มีไฟล์ containers/CustomerList.tsx กับ customers.json ชื่อคล้ายโจทย์ Customer Search ใน บท 78 · แต่โปรเจกต์ในภาพไม่ใช่โครง Next.js — มี src/App.tsx · App.css · vite.svg ซึ่งหน้าตาเหมือนโปรเจกต์ React ที่สร้างด้วย Vite · ไม่ต้องตกใจถ้าโฟลเดอร์ของคุณ (มี app/) ไม่เหมือนภาพ แผง Claude Code ใช้ได้กับโปรเจกต์แบบไหนก็ได้

กับดัก: ติดตั้ง extension แล้ว พิมพ์ claude ใน terminal ไม่เจอ

เครื่องที่ผมใช้ตรวจบทนี้ติดตั้ง extension ไว้แล้ว — แต่พอพิมพ์ใน terminal:

$ code --list-extensions --show-versions | grep anthropic
anthropic.claude-code@2.1.261

$ which claude; echo "rc=$?"
claude not found
rc=1

ไม่ใช่ติดตั้งพัง · เอกสารทางการเขียนไว้ชัดว่า extension พก Claude Code สำเนาส่วนตัวมาใช้กับแผงแชทของมันเอง แต่ไม่ได้ใส่คำสั่ง claude ไว้ใน PATH · สำเนานั้นอยู่ในโฟลเดอร์ของ extension จริง ๆ และรันได้:

$ ~/.vscode/extensions/anthropic.claude-code-2.1.261-darwin-arm64/resources/native-binary/claude --version
2.1.261 (Claude Code)

ถ้าจะใช้ในแผงของ VS Code อย่างเดียว แค่นี้พอ · แต่ถ้าอยากพิมพ์ claude ใน terminal (เอกสารบอกว่ามีบางความสามารถที่มีเฉพาะใน CLI) ต้องติดตั้งตัว CLI แยกอีกครั้ง ด้วยคำสั่งจากเอกสารทางการ (หน้า Quickstart, Native Install ซึ่งเอกสารแนะนำ):

# macOS · Linux · WSL
curl -fsSL https://claude.ai/install.sh | bash

# Windows PowerShell
irm https://claude.ai/install.ps1 | iex

# หรือบน Mac ที่มี Homebrew
brew install --cask claude-code

# ตรวจว่าติดตั้งสำเร็จ — เอกสารบอกว่าจะได้เลขเวอร์ชันตามด้วย (Claude Code)
claude --version

ผมไม่ได้รันคำสั่งติดตั้ง CLI บนเครื่องที่ใช้ตรวจ (เป็นเครื่องจริงของผู้ใช้ ไม่ใช่ sandbox) · คำสั่งข้างบนก็อปจากเอกสาร ไม่ใช่ผลรัน · ก่อนรันให้เปิดหน้า Quickstart ดูอีกครั้ง เพราะคำสั่งติดตั้งเปลี่ยนได้ และอย่ารัน curl ... | bash จาก URL ที่ไม่ได้มาจากเอกสารทางการเด็ดขาด — มันคือการเอาสคริปต์จากเน็ตมารันในเครื่องทันที

สิทธิ์ — อนุญาตให้มันทำอะไรได้บ้าง

นี่คือหัวข้อที่สไลด์ไม่ได้พูดถึง แต่สำคัญที่สุดสำหรับคนที่ใช้ agent ครั้งแรก
แชทพิมพ์ rm -rf มาให้ ก็เป็นแค่ตัวหนังสือบนจอ · agent ที่รันคำสั่งได้พิมพ์ rm -rf ออกมา ไฟล์หายจริง
Claude Code จึงมีโหมดสิทธิ์ (permission mode) ให้เลือกว่าจะให้มันถามก่อนแค่ไหน · ใน VS Code เปลี่ยนได้ที่ตัวบอกโหมดด้านล่างช่องพิมพ์ · ใน CLI กด Shift+Tab

โหมด (ชื่อที่เห็นใน VS Code)ทำอะไรได้โดยไม่ถามเหมาะกับ
Plan อ่าน · และถ้าบัญชีของคุณใช้โหมด Auto ได้ คำสั่ง shell ที่ classifier อนุมัติก็รันได้โดยไม่ถาม (เอาไว้สำรวจ) · เขียนแผนว่าจะทำอะไร แล้วไม่แก้ไฟล์โค้ดจนกว่าคุณจะอนุมัติแผน (VS Code เปิดแผนเป็นเอกสาร Markdown ให้ใส่คอมเมนต์ได้) สำรวจโปรเจกต์ก่อนแก้ · ใช้ครั้งแรก
Manual อ่านอย่างเดียว · จะแก้ไฟล์หรือรันคำสั่ง shell ส่วนใหญ่ต้องถามก่อน · แก้ไฟล์จะโชว์ diff ให้กดรับ/ไม่รับ อยากเห็นทุกการกระทำ · โค้ดที่ไม่ไว้ใจ
Edit automatically แก้ไฟล์ได้เลยโดยไม่ถาม รวมถึงคำสั่งจัดการไฟล์ทั่วไปอย่าง mkdir · touch · mv · cp คุณกำลังนั่งรีวิวโค้ดที่มันแก้ไปด้วย
Auto เกือบทุกอย่าง โดยมีโมเดลอีกตัว (classifier) ตรวจแทนคุณและบล็อกสิ่งที่มันเห็นว่าไม่ปลอดภัย งานยาว ๆ ที่ไม่อยากถูกถามบ่อย
⚠️ โหมดเริ่มต้นอาจไม่ใช่โหมดที่ถามก่อน

เอกสารทางการ (หน้า VS Code และหน้า Permission modes) ระบุว่าบนแพ็กเกจ Pro, Max และ Team โหมดเริ่มต้นคือ Auto — แปลว่าเปิดมาครั้งแรก มันอาจแก้ไฟล์และรันคำสั่งส่วนใหญ่โดยไม่ถามคุณเลย
สำหรับการลองครั้งแรก ให้ดูตัวบอกโหมดใต้ช่องพิมพ์ก่อนพิมพ์อะไร แล้วเปลี่ยนเป็น Plan หรือ Manual · และหัวข้อ Security ในหน้า VS Code ของเอกสารก็แนะนำให้ใช้ Manual กับโค้ดที่ไม่ไว้ใจ (โหมดที่แก้ไฟล์เองได้ อาจไปแก้ไฟล์ตั้งค่าอย่าง .vscode/settings.json หรือ tasks.json ที่ VS Code รันเองได้)

ในโหมด Manual เอกสารแยกไว้แบบนี้:

ตอนมันถาม จะมีตัวเลือกประมาณ “Yes” กับ “Yes, and don't ask again” · ตัวหลังนี่แหละที่ต้องระวัง: สำหรับคำสั่ง shell เอกสารบอกว่ามันจำถาวรต่อ repository และต่อคำสั่ง โดยบันทึกกฎลงไฟล์ .claude/settings.local.json ที่รากของ git repo — ครั้งหน้าเปิดใหม่ก็ไม่ถามแล้ว (ส่วนการอนุญาตแก้ไฟล์ จำแค่จนจบ session)

🪪 เทียบกับของจริง

โหมดสิทธิ์เหมือนบัตรพนักงานใหม่ในออฟฟิศ:
Manual คือบัตรที่แตะเข้าได้แค่ห้องทำงานตัวเอง จะเข้าห้อง server ต้องเดินมาขอหัวหน้าเซ็นทุกครั้ง
“Yes, and don't ask again” คือหัวหน้าเซ็นเพิ่มสิทธิ์ลงบัตรถาวร — สะดวกขึ้นมาก แต่หัวหน้าต้องจำเองว่าเคยเซ็นอะไรไปบ้าง
Auto คือจ้าง รปภ. มายืนตัดสินแทนหัวหน้า ว่าประตูไหนให้เปิด ประตูไหนไม่ให้

ที่ไม่เหมือนกัน: บัตรพนักงานหมดอายุเมื่อลาออก แต่กฎที่กด “don't ask again” ไว้ อยู่ในไฟล์ของ repo ไปเรื่อย ๆ จนกว่าคุณจะไปลบเอง (ดูและลบได้ด้วยคำสั่ง /permissions)
และพนักงานจริงไม่ทำตามโน้ตแปลก ๆ ที่แปะอยู่บนโต๊ะ แต่ AI อาจโดนหลอกด้วยข้อความในไฟล์ที่มันอ่าน (เอกสารเรียกว่า prompt injection) — นี่คือเหตุผลที่โค้ดที่ไม่ไว้ใจควรใช้โหมดที่ถามก่อน

ของจริงที่เจอ: โปรเจกต์ Next.js ของคุณมีไฟล์สำหรับ agent อยู่แล้ว

ตอนตรวจบทนี้ ผมเปิดโปรเจกต์ที่สร้างด้วย create-next-app (ตัวเดียวกับที่ใช้ในบท 79–85) แล้วเจอว่า commit แรกที่ create-next-app สร้างให้มีไฟล์ CLAUDE.md กับ AGENTS.md มาด้วย:

$ git log --stat --oneline 3f8a92e | head -5
3f8a92e Initial commit from Create Next App
 .gitignore         |   41 +
 AGENTS.md          |    9 +
 CLAUDE.md          |    1 +
 README.md          |   36 +

$ cat CLAUDE.md
@AGENTS.md

CLAUDE.md มีบรรทัดเดียวคือชี้ไปอ่าน AGENTS.md · ส่วน AGENTS.md ขึ้นหัวข้อว่า # This is NOT the Next.js you know แล้วบอก agent ให้ไปอ่านคู่มือใน node_modules/next/dist/docs/ ก่อนเขียนโค้ด เพราะเวอร์ชันนี้อาจต่างจากที่โมเดลเคยเรียนมา
แปลว่าทีม Next.js เองก็คาดไว้แล้วว่าคุณจะใช้ agent กับโปรเจกต์นี้ และรู้ว่า agent ต้องมีคำสั่งกำกับ — เรื่องการเขียนคำสั่งกำกับแบบนี้จะกลับมาในบทถัด ๆ ไป

🗣 ศัพท์เรื่องติดตั้งและสิทธิ์
extension vs CLI
extension คือแผงหน้าตาแบบกดได้ใน VS Code · CLI (command-line interface) คือคำสั่ง claude ที่พิมพ์ใน terminal · สองตัวนี้ติดตั้งแยกกัน แต่เอกสารบอกว่าใช้ประวัติการคุยร่วมกัน · ถามทีมได้ว่า “ทีมเราใช้ Claude Code ผ่าน extension หรือ CLI”
PATH
รายชื่อโฟลเดอร์ที่ shell ไล่หาเวลาคุณพิมพ์ชื่อคำสั่ง · claude not found แปลว่าไม่มีโฟลเดอร์ไหนใน PATH มีไฟล์ชื่อ claude ไม่ได้แปลว่าไม่มีโปรแกรมนี้ในเครื่อง · บอก AI ได้ว่า “claude is installed but not on my PATH”
permission mode
ระดับที่กำหนดว่า agent ทำอะไรได้โดยไม่ต้องถาม (Plan · Manual · Edit automatically · Auto) · ประโยคที่ควรถามตัวเองก่อนสั่งงานทุกครั้ง: “ตอนนี้อยู่โหมดไหน”
allow / ask / deny rule
กฎรายคำสั่งที่ซ้อนบนโหมดอีกชั้น — allow ไม่ต้องถาม · ask ถามทุกครั้ง · deny ห้ามเด็ดขาด · เอกสารบอกว่าตรวจตามลำดับ deny → ask → allow · ดูทั้งหมดได้ด้วย /permissions · ถาม senior ได้ว่า “repo นี้มี deny rule อะไรตั้งไว้บ้าง”

ภารกิจ — ติดตั้งแล้วตรวจให้ครบก่อนสั่งงานแรก

🎯 ภารกิจ

  1. รัน code --version ดูว่า VS Code ของคุณเวอร์ชัน 1.94.0 ขึ้นไปหรือยัง (ถ้าพิมพ์แล้วไม่เจอ ให้ดูที่เมนู About ของ VS Code แทน)
  2. ติดตั้ง extension Claude Code for VS Code ของ Anthropic แล้วยืนยันด้วย code --list-extensions --show-versions
  3. รัน which claude (Windows ใช้ where claude) แล้วอธิบายผลที่ได้ด้วยคำพูดตัวเอง
  4. เปิดโฟลเดอร์โปรเจกต์ Wongnok จากบท 79–85 · รัน git status ให้แน่ใจว่า commit งานล่าสุดไว้แล้ว
  5. เปิดแผง Claude Code · sign in · ก่อนพิมพ์อะไร ให้ดูตัวบอกโหมดใต้ช่องพิมพ์ แล้วเปลี่ยนเป็น Plan
  6. ถามคำถามที่ไม่ต้องแก้อะไรเลย เช่น “อธิบายโครงโฟลเดอร์ของโปรเจกต์นี้” แล้วจดว่ามันเปิดไฟล์ไหนบ้าง และมีการขออนุญาตโผล่มาไหม
  7. ปิดท้ายด้วย git status อีกครั้ง — ต้องไม่มีไฟล์ไหนเปลี่ยน

ข้อ 1–3 — ผลรันจริงบนเครื่องที่ใช้ตรวจบทนี้:

$ code --version
1.136.0
520fb30b2d3d324b4cb2342f6e88e2cd93751de1
arm64

$ code --list-extensions --show-versions | grep anthropic
anthropic.claude-code@2.1.261

$ which claude; echo "rc=$?"
claude not found
rc=1

บรรทัดแรกของ code --version คือเวอร์ชัน (1.136.0 ≥ 1.94.0 ผ่าน) บรรทัดสองคือรหัส commit ของ VS Code และบรรทัดสามคือสถาปัตยกรรมเครื่อง
ข้อ 3 ถ้าคุณได้ not found เหมือนกัน นั่นคือผลที่ถูกต้อง ถ้าคุณติดตั้งแค่ extension — คำอธิบายที่ดีคือ “extension มี Claude Code ของตัวเองซ่อนอยู่ แต่ไม่ได้ใส่ไว้ใน PATH ต้องติดตั้ง CLI แยกถ้าจะใช้ใน terminal”
ถ้าคุณได้ path ของไฟล์ออกมา แปลว่าเคยติดตั้ง CLI ไว้แล้ว ลอง claude --version ต่อได้เลย

ข้อ 4 และ 7 — ผลที่ต้องการคือ git status สะอาดทั้งก่อนและหลัง (ในโปรเจกต์ตรวจของผม git status --short ไม่พิมพ์อะไรออกมาเลย และ exit code เป็น 0)
ถ้าข้อ 7 มีไฟล์เปลี่ยน ให้กลับไปเช็คว่าตอนถามอยู่โหมดไหนจริง · ข้อยกเว้นที่เจอได้: ถ้าคุณรัน npx next dev ระหว่างนั้น ไฟล์ AGENTS.md อาจโผล่ว่าเปลี่ยน เพราะในไฟล์นั้นเขียนไว้เองว่า next dev เป็นคนเขียนและเติมบล็อกนี้กลับเข้าไป ไม่ใช่ Claude

ข้อ 5–6 — ผมไม่มีผลรันให้ดู เพราะบทนี้ไม่ส่ง prompt ให้ AI (คำตอบไม่ซ้ำกันทุกรอบ) · สิ่งที่ควรสังเกตเชิงหลักการ: ในโหมด Plan มันควรอ่านไฟล์ได้โดยไม่ถาม แล้วตอบหรือเสนอแผน โดยไม่แก้ไฟล์โค้ด · ถ้าบัญชีของคุณใช้โหมด Auto ได้ (เช่น Pro · Max · Team ตามเอกสาร) มันอาจรันคำสั่งสำรวจบางคำสั่งไปเลยโดยไม่ถาม เพราะ classifier อนุมัติให้ — จึงอาจไม่เห็นการขออนุญาตเลยก็ได้ · ถ้าคุณเห็นมันขอรันคำสั่ง ให้อ่านคำสั่งนั้นก่อนกด — เป็นนิสัยที่ต้องมีตั้งแต่วันแรก
เอาสิ่งที่จดได้ (เปิดไฟล์ไหน · ถามอนุญาตกี่ครั้ง · เรื่องอะไร) มาเทียบกับเพื่อน จะเห็นว่าแต่ละคนได้ไม่เหมือนกัน และนั่นคือเหตุผลที่บท 87 ต้องมีขั้นตอน

ลองตอบดู

เพื่อนติดตั้ง extension Claude Code ใน VS Code เรียบร้อย แผงแชทใช้งานได้ แต่พิมพ์ claude ใน terminal แล้วขึ้น not found — เกิดจากอะไร?

ตัวเลือกที่ 3 ถูก · เอกสารหน้า VS Code เขียนไว้ตรง ๆ ว่าการติดตั้ง extension ไม่ได้ใส่ claude ลงใน PATH · บนเครื่องตรวจ which claude ได้ claude not found ทั้งที่สำเนาในโฟลเดอร์ extension รัน --version ได้ 2.1.261 (Claude Code)
ตัวเลือกที่ 1 ผิด เพราะแผงแชทใช้ได้แปลว่า extension ติดตั้งสมบูรณ์แล้ว ลงใหม่กี่รอบก็ได้ผลเดิม · ตัวเลือกที่ 2 ผิด เพราะการ sign in ไม่ได้สร้างคำสั่งใน shell — shell ต้องหาไฟล์เจอก่อนถึงจะรันได้ · ตัวเลือกที่ 4 ผิด เพราะ CLI คือรูปแบบหลักของ Claude Code ติดตั้งได้ด้วยคำสั่งในหน้า Quickstart
จุดที่ต้องจำ: “not found” แปลว่า shell หาไม่เจอใน PATH ไม่ได้แปลว่าไม่มีโปรแกรมในเครื่อง

งานไหนที่ Claude Code เหมาะกว่า Claude Chat ชัดเจนที่สุด?

ตัวเลือกที่ 2 ถูก · งานนี้ต้องหาไฟล์ให้ครบ · แก้หลายไฟล์ · รัน npx eslint ซ้ำเพื่อยืนยัน ซึ่งคือสามช่วงของ agentic loop (gather context → take action → verify) ครบ
ตัวเลือกที่ 1 และ 3 ผิด เพราะผลลัพธ์คือความเข้าใจหรือโค้ดตัวอย่างที่ไม่ต้องไปอยู่ในโปรเจกต์ ใช้แชทพอ · ตัวเลือกที่ 4 ผิด เพราะข้อความถูกวางมาให้ครบแล้ว ไม่ต้องเปิดไฟล์หรือรันอะไร (ถ้าอยากให้แก้ไฟล์ README ในโปรเจกต์โดยตรงก็ใช้ Code ได้ แต่ไม่ได้ “ชัดเจนที่สุด”)
จุดที่ต้องจำ: ผลลัพธ์เป็นความรู้ → Chat · ผลลัพธ์เป็นไฟล์ที่เปลี่ยนหรือผลรันคำสั่ง → Code

ในโหมด Manual ถ้า Claude Code จะรันคำสั่งเหล่านี้ คำสั่งไหนไม่ต้องขออนุญาตก่อน?

ตัวเลือกที่ 4 ถูก · เอกสาร Security ระบุว่าในโหมด Manual มีชุดคำสั่งอ่านอย่างเดียวที่รันได้เลย และยกตัวอย่าง ls · cat · git status
ตัวเลือกที่ 1 ผิด เพราะ npm install เปลี่ยนไฟล์ในโปรเจกต์ (package.json · node_modules) · ตัวเลือกที่ 2 ผิด เพราะเอกสารระบุชัดว่าคำสั่งที่ดึงของจากเว็บอย่าง curl · wget ไม่ถูกอนุมัติอัตโนมัติ · ตัวเลือกที่ 3 ผิด เพราะ rm ลบไฟล์จริง เป็นคำสั่งที่เปลี่ยนเครื่อง
จุดที่ต้องจำ: Manual ปล่อยให้อ่านได้เอง แต่เปลี่ยนอะไรต้องถาม — และทั้งหมดนี้ใช้กับโหมด Manual เท่านั้น โหมด Auto ไม่ได้ถามคุณแบบนี้

Claude Code ขอรัน npm run lint แล้วคุณกด “Yes, and don't ask again” — ผลคืออะไร?

ตัวเลือกที่ 1 ถูก · ตาราง Permission system ในเอกสารระบุว่าคำสั่ง Bash ที่กด “Yes, and don't ask again” จำถาวรต่อ repository และต่อคำสั่ง โดยบันทึกลง .claude/settings.local.json ที่รากของ git repo
ตัวเลือกที่ 2 ผิด เพราะแบบ “จำจนจบ session” คือพฤติกรรมของการอนุญาตแก้ไฟล์ ไม่ใช่คำสั่ง shell · ตัวเลือกที่ 3 ผิด เพราะกฎผูกกับคำสั่งนั้น ไม่ได้เปิดทุกคำสั่ง · ตัวเลือกที่ 4 ผิด เพราะการตอบคำถามอนุญาตไม่ได้เปลี่ยนโหมด โหมดเปลี่ยนที่ตัวบอกโหมดหรือ Shift+Tab
จุดที่ต้องจำ: “don't ask again” คือการเขียนกฎลงไฟล์ ไม่ใช่คำตอบชั่วคราว — ดูและลบได้ที่ /permissions

ถามกลับได้เลย

ถ้าติดตั้งแล้วหน้าจอไม่เหมือนสไลด์หน้า 10 · หาไอคอน Spark ไม่เจอ · หรือไม่แน่ใจว่าตอนนี้อยู่โหมดไหน — เอาภาพหน้าจอกับผลของ code --version และ code --list-extensions --show-versions มาคุยได้เลย
และถ้ามันขออนุญาตรันคำสั่งที่คุณอ่านไม่ออก อย่าเพิ่งกด Yes — ก็อปคำสั่งนั้นมาถามก่อนว่ามันทำอะไร คำถามแบบนี้ไม่มีคำว่าโง่

อ้างอิง