Best Sublime Text Setup
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:
In here you type the path for your new file/folder.
Example:
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.
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!
‘Trailing Spaces’ on GitHub