When you’re writing system code, it won’t work possibly, except that it’s written and then saved in a plain text environment. This is where a text editor comes in. It enables you to create and make alterations to the files that contain plain text. A text editor is the perfect tool for developers that helps them to manage code and write quick-notes.
When it comes to choosing a text editor, most of the people opt for Sublime Text. It’s a highly acclaimed and crowd favorite cross-platform code editor that comes loaded with an amazing feature-set. Most importantly, it is being known for its customization ability.
Sublime Text might look pretty messy at first, especially when it is compared to other feature-rich editors like Notepad++, Adobe’s DreamWeaver etc. But in case you like workflow tailored to meet your needs, and might require additional, customization ability and several other features at your fingertips, then Sublime Text is likely the right code editor for you.
What makes Sublime Text a great text editor is because of its ability to customize almost everything it does. What’s more? Snippets is one of the best feature of Sublime Text that saves you from re-using and re-writing the code repeatedly. Snippets help save pre-defined code snippets, which can be used whenever required.
This post will help you understand the right way to how you can use Sublime text editor.
Creating A New Snippet
For building a new code snippet move to Tools -> New Snippet.
And then, the Sublime Text editor will provide you with a default snippet template such as the one given as below:
HTML
<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
As you can see in the above code snippet, the structure is very simple. You’ll notice a few triggering options in the comments. In addition, you’ll also see options for setting-up a document scope for the code snippet. The trigger as defined in the snippet above is for triggering the snippet. On the other hand, the scope specifies the syntax of the snippet. For example, the scope of the above snippet is set to “source.python”, and it will get triggered when the .python extension is used.
Let’s look at a simple example of how exactly the snippet works.
HTML
<snippet> <content> <![CDATA[ YOUR CODE GOES HERE ]]> </content> <tabTrigger> TRIGGER KEYWORD GOES HERE </tabTrigger> <scope> SNIPPET SCOPE GOES HERE </scope> </snippet>
Chances are that you may be wondering how the snippet can be used. Below is an example – for creating an easy-to-understand snippet for CSS animations – that will help you understand to use the snippet.
HTML
<snippet> <content> <![CDATA[ /* Safari 4+ */ -webkit-animation-name: ; -webkit-animation-iteration-count: ; -webkit-animation-timing-function: ; -webkit-animation-fill-mode: ; -webkit-animation-delay: ; -webkit-animation-fill-mode: ; -webkit-animation-delay: ; /* Fx 5+ */ -moz-animation-name: ; -moz-animation-iteration-count: ; -moz-animation-timing-function: ; -moz-animation-fill-mode: ; -moz-animation-delay: ; -moz-animation-fill-mode: ; -moz-animation-delay: ; /* Opera 12+ */ -o-animation-name: ; -o-animation-iteration-count: ; -o-animation-timing-function: ; -o-animation-delay: ; -o-animation-fill-mode: ; -o-animation-delay: ; /* IE 10+ */ animation-name: ; animation-duration: ; animation-iteration-count: ; animation-direction: ; animation-timing-function: ; animation-fill-mode: ; animation-delay: ; ]]> </content> <tabTrigger>animate</tabTrigger> <scope>source.css</scope> </snippet>
Looking at the above example, you’ll notice that the snippet is written to be compatible with modern browsers like Safari 4+, IE 10+, Firefox 5+ and Opera 12+. In fact, all of the animation syntax contains blank values, so as to make it easy for you to make edits to it later. Now, let’s save the snippet that we’ve created.
How to Save Snippets?
Open your snippet file and go to File -> Save.
Next, if you want your snippets to be organised, then you’ll have to create a new folder, which only helps in saving CSS. What’s more? You can even create some more folders for saving different type of codes, such as HTML, PHP, Python, and others. Now, create a new folder named “Snippets” and “CSS”. Save both the folders as something that resembles to “CSS-Animation“. Just remember, to make the snippet work, you’ll have to save it with the “.sublime-snippet” extension.
How to Insert Snippets?
As we’ve defined the scope of our snippet as “CSS” and the trigger as “animate“, then while working in a CSS document we only have to start typing “animate“ and when the snippet opens, hit the “tab“ key.
How to Use Snippets?
Looking at the above example, you can see the ease with which you can create snippet for an animation. Once you’ve added the animation properties, you’ll have to add values to the properties. For doing so, you’ll have to move to every prefix, and then, edit the values individually. You would certainly find this task troublesome. Fortunately, Sublime Text offers plenty of solutions to this problem.
You can use two different ways to make the task easier. First off, use the Sublime Text’s “find” and “replace” function. Moving back to our snippet and adding a value to the CSS property will enable us to make edit to all instances of that particular property instantly.
For example, let’s assume that the value “MyAnimationName” is added to the “animation-name” property in the prefix. Just make sure to use an ambiguous value – one that won’t exist anywhere else in your document’s current stylesheet. For this purpose, you can choose the “find” and “replace” functions.
Next, simply highlight the value and then click on “Ctrl Cmd + G“. This will help you to locate and edit all instances.
Second way is to leave the values as blank. And then, just use “Cmd+ Click” so as to make changes to the multiple values, simultaneously.
Wrapping Up!
Reading this post will give you a basic understanding of how creating snippets with Sublime Text editor not only help you save considerable amount of time – otherwise spend on re-using and re-writing the code.
0 Comments