How to Customize Sublime Text's Default Auto-Complete


Welcome back to another episode of Continuous Improvement, the show where we explore ways to enhance our productivity and streamline our workflows. I’m your host, Victor, and today we’ll be focusing on a common issue faced by many Sublime Text 3 users.

As someone who uses Sublime Text 3 every day, I can definitely relate to the frustrations we encounter when certain features don’t work as expected. One particular annoyance that I’ve come across is the default auto-complete for if statements. It adds an unnecessary semicolon at the end, causing issues when using tools like JSHint.

But fear not, my fellow developers, for today I bring you a simple solution to this problem. Let’s dive right into it!

The first step is to open Sublime Text’s preferences. You can do this by navigating to Preferences and selecting Browse Packages. This will open the Sublime Text folder where we’ll make the necessary changes.

Once you’re in the Sublime Text folder, locate the folder named JavaScript. If you can’t find it, don’t worry! Simply create a new folder and name it JavaScript.

Now that we have the JavaScript folder open, we need to modify the if.sublime-snippet file. This file controls the auto-completion behavior for if statements.

Open the if.sublime-snippet file, or if it doesn’t exist, create a new one with that exact name. This file is written in XML, and we need to make a small adjustment to remove the semicolon.

Let’s take a look at the original code snippet. It looks like this:

<snippet>
    <content><![CDATA[if (${1:true}) {${0:$TM_SELECTED_TEXT}}]]></content>
    <tabTrigger>if</tabTrigger>
    <scope>source.js</scope>
    <description>if</description>
</snippet>

As you can see, the issue lies in the unnecessary semicolon at the end:

<content><![CDATA[if (${1:true}) {${0:$TM_SELECTED_TEXT}}]]></content>

To solve this problem, simply remove the semicolon so that the snippet now looks like this:

<snippet>
    <content><![CDATA[if (${1:true}) {${0:$TM_SELECTED_TEXT}}]]></content>
    <tabTrigger>if</tabTrigger>
    <scope>source.js</scope>
    <description>if</description>
</snippet>

By following these simple steps, you’ll be able to eliminate the annoying semicolon and improve your coding process. No more manually deleting it every time you write an if statement!

And there you have it, folks! An easy and effective solution to the Sublime Text auto-complete issue. I hope this tip brings you one step closer to an optimized workflow.

As always, remember that continuous improvement is key. If you have any other challenges or suggestions for future episodes, feel free to reach out to me on Twitter @VictorCI.

Thank you for tuning in to Continuous Improvement, the podcast that helps you level up your productivity. Stay tuned for more exciting tips, tricks, and hacks in our upcoming episodes.

Until next time, keep coding, keep improving, and stay productive!