Best Sublime Text Setup

Posted by: Alex on June 13, 2013

Sublime Text 3, is, without a doubt the best code editor and package for web development I have used in my 8 years of web experience.
Out of the box it’s very powerful and sufficient, however – you know you can always get 110%.

Firstly, the huge array of packages/plugins for Sublime Text 3 is incredible, with lots of them receiving very regular updates and support on GitHub.

However, personally I do like to keep things simple and my mantra is generally “The right tool for the right job, and not too many hammers”.

Settings

The ability and control over Sublime Text settings is awesome, and definitely worth tweaking if you spend 8 hours plus per day in it like I do.
These settings I have tweaked and played with, and generally what I find the best all around setup with usability and speed in mind.
The following can be placed in your Settings - User file, accessed through: Preferences > Settings - User Mac Shortcut:[⌘ + ,].

{
	"bold_folder_labels": true,
	"caret_extra_width": 1,
	"caret_style": "phase",
	"close_windows_when_empty": false,
	"copy_with_empty_selection": false,
	"drag_text": false,
	"draw_indent_guides": true,
	"draw_minimap_border": true,
	"draw_white_space": "selection",
	"enable_tab_scrolling": false,
	"file_exclude_patterns":
	[
		".DS_Store",
		"*.lib",
		"*.log"
	],
	"folder_exclude_patterns":
	[
		".git",
		".bundle",
		".sass-cache",
		".svn",
		".hg"
	],
	"font_face": "Source Code Pro",
	"font_options":
	[
		"no_round"
	],
	"highlight_line": true,
	"highlight_modified_tabs": true,
	"ignored_packages":
	[
		"DocBlockr",
		"SublimeLinter",
		"FuzzyFileNav",
		"EditorConfig",
		"Vintage",
		"PHP Syntax Checker",
		"HTML5"
	],
	"indent_guide_options":
	[
		"draw_normal",
		"draw_active"
	],
	"line_padding_bottom": 2,
	"line_padding_top": 2,
	"match_brackets": true,
	"match_brackets_angle": true,
	"match_brackets_braces": true,
	"match_brackets_content": false,
	"match_brackets_square": true,
	"match_selection": false,
	"match_tags": false,
	"open_files_in_new_window": false,
	"overlay_scroll_bars": "enabled",
	"preview_on_click": true,
	"remember_open_files": true,
	"remember_open_folders": true,
	"scroll_past_end": true,
	"scroll_speed": 5.0,
	"shift_tab_unindent": true,
	"show_full_path": false,
	"sidebar_default": true,
	"tab_size": 2,
	"tabs_small": true,
	"translate_tabs_to_spaces": true,
	"trim_trailing_white_space_on_save": true,
	"use_simple_full_screen": true,
	"wide_caret": true,
	"word_wrap": true
}

Here are my suggested plugins:

Package Control

This is what kicks it all off, you can manually install packages from the console, or downloading and dragging, however this package is a simple way to browse, install and manage your packages within sublime Text 3.
To install it, go to the Package Control Website

Sublime Text may need a restart, but then you’re ready to rock. ⌘ + Shift + P (Ctrl + Shift + P) will bring up your Sublime Text Command area, simply start to type package and you will have plenty of options ahead of you. Install Package option will list all packages.
‘Package Control’ Website


Advanced new file

Creating new files/folders shouldn’t require any obtrusive UI, and should feel quick and intuitive, with Advanced New File it is.
Instead of the typical keyboard shortcut for a new file of: ⌘ + N (CTRL + N), you now use ⌘,alt + N (CTRL,alt + N), in doing so brings you up the very subtle and clean text area:
Advanced New File Example
In here you type the path for your new file/folder.
Example:
Advanced New File - create file and folder
Doing the above, will not only quickly create the folder for you of a folder that doesn't exist , but also the file: MyNewFile.php inside of it. Very quick and easy, no browsing between folders. You can even use it for existing folders, so typing: includes/aNewFile.php will add aNewFile.php to the already existing folder of includes.
‘Advanced New File’ on GitHub


Emmet

Quite simply a deal breaker for me for choosing Sublime Text. Emmet enables you to work faster, smarter and more intelligently.
Emmet enables you to type shortcuts, create DOM elements that are nested and multiples of DOM elements very easily.
The screenshot below shows how easy creating nested elements with content is.
emmet-example
This is just the start of Emmet, as well as all the HTML nesting abilities, there are also many CSS speed ups to be hard. p10 will become padding: 10px, how about percentages instead? Easy: p10p will become padding: 10%. The uses of this package go on and on, simply a must have for any front end web developer (and plenty of uses for back end too).
‘Emmet’ on GitHub


Trailing Spaces

This package is possibly not for everyone, but it appeals greatly to my OCD nature. It will show you where you have unnecessary spaces (which tend to build up in community projects or sloppy code), I like all my documents to be Tab Spaced and coherent.
This package will display a pink background to spaces it deems unnecessary. This package has also saved me one or two headaches, I’m sure many of you have had the situation of a trailing space after a PHP document managing to break the whole damn thing!
TrailingSpaces Example
‘Trailing Spaces’ on GitHub