Làm quen giao diện Cursor

Khám phá từng góc giao diện Cursor AI Editor — từ Chat Sidebar đến Composer, hiểu rõ cách bố trí để viết code nhanh hơn dù bạn là developer hay mới bắt đầu.

Định nghĩa

Cursor là trình soạn thảo code dựa trên VS Code, nhưng tích hợp sẵn các panel AI ngay trong giao diện để bạn chat, yêu cầu sửa code, hoặc viết feature mới mà không cần chuyển tab sang trình duyệt. Giao diện được thiết kế để AI luôn "sẵn sàng" bên cạnh trình chỉnh sửa, giúp workflow liền mạch giữa đọc hiểu, viết code và debug.

Giải thích chi tiết

Thanh bên Chat — Ctrl+L

Đây là trái tim của Cursor. Nhấn Ctrl+L (hoặc Cmd+L trên Mac) sẽ mở Chat Sidebar bên trái hoặc bên phải màn hình. Khác với ChatGPT hay Claude trên web, Chat Sidebar trong Cursor có context awareness: nó tự động "nhìn thấy" file bạn đang mở, lỗi trong terminal, hoặc stack trace bạn vừa copy.

Trong Chat Sidebar, bạn có thể chọn model (Claude 3.5 Sonnet, GPT-4, v.v.), thêm file vào context bằng cách dùng @, hoặc chế độ Agent để AI tự động chạy terminal và sửa file thay bạn.

Composer — Ctrl+I

Composer là cửa sổ nổi (Ctrl+I) dùng để viết code quy mô lớn, xuyên nhiều file. Khác với Chat chỉ trả lời bằng text, Composer có thể tạo file mới, sửa file cũ, và hiển thị diff trực quan trước khi áp dụng. Giao diện Composer chia đôi màn hình: bên trái là yêu cầu của bạn, bên phải là preview các thay đổi. Đây là nơi bạn viết feature hoàn chỉnh như "Tạo trang login với React và Tailwind" thay vì từng dòng code lẻ tẻ.

Trình chỉnh sửa với Inline Edit — Ctrl+K

Khi bạn chọn một đoạn code và nhấn Ctrl+K, Cursor sẽ mở hộp thoại Inline Edit ngay tại dòng code đó. Đây là cách nhanh nhất để refactor: bôi đen function → nhấn Ctrl+K → gõ "thêm error handling" → AI sửa trực tiếp trong file. Không cần mở sidebar, không cần copy-paste.

Thanh trạng thái và Model Context

Ở góc dưới cùng bên phải, Status Bar hiển thị model đang dùng (ví dụ: claude-3.5-sonnet). Click vào đây để đổi model nhanh hoặc xem số token đã dùng. Bên cạnh là Context — hiển thị các file đang được AI "đọc" để trả lời. Nếu thấy AI trả lời sai, hãy kiểm tra xem file cần thiết đã nằm trong Context chưa bằng cách dùng @filename trong chat.

Command Center và Phím tắt

Nhấn Ctrl+Shift+P mở Command Palette, gõ "Cursor" để thấy tất cả lệnh AI: generate commit message, fix lint errors, explain code. Mẹo quan trọng: Ctrl+Enter để accept suggestion, Ctrl+Backspace để reject. Nếu bạn dùng VS Code trước đây, các phím tắt này gần như giữ nguyên, chỉ thêm layer AI mới.

Ví dụ thực tế

Sửa website HTML đơn giản (Non-coder)

Bạn mở file index.html của website cá nhân. Muốn đổi màu nút "Liên hệ" từ xanh sang đỏ nhưng không biết CSS nằm ở đâu. Nhấn Ctrl+L mở Chat, gõ: "Đổi màu nút Contact thành màu đỏ". Cursor sẽ chỉ ra dòng CSS cần sửa và đề xuất code mới. Bạn click vào nút "Apply" trong chat — file tự động cập nhật, không cần đụng vào code.

Tạo component đa tệp với Composer (Developer)

Bạn cần tạo feature "Giỏ hàng" cho app React. Nhấn Ctrl+I mở Composer, gõ: "Tạo component Cart với state management, thêm file Cart.jsx, Cart.css, và cập nhật App.jsx để import". Composer sẽ hiển thị preview 3 file mới và sửa đổi trong App.jsx. Kiểm tra diff, bấm "Accept All" — toàn bộ feature được viết xong trong 30 giây thay vì 30 phút viết thủ công.

Refactor nhanh với Inline Edit (Cả hai)

Trong file JavaScript, bạn có đoạn code lặp lại nhiều lần. Bôi đen đoạn code, nhấn Ctrl+K, gõ: "Tách thành hàm reusable tên là calculateTotal". AI viết lại đoạn code ngay tại chỗ, thay thế đoạn cũ bằng function call mới. Không cần mở cửa sổ chat, workflow không bị gián đoạn.

Ứng dụng

Người không biết code (Content Creator, Designer)

Tập trung vào Chat Sidebar (Ctrl+L) và tính năng Apply. Bạn có thể mở file HTML/CSS của landing page, yêu cầu AI chỉnh sửa text, màu sắc, hoặc thêm hiệu ứng đơn giản mà không cần hiểu cú pháp code. Giao diện split-screen giúp bạn thấy ngay kết quả trước khi lưu.

Lập trình viên Junior

Dùng Chat Sidebar trong chế độ Ask để hiểu codebase cũ. Mở file code dài, nhấn Ctrl+L, hỏi: "Giải thích function này làm gì?" hoặc "Tại sao đoạn này dùng Promise thay vì async/await?". AI giải thích ngay bên cạnh code, giúp bạn onboard nhanh hơn vào dự án mới.

Lập trình viên Senior và Architect

Tận dụng Composer cho các thay đổi kiến trúc lớn. Khi cần refactor từ REST sang GraphQL hoặc thêm TypeScript vào dự án JavaScript cũ, Composer cho phép bạn mô tả thay đổi ở high-level, sau đó review diff trước khi áp dụng vào hàng chục file. Status Bar giúp bạn theo dõi context window để không vượt quá giới hạn token khi làm việc với codebase lớn.

So sánh

Tính năng giao diện	Cursor	VS Code thuần	VS Code + GitHub Copilot
Chat panel riêng	Có — Sidebar tích hợp sâu	Không	Không — chỉ có inline chat nhỏ
Multi-file editing	Composer hỗ trợ native	Không có AI	Không có AI multi-file
Context awareness	Tự động lấy terminal, lỗi, file mở	Không	Chỉ lấy file đang active
Inline edit	`Ctrl+K` với diff trực quan	Không	Gợi ý inline, không có diff box
Model selection	Claude, GPT, Gemini tùy chọn	Không	Chỉ OpenAI models

Cursor khác biệt ở chỗ giao diện được thiết kế cho AI-first workflow: Chat và Composer không phải là plugin gắn thêm mà là bộ phận chính của IDE. Nếu VS Code là "trình soạn thảo có AI hỗ trợ", Cursor là "AI assistant có trình soạn thảo đi kèm".