• Home
  • Blog
  • Selesti's Must-Have Sublime 3 Plugins and Customisations

Selesti's Must-Have Sublime 3 Plugins and Customisations

Whether you're new to Sublime or a veteran, you'll have found out there's a myriad of easily installable customisations and Sublime 3 plugins. Our top picks -

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...

Extensions

1. Package Control

packagecontrol

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!

2.  Alignment

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!

alignment

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!

http://wbond.net/sublime_packages/alignment

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.

BracketHighlighter

https://packagecontrol.io/packages/BracketHighlighter

Bracketeer

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.

https://packagecontrol.io/packages/Bracketeer

BracketGuard

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!

https://packagecontrol.io/packages/BracketGuard

4. Emmet

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:

div>(header>ul>li*2>a)+footer>p

The moment you hit "Tab" you'll end up with this

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Go watch some of the videos - they're cool!

http://emmet.io/

5. Less

This is super simple, it adds LESS syntax highlighting to your .less documents - although if you use SASS or something else, its completely useless.

https://packagecontrol.io/packages/LESS

6. LineEndings

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.

https://packagecontrol.io/packages/LineEndings

7. SideBarEnhancements

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!

sideba

https://packagecontrol.io/packages/SideBarEnhancements

8. Trimmer

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 ''

https://packagecontrol.io/packages/Trimmer

User Interface

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.

9. Flatland by ThinkPixelLab

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.

flatland

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!

https://github.com/thinkpixellab/flatland

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",
"font_size": 11

Save your config and you should be set.

http://www.marksimonson.com/fonts/view/anonymous-pro

 

Configs

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...


{
	"bold_folder_labels": true,
	"color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme",
	"default_encoding": "UTF-8",
	"default_line_ending": "unix",
	"detect_indentation": false,
	"detect_slow_plugins": true,
	"fallback_encoding": "UTF-8",
	"flatland_sidebar_tree_small": true,
	"flatland_square_tabs": true,
	"font_face": "Anonymous Pro",
	"font_size": 11,
	"highlight_line": true,
	"highlight_modified_tabs": true,
	"ignored_packages":
	[
		"Markdown",
		"Vintage"
	],
	"line_padding_bottom": 1,
	"line_padding_top": 1,
	"open_files_in_new_window": false,
	"preview_on_click": false,
	"show_encoding": true,
	"tab_size": 4,
	"theme": "Flatland Dark.sublime-theme",
	"translate_tabs_to_spaces": true,
	"trim_trailing_white_space_on_save": true,
	"word_wrap": false
}

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.