Sử dụng Snippet để viết code nhanh hơn trong Sublime Text

Nếu bạn là một người thường xuyên dùng trình soạn thảo Sublime Text, chắn hẳn bạn sẽ muốn tìm cách viết code nhanh hơn để tăng năng suất cho riêng mình. Thế nhưng trong Sublime Text có cách nào để viết nhanh hơn không? Có, bạn chỉ cần dùng snippet thì sẽ viết nhanh hơn lúc chưa dùng snippet.

Snippet là gì?

Snippet là một đoạn code được ta định nghĩa sẵn và gắn vào một từ khoá nào đó (gọi là trigger), khi cần dùng thì ta sẽ gọi trigger này để chèn nội dung mà ta đã định nghĩa trước đó vào. Với snippet, quá trình gõ code của bạn sẽ nhanh hơn vì bạn sẽ không phải gõ đi gõ lại nhiều đoạn code giống nhau. Bài viết này sẽ hướng dẫn bạn làm thế nào để tạo, quản lý và chèn một code snippet vào trong quá trình soạn thảo code.

#1 Tạo Snippet

Để tạo một Snippet bạn vào Tool ➜ New Snippet

Sau đó Sublime Text sẽ mở một tab mới và kèm theo đoạn code như bên dưới cho bạn

[code]<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> --> </snippet>[/code]

Bên trên là một template mẫu mà Sublime Text tạo sẵn cho bạn. Đoạn code mà bạn muốn định nghĩa phải nằm bên trong <content><![CDATA[ và ]]></content>. Ví dụ như sau:

[code]<snippet> <content><![CDATA[ -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; ]]></content> </snippet>[/code]

Sau đó bạn cần tạo một từ khoá (trigger) để gọi snippet này ra mỗi khi bạn cần dùng, để tạo một từ khoá (trigger) cho snippet ta dùng <tabTrigger>, khi đặt tên cho trigger bạn cần đặt tên sao cho dễ nhớ và không trùng lặp với những từ khoá có sẵn. Ví dụ:

[code]<snippet> <content><![CDATA[ -webkit-transition: all ${1:1s} ease-in-out; -moz-transition: all $2 ease-in-out; -o-transition: all $3 ease-in-out; transition: all $4 ease-in-out; ]]></content> <tabTrigger>passionery-trans</tabTrigger> </snippet>[/code]

Cuối cùng, bạn cần thiết lập phạm vi sử dụng của snippet này, trong ví dụ trên thì tôi đã tạo ra một snippet mới cho thuộc tính transition của CSS3, vì vậy, ở đây tôi sẽ giới hạn phạm vi sử dụng của snippet này chỉ trong các file CSS. Phạm vi của một snippet được thêm bằng <scope> Ví dụ:

[code]<snippet> <content><![CDATA[ -webkit-transition: all ${1:1s} ease-in-out; -moz-transition: all $2 ease-in-out; -o-transition: all $3 ease-in-out; transition: all $4 ease-in-out; ]]></content> <tabTrigger>passionery-trans</tabTrigger> <scope>source.css</scope> </snippet>[/code]

#2 Save Snippet

Khi đã làm xong những bước bên trên, bạn cần save snippet này lại. Khi save, bạn cần lưu ý 2 điều: tên của file snippet và đường dẫn để save file.

Đối với tên của snippet, khi save bạn nhớ phải save dưới dạng như sau:

[code]snippet_name.sublime-snippet[/code]

trong đó snippet_ name thì khỏi nói bạn cũng biết đây là tên của snippet mà bạn cần lưu, còn sublime-snippet là định dạng file của snippet, tất cả các snippet phải được save dưới định dạng này. Ví dụ:

[code]trans.sublime-snippet[/code]

Đối với đường dẫn để lưu snippet, bạn không cần phải lo là file sẽ lưu ở đâu vì Sublime Text sẽ tự động tìm đúng đường dẫn để lưu, nhưng nếu vì một vài lý do nào đó mà Sublime Text mở không đúng đường dẫn thì bạn vẫn có thể chọn lại cho đúng đường dẫn, thông thường thì Sublime Text sẽ lưu các file do user định nghĩa tại <ổ_đĩa>:\Sublime Text_<version>\Data\Packages\User. Khi đã save xong snippet, bạn cần khởi động lại Sublime Text để snippet của bạn có hiệu lực.

#3 Sử dụng Snippet

Bây giờ thì snippet của bạn đã sẵn sàng để sử dụng, bạn mở một một file css lên và gõ vào passionery-trans, Sublime Text sẽ đưa ra gợi ý cho bạn chọn hoặc cũng có thể gõ đầy đủ từ khoá passionery-trans và nhấn tab để chèn snippet vào.

Như ví dụ bên trên, snippet này chỉ hoạt động trong các file css nên khi bạn gõ ở các file HTML hay bất kỳ file nào khác thì nó sẽ không hiển thị gợi ý cho bạn chọn.