Cursor + Claude Code — ตั้งค่า Vibe Coding ครบจบใน 10 นาที

ถ้าคุณกำลังมองหา setup ที่ดีที่สุดสำหรับ Vibe Coding ในปี 2026 คำตอบคือ Cursor + Claude Code — คู่นี้ทำงานร่วมกันได้อย่างลื่นไหล ให้ทั้ง context awareness ระดับสูง และ agent mode ที่จัดการงานหลายไฟล์ได้ในครั้งเดียว

บทความนี้จะพาคุณตั้งค่าทุกอย่างจาก 0 ให้พร้อมเขียนโค้ดกับ AI ภายใน 10 นาที

---

1. ทำไม Cursor + Claude Code เป็น Combo ดีสุดสำหรับ Vibe Coding

ถ้าคุณเคยอ่าน Vibe Coding คืออะไร? แล้ว คุณจะรู้ว่าหัวใจของ Vibe Coding คือการให้ AI เป็น "co-pilot" ที่เข้าใจ context ของโปรเจคทั้งหมด ไม่ใช่แค่ช่วยเติมโค้ดบรรทัดต่อบรรทัด

ทำไม Cursor + Claude ถึงเป็นตัวเลือกที่ดีที่สุด?

Feature	VS Code + Copilot	Cursor + Claude
Context ของ codebase	จำกัด	ทั้งโปรเจคพร้อมกัน
Multi-file editing	ต้องทำทีละไฟล์	Composer mode จัดการพร้อมกัน
Agent mode (รันคำสั่งเอง)	ไม่มี	มีใน Cursor Agent
ความแม่นยำ	ปานกลาง	Claude Sonnet/Opus แม่นสูง
การเข้าใจ Thai context	อ่อน	Claude เข้าใจภาษาไทยดีมาก

Claude Code โดด Anthropic ออกแบบมาให้ทำงานกับ codebase จริง ไม่ใช่แค่ snippet สั้นๆ เมื่อจับคู่กับ Cursor IDE ที่มี Composer และ Agent mode คุณจะได้ workflow ที่เหมือนมีนักพัฒนาอาวุโสนั่งข้างๆ ตลอดเวลา

สำหรับผู้เริ่มต้น ดูเพิ่มเติมที่ Vibe Coding สำหรับผู้เริ่มต้น ก่อนที่จะ setup

ทำไมไม่ใช้ VS Code + Copilot แทน?

คำถามนี้ถามบ่อยมาก คำตอบตรงๆ คือ VS Code + Copilot ก็ดีแต่มีข้อจำกัดสำคัญหลายอย่าง:

ข้อจำกัดของ VS Code + Copilot:

• Copilot เน้น autocomplete มากกว่าการเข้าใจ codebase ทั้งหมด
• ไม่มี native Composer ที่แก้หลายไฟล์พร้อมกัน
• Context window จำกัดกว่า Claude Sonnet/Opus อย่างเห็นได้ชัด
• Agent mode ยังอยู่ในช่วง beta และ unstable กว่า

ข้อดีของ Cursor + Claude:

• Cursor ออกแบบมาสำหรับ AI-first workflow ตั้งแต่แรก
• Claude มี context window ใหญ่มาก (200K tokens ใน Opus) เหมาะกับโปรเจคขนาดใหญ่
• .cursorrules ช่วยให้ Claude เรียนรู้ "ภาษา" ของโปรเจคคุณได้
• Community และ plugin ecosystem กำลังเติบโตเร็วมาก

นั่นคือเหตุผลที่ community ของ Vibe Coders ส่วนใหญ่เลือก Cursor เป็น primary IDE

---

2. ติดตั้ง Cursor IDE (Mac / Windows / Linux)

ขั้นตอนการติดตั้ง

1. ดาวน์โหลด Cursor

ไปที่ cursor.com แล้วกด Download ระบบจะตรวจจับ OS ของคุณโดยอัตโนมัติ

• Mac (Apple Silicon): ดาวน์โหลด .dmg สำหรับ arm64
• Mac (Intel): ดาวน์โหลด .dmg สำหรับ x64
• Windows: ดาวน์โหลด .exe installer
• Linux: ดาวน์โหลด .AppImage หรือ .deb

2. ติดตั้ง

• Mac: ลาก Cursor.app ไปใน Applications folder
• Windows: รัน installer ตามขั้นตอน
• Linux (Ubuntu/Debian):

