Understanding your first snippet

We learned that snippets can be very helpful, so how about creating our own? We'll make an awesome HTML snippet, better than the one in the preceding example. First, let's have a look at how snippets work in more detail.

How do snippets work?

Snippets can be saved under any package folder, but we'll start with saving our snippets under Packages/User. Snippets must live in a Sublime package.

File format and syntax

Snippets are simple XML-formatted files with the extension sublime-snippet. The root XML tag will always be <snippet> and will then contain the following:

  • Content: This tag represents the actual snippet.
    • If we want to write $, we'll need to escape it with $.
    • For indentation, use tabs only. If the translate_tabs_to_spaces option is set to true, tabs will be transformed to spaces automatically when the snippet is inserted.
    • The Content tag must contain the <![CDATA[…]]> section. Snippets won't work if we won't do it.
    • Also, the Content tag cannot contain ]]> because these three characters will close the <!CDATA[…]]> section, and this will cause an XML error. A cool workaround for this is placing an undefined variable, for example, ]]$UNDEFINED_VAR>. The XML parser will replace any undefined variables with empty strings.
  • tabTrigger: This tag contains a sequence of characters that will trigger the snippet when written. After writing these characters, pressing Tab will insert the snippet immediately.
  • Scope: This is the scope in which the snippet will be active.
    • To get our current scope, press Ctrl + Shift + Alt + P on Windows/Linux and Control + Shift + P on OS X, and then check the status bar for the current scope.
    • All Sublime Text 3 scopes can be found at http://gist.github.com/danpe/6993237.
  • Description: A short and intuitive description for the snippet, which will be shown when the snippet's menu is open.

Tip

ScopeHunter is a great plugin when working with scopes; we can install it from Package Control.

Knowing about snippets' features

Snippets have some extra features that can be really helpful such as inserting copyrights on code, inserting default file structures, or just helping us type functions faster. We will cover all that you need to know about snippets so that you can take full advantage of them.

Environment variables

We learned about Sublime's environment variables in a previous chapter. Snippets can also access these variables, which can be very convenient as shown in the following example:

$TM_FILENAME – Filename of current file
$TM_LINE_NUMBER – Current row

The full list of Sublime Text environment variables can be found at http://gist.github.com/danpe/6996806.

Field markers

Field Markers will let us cycle between our snippet's field markers by pressing Tab. We'll use fields for customizing a snippet after it's been inserted.

Mirrored field markers

Identical field markers mirror what we write on one of them. When we edit the first mirrored field marker, the rest will change in real time to the same values.

Placeholders

We can even put some default values, which are called placeholders. Let's see a full example of field markers' usage:

Hello ${1:$TM_FULLNAME}!
We are $2, The best Snippets Team!
$2 Helps making snippets since 1999.

As we can see in this example, the cursor will start on $1 with a default value of an environment variable. Cool! We can put any value though. Next, the cursor will jump to the $2 on the second line and will mirror the value we write to $2 in the third line.

Creating our first snippet

We are going to make a cool HTML5 structure snippet. Let's go to Tools | New Snippet… and Sublime will open a new snippet template for us, as shown in the following screenshot:

Creating our first snippet

Move the cursor over the commented line and remove the comments easily by pressing Ctrl + / on Windows or Linux and Command + / on OS X. Let's have a look at the following code:

<snippet>
  <content><![CDATA[<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="description" content="$1">
    <meta name="viewport" content="width=device-width, initial scale=1">
    <title>${2:Untitled}</title>
  </head>
  <body>
    Hello ${3:$TM_FULLNAME}! Welcome to $2!
    $0
  </body>
</html>]]>
  </content>
  <tabTrigger>doctype</tabTrigger>
  <description>HTML5 Structure</description>
  <scope>text.html</scope>
</snippet>

The good thing about snippets is that they are self-explanatory, but we'll still go over this one.

Writing doctype in a .html file and pressing Tab will insert the snippet and the cursor will jump to fill in the description meta tag. Pressing Tab again will make the cursor jump to fill in the title, which is filled with a default value of Untitled. The value that we'll insert will be mirrored inside the body on variable $2. Pressing Tab again will take the cursor to fill variable $3, which has the default value of an environment variable. Pressing Esc at any time will take us to the snippet's exit point which is variable $0, or the end of the snippet, if not specified. We can also go backward while editing a field by pressing Shift + Tab. Let's save this file inside Packages/User/doctype.sublime-snippet.

We can now open any .html file and use our snippet, as shown in the following screenshot:

Creating our first snippet

Pressing Enter/Tab will result in the following:

Creating our first snippet
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset