sublime snippet how to

Subject:

refer: http://www.granneman.com/webdev/editors/sublime-text/top-features-of-sublime-text/quickly-insert-text-and-code-with-sublime-text-snippets/

 

2015-09-24 17:05:53gstlouis

Quickly Insert Text & Code with Sublime Text Snippets

Getting tired of cutting & pasting an HTML5 template? Or typing out the same code all the time? Fortunately, Sublime Text makes it easy to quickly insert code snippets that you define.

As you probably know, when you type a p in an HTML document in Sublime Text & press Tab, it automatically expands to <p></p>. But what if you don't like that (I don't), & instead want it to expand to this (with the cursor appearing where the pipe is)?

<p> | </p>

Let's create a snippet to do just that.

Create ↩

To create your first snippet in Sublime Text, do the following:

Go to Tools > New Snippet. A new untitled file will open that contains the following:

<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>

The content goes between <content><![CDATA[ & ]]></content>, resulting in this:

<content><![CDATA[ <p> $1 </p> ]]></content>

See that $1? That tells Sublime Text to put your cursor there when it's done expanding your snippet. Sublime Text calls that a field marker.

Next is the tabTrigger, the text you type, followed by a Tab, that expands to create the content. In our case, we want to use the letter p. Get rid of the comment describing the tabTrigger, & then change the actual line for the tabTrigger to this:

<tabTrigger>p</tabTrigger>

Finally, the scope, which determines the kinds of files (HTML, CSS, PHP, shell script, etc.) in which the expansion takes place. Again, get rid of the commented line describing the scope, & change the line for the scope to this:

<scope>text.html</scope>

At this point, the file should look like this:

<snippet> <content><![CDATA[ <p> $1 </p> ]]></content> <tabTrigger>p</tabTrigger> <scope>text.html</scope> </snippet>

Save ↩

Save the file. When you do, you'll need to determine two things: its file name & where to save it.

File name: The file must end with .sublime-snippet, like this: foo.sublime-snippet. What goes in front of .sublime-snippet is up to you. I like to use thetabTrigger if at all possible, along with the main part of the scope in front of the tabTrigger, giving me this: html-p.sublime-snippet.

Where to save it: When you press Save, Sublime Text should automatically try to save the file in the right folder.

  • Mac OS X: /Users/yourname/Library/Application Support/Sublime Text 2/Packages/User
  • Windows:
  • Windows Portable (USB Drive):
  • Linux:

You shouldn't have to worry about the location, as Sublime Text should take care of it for you, but if for some weird reason you're not in the right place, then you'll need to navigate to the right location.

Test ↩

Now let's test our new snippet. Open an HTML document (or open a new tab in Sublime Text & click in the bottom right to change the document type from Plain Text to HTML), click in it, & type p, followed by a Tab. You should see the following appear, with the cursor in place of the pipe symbol (|):

<p> | </p>

Type the content you want between the <p> & </p>, & then press Tab again, & Sublime Text automatically moves your cursor just after the </p>, so you press Enter & continue typing. Our snippet worked. Excellent!

gstlouis
vote
2015-09-24 17:05:59