Speeding up typing

Sublime Text Snippets

Anybody who’s been a developer/designer for long enough has been productive using code snippets.

So how do we do we become ninjas?? We will accomplish this by creating snippets in Sublime Text.

Now a snippet in Sublime Text is a block of code that is injected into your working document when triggered to make your work easier and faster.

Now let’s do this!!!

Step 1

So to create a snippet, go to ‘Tools’ > ‘New Snippet’.

Creating Snippets

Step 2

Doing the above step will inject a new snippet template into a new tab. You can now start customising it to suit your needs.

Sublime Text Code Structure

Step 3

These are the sections that you will edit:

1. Content

<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>

The actual snippet. This is where the code you want to be outputted goes. The content must be included in the <![CDATA[…]]> section.

2. tabTrigger

<! — Optional: Set a tabTrigger to define how to trigger the snippet →
 <! — <tabTrigger>bootstrap</tabTrigger> →

This is where you put the sequence of keys that you want to trigger the snippet with (e.g. ‘bootstrap’). The snippet will be injected after you type your chosen set of keys and hit the Tab key.

3. Scope

<! — Optional: Set a scope to limit where the snippet will trigger →
 <! — <scope>source.html</scope> →

The scope selector determines the context of where the snippet can be used. Mostly you wouldn’t want a HTML snippet to be injected into your CSS file. So you will do this:

e.g. <scope>source.html</scope>, <scope>source.css</scope>

If you want it to be used anywhere you want, you just delete the line of code.

4. Description
This is used to give the snippet more information when viewing the snippet in the Snippets menu. This is optional and if not present, Sublime Text defaults to the name of the snippet.

You can use this tag:

<description> </description>

5. Fields

${1:title}

Field markers can be used in your snippet to cycle through certain positions in your snippet once it has been injected. To move to the next marker, all you need to do is press the Tab key (or Shift + Tab to go backwards).

Step 4

Once you are happy with your snippet, you will need to save it to the ‘Users’ folder in the package directory.

To bring up the packages folder, go to the ‘Sublime Text’ > ‘Preferences’ > ‘Browse Packages…’

When you have launched the ‘Packages’ directory, save your snippet into the ‘Users’ folder.

Make sure your snippet is saved with the extension ‘.sublime-snippet’.

e.g. bootstrap.sublime-snippet

Note: You might have to re-start Sublime Text 2 for your snippet to take effect.

Step 5

If you find yourself not being able to remember your snippet, you can always find your snippet in the ‘Tools’ > ‘Snippet’ menu.

Or by using Command + Shift + P and searching for it.

Here is the snippet I have created for bootstrap skeleton feel free to take a look. Please as good developers, we need to share these resources, so you can fork the repo and add more snippets. Let’s make the world a better place.

Conclusion

I hope this best practice is interesting and will be useful during coding. Remember, part of the reason duplication creeps into code is the ease of copy/paste/modify operations to create new code. Refactoring is perhaps more work than copy/paste in the short term, but stamping out duplication can only help in the longer run. Refactoring is an invaluable skill that’s well worth your time. So go for DRY Principle.

Thank you!

Originally published at www.web-design-weekly.com

Found this post useful? Kindly tap the 👏 button below! :)

About The Author

Lewis Ngugi is the Experience Lead of Kazi+. You can connect with him on Twitter, LinkedIn, Facebook and Instagram.