Getting to Know One Another: A More In-Depth Look at Sublime Text

Last time we spoke, I had introduced you to a few of the things Sublime Text can do.

I’d like to go over a few more things you can do to get the most out of your editor.

Related: [Mini Tutorial] Changing the order of layout XML blocks in local.xml

To begin with, let’s start with making our editor do some of the work for us under the hood to make the development process a lot smoother. To do this, we’re going to want to go to Sublime Text -> Preferences -> Settings - User. Any code that you write in here must be in JSON format, with all of it falling between the curly braces ({}), and all strings in quotations. I’ve prepared some settings that I find helpful that you can throw right into your user settings file, see here for a more complete list.


{
"bold_folder_labels": true,
"caret_style": "wide",
"font_size": 14,
"highlight_line": true,
"highlight_modified_tabs": true,
"line_padding_bottom": 1,
"line_padding_top": 1,
"match_brackets": true,
"match_brackets_angle": true,
"match_brackets_braces": true,
"match_brackets_content": true,
"match_brackets_square": true,
"open_files_in_new_window": false,
"scroll_past_end": true,
"show_full_path": true,
"spell_check": true,
"word_wrap": true
}

A note about word wrap: be wearing of this when working with languages that render white space, as it may cause problems.

I think by now you realize that I’m big on cutting down on writing code that you don’t have to, hence my love of Emmet. Another great feature of Sublime Text is the ability to create “snippets”, which are little bits of code that you can re-use. What Emmet is doing is essentially giving you access to a host of snippets that the Emmet team noticed that they were using frequently, and we can do the same. To create a snippet click on Tools -> New Snippet. This should bring you to a new tab that already has some code written on it. Let’s take a look to make sense of it while making our own snippet.

Related: Why I hate using JavaScript plugins, and You Should Too

Making our own snippets

  • At first, you should see a screen that looks like this:

    Sublime Text snippet starting screen
  • It may seem like a pretty confusing and discouraging starting point, but it’s actually not so bad once you make sense of it
    • The code you see in between CDATA[ and ] is where all the code of our snippet will go
    • The code you see such as ${1:this} is where tab indexes begin. Tab indexes are usually words within your snippet that can change easily depending on the context. In this example, once our snippet is called (which we will get to) the cursor will appear there first, and the word this will appear, but also be editable
    • The code (or lack of, in this particular instance) between the tabTrigger tags are the keywords we’ll use to call our snippets, which will be called via the tab key
  • Let’s go ahead and uncomment the line with our tabTrigger code on it (feel free to use the keyboard shortcut cmnd/windows + /) and insert the word we would like to trigger our snippet. For this example, please use placeholdit

    Sublime Text Snippet creation start
  • Now, let’s edit the actual portion of the code that will be generated with our tab trigger. In this example, let’s start by making our snippet http://www.placehold.it/200/200

    Sublime Text Snippet creation step two
  • At this point we could stop here and call it a day on this snippet, but I think it’s reasonable to assume that we will not always want to generate a placeholder image that’s 200×200 pixels, and since we can save time on this by editing our snippet, I think that we should
  • As I mentioned before, we can set tab indexes on editable portions of code within our snippets to have them better suit our needs
  • For this example, we’ll set two tab indexes on the pixel value portions of our snippet, starting with the first dimension, and ending on the second dimension
  • To do this, envelope the first 200 in a pair of curly braces and precede them with a $ so your snippet code now looks like http://www.placehold.it/${200}/200
  • To make this the first tab index, place a 1: before 200, so that your code now looks like http://www.placehold.it/${1:200}/200
  • Repeat the above steps on the second pixel value, this time replacing 1: with 2: to make this value the second editable tab index, your code should now look like this http://www.placehold.it/${1:200}/${2:200}
  • At this point, we’re done with our snippet for now. The next step is to save it, which follows a very specific format
  • Go ahead and save this snippet, the snippet must be saved in Sublime Text [version] -> Packages -> User (which you computer will most likely bring you to automatically) and must be saved with a .sublime-snippet extension, so in our example, let’s save our snippet as placeholdit.sublime-snippet
  • Head over to your page, and use the snippet when appropriate

Hopefully you can use the information in this post to cut down on your work time, happy hacking!

Related: [Mini-Tutorial] How to Add Subcategories in Shopify