🖥️ Tips and tricks with Sublime Text

I used to use VS Code and then later VSCodium, but found that it would lag a lot and sometimes crash. Now I use Sublime Text because it is very quick, and has some handy features without feeling overwhelming. I did have to dig around to get the most out of it though, since some of this stuff isn’t as obvious as maybe it could be. So here are some tips and tricks I’ve learned from working with Sublime Text!

# Snippets

A couple of days ago, I wrote about adding custom emoji shortcodes to Eleventy. This means I can type something like {% emoji "neofox_cool", "png" %} to get this:

But what if that shortcode is, itself, too long to want to write out every time? What you can do is make a Snippet. Go to Tools > Developer > New Snippet… which will bring up something that looks like this:

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

The part that is between <content><![CDATA[ and ]]></content> is the part that you want to call up. So for example, this is what it looks like for my emoji snippet:

<content><![CDATA[
{% emoji "${1:neofox_}", "${2:png}" %}
]]></content>

There are two variables within this code with placeholder text. This means that when I call up this snippet, it will look like {% emoji "neofox_", "png" %} with “neofox_” automatically highlighted, and then if I hit the Tab button again, it will jump to {% emoji "neofox_", "png" %}.

You can see how that’s set up in my snippet file with ${1:neofox_} which is where I have the filename of my emoji. The “neofox_” prefix placeholder is because most of my emoji start with the excellent Neofox emoji set, but obviously you don’t need to put that; if you just want the cursor to land in this blank spot, you can replace ${1:neofox_} with $1. The second is the extension ${2:png}, which I will usually leave alone (since almost all of my emoji, at least so far, are .png files). Again, if you don’t want the “png” placeholder text, you can replace ${2:png} with $2.

I can then trigger when to bring up the snippet by editing the next couple of lines. I want to be able to type the word “emoji” and then hit the Tab button to replace “emoji” with this snippet. I also only want this to occur on Markdown files (where I’m typing all of these blog entries). I un-commented the <tabTrigger> and <scope> lines, so now my snippet looks like:

<snippet>
    <content><![CDATA[
{% emoji "${1:neofox_}", "${2:png}" %}
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>emoji</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html.markdown</scope>
</snippet>

I also want to add a <description> line to let me know at a glance what this snippet is for. You don’t strictly need to do this, but it is helpful when using Sublime’s Command Palette to bring up a list of all your snippets.

My final snippet looks like:

<snippet>
    <content><![CDATA[
{% emoji "${1:neofox_}", "${2:png}" %}
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>emoji</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html.markdown</scope>
    <description>Adds an Eleventy emoji shortcode</description>
</snippet>

Then I save this into the default /home/.config/sublime-text/Packages/User/ folder as emoji.sublime-snippet. And so now, when I type “emoji” and then hit Tab in a Markdown document, it quickly brings up my emoji shortcode, making it very easy to insert emoji into my blog posts!

You can use this to make snippets for all kinds of stuff that you regularly insert into your documents. No longer do you have to go back to a previous instance where you wrote this and copy+paste into your current document. You can simply make snippets for them! I wish I had discovered this much sooner…

# Adding a terminal panel

Maybe you are like me and making your blog in Eleventy, which requires going to the terminal and typing npx @11ty/eleventy to build. What if you didn’t need to leave Sublime and could just do all of that from within your text editor? That’s where the Terminus plugin comes in.

If you haven’t already installed Sublime’s Package Control, go to Tools > Install Package Control… and wait for that to install. Then, hit Ctrl+Shift+P to bring up the Command Palette, type “install,” then click Package Control: Install Package. Then, type in “terminus” to install it.

Now, you could use Ctrl+Shift+P to bring up the Command Palette again and type in “terminus” to bring up the terminal. Or, you can set up a custom key binding for it by going to Preferences > Key Bindings and adding this to the right side of the screen:

[
   {
       "keys": ["alt+1"],
       "command": "terminus_open",
       "args" : {
           "cmd": "bash",
           "cwd": "${file_path:${folder}}",
           "panel_name": "Terminus"
       }
   }
]

If you are Windows, replace “bash” with “cmd.exe.” Also as you can see, I have my key binding set to Alt+1, but you can set it to whatever you want.

Now when I hit Alt+1 in Sublime, it brings up a terminal at the bottom of the screen. This makes it very handy for me to type up this website you’re looking at right now!

# Some more useful stuff

Since you’ve installed Package Control, you might as well get some more plugins to make your workspace a little nicer. FileManager makes it easy to duplicate, move, rename, and create files. You can install a theme to make your editor look prettier (I am a big fan of gruvbox). If you want to edit your PICO-8 files in Sublime, there’s a plugin for that.

Another underrated feature is saving your workspace as a project so that you can quick-switch between them. Open the folder with all of your stuff, go to Project > Save Project As… and save it as blog.sublime-project or whatever. Now you can hit Ctrl+Alt+P to bring up the Quick Switch Project menu to swap between all of your saved projects super quickly! Neat!

I alluded to this before, but you can also mess around with Key Bindings by going to Preferences > Key Bindings and set things up in a way to make it even quicker and easier to get to the things you need.

Anyway. I wrote this blog mostly for my own benefit so that I can remember what I did and how I did it for when I inevitably forget. But I hope maybe this will help anyone else who is just starting out with Sublime Text!