Sublime Text Snippets (code snippet) feature

When we write code, we always encounter some code snippets that need to be reused. This is the time to repeat the copy and paste, greatly affect the efficiency. We can solve this problem very well by using the snippet function of sublime text. Popular speaking, is to save our common code, and then through the form of plug-ins repeated calls.

How to create: Tools > New Snippet

At this point you will see the following sample code:

1 <snippet>
2 <content> <! [CDATA [
3 Hello, $ {1: this} is a $ {2: snippet}.
4]]> </ content>
5 <!-Optional: Set a tabTrigger to define how to trigger the snippet->
6 <!-<TabTrigger> hello </ tabTrigger>->
7 <!-Optional: Set a scope to limit where the snippet will trigger->
8 <!-<Scope> source.python </ scope>->
9 </ snippet>
At this point, you should be a little inexplicable. Let's take a look at the complete structure and description:

<snippet>
    <content> <! [CDATA [The code snippet you need to insert $ {1: name}]]> </ content>
    <!-Optional: Shortcut key, use Tab to automatically complete the code function->
    <tabTrigger> xyzzy </ tabTrigger>
    <!-Optional: the scope of use, not filling means that all documents are valid. Attachment: source.css and test.html correspond to different files. ->
    <scope> source.python </ scope>
    <!-Optional: Display instructions in the snippet menu (supports Chinese). If not defined, the menu displays the file name of the current file. ->
    <description> My Fancy Snippet </ description>
</ snippet>
$ {1: name} indicates that after the code is inserted, the position where the cursor stays can be inserted at the same time. Where: name is a custom parameter (optional).
$ {2} means that after the code is inserted, press the Tab key, the cursor will jump to the corresponding position according to the order (and so on).

Now, you should have a general understanding. Then we started to write an example by ourselves:

<snippet>
     <content>
     <! [CDATA [
     <footer>
          <p> Copyright © 2008-2012 $ {1: bluesdream} .com </ p>
          <p> Value-added telecommunications business license Shanghai B2-$ {2} <a href="#"> Shanghai ICP number $ {3} </a> </ p>
     </ footer>
     ]]>
     </ content>
     <tabTrigger> cft </ tabTrigger>
     <description> custom-footer </ description>
     <scope> text.html </ scope>
</ snippet>
After the creation is complete, save it in the \ Packages \ User directory (for example, X: \ Sublime Text 2.0 \ Data \ Packages \ User). The file is named cft-code and the suffix is .sublime-snippet.

At this point, we open an html file, enter cft, and then press the Tab key. The code segment we just wrote is inserted. And the cursor stays at the $ {1} position we marked. If we press Tab again, the cursor will jump to the position of $ {2}. Since we defined in the scope that it is only used in html files, at this time, if we open a css or other format file, it will not be able to insert the code segment.

Supplement: In addition to using the shortcut key Tab to output the code, we can also load it through the menu, open Tools> Snippet, and select Snippet: custom-footer. If you do not define the description, then you will see the Snippet: cft-code option named after our file name.

 

Sublime Text Snippets (code snippets) function