Công cụ chuyển đổi mã trực tuyến thành đoạn mã, hỗ trợ JavaScript / TypeScript / React / JSX / TSX      

Vui lòng nhập tên đoạn trích (name)
Vui lòng nhập tiền tố đoạn trích (prefix)
Vui lòng nhập mô tả đoạn trích (description)
Vui lòng nhập mã văn bản (code body)
Kiểu thế hệ
Kết quả đoạn trích được tạo

VSCode Cách sử dụng đoạn mã


Snippets in Visual Studio Code
Các đoạn mã VS Code là một cách mạnh mẽ để tăng năng suất mã hóa của bạn bằng cách tự động chèn các khối mã thường dùng. Chúng có thể là các phần mở rộng văn bản đơn giản hoặc các mẫu phức tạp hơn với các chỗ giữ chỗ và biến. Sau đây là cách tận dụng chúng:

Tạo đoạn mã:

Truy cập Cài đặt đoạn mã: Vào Tệp > Tùy chọn > Đoạn mã người dùng (Mã > Tùy chọn > Đoạn mã người dùng trên macOS). Ngoài ra, hãy sử dụng bảng lệnh (Ctrl+Shift+P hoặc Cmd+Shift+P) và nhập "Tùy chọn: Cấu hình Đoạn mã người dùng".

Chọn ngôn ngữ: Bạn sẽ được nhắc chọn ngôn ngữ cho đoạn mã của mình (ví dụ: javascript.json, python.json, v.v.). Điều này đảm bảo đoạn mã chỉ khả dụng cho ngôn ngữ cụ thể đó. Bạn cũng có thể tạo tệp "Đoạn mã toàn cục" nếu bạn muốn đoạn mã có thể truy cập được trên tất cả các ngôn ngữ.

Xác định đoạn mã: Đoạn mã được xác định ở định dạng JSON. Mỗi đoạn mã có một tên, một tiền tố (phím tắt bạn sẽ nhập để kích hoạt đoạn mã), một nội dung (mã sẽ được chèn) và một mô tả tùy chọn.

Ví dụ (JavaScript):
{
  "For Loop": {
    "prefix": "forl",
    "body": [
      "for (let i = 0; i < $1; i++) {",
      "  $0",
      "}"
    ],
    "description": "For loop with index"
  }
}
Trong ví dụ này:

"For Loop": Tên của đoạn mã (để bạn tham khảo).
"forl": Tiền tố. Gõ "forl" và nhấn Tab sẽ chèn đoạn mã.
"body": Mã cần chèn. $1, $2, v.v. là các tabstop (trình giữ chỗ). $0 là vị trí con trỏ cuối cùng.
"description": Mô tả tùy chọn được hiển thị trong các gợi ý của IntelliSense.
Sử dụng Snippet:

Nhập Tiền tố: Trong tệp có đúng loại ngôn ngữ, hãy bắt đầu nhập tiền tố bạn đã xác định (ví dụ: forl).

Chọn Snippet: IntelliSense của VS Code sẽ gợi ý đoạn mã. Chọn đoạn mã bằng phím mũi tên hoặc bằng cách nhấp.

Sử dụng Tabstop: Nhấn Tab để điều hướng giữa các tabstop ($1, $2, v.v.) và điền các giá trị.

Biến:

Snippet cũng có thể sử dụng các biến như $TM_FILENAME, $CURRENT_YEAR, v.v. Để biết danh sách đầy đủ, hãy xem tài liệu của VS Code.

Ví dụ với Biến (Python):
{
  "New Python File": {
    "prefix": "newpy",
    "body": [
      "#!/usr/bin/env python3",
      "# -*- coding: utf-8 -*-",
      "",
      "# ${TM_FILENAME}",
      "# Created by: ${USER} on ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"
    ]
  }
}
Bằng cách thành thạo các đoạn mã, bạn có thể giảm đáng kể việc nhập lặp lại và đảm bảo tính nhất quán trong mã của mình. Thử nghiệm tạo các đoạn mã của riêng bạn cho các mẫu mã thường dùng và xem hiệu quả mã hóa của bạn tăng vọt.