18 Essential Plugins For Sublime Text

By Thoriq Firdaus. in Web Design. Updated on August 2, 2022.

Even though SublimeText comes with a bunch of great features that help our work as web developers, like any other tool, there will always be a room for enhancements. This is when plugins can be real useful (and we are huge fans of plugins).

Before we proceed, maybe you’d like to check out our previous posts on SublimeText to see what it can do in its native state:

Moving on, in this post, we have put together a few plugins that you may need to install to fill the functionalities that are missing from SublimeText.

12 Best Sublime Text Tips and Tricks

You probably know by now that we are fans of Sublime Text. It might look like a very... Read more

1. Package Control

Package Control is the first thing that you have to install right away after installing SublimeText. With it, you can install, upgrade, remove, and view with ease the list of packages or plugins that you have installed in SublimeText.

2. Emmet

In a nutshell, Emmet allows us to write HTML and CSS faster with abbreviations/shortcuts, then expand them in valid HTML tags. This is one of my most frequently used shortcut, which is a time-saver:

((h4>a[rel=external])+p>img[width=500 height=320])*12

It creates 12 lists of Headings followed with an image. I can then fill in my content without worrying about messing up the format.

More: Writing HTML & CSS Faster With Emmet

3. SublimeLinter

SublimeLinter has recently been rebuilt and polished for SublimeText 3. The new version certainly comes with a set of new features. Rather than putting all linters in one package, the developer allows you to select and install only the ones that you regularly use.

More: A Look Into SublimeLinter 4

4. SublimeEnhancements

SidebarEnhancements has a few new things in the Sidebar menu including New File Creation in the current project folder, Moving File and Folder, Duplicating File and Folder, Open in Finder and Browser, Refresh, and a bunch more.

5. PackageResourceViewer

With PackageResourceViewer, you can view, and edit packages that come from SublimeText easily. You can also extract package, which will copy it to the User folder so you can safely edit it.

6. Git

This plugin integrates SublimeText with Git so you can run some Git commands from SublimeText such as Add and Committing Files, Viewing Log, and Annotating Files.

7. Terminal

This plugin lets you open your project folders in Terminal directly from SublimeText – with a hotkey. It is a very helpful plugin when you need to execute command lines at the given folder.

8. CSSComb

CSSComb is a plugin to sort CSS properties. If you need your codes to be tidy and in the right order, this plugin will let you customize the order of the properties. This is also helpful when you work with a team of developers, each with their own preferences of writing code.

More: Sorting And Organizing CSS Using CSSComb

9. CanIUse

With this plugin, you can check the browser support for CSS properties and HTML elements that you are using. To use it, highlight the CSS property or the HTML element, and it will bring you to the appropriate page in CanIUse.com.

10. Alignment

Alignment lets you align your codes including PHP, JavaScript, and CSS, thus making it neat and more readable. See the following screenshot for the before-and-after comparison.

11. Trimmer

This plugin helps you remove unnecessary spaces, as well as trailing spaces, which could cause some errors In JavaScript.

12. ColorPicker

With this plugin you can select and add colors to SublimeText with the native color wheel from your OS.

More: Easy Color Picker in SublimeText

13. MarkDown Editing

Even though SublimeText is capable of viewing and editing Markdown files, it treats it as plain text with very poor formatting. This plugin is useful for giving better support with proper color highlighting for Markdown in SublimeText.

More: Writing Web Content With Markdown

14. FileDiffs

FileDiffs allows you to see the differences between two files in SublimeText. You can compare files with copied data from Clipboard, a File in the Project, File that is currently open, and between saved and unsaved files.

15. DocBlockr

DocBlokr lets you create documentation or annotation for your codes with ease, by parsing the functions, parameters, variables, and automatically adding some possible documentation (see the screenshot below).

16. Custom Themes

Believe it or not, having a different theme can induce your creativity and ideas. Below are several great custom themes that gives SublimeText a different, possibly better look.

SpaceGray

Centurion

Soda

17. Snippets

Snippets can help you write code faster by reusing code pieces. While you can also create your own set of code snippets, there are several snippet packages ready for use right away. Here are just some of them:

Foundation – A collection of snippets to build Foundation 5 framework components such as the Buttons, Tabs, and Navigation.
Bootstrap 3 – If you prefer Bootstrap, try this.
Bootstrap 3 for Jade – This plugin combines Bootstrap 3 with Jade syntax.
jQuery Mobile – A collection of snippets to build jQuery Mobile components and layouts.
HTML5 Boilerplate – this snippet lets you create HTML5 Boilerplate documents in a snap.

18. Additional Syntax Support

Languages that are not supported in SublimeText may not display with proper syntax highlighting. They include LESS, Sass, SCSS, Stylus, and Jade, so if you are working with those languages, here are the plugins to install, for syntax support.