Ngừng Chuyển Tab Liên Tục: Cách Windsurf IDE Thực Sự Đẩy Nhanh Tốc Độ Lập Trình Của Bạn

AI tutorial - IT technology blog
AI tutorial - IT technology blog

Sự mệt mỏi khi phải ‘chuyển tab’ liên tục

Tôi đã dành nhiều năm tỉ mẩn tinh chỉnh thiết lập VS Code của mình—hoàn thiện theme, gán phím tắt cho mọi thứ, và cuối cùng là gắn thêm các plugin AI thế hệ đầu tiên. Nhưng ngay cả với tính năng tự động hoàn thành (autocomplete) xịn xò, tôi vẫn bị kẹt trong một vòng lặp: copy lỗi, Alt-Tab sang trình duyệt, dán vào Claude, copy giải pháp, rồi sau đó tự tay sửa lỗi trên ba file khác nhau.

Việc chuyển đổi liên tục này không chỉ gây khó chịu; nó còn phá vỡ trạng thái tập trung (flow state) của bạn. Bạn không thực sự đang viết code; bạn đang đóng vai một nhân viên nhập liệu lương cao cho một LLM.

Điểm nghẽn thực sự không nằm ở trí thông minh của AI. Đó là khoảng cách về ngữ cảnh (context gap). Hầu hết các tiện ích mở rộng chỉ nhìn thấy file bạn đang gõ. Chúng không biết về database schema ẩn trong /models hay hàm tiện ích bạn đã viết vào thứ Ba tuần trước. Các Agentic IDE như Windsurf đã thay đổi cuộc chơi. Thay vì chỉ đoán tên biến tiếp theo, chúng có thể duyệt qua toàn bộ codebase, thực thi các lệnh terminal và thực hiện việc refactor nhiều file một cách tự chủ.

Động cơ bên dưới: Flow và Cascade

Windsurf không chỉ là một “lớp vỏ” khác của ChatGPT. Nó vận hành trên hai hệ thống cốt lõi: FlowCascade.

Flow giúp bạn luôn đồng bộ với môi trường làm việc. Nó không ngồi yên chờ câu lệnh (prompt); nó theo dõi các thay đổi của file, log terminal và lỗi linting theo thời gian thực. Cascade chính là agent thực hiện các công việc nặng nhọc.

Khác với autocomplete cơ bản, Cascade hành động thay cho bạn. Nếu bạn yêu cầu nó “tạo khung (scaffold) cho một Stripe webhook mới,” nó sẽ không chỉ đưa cho bạn một đoạn code mẫu. Nó sẽ tạo route, cập nhật middleware, và thậm chí nhắc bạn chạy migration. Kể từ khi áp dụng quy trình này ba tháng trước, tôi đã giảm được gần 40% thời gian cho các “công việc chân tay” (grunt work).

Bắt đầu: 5 phút đầu tiên của bạn

Vì Windsurf được xây dựng trên nền tảng VS Code, việc chuyển đổi chỉ mất khoảng hai phút. Bạn có thể nhập mọi extension và keybinding ngay trong lần chạy đầu tiên. Khi đã vào trong, bước đầu tiên là thiết lập “luật chơi” cho AI.

1. Xác định quy tắc cơ bản cho dự án

Bạn không nên phải nhắc AI sử dụng TypeScript mỗi khi trò chuyện với nó. Bằng cách đặt file .windsurfrules vào thư mục gốc, bạn thiết lập một system prompt vĩnh viễn cho toàn bộ dự án. Điều này đảm bảo AI tuân thủ hướng dẫn phong cách (style guide) riêng của nhóm mà không cần phải nhắc nhở liên tục.

# Ví dụ về .windsurfrules
- Always use TypeScript with strict mode enabled. (Luôn sử dụng TypeScript với chế độ strict mode được bật)
- Prefer functional components and hooks for React code. (Ưu tiên functional components và hooks cho code React)
- Logic belongs in Services; keep Controllers thin. (Logic thuộc về Services; giữ cho Controllers gọn nhẹ)
- Use Vitest for unit tests. Every new utility needs a test file. (Sử dụng Vitest cho unit tests. Mỗi utility mới đều cần một file test)
- Don't delete legacy comments unless they are explicitly incorrect. (Không xóa các comment cũ trừ khi chúng rõ ràng là sai)

2. Siêu năng lực Terminal

Một trong những tính năng tốt nhất là khả năng tích hợp terminal sâu của Cascade. Khi việc build thất bại hoặc một test bị crash, đừng bôi đen văn bản nữa. Chỉ cần nhấp vào nút “Send to Cascade” bên cạnh thông báo lỗi. AI sẽ phân tích stack trace ngay lập tức, so sánh với những thay đổi gần đây của bạn để tìm ra nguyên nhân gốc rễ chỉ trong vài giây.

Prompt nâng cao: Trò chuyện với một Agent

