Sublime Text 2 – Creating Snippets

| June 15, 2013
Pinterest

imgres

As many of you hear my praises on coding, my primary text editor of choice is Sublime Text 2. I love the thing! Easy on the eyes, lightweight and 1/6th page size of a bar on the right that lets you do a quick scroll of your entire page of code is awesome! I seem to be learning more about Sublime Text 2 that I never knew or didn’t know it could do. The latest thing I’ve learned is how to create snippets. I’ve created them before in Flash for Actionscript 3 projects, but I’ve never really considered doing the same thing for HTML and CSS.

So what is a snippet and how can you maximize its potential? A snippet is basically just code that you can insert with a keyword. Hate wasting time creating navigation set ups? Use your own custom snippet! That’s possibly my biggest annoyance when coding is setting up the navigation bar along with the extras such as drop down menus. I’ll go through step by step on how to create a simple snippet that can whip up a super quick dropdown nav that you can use over and over on your projects.

I’ll be using the HTML and CSS from http://css-snippets.com/drop-down-navigation/. So feel free to grab the code from there when creating our snippet.

Step 1 – New Snippet

The first thing to do is load up Sublime Text 2 and go to Tools > New Snippet.


01_NewSnippet


When you click on New Snippet, a new file will popup and show all this text.
02_SnippetStart


02_SnippetStart

It shows up with some preinfo in there already, but I decided to just type in “This is where you put your code!” to save you the trouble of where on earth you need to put your code!

Step 2 – Create the Trigger Word

Now to create the keyword on how this snippet will be triggered. In the tabtrigger area you need to take out the comment and type in the word you want to use.


03_Dropnav

I went with the word “dropnav”.

Step 3 – Define the Scope

Next, I want to make sure I know exactly where I’m allowed to use this snippet! I don’t want to go using it in a CSS or any other sort of file, I just want it in an HTML file right now. The next thing to do is to take out the comment for the next line and put a scope of html by typing in “text.html”


04_scope

Step 4 – Enter your Code

Now that we have that down, lets go back to what we will actually put in the top. Our HTML for the drop down nav. Get the code from :

Once its punched in, it should look like this:


05_dropnavCode

This now says the snippet can only be used in html! Now that we set up our snippet, click on the save button. When clicking on save, Sublime Text will automatically open up the correct directory your file needs to be in. If you for some reason didn’t go straight to the destination, it should be in your Packages/User folder. The key to saving this is to save the extension as a “.sublime-snippet”. Example, my snippet for the nav will be dropnav.sublime-snippet

Step 5 – Making it Work!

In order to use this, open up a new file that in html and type in “dropnav” then hit the tab button. If you did it correctly, the entire nav snippet you just created will pop in!

Now lets repeat that process for the CSS. Once you have your snippet set up, this is what it should look like.


06_dropnavCSS

Notice the difference? When it comes to using a snippet for CSS, you should put in “source.css”. This indicates that the source of the scope can only be used in CSS.

You can rearrange the code to throw your snippets in, but this is how you’d create a quick and easy navigation using snippets. Who needs to spend all that time setting up HTML and CSS for a drop down navigation, when you can just create one snippet and use it over and over? Hope this opens some light and makes everybodies work day a lot more efficient!

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS