User Snippets cực hữu dụng trong Visual Studio Code

Giới thiệu

Một ngày đẹp trời, Bạn học được Sàng Nguyên Tố vô cùng thú vị. Nếu bạn chưa biết thì link ở cuối bài nhé, rất hữu ích đó. Nhưng mà mỗi lần viết thì dài, bạn thì lười. Phải làm sao bây giờ :<

Sort trong algorithm của c++ rất tiện nhưng mà thầy bạn bắt code bằng C. Thuật toán Quick_sort dài và mỗi lần bạn tự code lại thì nó lại lỗi RTE. Phải làm sao đây

Bạn muốn thêm một cái gì đó, để làm chữ ký cho code của mình (hình pokemon chẳng hạn)

Đôi lúc bạn bắt gặp một ai đó code trên youtube và bỗng thấy họ gõ 1 từ khóa nào đó, ấn tab và sau đó 1 đoạn code mẫu được thêm vào, hay đọc code giải bài của 1 ai đó mà họ define cũng như thêm rất nhiều thư viện không dùng đến vào trong file. Bạn tự nghĩ làm thế nào họ có thể gõ ra các đoạn code mẫu đấy một cách nhanh chóng. Tất cả những điều đó đều có thể làm với snippet.

Code snippets là những template giúp bạn nhập những đoạn code mẫu được lặp lại một cách dễ dàng hơn. Một số snippet thường thấy đó là vòng lặp for, while,… hay các câu lệnh rẽ nhánh như if, switch,…

Một số thuật ngữ

Code Snippet

Một đoạn code nhỏ, thường là cho mục đích ví dụ, giải thích trong một tài liệu lập trình. Thường hay bị hiểu nhầm với psuedo code (giả mã), tuy nhiên bài viết này không đề cập đến giả mã.

Boilerplate Code

Một đoạn code có tính chất:

• Bắt buộc phải có mỗi khi ứng dụng một tính năng F nào đó: Ví dụ như hàm main trong ngôn ngữ C, C++, Java, hoặc là ứng dụng desigh pattern Singleton.
• Lặp lại nhiều lần.
• Không thay đổi (cố định)

User Snippets

Một tiện ích của vscode, hỗ trợ dev tự viết các shortcut snippets, giúp giảm thiểu boilerplate code, tăng hiệu suất viết code cho nhà phát triển.

Tạo User Snippets

Vào File/Preferences/User Snippets, chọn ngôn ngữ hoặc tạo mới.

Bạn hãy đặt đoạn code snippet vào trong cặp ngoặc {}, ngăn cách các snippet bằng một dấu phẩy

Cấu trúc một snippet:

– Name: Đặt tên cho snippet

– Scope: Liệt kê các ngôn ngữ cho phép sử dụng snippet này.
– Format: “scope”: “javascript,typescript”,
– Tên các ngôn ngữ:

– Nếu scope để trống: áp dụng cho tất cả các ngôn ngữ

– Prefix: các trigger (tổ hợp phím) khi gõ ra sẽ khiến đoạn snippet này được gợi ý.
Các trigger này sẽ được đặt trong “”, viết ngăn cách nhau bởi dấu ‘,’ và chúng sẽ được đặt trong 1 cặp dấu [] (mảng các trigger)

– Body: đây là phần để đặt các đoạn code mẫu theo mong muốn của người dùng.
Các dòng code sẽ được đặt trong các cặp “”.
Các dòng code được ngăn cách bởi dấu ‘,’.
$1, $2, $3,… là vị trí điểm dừng của các con trỏ khi ta bấm tab sau khi đoạn snippet được chèn vào. Thứ tự các vị trí sẽ phụ thuộc vào các số 1, 2, 3,…
Có thể gán giá trị mặc định tại các vị trí điểm dừng bằng cách viết ${1:giá trị}, ${2:giá trị},…
$0 là vị trí điểm dừng cuối cùng của con trỏ trong đoạn snippet.

– Description: phần mô tả thêm sẽ được vscode hiển thị, giúp mô tả chức năng đoạn code mẫu.

Ví dụ

Tạo 1 snippet cho phép ta lặp từ i = 1 tới n. (sau khi chèn đoạn code trên vào, con trỏ sẽ được đặt ở vị trí &1)

Khi gõ .forn (phần prefix) thì đoạn snippet sẽ được gợi ý:

Cuối cùng

Chúng ta có thể tạo nhiều snippet trong cùng 1 snippets file bằng cách đặt nhiều đoạn snippet trong cặp {}