chmod +x cursor-*.AppImage
./cursor-*.AppImage

3. Import settings จาก VS Code (ถ้ามี)

เมื่อเปิด Cursor ครั้งแรก จะถามว่าต้องการ import extensions และ settings จาก VS Code ไหม — แนะนำให้กด Yes เพื่อประหยัดเวลา

ตรวจสอบว่าติดตั้งสำเร็จ

เปิด Cursor แล้วกด Cmd+Shift+P (Mac) หรือ Ctrl+Shift+P (Windows/Linux) พิมพ์ cursor version ควรจะเห็น version ปัจจุบัน

---

3. ตั้งค่า Claude (API Key หรือ Subscription)

มี 2 วิธีในการใช้ Claude ใน Cursor:

วิธีที่ 1: ใช้ Cursor Pro Subscription (แนะนำสำหรับผู้เริ่มต้น)

Cursor Pro มาพร้อม Claude ในตัว ไม่ต้องตั้งค่า API Key เพิ่ม

1. ไปที่ Cursor Settings → General → Account
2. Sign in หรือสมัคร Cursor Pro ($20/เดือน)
3. ไปที่ Cursor Settings → Models
4. เปิดใช้งาน claude-3-7-sonnet หรือ claude-opus-4 ตามต้องการ

วิธีที่ 2: ใช้ Anthropic API Key (สำหรับ power users)

ถ้าต้องการควบคุม token usage เองหรือใช้ model รุ่นล่าสุด:

1. ไปที่ console.anthropic.com
2. สร้าง API Key ใหม่
3. ใน Cursor ไปที่ Settings → Models → OpenAI API Key section
4. เลื่อนลงหา Anthropic API Key และวาง key ของคุณ
5. เลือก model ที่ต้องการใช้เป็น default

เลือก model ไหนดี?

Model	เหมาะกับ	Token Cost
claude-3-5-haiku	งานเล็ก เร็ว ประหยัด	ถูก
claude-sonnet-4	งานทั่วไป balance ดี	กลาง
claude-opus-4	งานซับซ้อน architecture	แพงสุด

สำหรับ Vibe Coding ทั่วไป claude-sonnet-4 คือตัวเลือกที่ดีที่สุด — แม่นยำสูงในราคาที่สมเหตุสมผล

---

4. ตั้งค่า Workspace (settings.json, MCP Servers)

settings.json พื้นฐาน

เปิด Cursor แล้วกด Cmd+Shift+P → พิมพ์ Open Workspace Settings (JSON) เพื่อแก้ไขโดยตรง:

{
  "editor.fontSize": 14,
  "editor.fontFamily": "JetBrains Mono, 'Courier New', monospace",
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.inlineSuggest.enabled": true,
  "cursor.cpp.enablePartialAccepts": true,
  "cursor.chat.defaultModel": "claude-sonnet-4",
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}

Extensions ที่แนะนำสำหรับ Vibe Coding

Cursor รองรับ VS Code extensions ทั้งหมด ต่อไปนี้คือ extensions ที่ช่วยเสริม Vibe Coding workflow:

Extension	ทำอะไร	จำเป็นไหม
Prettier	Format code อัตโนมัติ	ใช่
ESLint	ตรวจ code quality	ใช่
GitLens	ดู git history ใน editor	แนะนำ
Error Lens	แสดง error ตรงบรรทัด	แนะนำ
Auto Rename Tag	rename HTML tags พร้อมกัน	สำหรับ React
Thunder Client	ทดสอบ API ใน editor	ถ้าทำ backend

สำคัญ: ปิด GitHub Copilot ถ้าใช้ Cursor AI — ทั้งสองทำงานซ้ำกันและอาจขัดแย้งกัน

ตั้งค่า .cursorrules (สำคัญมาก!)

ไฟล์ .cursorrules คือ "system prompt" ของโปรเจคที่บอก Claude ว่าโปรเจคของคุณคืออะไร สร้างไฟล์นี้ที่ root ของโปรเจค:

# Project Context
This is a Next.js 14 project with TypeScript and Tailwind CSS.

## Tech Stack
- Framework: Next.js 14 (App Router)
- Database: Supabase (PostgreSQL)
- Styling: Tailwind CSS + shadcn/ui
- Language: TypeScript

## Coding Rules
- ใช้ TypeScript เสมอ ห้ามใช้ any
- Component ต้องเป็น function component + arrow function
- ใช้ async/await แทน .then()
- Error handling ต้องมีทุก API call

## File Structure
- Components อยู่ใน /components
- API routes อยู่ใน /app/api
- Types อยู่ใน /types

ยิ่ง .cursorrules ละเอียด Claude ก็ยิ่งเข้าใจ context ของโปรเจคคุณได้ดีขึ้น นี่คือความแตกต่างระหว่าง AI ที่ตอบแบบ generic กับ AI ที่เข้าใจ codebase ของคุณจริงๆ

ตั้งค่า MCP Servers (ขั้นสูง)

MCP (Model Context Protocol) ช่วยให้ Claude เชื่อมต่อกับ tools ภายนอกได้โดยตรง เช่น database, file system, หรือ APIs

เปิด ~/.cursor/mcp.json:

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/your/project"]
    },
    "supabase": {
      "command": "npx",
      "args": ["-y", "@supabase/mcp-server-supabase@latest"],
      "env": {
        "SUPABASE_ACCESS_TOKEN": "your-access-token"
      }
    }
  }
}

สำหรับโปรเจคที่ใช้ Supabase อย่างเช่น การทำ Database ด้วย Supabase MCP server จะช่วยให้ Claude query schema และ suggest SQL ที่ถูกต้องได้โดยตรง

---

5. Keyboard Shortcuts ที่ต้องจำ

นี่คือ shortcuts ที่ใช้บ่อยที่สุดใน Cursor — จำแค่นี้ก็ใช้ได้ 80% ของ workflow แล้ว:

Core Shortcuts

Shortcut (Mac)	Shortcut (Win/Linux)	ทำอะไร
Cmd+K	Ctrl+K	Edit inline ตรงที่ cursor อยู่
Cmd+L	Ctrl+L	เปิด Chat panel
Cmd+I	Ctrl+I	เปิด Composer (multi-file)
Cmd+Shift+I	Ctrl+Shift+I	เปิด Agent mode
Tab	Tab	Accept autocomplete
Escape	Escape	ปฏิเสธ suggestion
Cmd+Shift+L	Ctrl+Shift+L	Add selection to Chat

ใช้ @ ใน Chat เพื่อเพิ่ม context

ใน Chat panel พิมพ์ @ เพื่อ reference สิ่งต่างๆ:

• @Codebase — ให้ Claude เข้าถึง codebase ทั้งหมด
• @Filename.tsx — reference ไฟล์เฉพาะ
• @Docs — reference documentation ที่ลิงก์ไว้
• @Web — ให้ Claude search web ได้
• @Git — reference git history

Tip: เริ่มต้นทุก conversation ด้วย @Codebase เพื่อให้ Claude เข้าใจ context ของโปรเจคทั้งหมดก่อน

---

6. Tips การใช้ Composer / Agent Mode

Composer Mode (Cmd+I)

Composer คือ killer feature ของ Cursor — ช่วยให้ Claude แก้ไขหลายไฟล์พร้อมกันในครั้งเดียว

วิธีใช้ Composer อย่างมีประสิทธิภาพ:

1. เปิด Composer ด้วย Cmd+I
2. อธิบาย feature ที่ต้องการแบบชัดเจน เช่น:

   "สร้าง authentication flow ด้วย Supabase ที่มี login page, register page, และ middleware ป้องกัน protected routes"

3. Cursor จะแสดง diff ของทุกไฟล์ที่จะเปลี่ยนแปลง
4. Review แต่ละไฟล์ กด Accept All หรือ Reject ตามต้องการ

ตัวอย่าง prompt ที่ดีสำหรับ Composer:

สร้าง React component ชื่อ UserCard ที่:
- รับ props: name, email, avatar, role
- ใช้ TypeScript interface
- ใช้ Tailwind CSS สำหรับ styling
- มี hover effect
- Responsive บน mobile

เทคนิค Prompt Engineering สำหรับ Cursor Chat

วิธีเขียน prompt ที่ดีใน Cursor ต่างจากการใช้ ChatGPT ทั่วไปตรงที่ คุณสามารถ inject context ได้โดยตรง

โครงสร้าง prompt ที่แนะนำ:

[บริบทของสิ่งที่ต้องการทำ]
[ข้อจำกัดหรือ requirement]
[format ที่ต้องการได้รับ]

