Cursor AI: คู่มือใช้งาน AI Code Editor ที่ดีที่สุด 2025

Cursor AI คือ code editor ที่มี AI ช่วยเขียนโค้ดแบบเต็มรูปแบบ ทำให้การ Vibe Coding ง่ายและรวดเร็วมาก บทความนี้จะสอนวิธีใช้ Cursor AI ตั้งแต่ติดตั้งจนสร้างแอพจริง

Cursor AI คืออะไร?

Cursor = VS Code + AI Superpowers

ฟีเจอร์หลัก:

• Chat: คุยกับ AI เกี่ยวกับโค้ด
• Copilot++: autocomplete ที่ฉลาดกว่า GitHub Copilot
• Cmd+K: Edit code ด้วยคำสั่ง
• @-mention: Tag files, docs, web
• Composer: สร้างหลายไฟล์พร้อมกัน

อ่านเพิ่มเติม: Vibe Coding vs Traditional

ติดตั้ง Cursor AI

1. ดาวน์โหลด

• ไปที่ cursor.sh
• เลือก OS (Mac/Windows/Linux)
• ดาวน์โหลดและติดตั้ง

2. Import Settings จาก VS Code (ถ้ามี)

• เปิด Cursor
• File → Import VS Code Settings
• Extensions จะ import มาด้วย

3. Sign Up

• Free: 2,000 completions/month
• Pro: $20/เดือน (unlimited)
• Business: $40/user/เดือน

ฟีเจอร์หลักและวิธีใช้

1. Chat with AI (Cmd+L / Ctrl+L)

ใช้สำหรับ:

• ถามคำถามเกี่ยวกับโค้ด
• ขอคำแนะนำ
• Debug

ตัวอย่าง:

// เลือกโค้ดที่มีปัญหา
// กด Cmd+L
"Fix this bug และอธิบายว่าเกิดอะไร"

Tips:

• @filename: Tag ไฟล์เฉพาะ
• @docs: ค้นหาจาก documentation
• @web: ค้นหาจาก internet

2. Cmd+K: Inline Editing

ใช้สำหรับ:

• แก้โค้ดในที่
• เพิ่ม features
• Refactor

ตัวอย่าง:

// วาง cursor ในฟังก์ชัน
// กด Cmd+K
"Add error handling และ loading state"

Cursor จะ:

1. เขียนโค้ดใหม่ (สีม่วง)
2. แสดง diff
3. กด Tab เพื่อ accept
4. หรือ Edit prompt เพื่อปรับ

3. Copilot++ (Auto-complete)

ใช้อัตโนมัติขณะพิมพ์:

