10 Cursor Tips Tôi Ước Biết Sớm Hơn (Từ Góc Nhìn Senior FE Dev)

Những mẹo thực chiến khi dùng Cursor AI editor cho frontend development - từ custom rules, multi-file context, đến workflow kết hợp với Vercel deployment.

Cursor Không Phải Copilot — Cần Dùng Khác Đi

Nhiều dev chuyển sang Cursor nhưng vẫn dùng theo cách cũ: gõ code, thỉnh thoảng tab để autocomplete. Như vậy là đang bỏ phí 70% sức mạnh của tool này. Sau 8 tháng dùng Cursor hàng ngày cho dự án Next.js thực tế, đây là những thứ thực sự làm tăng tốc độ.

1. Viết .cursorrules Một Lần, Hưởng Lợi Mãi Mãi

File .cursorrules ở root project là nơi bạn "dạy" Cursor cách project của bạn hoạt động. AI sẽ follow rules này trong mọi suggestion:

# .cursorrules
You are a senior frontend engineer working on a Next.js 15 app.

## Tech Stack
- Next.js 15 with App Router
- TypeScript strict mode
- Tailwind CSS v4
- Zod for validation
- React Query for server state

## Code Style
- Always use named exports (no default exports for components)
- Prefer Server Components by default, add "use client" only when needed
- Use Vietnamese comments for business logic
- All API calls go through /lib/api — never fetch directly in components

## Patterns
- Form validation: always use react-hook-form + zod resolver
- Error handling: use Result type pattern, never throw in async functions
- Data fetching: prefer React Query over useState + useEffect

Cursor sẽ generate code đúng conventions ngay lập tức, không cần nhắc lại mỗi lần.

2. Cmd+K Trên Selection Thay Vì Chat

Thay vì copy code sang chat, select đoạn code cần refactor rồi Cmd+K. Cursor edit inline, hiện diff ngay tại chỗ. Nhanh hơn nhiều và không làm mất context.

3. @ Syntax Để Kiểm Soát Context

Cursor AI không biết magic — nó chỉ tốt như context bạn cho vào:

@file — reference file cụ thể
@folder — include cả folder
@docs — crawl docs của library (React, Tailwind, Next.js...)
@web — search web realtime
@git — reference commit history

Ví dụ prompt hiệu quả: "@components/Button.tsx Refactor để accept polymorphic as prop, giữ nguyên @types/button.ts"

4. Composer Cho Multi-File Changes

Khi cần thay đổi liên quan nhiều file (ví dụ: thêm một feature mới cần update types, component, API route và tests), dùng Composer (Cmd+Shift+I) thay vì Chat. Composer hiểu cross-file context và có thể apply changes đồng thời.

5. Generate Boilerplate, Không Phải Logic

Cursor giỏi nhất ở những thứ repetitive. Đừng dùng nó để "nghĩ" — dùng nó để execute nhanh những gì bạn đã biết phải làm:

// Prompt hiệu quả:
// Tạo React Query hook cho endpoint GET /api/users/:id
// Response type là User từ @types/user.ts
// Include loading, error states và staleTime 5 phút

// Thay vì prompt mơ hồ:
// Viết code fetch user data

6. Kết Hợp Với Vercel Workflow

Combo tôi dùng hàng ngày: Cursor viết code → commit → Vercel auto-deploy preview. Khi AI generate một feature, tôi có preview URL để test ngay trong vài phút. Nếu sai, describe lại trong Cursor, fix, push, preview mới. Iteration loop cực nhanh.

Với Vercel, mỗi branch tự động có preview deployment riêng — perfect để test AI-generated code trước khi merge.

7. Dùng Notepads Để Lưu Common Prompts

Cursor có tính năng Notepads — lưu các prompt template hay dùng. Tôi có sẵn template cho: "viết unit tests", "review security", "optimize performance", "add error boundary". Gọi ra bằng @notepad-name.

8. Agent Mode Cho Tasks Phức Tạp

Agent mode (Cmd+Shift+P → Enable Agent) cho phép Cursor tự chạy terminal commands, đọc file, sửa nhiều file liên tiếp. Dùng khi muốn migrate tất cả fetch calls trong /app/api sang pattern mới trong lib/api.ts.

9. Review Mọi Suggestion Trước Khi Accept

Cursor giỏi syntax, dở business logic. Code có thể compile nhưng sai yêu cầu nghiệp vụ.

Rule của tôi: accept autocomplete ngay cho boilerplate, nhưng đọc kỹ mọi logic change. Senior dev dùng Cursor vẫn cần hiểu từng dòng code được tạo ra.

10. Track Cost Nếu Dùng API Mode

Nếu dùng Cursor với API key riêng (thay vì subscription), model costs có thể spike nhanh khi dùng Agent mode nhiều. Set budget limit trong Settings và monitor usage.

Kết Luận

Cursor là multiplier, không phải replacement. Senior dev dùng Cursor đúng cách có thể ship gấp 2-3x so với không dùng. Nhưng quan trọng hơn là phải hiểu tool đang làm gì — đừng blind trust AI-generated code lên production.