ตัวอย่างเปรียบเทียบ:

Prompt แย่	Prompt ดี
"fix this bug"	"ฟังก์ชัน calculateTotal() คืนค่า NaN เมื่อ price เป็น undefined — fix โดยไม่เปลี่ยน function signature"
"add dark mode"	"@tailwind.config.js เพิ่ม dark mode โดยใช้ class strategy และ update @globals.css ให้รองรับ"
"make it faster"	"Profile @api/users/route.ts หา N+1 query และเพิ่ม query batching โดยใช้ Prisma include"

ความชัดเจนของ prompt ส่งผลโดยตรงต่อคุณภาพของโค้ดที่ได้กลับมา

Agent Mode (Cmd+Shift+I)

Agent mode ให้ Claude ทำงานได้อย่างอิสระมากขึ้น รัน terminal commands และแก้ไขไฟล์เองได้

เหมาะกับ:

• สร้าง boilerplate โปรเจคใหม่
• Refactor code ขนาดใหญ่
• Fix bugs ที่ซับซ้อน
• Setup configuration ต่างๆ

ข้อควรระวัง: Agent mode รัน command จริง ควร review ก่อน approve ทุกครั้ง

ตัวอย่างการใช้ Agent mode:

เปิด Agent mode แล้วบอกว่า:

"สร้างโปรเจค Next.js ใหม่ชื่อ my-app ติดตั้ง dependencies พื้นฐาน (Tailwind, shadcn/ui, Supabase) และตั้งค่า TypeScript ให้พร้อมใช้งาน"

Agent จะ:

1. รัน npx create-next-app
2. ติดตั้ง packages ที่ต้องการ
3. สร้างไฟล์ config ต่างๆ
4. Setup folder structure ตาม best practices

ทั้งหมดนี้โดยที่คุณไม่ต้องพิมพ์คำสั่งเองแม้แต่ครั้งเดียว

การเรียน Vibe Coding แบบ Structured

ถ้าต้องการเรียน Vibe Coding อย่างเป็นระบบในชั้นเรียนจริง ดูได้ที่ คอร์สสอน AI ในเชียงใหม่ ที่มีทั้ง workshop และ mentoring

---

7. เปรียบเทียบ Cursor Plans: ควรเลือกแบบไหน?

ก่อนตัดสินใจ setup ควรรู้ว่า Cursor มีแผนให้เลือกอยู่ 3 แบบ:

Plan	ราคา	Claude Access	เหมาะกับ
Free	$0	จำกัด (50 requests/เดือน)	ทดลองใช้
Pro	$20/เดือน	Unlimited fast requests	นักพัฒนาทั่วไป
Business	$40/user/เดือน	Team management + SSO	ทีม/บริษัท

แนะนำ: ถ้าเพิ่งเริ่ม ทดลอง Free plan ก่อน 1-2 สัปดาห์ ถ้าชอบแล้ว upgrade เป็น Pro ค่าใช้จ่าย $20/เดือนคุ้มมากถ้าคุณ code เป็นอาชีพหรือ side project

สำหรับคนที่ต้องการเรียน Vibe Coding อย่างจริงจังก่อนลงทุนใน tools ดูตัวเลือกคอร์สที่ AI Unlocked Pricing

---

8. ข้อผิดพลาด Setup ที่มักเจอ

ปัญหาที่ 1: Claude ไม่ตอบหรือตอบช้ามาก

สาเหตุ: API key หมดหรือถึง rate limit

แก้ไข:

1. ไปที่ console.anthropic.com ตรวจ usage
2. ถ้า rate limit ลอง switch ไปใช้ claude-3-5-haiku ชั่วคราว
3. ถ้าใช้ Cursor Pro ให้ logout แล้ว login ใหม่

ปัญหาที่ 2: Cursor ไม่รู้จัก context ของโปรเจค

สาเหตุ: ไม่มีไฟล์ .cursorrules หรือ context หลุดออกไป

แก้ไข:

1. สร้าง .cursorrules ที่ root ของโปรเจค (ดูตัวอย่างในหัวข้อ 4)
2. ใน Composer ใช้ @Codebase เพื่อ load context ใหม่
3. กด Cmd+Shift+P → Cursor: Reindex Codebase

ปัญหาที่ 3: Composer แก้ไขไฟล์ผิด

สาเหตุ: Prompt ไม่ชัดเจนพอ

