Menu

Snippets - Part 2

Trevor Williams
Attachments
editor.png (49295 bytes)
expanded.png (4379 bytes)
preferences.png (50397 bytes)
snippet.png (3266 bytes)

Snippets (Part 2)

In this article, we are going to look at TKE’s support for customized snippets that can be accessible from either any editing buffer (called “user snippets”) or from editing buffers of a specific language (called “language-specific snippets”). Because these snippets are custom made by the user, the snippet text can be anything you like and the trigger (the keyword that you input that is replaced with the snippet text) can also be any string that you like so long as each custom snippet has a unique trigger keyword associated with it.

First, let’s take a quick look at how to use a snippet.

Using a Custom Snippet - A Simple Example

Suppose you have created a custom snippet that displays the text “Hello World!” whenever you enter the keyword hw followed immediately by a trigger key (i.e, the SPACE, TAB or RETURN key). Prior to the snippet expansion, your editing buffer might look like this:

Snippet keyword before expansion

Notice that the cursor is on the right side of the keyword hw. Now when we enter our trigger key (in this case we’ll use the TAB key), the text is magically transformed into the following:

Expanded text

Cool! The hw keyword was automatically removed from the editing buffer and the string “Hello World!” was put in place of it, saving ourselves several keystrokes in the process. Of course, there are only so many cases where using the string “Hello World!” aids in our day to day work, but I think you get the point.

So now that we have seen how snippets basically work, let’s take a look at how we create a custom snippet in TKE.

Creating a Custom Snippet

In the example above, I created a user snippet to expand the keyword hw to the string “Hello World!”. User snippets can be used in any editing buffer, regardless of which language the editing buffer is currently set to. If I was creating a snippet that was only valid in HTML syntax, I could create a language-specific snippet that is only valid when I am editing code in the HTML language.

To create the snippet, select the Edit / Snippets / Edit User menu command. This will display the preferences window in the Snippets panel, automatically displaying all of the user-specific snippets in the following interface:

Snippet Manager

To add a new snippet, click on the Add button at the bottom of the panel. This will change the snippet manager display to allow for the creation of the new snippet.

Snippet Editor Interface

Specify the keyword that will be expanded when typed. In our example, the keyword is hw. In the expand text editor below, we will enter the text that will replace the keyword string. In our example, that text will simply be the string "Hello World!". After the keyword and expanded text are entered, click on the Save button to save the snippet and return the view back to the snippets manager. You can also click the Cancel button to return to the snippet manager without saving the snippet.

Once a snippet has been saved in the snippet manager, you can always edit a snippet by double-clicking on the snippet. You can also remove a snippet by selecting the snippet and clicking on the Delete button.

You can now enter the keyword hw followed by the TAB key in any editing buffer from now on and have the string “Hello World!” be entered into the editing buffer. Nice!

In the next article, we’ll dig deeper into more exciting (and more useful) snippet syntax and examples. As there is even more that you can do with snippet text than just static text replacement.


Related

Wiki: Tips & Tricks