Updated on August 8, 2014.
I use Sublime Text 2 as my text editor for coding. I don’t use a fancy IDE like WebStorm, but I do plan on trying out WebStorm more at work. Actually, I should probably upgrade to ST3, but for now, I’m happy with ST2.
However, ST2’s light weight comes at a cost: you probably need to configure some stuff before you’re really ready to roll. Here’s what I do when I first install ST2 on a machine.
First, I change the keyboard shortcuts for cycling through open tabs. The default behavior is based on your usage history (most recently viewed tabs), but I prefer just cycling from left to right. There’s actually another key binding that can cycle tabs from left to right, but I prefer using
Ctrl+Tab.Therefore, I edited my key bindings like so…
I also configure Sublime Text to automatically add a new line at the end of every file whenever I save. It won’t add a new line if one already exists at EOF. I personally never suffer from lack of new line at EOF, but some UNIX tools won’t work without them, and I know lots of hardcore coders out there like using such tools. I don’t want to screw them over. With that said, allow me to present my ST2 settings…
Theme (UI Skin)
I use the Nexus theme, which you can find here: https://github.com/EleazarCrusader/nexus-theme. The readme file explains a bunch of different installation options, but I recommend installing via Package Manager. The readme also tells you how to activate the theme after installation.
Sublime Text doesn’t come with many bells and whistles. Instead you add them as packages. First, you must install the package manager by following these instructions. After that, get ready to discover a giant pool of all the bells and whistles you could possibly want. If you need to adjust the settings for any of these packages, you can usually find good documentation from the readme files of their respective GitHub repos.
After you install Package Manager, you can access it by hitting
Ctrl+Shift+P (or perhaps
Cmd+Shift+P for Macs?) and then typing “package control” into the search box. The typeahead will reveal your various options, but you mostly be using “Package Control: Install Package”. There will be some load time necessary to provide you a list of available packages, but after it’s done, you can search for packages by name. Installation will similarly require some load time. Check the bottom-left of the ST2 window to see relevant status messages.
Here are the packages I installed:
Prettify your code by aligning multiple lines of variable definitions and hash objects. For example…
This may look stupid to you, but I don’t use it all the time. The main place I like to use it is with multiple
var example = require('npm package name here'); statements at the top of a JS file. By the way, I had to edit the package settings to get alignment for object literals. I added the
":" seen below…
Add indicators in your gutter so then you can see which lines of code have been changed since the last git commit. See the left edge of this screenshot:
I prefer live linting over build-time linting. SublimeLinter supports a ton of languages, and I have it set to simply bring up an indicator in the gutter and some underscores to point to any issues it finds. It’s not too obtrusive.
Extraneous whitespace is bad. Trailing whitespace is worse. I use this package to highlight any trailing whitespace in bright pink. I bet I could set my linter to do this, but oh well.
Who doesn’t love Markdown? It makes GitHub README files and wiki pages look great. It makes dev blogs look great. It makes writing dev-related text easy. Sometimes, I write rough drafts of blog posts within Google Docs or Dillinger, which is a sweet online Markdown editor. In the end, I always complete my blog posts by writing Markdown within Sublime Text.
I recently found a sweet ST package to help edit Markdown files: MarkdownEditing. It completely transforms the look and syntax highlighting of your Markdown. Sadly, I use CodeRay for codeblocks rather than standard Markdown markup. So MarkdownEditing can’t beautify my codeblocks within Sublime Text, but
inline code snippets like this one are highlighted in a very helpful way. You can see all the ways that the package alters your Markdown here. Keep in mind that there are a couple other themes available specifically for MarkdownEditing. I use the dark theme of course.
You might also find it handy to install packages for specific languages. For example, I dabble with CSS pre-processors and templating languages. I’m currently checking out LESS for CSS and Jade for HTML, so I’ve installed syntax highlighters for them. The package names are simply “LESS” and “Jade”.