แก้ไข:

1. ระบุชื่อไฟล์และ path ตรงๆ ใน prompt
2. ใช้ @FileName.tsx เพื่อ reference ไฟล์ที่ต้องการแก้
3. แยก task ใหญ่เป็น task เล็กๆ หลายครั้ง

ปัญหาที่ 4: Extension conflicts หลัง import จาก VS Code

แก้ไข:

1. Cmd+Shift+P → Extensions: Disable All Installed Extensions
2. enable ทีละตัวจนเจอตัวที่ทำให้เกิดปัญหา
3. Extensions ที่มักขัด: GitHub Copilot (ต้องปิดถ้าใช้ Cursor AI)

ปัญหาที่ 5: MCP Server ไม่เชื่อมต่อ

แก้ไข:

1. ตรวจสอบว่า Node.js version 18+ ติดตั้งแล้ว: node --version
2. ลอง run MCP server manually: npx @modelcontextprotocol/server-filesystem /path
3. ดู error log ที่ ~/.cursor/logs/

---

9. Workflow จริงใน 1 วัน

เพื่อให้เห็นภาพว่า Cursor + Claude ใช้งานจริงยังไง นี่คือ workflow ที่นักพัฒนาส่วนใหญ่ใช้:

เช้า: Planning + Architecture

@Codebase ฉันต้องการเพิ่ม feature X 
วิเคราะห์ codebase และบอกว่าควรแก้ไขไฟล์ไหนบ้าง 
และมีส่วนไหนที่อาจ break ได้บ้าง

Claude จะ scan codebase ทั้งหมดและสรุปให้ว่าต้องแตะไฟล์ไหน มีผลกระทบกับส่วนไหนบ้าง ช่วยให้วางแผนก่อนเริ่ม implement ได้ถูกต้อง

กลางวัน: Implementation

ใช้ Composer สร้าง code ตาม plan ที่วางไว้ ทีละ feature ไม่พยายามทำทีเดียวทั้งหมด ควรแบ่งเป็น iteration ละ 1 feature เพื่อให้ review ได้ง่าย

เย็น: Review + Refactor

@Codebase review code ที่เพิ่งเขียนวันนี้
ตรวจหา bug, security issues, และ performance problems
แนะนำ improvements

การ review กับ Claude แบบนี้ช่วยจับ bug ที่อาจหลุดรอดได้ระหว่าง implement รวมถึงแนะนำ refactoring ที่ทำให้โค้ดอ่านง่ายขึ้น

ดูเพิ่มเติมได้ที่ Claude Code สำหรับนักพัฒนา และ คู่มือ Cursor IDE ฉบับสมบูรณ์

---

10. สรุป: Setup Checklist

ก่อน Vibe Code ให้ tick ทุกข้อ:

• ติดตั้ง Cursor IDE เวอร์ชันล่าสุด
• ตั้งค่า Claude API Key หรือ Cursor Pro subscription
• เลือก model เป็น claude-sonnet-4 สำหรับงานทั่วไป
• สร้างไฟล์ .cursorrules ที่ root ของโปรเจค
• ทดสอบ Cmd+K และ Cmd+I ว่าทำงาน
• (ขั้นสูง) ตั้งค่า MCP servers ตามที่ต้องการ

เมื่อ setup เสร็จแล้ว คุณพร้อมที่จะ Vibe Code อย่างเต็มที่แล้ว!

---

เริ่มต้น Vibe Coding อย่างจริงจัง

Setup เสร็จแล้วแต่ยังไม่รู้จะเริ่มจากไหน? เราแนะนำ 2 ทาง:

เรียนรู้ด้วยตัวเอง: ดูคู่มือ Pre-Class Setup ที่รวบรวมทุกอย่างที่ต้องเตรียมก่อนเริ่มโปรเจคแรก

เรียนกับผู้เชี่ยวชาญ: AI Unlocked มีคอร์ส Vibe Coding ที่สอนตั้งแต่ setup จนถึง deploy โปรเจคจริง พร้อม community ที่ช่วยเหลือกัน

การเรียน Vibe Coding ไม่ใช่แค่การใช้ AI เขียนโค้ด แต่คือการเรียนรู้ที่จะ collaborate กับ AI อย่างมีประสิทธิภาพ — และ Cursor + Claude คือ toolkit ที่ดีที่สุดสำหรับการเดินทางนี้