Để có kết quả tốt nhất, bạn cần ngừng coi IDE như một công cụ tìm kiếm. Code chất lượng cao đến từ việc đặt ra các nhiệm vụ giống như một senior lead đang chỉ dẫn cho một junior dev.

Ghim ngữ cảnh (Pinning Context)

Mặc dù Windsurf có thể tìm kiếm các file của bạn, bạn sẽ tiết kiệm token và thời gian bằng cách “ghim” (pin) những file quan trọng. Nếu bạn đang chỉnh sửa một component React có gọi một API cụ thể, hãy nhắc đến cả hai file một cách rõ ràng. Điều này ngăn AI “ảo tưởng” (hallucinating) ra một hàm không hề tồn tại.

Mẹo nhỏ: Sử dụng ký hiệu “@” để tham chiếu trực tiếp các file. “Xem @authService.ts và triển khai logic retry tương tự trong @paymentGateway.ts.”

Chiến lược ‘Nhìn kỹ trước khi nhảy’

Đối với những đợt refactor phức tạp, đừng bao giờ để AI bắt đầu gõ code ngay lập tức. Hãy yêu cầu một kế hoạch trước. Điều này ngăn agent thực hiện những thay đổi lộn xộn trên 15 file khác nhau mà sau đó bạn phải mất công hoàn tác (undo). Thà phát hiện lỗi logic trong một danh sách gạch đầu dòng còn hơn là trong một bản diff dài 500 dòng.

Hãy thử thế này: “Tôi cần chuyển đổi auth từ JWT sang Auth0. Đừng viết code vội. Hãy liệt kê các file bạn định can thiệp và cách bạn sẽ xử lý việc di chuyển session.”

Trường hợp thực tế: Thêm Health Check

Giả sử bạn cần một endpoint health check cho một API Node.js để kiểm tra kết nối database. Đây là cách quy trình đó diễn ra trong Windsurf:

  1. Kích hoạt: Nhấn Cmd+L.
  2. Hướng dẫn: “Thêm một route /health. Kiểm tra kết nối Prisma. Làm theo mẫu trong routes/index.ts.”
  3. Kết quả: Cascade mở file routes, xem các import của bạn, nhận ra bạn cần một system route mới và đề xuất một bản triển khai gọn gàng.
// Proposed logic for routes/system.ts (Logic đề xuất cho routes/system.ts)
import { FastifyInstance } from 'fastify';
import { prisma } from '../lib/prisma';

export async function systemRoutes(fastify: FastifyInstance) {
  fastify.get('/health', async (_, reply) => {
    try {
      // Simple raw query to verify DB heartbeat (Truy vấn thô đơn giản để xác định database vẫn hoạt động)
      await prisma.$queryRaw`SELECT 1`;
      return { status: 'healthy', database: 'online' };
    } catch (err) {
      reply.status(500).send({ status: 'unhealthy', database: 'down' });
    }
  });
}

Khi code đã xong, bạn có thể bảo chat “Chạy server dev và kiểm tra endpoint này.” Nó sẽ tự xử lý lệnh terminal cho bạn, xác nhận mã 200 OK, và thế là xong.

Làm chủ sự thay đổi tư duy

Chuyển sang một Agentic IDE buộc bạn phải ngừng làm một “người viết cú pháp” và bắt đầu hành động như một kiến trúc sư. Nếu AI mắc lỗi, đừng chỉ sửa thủ công. Hãy giải thích lỗi cho agent: “Bạn đã sử dụng cú pháp SDK v2; chúng ta đang dùng v3. Vui lòng viết lại.” Vòng lặp phản hồi này giúp agent thông minh hơn trong phần còn lại của phiên làm việc.

Hãy giữ cho các commit của bạn thật gọn gàng và chuẩn xác. Vì Windsurf có thể chỉnh sửa nhiều file trong chớp mắt, rất dễ tạo ra một PR khổng lồ và khó đọc. Tôi luôn yêu cầu AI “Dự thảo một tin nhắn commit súc tích cho những thay đổi này” trước khi tôi stage bất cứ thứ gì. Nó giúp lịch sử git sạch sẽ và các đồng nghiệp của tôi hài lòng.

Tiêu chuẩn mới cho ngành kỹ thuật

Chuyển sang một IDE thuần AI không phải là vì lười biếng; đó là về việc loại bỏ những rào cản làm chậm quá trình triển khai (shipping). Bằng cách thiết lập .windsurfrules và làm chủ quy trình ‘Lập kế hoạch và Đánh giá’, bạn giải phóng trí não của mình cho các thiết kế cấp cao. Nếu bạn vẫn đang copy-paste stack trace vào trình duyệt, bạn đang làm việc vất vả hơn mức cần thiết. Bước nhảy vọt về năng suất đơn giản là quá lớn để có thể bỏ qua.

Share: