Whether you're new to Sublime or a veteran you'll have found there's a myriad of easily installable customisations for Sublime, whether it's a UI extension or added functionality, for front-end development or backend there will be something that fits your needs!
With the rising popularity of Sublime's Package Control you're able to delve into almost 3,000 plugins straight from Sublime's interface without having to ever leave the current open file! If you're not aware with package control - then this is a must have, without question, this should be the first thing you should install, and leads us nicely into our must have list...
1. Package Control
Package Control effectively is your hub of extensions - it allows you to install packages straight from the Sublime window in under 5 keystrokes, so pretty nippy! Installing it is also super easy, simply open your console via clicking "View -> Console" then pasting the following code then hitting return:
import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
Once it's installed, push your "super" which on Windows is Ctrl and on OSX is Cmd, push Super + Shift + P and your command palette will open - simply type "Install" and hit enter then you'll be in the listings of extensions. Then install anything you like!
This mighty handy plugin allows you to increase the readability of arrays of data, so less eye stress scanning around for you and your colleagues!
As you can see above, here's the before and after. Simply select the text you wish to tidy then press the default Super + Alt + A and just like magic = TIDY!
3. Brackets, Brackets and Brackets
This is a combo install, these 3 packages work perfectly together to help you debug those annoying brackets that have gone awol.
Afraid we can't show much here as images go, this is a functionality extension that allows you to easily manipulate brackets without worrying about indentation, or double brackets, basically its your guardian bracket angel.
Whilst Bracketeer is your guardian angel, BracketGuard is your bracket bouncer. It has similar use for the aforementioned however primarily helps you spot any silly errors like mismatching brackets!
This might not be needed for everybody, but for HTML this bad boy is massively helpful, and when you crack it, you'll save tonnes of time when writing your HTML. Essentially it allows you to write shorthand HTML, then use "Tab" to convert it to full markup. The Emmet website has lots of demos of it in action so check them out! Here is a complex mini example:
The moment you hit "Tab" you'll end up with this
Go watch some of the videos - they're cool!
This is super simple, it adds LESS syntax highlighting to your .less documents - although if you use SASS or something else, its completely useless.
This again is a tiny tweak, but it shows the current line endings and encoding in your status bar so at a glance you know you're not doing something silly like using BOM.
This adds the most common functionality you could need in your sidebar, by default Sublime is very minimal allowing you to extend it, so this adds that more useful feel to your sidebar!
Trimmer helps you solve those annoyingly ugly white-spacing issues that cause some PHP files to just fail, any strange copy/paste jobs that use mega encoding characters, allows you to remove all that white space and "safe" up you're code by converting certain things like ’‘ to ''
I've been using Sublime for years now, and have tried out hundreds of configurations, and have found my personal winning combo; this is a mixture of user preference tweaks, themes and fonts.
The first customisation is the amazing Soda based theme - Flatland, it's got beautiful contrasts making it easy on your eyes for those long caffeine-driven sessions and easy to stop silly syntax mistakes.
Installing is as easy as pie - simply jump into Sublime, push Super + Ctrl + P, type Install, search for "Flatland" hit enter and you're away!
10. Anonymous Pro
The next is a crisp and sexy font called Anonymous Pro by Mark Simonson designed especially for coders. And it does not fail to impress, it increases readability of code ten fold.
Install the font as you would normally, you can download it from here, once you've installed it jump into your user preferences @ "Preferences -> Settings - User" and add the following into your config. You can adjust the font size, but I'd recommend trying this out first!
"font_face": "Anonymous Pro",
Save your config and you should be set.
You can set up your Sublime however you like, but I've found that this config is a great base adhering to several web standards which should help you on your coding journeys...
"color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme",
"font_face": "Anonymous Pro",
"theme": "Flatland Dark.sublime-theme",
On behalf of Selesti; I hope you find our top 10 Sublime 3 plugins and customisations useful, and they enhance your development experiences! Any questions give us a shout.