Cách VS Code Snippets giúp bạn "gõ 1 được 10" và thoát cảnh viết code lặp lại

Bạn đã bao giờ rơi vào cảm giác như mình là một cái máy đánh chữ hơn là một lập trình viên chưa? Cứ mỗi lần tạo component mới là lại hì hục gõ import React, rồi khai báo function, rồi export default... Những đoạn code rập khuôn (boilerplate) này tuy nhỏ nhưng lại là "kẻ trộm" thời gian thầm lặng nhất. Nếu bạn đang tìm cách thoát khỏi mớ bòng bong đó, thì VS Code Snippets chính là tấm vé thông hành giúp bạn bay thẳng tới đích.

Snippets - Phím tắt "vạn năng" cho dân lười (nhưng thông minh)

Về cơ bản, Snippets là những đoạn mã mẫu mà bạn có thể chèn vào file code chỉ bằng một từ khóa ngắn gọn. Thay vì phải gõ 10 dòng code, bạn chỉ cần gõ 3 ký tự và nhấn Tab, toàn bộ cấu trúc sẽ hiện ra như phép màu. Điều này không chỉ giúp bạn tăng tốc độ mà còn đảm bảo code luôn đồng nhất, tránh những lỗi vặt do gõ nhầm cú pháp (syntax).

Bạn có thể sử dụng các gói snippets có sẵn từ extension, nhưng sức mạnh thực sự nằm ở việc tự tạo bộ sưu tập cá nhân. Khi đó, bạn có thể tùy chỉnh code theo đúng phong cách và dự án mà bạn đang theo đuổi tại DIA DEMY. Việc gõ code giờ đây giống như đang điều khiển một dàn nhạc giao hưởng, nơi mọi thứ đã được chuẩn bị sẵn sàng và bạn chỉ việc ra lệnh.

Nếu bạn đã từng tìm hiểu qua Cách tối ưu VS Code, bạn sẽ thấy Snippets chính là mảnh ghép cuối cùng để hoàn thiện quy trình làm việc chuyên nghiệp của mình.

Cách "nấu" một bộ Snippets xịn sò của riêng bạn

Để bắt đầu, bạn chỉ cần vào File > Share > User Snippets, chọn ngôn ngữ mình muốn (như JavaScript hay TypeScript). VS Code sẽ mở ra một file JSON, nơi bạn có thể tha hồ sáng tạo. Cấu trúc của một snippet thường bao gồm: tên, phím tắt kích hoạt, nội dung code và mô tả.

Hãy nhìn thử ví dụ dưới đây để tạo một component React nhanh như chớp:

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

Trong đoạn mã trên, biến ${1:${TM_FILENAME_BASE}} sẽ tự động lấy tên file của bạn để đặt cho component. Bạn thấy đấy, chúng ta thậm chí không cần phải gõ tên component nữa. Điều này cực kỳ hữu ích khi bạn đang làm việc với hàng chục file UI mỗi ngày.

Bạn cũng có thể tham khảo thêm tài liệu chính thức từ Microsoft để khám phá thêm các biến môi trường nâng cao khác.

Đừng biến mình thành robot, hãy bắt robot làm việc cho mình

Nhiều bạn mới bắt đầu thường lo lắng rằng dùng Snippets sẽ làm mình "quên bài". Nhưng thực tế thì ngược lại, nó giúp bộ não của bạn rảnh rang để tập trung vào tư duy logic và giải quyết vấn đề phức tạp, thay vì phải ghi nhớ những thứ vụn vặt. Khi kết hợp với Cách phím tắt VS Code, bạn sẽ thấy đôi tay mình lướt trên bàn phím mượt mà hơn bao giờ hết.

• Tự động hóa: Biến những tác vụ lặp lại thành một lần nhấn phím.
• Chính xác: Giảm thiểu sai sót khi khai báo biến hoặc đóng mở ngoặc.
• Cá nhân hóa: Code theo đúng chuẩn linting mà team bạn yêu cầu.

Thử tưởng tượng, thay vì ngồi hì hục gõ đống console.log để kiểm tra lỗi, bạn chỉ cần gõ clg là xong. Thời gian đó, bạn có thể dành để pha một tách cà phê hoặc tối ưu lại trải nghiệm người dùng cho dự án của mình.

Vậy bộ Snippets đầu tiên bạn sẽ viết là gì? Một đoạn mã xử lý API hay là cấu trúc của một trang Next.js hoàn chỉnh?