Setting your Sublime text for frontend development

Category : code

Date : March 16, 2016

In this article, we are listing ten must-have Sublime plugins/setting for Frontend developers. I have been running this setting for a year now and they have hugely improved my productivity and workflow.

Codjets SublimeText

1. Package Control

This is the easiest and standard way to install all your sublime packages. To install Package Control in ST, follow this installation guide.

2. Emmet

Emmet (previously known as Zen Coding) is a frontend toolkit that can greatly improve your HTML & CSS workflow. You can read more about it here.

3. Doc​Blockr

Doc​Blockr is one of the best plugin available for writing documentation. This plugin works invariably well with many client and serverside languages.

4. Javascript Completions

If you are into Javascript development then Javascript Completions is a must have. Once you get along with shorts you will be saving insane amount of development time.

5. HTML-CSS-JS Prettify

HTML, CSS, JavaScript and JSON code formatter for ST. Another must-have for saving time on formating.

6. AdvancedNewFile

AdvancedNewFile is a great tool for creating, editing, deleting and renaming file without the cursor direcly in ST. must-must-have.

7. Gist

Gist is ST plugin for creating and editting plugin. Extremely useful for managing snippets.

8. BracketHighlighter

Bracket Highlighter matches a variety of brackets such as: [], (), {}, “”, ‘’, #!xml , and even custom brackets.

9. Origami

Sometimes it is really useful to have a split panel for working and by default sublime has layout settings in View -> Layout -> Columns/Rows with keyboard shortcuts e.g. Opt+Cmd+2 gives a vertical split panel.

For more customisation you will need to add package called origami using package Control. If you want to further customise the keybinding goto Preferences -> Package Settings -> Origami -> Keybindings. As usual you can copy the default keybindings to user key bindings and override it.

My Origami User Keybinding Settings


If you are doing angular or nodejs development you should also checkout

AngularJS
Java​Script & Node​JS Snippets

Out of the box SublimeText comes with great settings but every single utility in it is customizable.

You can checkout my personal ST preferences here


If you have any questions, comments or suggestions, feel free to join the discussion below!