Get the best out of my favourite text editor; Sublime Text 3, with these must-have plugins

1: Package Control

Package Control is without a doubt the first and most important plugin you’ll need. This will let you download and manage all of the new custimsations you’ll make to Sublime.

That’s important because Sublime is made to be customized, and with time and care it can become one of the most powerful tools you use for front end web development.


2: Emmet.io

Emmet.io allows you to code HTML and CSS much quicker with some amazing shortcuts, making normally fiddly jobs like building nested html elements a breeze.

It includes shortcut commands for every major HTML and CSS element allowing you to build your code in a fraction of the time. I even have a dedicated blog entry on it here.


3: Sublime Linter

Sublime Linter is a base plugin that will mark errors in your code within Sublime. Allowing that nasty missing character or typo to be pointed out to you right away.

You must install this first, then install the extensions for the different languages such as: htmlhint, csslint, jshint, scsslint, eslint, bootlint and more...


4: Sidebar Enhancements

Sidebar Enhancements turns what is a simple and not very useful sidebar that comes with sublime into a much more functional navigation and management menu.

You can add new files, folders, open files, explore, duplicate, move, and much ore with this plugin and it is a must for anyone planning on building complicated projects in Sublime.


5: All Auto-complete

All Auto Complete is a pretty simple premise, Sublime looks for your current document for classes, ID’s variables and methods to help you autocomplete.

TThis plugin will look at every file in the project folder, meaning it will bring up suggestions for css classes, js methods, html classes etc. no matter the document you are in.


6: Alignment

Alignment does what it says on the tin, it aligns your code. You can set it up to auto align on save or through a handy shortcut command

Just select all and align and it will make sure all your code is correctly spaced, tabbed and formatted. It may sound simple, but it saves a lot of time and hassle.


7: Bracket / Color Highlighter

Brack Highlighter allows you to clearly see where one element or bracket starts and ends, something that in a complicated code file can be a real hassle to spot.

Color Highlighter subtly underlines your colours in css so you can get a preview of the colour you are using in the code. Again another must have tool when styling.


8: Predawn Skin

Predawn is my favourite skin for Sublime 3, that doesn’t just change the colour scheme, but the icons and overall interface to make it more modern sleek and usable.

It may not seem like a priority, but when you are developing for so many hours during the week, having something that is easy on the eyes truly helps.


And that completes this entry, hope it get's you excited for the potential of this code editor for front end development!

~
Idris