Thursday, April 5, 2018

Sublime Text 3 Snippets

Menu bar - TOOLS

New Snippet...

This pops up:

<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>

Only change colored text.
Green text is what you want to produce.
Red text is what you type before pressing TAB to commit it.
Blue text is what language you want the tab associated with, so it doesn't interfere with other languages.

So, let's change this one. I want to make a snippet for Python so that when I type "print", it will automatically show this:
          print(' ')


So let's put this in the green text area:
print(' ')

And let's put this in the red text area:
print

Finally, we want to use it for python, so let's put this in the blue text area:
source.python

<snippet> <content><![CDATA[
print(' ')
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>print</tabTrigger> -->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>


The nice thing about snippets, though, is that you can tell Sublime where to put your curser first, and where to move it with each subsequent TAB press. So, we want to add text between the quotes when we use this code, so let's tell Sublime to put our cursor in there. Change the green text to this:
print('${1:}')


The ${1:} says this is where we want our cursor to be. You can add placeholder text after the colon ":", as long as it's one word or connected by a hyphen or underscore. "enter-text", "text-block", etc.

When you enter your text and hit TAB, the cursor will move to the end. If you want to add text in multiple places, just add more ${1:}, replacing "1" with the next number in the sequence. When you hit tab, it will move to the next number, until you finish.

Finally, save your snippet with the extension".sublime-snippet". For examlpe,
pythonPrint.sublime-snippet

Make sure it's saved in your "Sublime Text 3/Packages/User" folder.

Have fun making more snippets.

No comments:

Post a Comment