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:
- Easy Color Picking In Sublime Text
- Manage Notes And Lists With Sublime Text
- How To Compile Sass With Sublime Text
- How To Refresh Changes On Browser With Sublime Text
- Adding CSS Vendor Prefix Automatically With Sublime Text
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.
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.
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:
It creates 12 lists of Headings followed with an image. I can then fill in my content without worrying about messing up the format.
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.
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.
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.
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.
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.
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.
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.
With this plugin you can select and add colors to SublimeText with the native color wheel from your OS.
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.
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.
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.
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.