A Macbook Pro infront of a window.

10 Best Sublime Text Plugins You Didn’t Know You Needed

The old days of plain text editors are over. Although there are a few text editors out there, Sublime Text Editor is probably the most intuitive to use for any developer.

So why exactly should you choose Sublime over any other editors? Well there's a few reasons why you would want to move towards Sublime. Here some of those reasons:

The best part by far is the fact that it's free! If you look at other editors/IDE's, you'll quickly find out how expensive they are.

For instance, PHPStorm is a powerful yet expensive IDE. Their yearly subscriptions are $199/year then drops to $159/year and finally down to $119/year after the 3rd year. These prices are in USD. Of course, there are limitations to this as these prices only reflect the PHPStorm IDE itself.

If you wanted the other package from PHPStorm which includes the IDE itself and other products such as the IntelliJ IDEA Ultimate, ReSharper Ultimate and other IDE’s, this package comes with a price tag of $649/1st year, $529/2nd year and then $389/ 3rd year onwards!

It's also really easy to use. As simple as downloading it and using it right after it's installed. Right from the start it comes with a cool coloured user interface that changes depending on which extension your file has. For instance your .css file will be a lot different than your .html or .js files.

The main reason you want to use Sublime Text Editor is because of how dynamic it is. If you’ve ever heard of the phrase "there's an app for that" then Sublime should have its own version, "there's a plugin for that".

Here are some of the ones we used while programming AskJavaScript.com.

1. Package Control

An image of package contorl on Git.

Package control should be the very first plugin install you make. It makes it easier to find and install your packages, and keep them up-to date.

If you haven't realized by now, package and plugin can be used interchangeably.

Installing it is also fairly easy as outlined on the package control official website.

To verify if it's correctly installed you need to type ctrl + shift + p. Once the text input opens in the top center, type in install.

If underneath your text you see "Package Control: Install Package (click on it)", then you've successfully installed package control and are ready to quickly install and control other plugins.

2. Alignment

Now this is a really useful plugin which, in my opinion, makes programming more fun and easier to debug.

It's easier to debug your programs when they're more aligned and you can easily compare your lines of code for any imperfections.

Here's a well documented installation for Sublimes alignment plugin.

Once it's installed, you can simply click ctrl + alt + a which would align your code.

3. Material Theme

Sublime Material Theme.

Material is great for customizing your Sublime layout which includes changing your accent, colour scheme, panels, sidebar, tabs and theme.

You can change the background theme layout by clicking ctrl + shift + p.

Then type material and clicking on "Material Theme: Activate Theme".

Once you click this, you will be presented with a few different options such as Material-Theme, Material-Theme-Palenight, Material-Theme-Darker, and Material-Theme-Lighter. You can choose any that you prefer.

I personally like the Palenight and Darker material themes and often find myself changing between the two.

I find Palenight easier to read during night while Darker stands out more during the day.

I should also mention that when you're installing Material Theme on your Sublime at the beginning, it asks you if you want to install Icons. I personally love this as it has different icons for the types of files you have on your left-hand panel.

Speaking of Sublime panels, Material Theme also gives you the option of changing few different panel options. You can access your panel options by clicking ctrl + shift + p then typing in "Material Theme".

Click under Material Theme: Configuration then click Panel. After you do this, a few options will be presented to you. I have all of them checked but my top two are: The theme scroll light bar, contrast mode, and the small status bar.

By clicking the small status bar, the low status bar shrinks which gives you a larger coding surface.

You can also play around with the sidebar, tabs, and accent settings. I'd recommend going into these settings and messing around with these as there are some really cool options that will make your programming experience that much more enjoyable.

4. Babel

If you're working with ES6 JavaScript and React then you definitely need the Babel plugin.

You can't really program using the React Framework if you don’t have this plugin. You might as well be programming in the outdated Notepad++.

You can install this and the other plugins by clicking ctrl + shift + p, typing "Package Control: Install Package" and clicking on it, then typing "Babel".

5. AutoFileName

If you're working in web development, and front-end especially, then you know how frustrating it can be to type an asset URL name in every time.

The AutoFile Name plugin for Sublime fixes this exact issue by automatically filling in the desired asset URL name.

It might not sound like a big deal but it really helps cut down frustrations by limiting incorrectly typed asset URLs.

You can install this and the other plugins by clicking ctrl + shift + p, typing "Package Control: Install Package" and clicking on it, then typing in "AutoFileName".

6. ColorPicker

Color Picker Plugin.

This is one of my favorite apps. If you're a back-end developer like me and aren't familiar with your colour codes, then you'll also enjoy the ColorPicker plugin.

When your coding your .css files, you can quickly open the colour picker by clicking ctrl + shift + c.

Once you do this, your colour picker will open up and you can choose the colour you want. By doing this, it will automatically write the colour code for the colour you picked.

Now if you're using Windows, you'll quickly realize that the UI for this isn't the greatest. However, if you're using any Apple product then the UI is a lot better.

You can install this and the other plugins by clicking ctrl + shift + p, typing "Package Control: Install Package" and clicking on it, then typing in "ColorPicker".

7. Auto-save

Now you could argue that this isn't really needed but many would disagree with you.

If you accidentally exit out of Sublime and re-open it, it’ll open where you left off.

The idea of the Auto-Save plugin is to save you time by automatically saving your documents for you instead of you having to constantly click ctrl + s every time you make a modification.

You can install this and the other plugins by clicking ctrl + shift + p, typing "Package Control: Install Package" and clicking on it, then typing in "Auto-save".

8. All Autocomplete

All autocomplete plugin.

This is another 'hidden' plugin that not many use or know of, however once you install it you'll realize how much easier and quicker it is to program in the same project.

All Autocomplete searches every open file that you have in your projects and suggests the similar matches its found in its search.

You can install this and the other plugins by clicking ctrl + shift + p, typing "Package Control: Install Package" and clicking on it, then typing in "All Autocomplete".

9. Git

If you're a beginner you'll eventually get to the point where you're going to work with others on the same files. You'll be introduced to Git where developers push and pull their code with their team.

Once you get to this point, you'll quickly learn how tedious it is work on a file and then use Git Bash in order to push your code to your Git repository.

The Git plugin helps solve this issue by bringing the Git commands to Sublime.

You can install this and the other plugins by clicking ctrl + shift + p, typing "Package Control: Install Package" and clicking on it, then typing in "Git".

10. SublimeGit

Sublime Git Plugin.

Similar to the previous Git plugin, there's another plugin called SublimeGit which essentially gives you the same desired output.

I personally like this one more because of how much easier it is to install but, that's just a personal preference.

Another cool feature that this has that some of the other plugins don't have is that right after installation a text document opens that guides you through the process of getting started.

You can install this and the other plugins by clicking ctrl + shift + p, typing "Package Control: Install Package" and clicking on it, then typing in "SublimeGit".

Conclusion

There are many more packages and plugins that are offered for Sublime that aren't included in this article. If they were, this would be a very lengthy article indeed.

Also it's important to note that while some are easier to get started with, others can be harder and do require additional setting changes. However if you can get past the initial installment phase you'll notice how useful some plugins can really be.

Because of that you should go check the Package Control website and see which plugin will help save you time or make you enjoy programming more.

Related articles: