The Efficient Programmer — Optimizing Sublime Text 3

Reducing Repetition in Sublime

Programming — for the most part — can seem like an incredible amount of repetition. Despite our best efforts to keep our code DRY, most of what we do involves repetitive tasks that can lead to silly errors and wrist pain. As we know, programmers aren’t lazy, we just have so many other things to do that it can be hard for us to want to do all those little things. That’s where Sublime’s Developer tools come into play. Whether you’re tired of writing the same for loop over and over again, or you want to create your own customized Emmet, Sublime’s Developer Tools allow developers to create customize shortcuts for whatever suits their purpose.

Getting Started:

Getting started with the built in dev tools are as easy as navigating to your Sublime Tools, hovering over the Developer option, and selecting the New Snippet…

Tools > Developer > New Snippet …

Once you’ve selected the New Snippet option, a new window will appear in your sublime.

New Snippet Window

From here, you will need to do three things:
- Uncomment the tabTrigger and add in the key phrase you want to reference your bit of code
- Uncomment the scope and modify it based on what programming language you need (refer to the docs on this one)
- Finally, add your sample code in between the contents tag.

If you’re prone to creating functions with some typical deviation, you can even utilize the existing <![CDATA[]]> tag to reference specific parts of your program that you know you will need to change. For example, if you find yourself constantly writing for loops, but want to be able to change your variable declaration upon instantiation, you can simply wrap the variables in a ${1: <var name>} tag, and your function will load with cursors ready at that position. Here are a couple of examples I’ve setup to help show how to use them

wrapping your variables in ${1: } will instantiate them with a cursor ready to edit

As you can see, each of the i variables is wrapped in the event that I want to use a different variable name when the function loads.

If you don’t want to your snippets to be ready-to-modify, you can simply write out the snippet it as is. Here’s an example of my preset React Component:

No need to use the ${1: } if you don’t want to

Once you’ve got all work ready to go, you can go ahead and save it into the default filepath, or create your own folder with the Sublime. You will want to save your snippets with the .sublime-snippet doctype (ex: your_snippet_name.sublime-snippet).

And there you have it! Use your newfound powers for good, and remember that even though you’re more efficient with your time, you still deserve a good break and a stretch.

Quick Recap:

- Creating custom snippets saves time and energy.
- You can utilize the built in functionality of the New Snippet window to help with standard deviations in your programming.
- Once New Snippets have been created, and the tabTriggers and scopes have been set, all you need to do is save your New Snippet with the .sublime-snippet extension and you’ll be good to go!