Juri Strumpflohner
RSS
all articles

My Sublime Text Setup

Author profile pic
Juri Strumpflohner
Published

I absolutely love this editor. A ridiculously fast editor which has everything you’d love to have, from a simple notepad to an advanced, extensible IDE with auto-completion and highlighting. This post aims at mainly being a setup reference for myself.

Actually, I’m a bit late now, as a couple of days ago Alex MacCaw posted published exactly a similar post to this one here. So go and check that out as well, it contains a bunch of valuable information.

Before you get started, you may also want to check out the Unofficial Sublime Docs.

Sublime Configuration

My Sublime user settings:

{
	"always_show_minimap_viewport": true,
	"bold_folder_labels": true,
	"caret_extra_width": 3,
	"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
	"font_face": "Source Code Pro",
	"font_options":
	[
		"gray_antialias"
	],
	"font_size": 14,
	"ignored_packages":
	[
		"Markdown",
		"ScopeHunter",
		"Dracula Color Scheme",
		"DocBlockr",
		"TrailingSpaces",
		"Vintage"
	],
	"line_padding_bottom": 3,
	"line_padding_top": 3,
	"overlay_scroll_bars": "enabled",
	"soda_folder_icons": true,
	"tab_size": 4,
	"theme": "Material-Theme.sublime-theme",
	"translate_tabs_to_spaces": true,
	"trim_trailing_white_space_on_save": true
}

The large font for being able to focus better on a smaller context which I found quite useful. Moreover it’s more relaxing for my eyes.

I usually leave the tab-size on “4” as that’s what my other colleagues are accustomed to have in their IDEs. But note you might want to set it to “2”, especially when using CoffeeScript as it is more handy there.

Sublime Keybindings you should know

  • Ctrl+Shift+p - execute menu commands
  • Ctrl+p - open a file from the sidebar
  • Ctrl+r - navigate within the file (functions, markdown sections…)
  • Select word + Ctrl+d (multiple times) - find all other matching words. Activates multiple cursors s.t. you can then start editing simultaneously.

Custom User Keybindings

Some of my custom user bindings..

[
   { "keys": ["ctrl+shift+r"], "command": "reveal_in_side_bar" },
   { "keys": ["ctrl+k", "ctrl+d"], "command": "reindent" , "args": { "single_line": false } }
]

Access from the Shell

In order to use sublime Droductively, one of the first steps is to make it accessible from your shell.

On OSX, the best way (as already Alex mentions in his post) is to create a symlink to your Sublime installation directory like

ln -s "/Applications/Sublime Text 3.app/Contents/SharedSupport/bin/subl" /usr/bin/subl

But since I’m also working as a .Net developer and thus I’m having a Windows machine at work, I’d like to have the same functionality there as well. As such I created a special directory under C:\bin\utils which is linked in the PATH environment variable. Inside that directory I created a subl.cmd with the following content:

@echo off
"C:\Program Files\Sublime Text 3\sublime_text.exe" %1

Installing Packages

Sublime wouldn’t be that rich and useful without its packages (extensions basically). If you miss any kind of functionality, search for a package and I bet there is one already available.

Package Control

Url: http://wbond.net/sublime_packages/package_control

Package Control is simply a package manager for Sublime Text packages and extensions. Installation is super simple, just go to their website and follow the “manual installation” instructions. They’re the simplest ones.

Restart Sublime and you’re done.

To use Package Control simply press Ctrl+Shift+P to open the Sublime Menu and write

  • Install for installing a new package
  • Upgrade for upgrading an existing package or
  • Remove for removing an existing package.

My Packages

Here’s a list of packages I’m currently using with Sublime Text. I’ll add/remove this list over time as I find new interesting and useful ones.

Note, most of them are installable through Package Control. Simply google for them to find the installation instructions.

  • All Autocomplete - Provides auto-completion across all open Sublime files.
  • BracketHighlighter - As the name tells…highlights brackets in HTML or code.
  • DocBlockr - For easily adding code comments and JSDoc compliant documentation.
  • Emmet - Adds Zen-coding capabilities to Sublime Text. See the docs for a list of available commands and usage instructions.
  • FixMyJS - Experimental plugin to fix JavaScript code based on JSHint suggestions.
  • JSHint Gutter - For visualizing JSHint suggestions directly within the Sublime Editor.
  • MarkdownEditing - For Markdown editing support within Sublime. Check out my post about how to enable spell-checking!
  • Pretty JSON - For working with JSON (compression, expansion, formatting etc…)
  • Sass - Enables syntax highlighting for SASS files
  • Seti_UI - UI Theme I’m currently using
  • Tag - For auto-formatting HTML documents
  • TrailingSpaces - Allows to automatically remove (useless) trailing spaces on lines on each save.
  • EditorConfig - To make sure you have a consistent coding style.
  • JSFormat - For automatically indenting your JS code.
  • Modific - Highlights changed files on your Git repo and allows to quickly show the diffs/revert changes.
  • CSS Format - https://packagecontrol.io/packages/CSS%20Format

UI Theme

I currently use Seti_UI a Sublime port of the popular UI theme for Atom. You can simply install it through Package Control and follow the installation instructions.

Here are some posts I find (and I’ll update over time) covering similar aspects around Sublime Text setup.