As developers we often have to re-write the same piece of code repeatedly, which makes the development process tedious and annoying. One best to resolve such issue is to keep the codes in the form of snippets that can be easily retrieved and accessed as and when required. This is where the Sublime Text code editor comes in handy. It provides developers the ability to quickly insert code snippets they need to use repetitively. Furthermore, it even offers great customization ability that helps to streamline the workflow.
Through this post, I would like to discuss about the process of creating snippets using the Sublime Text editor. In addition, we will talk about how we can use the newly created snippets.
[adsense]
Here are a few steps that you’ll need to follow to create a snippet in the Sublime Text editor:
Step 1– Create a New Snippet
For creating a new snippet in Sublime Text editor, select Tools>>New Snippet.
Step 2– Customize the Snippet Template
The Sublime Text editor will open up a snippet template in a new tab as shown below:
The snippet template contains the data that the Sublime text editor needs to know about: content it has to insert, whether it should insert it and when.
In order to customize the snippet as per your own specific needs, you will have to become familiar with all the elements used in the snippet elements as follows:
1. Content: It is where the code you want to insert is added. Remember, to place the content within the section, or else your snippet won’t work. Let’s look an example to see how the snippet code should be added within the element:
<![CDATA[
margin: 0;
padding: 0;
list-style: none;
]]>
Note: When writing a snippet to use a literal $, you’ll have to write it as “$”. Besides this, for writing a snippet containing indentation, make sure to use tabs.
2. tabTrigger: This part defines the keyword (or the sequence of keys) you will need to press to insert the snippet. The snippet will be inserted immediately once you hit the Tab key after writing the keyword. Let’s set the element to shadow:
ulreset
Note: One of the best aspect about Sublime Text editor is that, you don’t need to remember all the trigger keywords for the snippets, as the editor display all the options (i.e. the trigger keywords) as you type the codes.
3. Scope: It indicates the scope where the snippet can be used. For instance, you might want to restrict your HTML snippet to a CSS file only.
In that case, your scope will look like:
source.css
4. Description: This element provides information to snippet when it is being viewed in the Snippets menu. However this element is optional and if it is not used, Sublime Text uses the name of the snippet.
Step 3– Save the Snippet
Now that you have all the required information needed to create a snippet, you just need to save it. One thing you should keep in mind when saving your snippet is that it should be saved with “.sublime-snippet” extension.
As you can see in the above screenshot, our snippet “ulreset” is saved with .sublime-snippet extension. You can give the snippet any name you like.
Step 4– Insert Snippet
Since we have defined the scope of the snippet as “source.css” and the trigger keyword as “ulreset“, simply typing the trigger keyword and hitting the “tab” key will insert the snippet into a CSS document.
Note: Keep in mind, as we have defined the scope only for the CSS document the snippet will not get triggered in any other document automatically.
How We Can Use The Snippet?
Till now we have discussed about the process of creating a simple snippet. But, you may need to add more specifications to the snippet. For example, you might want to make the shadow blur, or add some color to it and so on. However, to do so you’ll be required to move to the field prefixes one after another, and edit their values. This can be a tiresome and daunting task.
Fortunately, Sublime text provide the ability to select/highlight the several specific fields of the snippet instantly, making it easy for the developers to edit those fields. For doing so, simply select the field and click on “Ctrl Cmd + G“. And you will be able to find all instances and edit them. Another viable alternative is to leave the values of the field as blank and use “Cmd+ Click”. This will help you edit the multiple values all at once.
Final Words
If you’re a developer and want to save yourself from writing the code again and again, then you can create a snippet that you can insert into your document when needed. There are many different text (or code) editors out there that can be used to create snippets. However, my personal favorite is Sublime Text editor. To novices this text editor might appear a little messy at the beginning, compared to feature-rich editors. But for adding custom snippets and enhanced workflow, Sublime Text editor is the perfect option for you.
Reading this post will hopefully help you provide a better understanding of the process of creating a snippet in the Sublime Text editor and how you can use the snippet tailored to your needs.
