0

[Series Cursor A-Z] Phần 2: Thực Chiến Composer & Kỹ Thuật Viết Prompt Tạo Nguyên Cả Module Trong 5 Phút

1. Mở đầu

Chào anh em đã quay trở lại với series Cursor từ A-Z!

Ở [Phần 1], chúng ta đã cùng nhau "dọn nhà" sang Cursor, setup các Settings cơ bản và làm quen với bộ phím tắt sinh tử (Cmd+K, Cmd+L). Nếu bạn đã cài đặt xong xuôi và định nghĩa được file .cursorrules, thì chúc mừng, AI của bạn đã sẵn sàng.

Hôm nay, ở Phần 2, chúng ta sẽ nâng trình lên một level mới. Mình sẽ hướng dẫn anh em cách sử dụng Composer (tính năng "đắt tiền" nhất của Cursor) kết hợp với kỹ thuật Prompting chuẩn Dev để thay vì "nhờ AI gõ từng dòng", chúng ta sẽ "chỉ huy AI đẻ ra cả một module" gồm nhiều file liên kết với nhau. Lên xe thôi!

2. Composer (Cmd + I / Ctrl + I) - Quyền Năng Của Kẻ Chỉ Huy

Nếu Cmd+K là lính đánh tỉa (sửa 1 chỗ) và Cmd+L là quân sư (hỏi đáp), thì Composer (Cmd+I) chính là vị Tướng quân.

Composer cho phép AI tạo, đọc và chỉnh sửa nhiều file cùng một lúc trong project của bạn.

Hai chế độ của Composer:

Khi mở Composer lên, bạn sẽ thấy nó có 2 chế độ (Mode):

  1. Normal (Mặc định): Bạn ra lệnh, AI sẽ draft ra các file (hiển thị dạng diff xanh/đỏ để bạn so sánh). Bạn xem xét kĩ, ok thì bấm Accept All.
  2. Agent (Đang cực hot): Ở mode này, AI không chỉ viết code mà nó còn có quyền tự chạy Terminal (ví dụ tự gõ npm install, tự chạy test). Nếu có lỗi, nó tự đọc log lỗi và... tự sửa lại code cho đến khi chạy được. (Khuyên dùng khi bạn đã quen với Cursor).

3. Công Thức Viết Prompt "Chuẩn Dev" Cho Cursor

AI rất thông minh, nhưng nó không có máy đọc suy nghĩ. Nếu bạn prompt kiểu: "Tạo cho tôi tính năng quản lý user", nó sẽ viết ra một mớ code generic (chung chung) và chắc chắn không khớp với architecture (kiến trúc) project của bạn.

Công thức chuẩn để trị Cursor:

[Vai trò] + [Context/Bối cảnh] + [Yêu cầu chi tiết] + [Ràng buộc/Convention]

Ví dụ một Prompt xịn:

"Đóng vai trò là Senior Backend Node.js. Dựa vào kiến trúc hiện tại trong thư mục @src, hãy tạo một module CRUD cho thực thể Product (gồm id, name, price, stock).

Yêu cầu:

  1. Tạo Model bằng Mongoose.
  2. Tạo Service xử lý logic (có check điều kiện stock > 0 khi update).
  3. Tạo Controller và khai báo Route. Bắt buộc: Sử dụng TypeScript strict mode, viết code theo chuẩn Clean Architecture và handle error qua CustomErrorHandler có sẵn."

4. Thực Chiến: Dựng 1 Module RESTful API

Thử tưởng tượng bạn đang làm một project Backend (ví dụ Node.js/Express) và sếp yêu cầu thêm tính năng Quản lý Bài viết (Article). Thay vì hì hục tạo file, copy paste boilerplate, hãy làm theo các bước sau:

Bước 1: Nhấn Cmd + I (hoặc Ctrl + I) để mở Composer. Bước 2: Cung cấp Context (Bối cảnh). Gõ phím @ và chọn các file/folder làm mẫu để AI học theo style code của bạn. Ví dụ:

  • @user.controller.ts (Để nó biết cách bạn viết controller).
  • @user.route.ts (Để nó biết cách bạn define router).

Bước 3: Nhập Prompt thực chiến:

"Hãy tạo mới module Article (title, content, authorId) tham khảo theo chuẩn code của @user.controller.ts@user.route.ts. Tạo cho tôi đầy đủ Model, Controller, Service và tự động import route mới vào file @app.ts."

Bước 4: Thưởng thức ma thuật. Bạn sẽ thấy Cursor bắt đầu "múa" bàn phím, tạo ra hàng loạt file mới (article.model.ts, article.service.ts,...). Nó sẽ hiện thị giao diện Diff để bạn review.

  • File nào ổn -> Accept.
  • Muốn nhận toàn bộ -> Accept All (hoặc nhấn Cmd + Enter).

Bùm! Một task mất 30 phút giờ chỉ còn 3 phút.

5. Tối Ưu Context Với Bộ Tứ @ (Bí Kíp Nhắc Bài AI)

Để Composer hoạt động chính xác 100%, bạn phải biết cách "nhắc bài" bằng phím @. Đây là các thẻ @ quyền lực nhất:

  1. @Files & @Folders: Gắn kèm một file hoặc một thư mục cụ thể để AI tập trung phân tích vùng đó, tránh bị ảo giác (hallucination) đọc lan man sang code khác.
  2. @Codebase: Quét toàn bộ project. Dùng khi bạn muốn refactor một luồng lớn. Rất tốn token nên hãy cân nhắc dùng đúng lúc.
  3. @Docs: Chèn tài liệu của các thư viện bên thứ 3. (Ví dụ bạn dùng một thư viện UI mới ra mắt, AI chưa được train, hãy dùng @Docs paste link trang chủ của thư viện đó vào, AI sẽ đọc docs và viết code chuẩn luôn).
  4. @Web: Cursor sẽ tự động search Google để tìm thông tin mới nhất trước khi viết code. Cực kỳ hữu dụng khi bạn cần dùng các API vừa mới update năm nay.

6. Lời Kết Phần 2

Đến đây, chắc hẳn anh em đã thấy sức mạnh khủng khiếp của Cursor khi kết hợp Composer và Prompt có cấu trúc. Việc làm dev bây giờ không còn là gõ từng dòng code lặp đi lặp lại nữa, mà chuyển sang việc: Thiết kế hệ thống, ra lệnh cho AI, và Review code.

Ở Phần 3, mình sẽ hướng dẫn anh em một khía cạnh "đau đầu" không kém: Sử dụng Cursor để Review Code, Tìm/Fix Bug thần tốc và Tự động sinh Unit Test siêu xịn xò.

Anh em hãy thử áp dụng Composer vào project hiện tại và chia sẻ kết quả dưới phần comment nhé! Hẹn gặp lại ở Phần 3!


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí