Cách VS Code Snippets giúp bạn "tốc biến" khi code và thoát cảnh gõ phím mỏi tay

Bạn có bao giờ thấy phát bực khi cứ phải gõ đi gõ lại cái đống import React from 'react' hay cái khung useEffect trống huếch không? Nó vừa tốn thời gian, vừa làm tụt cảm hứng sáng tạo của mình. Trong giới lập trình, chúng ta gọi đống code lặp đi lặp lại đó là "boilerplate" (code mẫu). Thay vì ngồi gõ tay hay đi copy từ dự án cũ, tại sao bạn không thử dùng VS Code Snippets để biến mọi thứ thành phím tắt?

Snippets là gì mà khiến dân Pro mê mẩn?

Nói một cách đơn giản nhất, Snippets là những mảnh code có sẵn được kích hoạt thông qua một từ khóa ngắn (prefix). Ví dụ, thay vì gõ cả chục dòng để tạo một Component, bạn chỉ cần gõ rfc và nhấn Tab. Bùm! Toàn bộ cấu trúc hiện ra trong tích tắc. Nó giống như việc bạn có một trợ lý riêng, chỉ cần ra lệnh nhẹ là mọi việc xong xuôi.

Việc này không chỉ giúp bạn code nhanh hơn mà còn đảm bảo tính đồng bộ. Bạn sẽ không còn lo chuyện gõ sai tên biến hay thiếu dấu ngoặc vô tri nữa. Nếu bạn đã từng cài các VS Code Extensions để hỗ trợ code, thì tự tạo Snippets chính là bước nâng cấp để bạn làm chủ hoàn toàn trình soạn thảo của mình. Vậy làm sao để bắt đầu tự tạo "vũ khí" cho riêng mình?

Tự tay chế biến bộ User Snippets "độc bản"

VS Code cho phép bạn tạo Snippets cho từng ngôn ngữ cụ thể hoặc dùng chung cho toàn bộ dự án qua tính năng User Snippets. Để bắt đầu, bạn vào File > Preferences > Configure User Snippets. Một file JSON sẽ hiện ra, và đây là nơi phép màu bắt đầu. Bạn sẽ định nghĩa Snippet của mình theo cấu trúc: tên, phím tắt (prefix), nội dung code (body) và mô tả.

{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "export const ${1:ComponentName} = () => {",
      "  return (",
      "    <div>${2:Content}</div>",
      "  );",
      "};"
    ],
    "description": "Tạo nhanh một React Component"
  }
}

Đoạn code trên nhìn có vẻ rắc rối nhưng thực ra rất dễ hiểu. Những chỗ có ký hiệu $1, $2 được gọi là Tabstops. Sau khi gọi snippet ra, bạn chỉ cần nhấn Tab là con trỏ sẽ tự động nhảy đến đúng vị trí đó để bạn điền tên Component hoặc nội dung. Nó thông minh hơn nhiều so với việc chỉ dán code thô vào màn hình, giúp bạn duy trì mạch tư duy mà không bị gián đoạn.

Nâng cấp Snippets với biến động và lựa chọn

Đừng dừng lại ở việc gõ chữ tĩnh. VS Code Snippets còn hỗ trợ các biến động cực hay ho. Bạn có thể dùng ${TM_FILENAME_BASE} để Snippet tự lấy tên file hiện tại làm tên Component. Tưởng tượng xem, bạn vừa tạo file Header.tsx, gõ phím tắt và nó tự hiểu luôn tên là Header, không cần gõ lại một chữ nào. Thật sự là cảm giác "tốc biến" đúng nghĩa!

Ngoài ra, kết hợp với các công cụ dọn dẹp như ESLint & Prettier, bộ Snippets của bạn sẽ luôn sạch đẹp và chuẩn chỉnh ngay từ khi mới sinh ra. Bạn cũng có thể tạo ra các danh sách lựa chọn (choice) bằng cú pháp ${1|primary,secondary,danger|} để chọn nhanh các style cho Component mà không cần nhớ tên class. Đây chính là cách các senior developer tối ưu hóa quy trình làm việc của họ mỗi ngày.

Nếu muốn tìm hiểu sâu hơn về các biến cao cấp, đừng quên ghé qua tài liệu chính thức của VS Code để khám phá thêm sức mạnh tiềm ẩn của công cụ này.

Tự tạo Snippets không chỉ là chuyện gõ nhanh hơn, mà là cách bạn hệ thống hóa kiến thức và phong cách code của bản thân. Khi bộ Snippets đủ dày, bạn sẽ thấy việc bắt đầu một dự án mới không còn là cực hình mà là một trải nghiệm mượt mà. Liệu bạn đã sẵn sàng để dọn dẹp đống code thừa và bắt đầu xây dựng bộ thư viện phím tắt cho riêng mình chưa? Hay bạn vẫn muốn tiếp tục trung thành với việc copy-paste thủ công?

Tham khảo thêm các kiến thức tại uxui.edu.vn để nâng tầm kỹ năng nhé!