Sublime Text is great and amazingly modular code editor. Minimalistic in its core, but still highly flexible and customizable to meet various developers’ needs.
Let’s have a peek at some of the most useful plug-ins for web development and how you too can save some time and avoid tedious and repetitive work.
Install Package Control
Before you can dive into Sublime‘s customizations, you’ll need to install Sublime Text Package Control. You can find install instructions here – open Sublime’s console, copy-paste the right snippet according to your Sublime’s version and press Enter.
Now the fun begins!
Let’s start off with installing missing syntax highlighters (and auto-completers). Whether it’s your favourite CSS preprocessors (LESS, Sass) or extended Markdown syntax, Sublime got you covered. Make sure you have the Package Control installed and hit [CTRL] + [SHIFT] + [P] to launch Command Palette, write “Install” (“Package Control: Install Package” should be highlighted) and press [Enter]. Now you can search/browse for available packages. If you’re using CSS preprocessors, install LESS/SCSS packages, for Markdown I can highly recommend MarkdownEditing package.
Note: Some packages will work properly after restarting Sublime.
With all the needed syntax sorted out, let’s add some more functionality:
BracketHighlighter – this package replaces default bracket highlighting (with more focus on bracket/quote pairs). That comes really handy in complex layouts.
BufferScroll – this package remembers the place where you left off last time you had your project opened, restoring everything to the state it was last time – cursor position, code folding (this is particularly great) and more. Definitely a must-have for larger projects.
Emmet – formerly known as Zen Coding, I found this package absolutely amazing. Forget about writing any brackets ever again! Just type the elements you want and Emmet will intelligently expand them as needed. For example: instead of writing
<div id="pricing" class="nice box"></div>, type just
#pricing.nice.box and hit [Tab]. Emmet also supports nesting and element multiplication (like
ul.menu>(li.item>a)*5), but that’s on whole other article – check out official docs instead and you’ll never want to go back. I promise.
Git Gutter – must-have for Git fans. Git Gutter works with your locally installed Git to display changes prior to your last commit. All new, changed and deleted lines are marked, giving you a quick overview of your progress.
SublimeGit – this package integrates a Git client right into your project by creating new file (git-status) which tracks all your local changes (staged files etc.) and provides quick commands for classic Git actions (commit, push, pull, diffs etc.). Keep in mind however, that SublimeGit is a commercial package priced at $10/user (with trial available).
SFTP – when Git is not your thing, there’s Sublime SFTP. Add a new config file to your project specifying (S)FTP login credentials and all your files will be uploaded to server either automatically after save or manually. Also commercial, priced at $20/user (yet another reason to use Git ;)
Functionality isn’t the only aspect of Sublime to customize, so there are a lot of themes and skins available. Liked the Sublime’s look from the video? Here’s the theme and color scheme used:
Monokai Extended – I love the original Monokai color scheme. It’s easy on eyes and nicely readable. Monokai Extended takes it further, with different colors of IDs/classes (pretty useful) and covers more languages (Sass/LESS).
Brogrammer – tired of the original theme? Try Brogrammer! Sleek, sharp and modern, Brogrammer goes nicely with Monokai Extended color scheme.
As you can see, Sublime Text is greatly flexible, allowing it to serve various needs and scenarios. I’ve presented my favourites which could benefit your web development work-flow as well.
Do you have some Sublime tips as well? Which package do you find the most useful? Share with us in comments below!