function fetchUserData(
// Cursor แนะนำ:
// userId: string): Promise<User> {
//   return fetch(`/api/users/${userId}`)
//     .then(res => res.json())
// }

// กด Tab เพื่อ accept

Tips:

• พิมพ์ comment ก่อน จะได้โค้ดที่ตรงใจ
• กด Tab หลายๆ ครั้งจะแนะนำต่อเนื่อง

4. Composer (Cmd+I)

ใช้สำหรับ:

• สร้างหลายไฟล์พร้อมกัน
• Generate boilerplate
• สร้าง components ทั้งชุด

ตัวอย่าง:

"สร้าง authentication system:
- Login/Register pages
- Auth context
- Protected routes
- API integration
ใช้ Next.js + TypeScript + Tailwind"

Cursor จะ:

• สร้างหลายไฟล์
• แสดง file tree
• Review ก่อน apply

อ่านเพิ่มเติม: สอน Vibe Code AI Programming

Workflow แนะนำ

สร้างโปรเจกต์ใหม่

Step 1: Setup Project

npx create-next-app@latest my-app
cd my-app
cursor .

Step 2: ใช้ Composer สร้างโครงสร้าง

Cmd+I

"Setup project structure:
- /components (reusable UI)
- /app (Next.js pages)
- /lib (utilities)
- /types (TypeScript types)
- Config Tailwind + shadcn/ui"

Step 3: สร้าง Components

Cmd+I

"สร้าง components:
- Navbar (responsive, logo, menu)
- Hero section (headline, CTA)
- Feature cards (icon, title, description)
- Footer (links, social)

ใช้ Tailwind + TypeScript"

Step 4: เพิ่ม Features

Cmd+K (ใน component file)

"Add dark mode toggle with localStorage"

Debug และปรับปรุง

เจอ Bug:

1. เลือกโค้ดที่มีปัญหา
2. Cmd+L
3. “Fix this bug และอธิบาย”

อยากปรับปรุง:

1. Cmd+K
2. “Optimize performance และ add comments”

อยากเพิ่มฟีเจอร์:

1. Cmd+I
2. “Add feature X with Y functionality”

อ่านเพิ่มเติม: Vibe Coding Project Examples

Tips & Tricks

1. การเขียน Prompt ที่ดี

❌ ไม่ดี:

"Fix this"
"Add button"

✅ ดี:

"Fix this API call - add error handling, loading state,
และ retry logic. ใช้ try-catch และแสดง error message"

"Add submit button - primary style, disabled when loading,
show spinner, handle onClick"

2. ใช้ @-mentions

@file: Tag ไฟล์เฉพาะ

@components/Navbar.tsx
"Update this navbar to be responsive"

@docs: อ้างอิง documentation

@docs Next.js
"How to implement dynamic routes?"

@web: ค้นหาจาก internet

@web
"Latest Tailwind CSS best practices 2025"

@codebase: ค้นหาทั้งโปรเจกต์

@codebase
"Where is the authentication logic?"

3. Keyboard Shortcuts

• Cmd+L: Chat
• Cmd+K: Inline edit
• Cmd+I: Composer
• Tab: Accept suggestion
• Esc: Dismiss
• Cmd+Shift+P: Command palette

4. Rules for AI

สร้างไฟล์ .cursorrules:

# Project Rules
- Always use TypeScript
- Use Tailwind for styling
- Follow Next.js 14 App Router conventions
- Add comments for complex logic
- Handle errors properly
- Use async/await instead of .then()

AI จะทำตามกฎเหล่านี้อัตโนมัติ

5. Context Management

เลือกไฟล์ที่เกี่ยวข้อง:

• Cursor อ่านไฟล์ที่เปิดอยู่
• @mention ไฟล์ที่เกี่ยวข้อง
• ยิ่งให้ context เยอะยิ่งแม่นยำ

อ่านเพิ่มเติม: เทคนิคเขียน Prompt AI

กรณีศึกษา

Case 1: สร้าง Landing Page ใน 30 นาที

Step 1 (5 นาที):

Cmd+I

"Create landing page:
- Hero with gradient bg
- Features section (3 cards)
- CTA section
- Footer
Responsive, Tailwind, TypeScript"

Step 2 (10 นาที):

• Review และ accept
• ปรับแต่ง colors, text

Step 3 (15 นาที):

Cmd+K ในแต่ละ section

"Add hover animations"
"Make mobile responsive"
"Add contact form"

ผลลัพธ์:

• Landing page สมบูรณ์
• Responsive
• Professional

Case 2: Build CRUD App ใน 4 ชั่วโมง

ชั่วโมงที่ 1: Setup

- Create Next.js project
- Setup Supabase
- Create database schema

ชั่วโมงที่ 2: UI

Composer สร้าง:
- List view
- Create form
- Edit form
- Delete confirmation

ชั่วโมงที่ 3: Integration

- Connect Supabase
- API routes
- CRUD operations

ชั่วโมงที่ 4: Polish

- Error handling
- Loading states
- Validation
- Testing

เปรียบเทียบกับเครื่องมืออื่น

Feature	Cursor	GitHub Copilot	Windsurf
Auto-complete	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
Chat	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
Multi-file	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐⭐
ราคา	$20	$10	$10-15
ง่าย	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐

สรุป: Cursor ดีที่สุดสำหรับ Vibe Coding

อ่านเพิ่มเติม: GitHub Copilot Tips (บทความถัดไป)

Best Practices

✅ Do’s

1. ให้ Context เยอะ

   • @mention files
   • อธิบายโปรเจกต์
   • แนบ error messages

2. เขียน Prompt ชัดเจน

   • ระบุ requirements
   • ใส่ constraints
   • ให้ตัวอย่าง

3. Review Code

   • อ่านโค้ดที่ AI เขียน
   • Test ก่อนใช้
   • ปรับแต่งถ้าจำเป็น

4. Iterate

   • ถ้าไม่ถูกใจ Edit prompt
   • ลองหลายวิธี
   • เรียนรู้จากผลลัพธ์

❌ Don’ts

1. อย่า Copy ตาบอด

   • ต้องอ่านและเข้าใจ
   • อาจมี bugs

2. อย่าให้ AI ทำทั้งหมด

   • คุณต้อง guide
   • คุณต้อง review

3. อย่าละเลย Security

   • ตรวจสอบ API keys
   • อย่าใส่ secrets ใน code

ROI และคุ้มค่าไหม?

ต้นทุน

• Cursor Pro: $20/เดือน
• เวลาที่ประหยัด: 50-70%
• โปรเจกต์ที่ทำได้: 3-5 เท่า

คำนวณ

ก่อนใช้ Cursor:

• สร้างเว็บ 1 เว็บ = 40 ชั่วโมง
• ค่าแรง freelance: 50,000 บาท
• ได้ 2 โปรเจกต์/เดือน = 100,000 บาท

หลังใช้ Cursor:

• สร้างเว็บ 1 เว็บ = 15 ชั่วโมง
• ได้ 5 โปรเจกต์/เดือน = 250,000 บาท
• ค่า Cursor: 600 บาท/เดือน

กำไรเพิ่ม: +150,000 บาท/เดือน คุ้มมาก!

สรุป

Cursor AI เป็นเครื่องมือที่ดีที่สุดสำหรับ Vibe Coding ช่วยให้เขียนโค้ดได้เร็วขึ้น 3-5 เท่า

เริ่มต้นวันนี้:

1. ดาวน์โหลด Cursor
2. ทดลอง Free plan
3. ฝึกใช้ Cmd+K, Cmd+L, Cmd+I
4. สร้างโปรเจกต์แรก

หากต้องการเรียน Cursor AI และ Vibe Coding แบบเจาะลึก เรียน คอร์ส Vibe Coding กับเราได้

---

บทความที่เกี่ยวข้อง:

• Vibe Coding vs Traditional
• สอน Vibe Code AI
• Vibe Coding Project Examples