A Front End Developer’s Sublime Text Setup

This post – as well as my other post A Front End Developer’s Daily App Stack – is 100% inspired by A Designer’s Sublime Text Setup.

If you’re following along, as a prerequisite you should definitely upgrade to Sublime Text 3 if you haven’t already, and likewise install Package Control.

Theme & Color Scheme

Theme and color scheme

Having started with Flatland, I am currently using Predawn. I love it so much… It has a color scheme built in, and even its own icon set and dock icon, as well as suggested settings and packages! I owe my entire Sublime setup to Jamie Wilson and Mathias Bynens.

Key Bindings

Like Matej Latin, I had also been using Brackets for a while before I switched to Sublime. I also had a lot of difficulty adjusting to the new keybindings for Duplicate Line and Delete Line. To emulate this in Sublime, simply navigate to Preferences > Key Bindings – User and add this:

[
  { "keys": ["super+d"], "command": "duplicate_line" },
  {
    "keys": ["super+shift+d"],
    "command": "run_macro_file",
    "args": { "file": "Packages/Default/Delete Line.sublime-macro" }
  }
]

However I actually have all of my Sublime preferences synced with my entire development team at work (more on that later – has its pros and cons), and one of them really liked the Quick Add Next default behavior of command+D, so I got used to this instead:

{ "keys": ["super+alt+d"], "command": "duplicate_line" }

To make that work, I had to go to System Preferences > Keyboard > Shortcuts > Launchpad & Dock and uncheck the box for Turn Dock Hiding On/Off.

I’m also a huge fan of snippets, so I wanted a handy shortcut to pop open a list of snippets. This did the trick:

{ "keys": ["ctrl+s"], "command": "show_overlay", "args": { "overlay": "command_palette", "text": "Snippet: " } }

I also have the package FixMyJS installed, so the shortcut to use that is:

{ "keys": ["alt+super+j"], "command": "fix" }

So to recap, and for the sake of quick updating in the future, my entire keybindings file looks like this:

[
  {
    "keys": ["super+shift+d"],
    "command": "run_macro_file",
    "args": { "file": "Packages/Default/Delete Line.sublime-macro" }
  },
  { "keys": ["ctrl+s"], "command": "show_overlay", "args": { "overlay": "command_palette", "text": "Snippet: " } },
  { "keys": ["alt+super+j"], "command": "fix" },
  { "keys": ["super+alt+d"], "command": "duplicate_line" }
]

Preferences

My preferences are a combination of Mathias’s and Jamie’s preferences with a few little tweaks of my own. My tweaks are mostly typography-related (I use 14 pt. with a bottom line padding of 4 because I like to be able to see my code), but I also have find_selected_text set to true (another Brackets-inspo’d behavior). I’ve also implemented Ben Frain’s top tip to stop hyphens from separating words. Here’s my entire preferences file:

{
  "close_windows_when_empty": false,
  "color_scheme": "Packages/Predawn/predawn.tmTheme",
  "default_encoding": "UTF-8",
  "default_line_ending": "unix",
  "detect_indentation": false,
  "draw_indent_guides": true,
  "draw_minimap_border": true,
  "draw_white_space": "all",
  "enable_tab_scrolling": false,
  "ensure_newline_at_eof_on_save": false,
  "file_exclude_patterns": [".DS_Store", "Desktop.ini", "*.pyc", "._*", "Thumbs.db", ".Spotlight-V100", ".Trashes"],
  "find_selected_text": true,
  "folder_exclude_patterns": [".git", "node_modules"],
  "font_size": 14,
  "highlight_modified_tabs": true,
  "hot_exit": false,
  "ignored_packages": ["Vintage"],
  "indent_guide_options": ["draw_active"],
  "line_padding_bottom": 4,
  "match_brackets": true,
  "match_brackets_angle": true,
  "open_files_in_new_window": false,
  "overlay_scroll_bars": "enabled",
  "remember_open_files": false,
  "show_encoding": true,
  "show_line_endings": true,
  "sidebar_default": true,
  "tab_size": 2,
  "tabs_small": true,
  "theme": "predawn.sublime-theme",
  "translate_tabs_to_spaces": false,
  "trim_trailing_white_space_on_save": true,
  "word_separators": "./\()"':,.;<>~!@#$%^&*|+=[]{}`~?",
  "word_wrap": true
}

Packages

ACF Snippets – For Advanced Custom Fields for WordPress. I ❤️ it. With the baked-in PHP snippet, I can now type php, tab, ifgf, tab, and then type in the field name as opposed to typing <?php if(get_field('field_name')): ?> which is very awkward.

Color Highlighter – Unobtrusively previews hexadecimal color values by underlaying the selected hex codes in different styles.

Emmet – Another time-saving package, as now I can type !, tab as opposed to (along with MANY MANY others):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body></body>
</html>

FixMyJS – Just click the link and read Addy’s post.

GitGutter – This is both part of Mathias’s dotfiles and suggested by Jamie. It’s amazing.

Handlebars – Handlebars syntax support.

JavaScript Beautify – Automatically formats my JS just the way I like every time I hit Save.

Package Syncing – Suggested by Matej and loved by many. Uses Dropbox to sync your Sublime preferences across devices. This is what we use at work so we all have the same ST3 setup. Referenced in the post about my daily app stack.

Sass – Sass syntax support.

SassBeautify – Automatically formats my SCSS just the way I like every time I hit Save.

SelectUntil – Lets me press cmd+shift+L to get a cursor on each line I’ve selected. This way I can bulk edit multiple lines where the characters are all different but the lengths are the same. Useful for editing file/directory structures I’ve copied from the command line where find & replace just doesn’t cut it.

SideBarEnhancements – Recommended by Jamie and loved by many. Lets me do a million things when I right-click files/folders in ST3’s sidebar as opposed to virtually nothing.

WordPress – If you work with a lot of WP sites, this is indispensable.

Back to home page

A Front End Developer’s Sublime Text Setup

Theme & Color Scheme

Key Bindings

Preferences

Packages

Related Posts