Hướng dẫn tạo Snippets trong Sublime Text

Tổng quan

Sublime Text 3 là một trong những code editor được nhiều người sử dụng nhất, chúng ta có thể cài các package giúp hỗ trợ viết code nhanh thông qua package control, bạn cũng có thể tự viết snippets riêng cho mình, và không cần giới thiệu nhiều nữa, chúng ta sẽ cùng làm một vài ví dụ đơn giản nào !

Cách tạo Snippets

Để tạo mới một snippet chúng ta làm các bước theo trình tự như sau: Tools -> Developer -> New Snippet.... Một snippet sẽ có dạng như thế này:

<snippet>
  <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <!-- <tabTrigger>hello</tabTrigger> -->
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <!-- <scope>source.python</scope> -->
  <!-- Optional: Provide a desription for the snippet -->
  <!-- <description>demo</description> -->
</snippet>

Một snippet sẽ có 4 phần và chỉ có 1 phần là bắt buộc, nhưng các bạn nên định nghĩa cả 4 phần

1: Content (bắt buộc)

Code sẽ được định nghĩa bên trong cặp thẻ <![CDATA[]]> Để tự động trỏ đến phần text cần thay đổi, bạn sẽ phải chọn vị trí của nó thông qua ${1:name}, ví dụ :

<![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]>

Một lưu ý nhỏ: để viết được biến $ thì bạn cần thêm \ vào trước $, ví dụ : ${1:\$data}

2: The Trigger Word (tùy chọn)

<tabTrigger>hello</tabTrigger>

Đây là phần lưu cách viết tắt của snippet, nó là bước tùy chọn bởi tabTrigger là cách gọi thay thế cho phần content của snippet, giúp chúng ta có thể chọn được phần code gợi ý khi gõ text bên trong phần này Ví dụ :

<snippet>
    <content><![CDATA[
@dd(${1:\$data})
]]></content>
    <tabTrigger>dd</tabTrigger>
</snippet>

Ở đây mình có 1 đoạn snippet để dd() trong file blade laravel, bạn chỉ việc gõ dd và phần gợi ý sẽ hiện thị ra, enter và đây là đoạn code của mình @dd($data) với con trỏ chỉ sẵn vào biến $data

3: Scope (tùy chọn)

<source>source.python</source>

Đây là phần giới hạn snippet có thể dùng được ở những file như thế nào, như đoạn @dd($data) bên trên với <scope>text.blade</scope> thì gợi ý sẽ chỉ hiển thị ở những file .blade Bạn có thể tham khảo ở link này

4: Description (tùy chọn)

<description> demo description </description>

Cuối cùng là phần mô tả khi hiển thị gợi ý......like this : Tip nhỏ: tạo keyboard shortcut để nhanh chóng thêm mới snippet bằng cách chọn Preferences -> Keybindings, thay thế phím tắt mà bạn muốn : { "keys": ["cmd+alt+n"], "command": "new_snippet" }

Lưu Snippets

Sau khi hoàn tất , file snippets của chúng ta sẽ được lưu tại thư mục packages/user, bạn có thể chỉnh sửa lại nó thông qua Preferences -> Browse Packages... sau khi cửa sổ được hiện ra, bạn chọn tiếp vào thư mục User, và ..... yep , tất cả snippet của bạn được lưu ở đây, mở file cần chỉnh sửa lên và tiến hành thay đổi thôi

Tổng kết

Trên đây là cách tạo snippets đơn giản để giúp các bạn tiết kiệm thời gian code, nếu các bạn còn có tip hay nào khác thì để lại bình luận nhé, cảm ơn và chúc năm mới ít Bug 😃)

Bài viết được tham khảo tại : medium