Sublime Text 3 configuration

Customising your code editor can take a hell of a long time to get just right. Here's how I setup Sublime Text 3 on a new machine, which may help drive your settings moving forward.

By Luke Whitehouse on 28th December 2016

Code editors Environment

Snippet

I've been using Sublime Text for a number of years now and in it's life span I've probably customised it more times than I've had Christmas dinners. From those years I've found a nice workflow for my day to day activities that may be of use to others. Here's how I setup Sublime Text 3 on a new machine.

This is the 1st part of my 'setup' series of posts. Check out the others below:

Installing Zsh and customising Terminal (05/01/2017)

macOS development environment from scratch (12/01/2016)

Package Control

Package control is an Open Source package manager for Sublime Text plugins which allows the maintainers to easily roll-out updates for them with minimal fuss. Think of it akin to that of NPM for Node or Bower for Front-end repositories. We can install Package Control by pasting the following script into the Sublime Text Console by going to View -> Show Console.

Once installed we can start to add third-party plugins and themes to further customise our application.

Recommended plugins

Within Sublime Text go to the Sublime Text -> Preferences -> Package Control panel and once prompted, search for Package Control: Install Package. Afterwards, search and install each of the following plugins:

Custom typeface

At the end of the day it's all personal preference, but for me I've found three different typefaces which complement my development environment nicely.

Whilst Fira has some sexy ligatures, I want to make sure my code is readable for newer developers when writing posts on here, so I'll stick with Source Code Pro. Whichever you choose, download and install that typeface to your Mac.

User settings

By going to Sublime Text -> Preferences -> Settings you can add your User settings which override Sublime's default ones. Copy and paste the following into the file by overriding what's already there.

The "font_face" attribute will need to match the typeface you just installed.

{
  "always_show_minimap_viewport": true,
  "bold_folder_labels": true,
  "close_windows_when_empty": false,
  "color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",
  "ensure_newline_at_eof_on_save": true,
  "file_exclude_patterns":
  [
  ".DS_Store",
  "*.lib",
  "*.log",
  "apple-touch-icon*",
  "favicon.ico"
  ],
  "folder_exclude_patterns":
  [
  ".git",
  ".bundle",
  ".sass-cache",
  ".svn",
  ".hg"
  ],
  "font_face": "Source code pro",
  "font_size": 12,
  "ignored_packages":
  [
  "Vintage"
  ],
  "indent_guide_options":
  [
  "draw_normal",
  "draw_active"
  ],
  "line_padding_bottom": 3,
  "line_padding_top": 3,
  "open_files_in_new_window": false,
  "overlay_scroll_bars": "enabled",
  "theme": "Material-Theme-Darker.sublime-theme",
  "translate_tabs_to_spaces": true,
  "trim_trailing_white_space_on_save": true,
  "use_simple_full_screen": true,
  "word_wrap": true
}

The attributes themselves are pretty self explanatory but I'd like to point out a few which may need further explanation.

ensure_newline_at_eof_on_save - This makes sure that whenever you save a file it will add an extra empty line to the end of it. Some older tools require this as they ignore the last line by replacing it with something else. You'll find most language syntax standards require this so it's a good practice to start getting into (plus you don't have to do anything!).
open_files_in_new_window - Ever opened a file in Sublime Text and found it opens in a new window rather than in the same window you have your projects setup in? Such. a. pain.
translate_tabs_to_spaces - 4 spaces (soft tabs). Anything else is pure evil .
trim_trailing_white_space_on_save - The TrailingSpaces plugin does a great job of showing when white space is in your file, but by adding this attribute all whitespace will also be trimmed when pressing save.

Markdown specific syntax

I use MacDown for the majority of my MarkDown writing, however, when looking at a project's README.md it's nice to have an easy viewing experience in Sublime Text too.

In order to add Syntax Specific settings, first open any Markdown file in Sublime Text and whilst on that window, go to Sublime Text -> Preferences -> Settings - Syntax Specific. I only have a few additions for Markdown files, but they make the world of difference to my reading experience.

{
  "font_size": 16,
  "draw_centered": true,
  "wrap_width": 80
}

Snippets

As a footnote, I'd recommend taking a look at my custom Sublime Text 3 snippets post from last month, in there are some useful snippets outside of the ones from Emmet, Blade Snippets and Docblockr which make life easier (at least for me).

Until next time 