Hướng dẫn tạo snippet trong visual studio code (VSCode)

Hướng dẫn tạo snippet trong visual studio code (VSCode)4 phút đọc

Trong hai bài viết trước mình đã chia sẻ cho các bạn những cập nhật mới nhất của trình soạn thảo VSCode và các phím tắt thông dụng của trình soạn thảo này.Cả hai bài viết đó đều nhằm giúp bạn thao tác nhanh và gọn hơn, giúp tiết kiệm tối đa thời gian và công sức viết code.

Ngoài áp dụng hai cách đó bạn còn có thể nâng cao hiệu suất soạn thảo code lên bẳng cách tự tạo cho mình những snippet riêng.Và trong bài viết này mình sẽ hướng dẫn các bạn tạo snippet trong Visual Studio Code (VSCode).

Tạo Snippet thủ công

Bước 1 : Bạn hãy gõ tổ hợp phím tắt sau để mở nhanh Command Pallete như hình ảnh dưới đây.

  • MAC         : Shift+Cmd+P
  • WINDOW : Shift+Ctrl+P

Sau đó bạn hãy gõ dòng chữ “configure user snippets” để mở danh sách tạo snippet.

Hướng dẫn tạo snippet trong visual studio code (VSCode) ảnh 1

Bước 2 : Khi danh sách các snippet bạn có thể tạo, chỉnh sửa hiện ra bạn hãy chọn ngôn ngữ bạn muốn tạo snippet.Ví dụ ở đây mình muốn tạo snippet cho  ngôn ngữ Javascript nên mình sẽ gõ tìm kiếm với từ khóa “javascript“.

File javascript.json hiện ra và mình nhấn vào chọn nó để tạo snippet cho riêng mình.

Hướng dẫn tạo snippet trong visual studio code (VSCode) ảnh 2

Bước 3 : Khi lần đầu tiên bạn mở file tạo snippet lên sẽ thấy xuất hiện hướng dẫn tạo snippet như hình ảnh dưới đây.Có cả hướng dẫn kèm theo một mẫu snippet đơn giản.

Bạn hãy đọc và xem qua ví dụ này để biết những bước cơ bản tạo ra một snippet nhé.

Hướng dẫn tạo snippet trong visual studio code (VSCode) ảnh 3

Bước 4 : Trong dấu ngoặc nhọn {} ở hình ảnh bước 3 là dạng comment và nó không có hiệu quả khi bạn gọi tới snippet.Bạn hãy xóa đi toàn bộ phần comment phía trong đó và hãy gõ lại code y như hình ảnh dưới đây.

  • “Console.log” : đây là phần tên snippet, bạn có thể thay thế nó bằng tên tương ứng với snippet bạn muốn tạo
  • prefix : phím tắt để bạn gọi tới snippet đã tạo
  • body : phần snippet sẽ hiện ra khi gõ phím tắt
  • description : phần chú thích cho snippet sẽ hiện ra khi bạn gõ phím tắt giúp bạn phân biệt nếu như có nhiều snippet

Hướng dẫn tạo snippet trong visual studio code (VSCode) ảnh 4

Sau khi tạo xong snippet và lưu lại bạn có thể sử dụng ngay.Như hình ảnh dưới đây là ví dụ khi mình gọi tới snippet mà mình đã tạo ở trên.

Hướng dẫn tạo snippet trong visual studio code (VSCode) ảnh 7

Tạo Snippet bằng công cụ Online

Ngoài cách tạo thủ công một snippet như các bước ở trên, bạn có thể sử dụng công cụ online có tên Snippet Generator để tạo nhanh một snippet.

Hướng dẫn tạo snippet trong visual studio code (VSCode) ảnh 5

Như ở hình ảnh trên đây mình đã tạo ra một snippet nhằm tiết kiệm thời gian viết code tạo ra một function.Với công cụ này bạn không chỉ tạo ra được snippet cho trình soạn thảo VSCode mà còn có những trình soạn thảo code nổi tiếng khác như Sublime text, Atom.

Sau khi tạo xong snippet bạn hãy copy nó và dán vào trong file snippet của bạn và lưu lại.

Hướng dẫn tạo snippet trong visual studio code (VSCode) ảnh 6

Trên đây là hình ảnh ví dụ về hai snippet đơn giản mà mình đã tạo ra.

Kết luận

Trong thư viện extension của VSCode có rất nhiều extension liên quan đến snippet.Bạn có thể dùng những extension đó để gọi nhanh một snippet có sẵn.

Nếu bạn muốn tạo nhanh một snippet mang tính cá nhân thì bạn hãy áp dụng những kiến thức trong bài viết này nhé.Chúc bạn thành công.

Bài viết trước :

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x