Sublime Text is a very raw, yet at the same time, sophisticated code editor. Here at GavickPro we tested multiple alternatives during our development cycles, including Expresso and Coda, but we fell in love with Sublime as soon as we used it for the first time. When you first open Sublime Text you might confuse it for a regular text editor; there’s nothing immediately eye-catching about it, and it doesn’t even mention anything about coding, but after a few minutes with it you’ll know that this is the most powerful code editor you’ve ever seen.
Why Sublime Text?
Sublime Text is available for the most popular platforms like OS X, Windows and Linux, so you’re likely to be covered. What’s more, with just one license you can use Sublime Text on every computer you own, even if they’re running different operating systems! The first thing that you’ll probably notice after a bit of playing around is just how fast it is when opening large files, like SQL dumps or projects with thousands of files. The licensing of the software is also very reasonable; as the Sublime Text website states:
Sublime Text may be downloaded and evaluated for free, however a license must be purchased for continued use.
So essentially, if you’re just getting started with a development project you can download the free version from the official website.
Probably the best thing in Sublime Text is the multiple ways you can customize and extend its functionality. Of course out of the box the editor offers a lot of great features like Goto anything which allows you to open any file in the project without clicking around the folders tree, Multiple selection, Split editing and, my personal favourite, Find in files (⇧⌘F) which allows you to search for any phrase in multiple files (similar to the grep Linux command). Want to know the kind of plugins for Sublime Text we use on a daily basis in our Joomla and WordPress theme development? Read on!
Before we start…
There are many ways to install extensions for Sublime Text, but the easiest one is to use Package Control, which allows you find and install other extensions directly in the editor. Installation is very simple; open Sublime Text, choose View > Show Console in the menu and paste the text from the link above. Then to test if everything is working how it should use the CMD/⌘ + Shift + P shortcut and type in the active input area: Package Control:Install package. Hit Enter, then wait a few seconds and a list of available extensions should refresh. If you can see a list of results like in our below screenshot, then you’ve already taken the first step on your Sublime Text packages journey!
This list highlights extensions that cover a wide variety of uses; some will be useful for frontend developers, others for messing around in the backend. To get you on your way, here’s a list (in no particular order) of the plugins we’ve found most useful in our day to day work.
Color Highlighter
By default Sublime Text, just like many other editors, doesn’t provide any special functionality for colors in CSS. With this small plugin every single colour in your stylesheet will be display with an underline in the appropriate colour. The plugin recognise all available CSS colour formats and even adds a colour picker and LESS, SASS functions for colour computation. Color Highlighter is available via the GitHub repository and the package manager. Hit Ctrl/⌘+SHFT+P (Tools > Command Palette) then select Package Control: Install Package > Install Color Highlighter)
Sublime GitHub (Gists)
A must-have for anyone who works with GitHub and likes to use Gists. Gist is a simple way to create code snippets, but when combined with GitHub every Gist becomes a repository which will be automatically versioned, making it easy for others to fork it. The extension allows you to just select a bit of text and type a shortcut that will automatically create a public or private Gist from the code selection. This plugin is also very useful if you want to show file history from GitHub. Installation is easy as pie since you can just use the Package Manager – Ctrl/⌘+SHFT+P (Tools > Command Pallete) then select Package Control: Install Package > sublime-github.
Emmet
Emmet, also known as Zen-coding, is probably the biggest time saver if you spend a lot of time working with CSS and HTML. Emmet provides a huge number of shortcuts that will improve your efficiency when working in HTML or CSS file. For example, when you type somewhere in your HTML file:
ul>li*5
and expand abbreviations using the Tab key or CTRL/⌘ + E shortcut, Emmet will replace this to:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
But this is just a small example; you can use Emmet to create vendor-specific CSS properties or just use it for faster, smoother HTML development. A full list of available abbreviations may be found on this Emmet Cheat Sheet. This extension, combined with Sublime Text’s ability to select and edit multiple lines and wrap the selected text with abbreviations offers a real CSS/HTML Swiss Army Knife. To install Emmet, as before stick to the Package Manager by pressing Ctrl/⌘+SHFT+P (Tools > Command Pallete) then select Package Control: Install Package > Emmet.
SublimeLinter-phplint
PHPLint, as the name suggests, is a Linter; a tool which allows you to find problems with your code before you run it. Yes, it sounds quite strange but PHP Linter will mark all compilation errors in your PHP file for you before you refresh the browser, so you can see PHP fatal errors or something similar in your browser. PHPLint cam work dynamically, so it will check code as you write, or you can set it to do so only when you save the file (this is probably the best option). During the save process the code will be checked by a PHP parser and you will get a message and information if something is wrong, for example if the ‘;’ is missing at the end of the line. With this tool you can check all PHP errors without switching tab from your editor to browser and back again, speeding up the editing and correction process. This leads to more precious seconds saved thanks to Sublime Text!
This plugin installation is a little bit more complicated than other ones. Of course we can do it via Package Manager but the phplint tool is required for this plugin so we advise following the official installation tutorial here.
SublimeLinter-jshint
SublimeLinter-jshint is not just a catchy, memorable name; it’s also a tool that in concept is very similar to the previous one, except that this plugin allows you to check and validate your JavaScript code. Many developers use the JSHint tool, or at the very least have heard of it; it’s a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team’s coding conventions. With this Sublime Text plugin the JSHint check will be run directly from your text editor. Exactly like with PHPLint, JSHint needs to be installed first, but this may be easily done via Node so only a few additional steps are required. Everything is described on the plugin’s repository page.
DocBlockr
DockBlockr (no sniggering at the back…) makes writing documentation a breeze. No matter which language you use, JavaScript or PHP, the DockBlockr provide you easy way to create comments for your classes or functions. When you type /** before your function or class name and press Tab or Enter the DocBlockr will generate a comment block for this part of code. When your create comments for functions all parameters will be set so the plugin can detect the number of function parameters and even return their value. A full list of features may be found on the extension’s GitHub repository. This time installation is very easy and all that we need is the Package Manager – Ctrl/⌘+SHFT+P (Tools > Command Pallete) then select Package Control: Install Package > DocBlockr.
More?
You might think that this list of extensions will keep you satisfied, but in fact this is only the first part of our recommended extensions for Sublime Text! In the next article we’ll be looking at some more tools and some Color and Applications Themes for a bit of a change. If you are interested in hearing about a particular Sublime extension or have some questions, please leave us a comment below!.