Coding

Code faster with simple Sublime Text improvements


Whether you’re just trying out Sublime Text or you’ve been using it for years, there are almost guaranteed to be a few ways you can tweak it to improve your productivity. There are plugins to automate common tasks, check your code on the fly, or even just pretty it up and improve your morale. In this post I’ll go over some of my favourites, and hopefully you’ll find a few new ways to speed yourself up.

The Basics

The very first step you should take after installing Sublime Text is installing Package Control. This plugin makes installing packages as simple as browsing menu items, instead of having to mess around with downloads and folders and all that nonsense. Thankfully, there are some very simple installation instructions on the Package Control website. Follow those, then meet me back here.

With Package Control installed, go to Sublime Text and hit COMMAND+SHIFT+P (on a Mac or or CONTROL+SHIFT+P on Windows or Linux). This brings up the Command Palette, which basically exposes all of the functionality of Sublime Text in a search box. Type in “Package”, which should bring up all the Package Control commands. We’ll be mainly using “Package Control: Install Package”, which — no surprise — installs a package for us. No muss, no fuss, just a simple command each time.

Automating Common Tasks

One way to speed up your coding tasks is to stop doing them. Seriously, if you find you’re doing something over and over again, automate it, and stop wasting your time. Sublime Text has support for snippets built-in, but we can install some packages that are a little more intelligent, as well.

DocBlockr

Good comments are a godsend when reading code, but writing them can be time-consuming. DocBlockr can speed this process up immensely. To install it, bring up the “Install Package” command, then type in “DocBlockr”, select it, and let it install.

To use DocBlocker, simply place your cursor on the line above a function, type “/**”, and press return. Watch in awe as it creates a skeleton function comment, complete with your function name and parameters. This is a full-featured Sublime snippet, which means you can use Tab to move between the fields and fill it out quickly.

DocBlockr works with JavaScript, PHP, Java, C, C++, Rust, and other popular languages, though some obvious-seeming ones like Python and Ruby are conspicuously absent. Provided you use one of the supported languages, it’s very extensible and can do a whole lot. I recommend you check out the project’s GitHub repo for more details.

Alignment

How often do you see code like this?

$count = 0;
$userList = User::getList();
$packageList = Packages::getList();
$pre = 'Preface text';

I know that I see it all the time, and it drives me crazy. It would be a whole lot easier to read (and readability is just about the most important attribute your code can have) if it were aligned properly. For example:

$count       = 0;
$userList    = User::getList();
$packageList = Packages::getList();
$pre         = 'Preface text';

There. Now it’s a lot easier to sort out the variable names and their values without having them all run together. The package that will help us do this simply is called Alignment. Once installed, highlight the lines you want to align (really, any lines with a bunch of = signs can be aligned), and press COMMAND+CONTROL+A to align. Personally, I like using COMMAND+SHIFT+A, as it’s easier for me to type, and you can change to that as well if you like, by going to the “Sublime Text” > “Preferences” > “Key Bindings – User” menu and adding or changing your command to “{ “keys”: [“super+shift+a”], “command”: “alignment” }”.

Addding Functionality

Sublime Text already has a lot of neat tools built-in. For example, did you know you can hit COMMAND+D with text highlighted, and it will also highlight the next instance of that text? Repeat as often as you like, and make changes to multiple places in your file at once!

Despite being very capable out of the box, however, there are a lot of features that you can add in to enhance your coding experience and provide new functionality.

Modific

Assuming you use source control (and this is 2016, you really ought to use source control), you know how valuable it is to be able to diff your changes against what you had before. Having the clarity of what lines are different can often help you understand your new code and save time scanning over stuff that hasn’t changed. Modific will update the gutter of your file (on the left, where the line numbers go) with little decorations:

  • Green arrows mean new lines,
  • Red arrows mean deleted lines, and
  • Yellow diamonds mean changed lines.

Provided your source control executable is in your PATH, you shouldn’t require any further configuration.

PlainTasks

Sure, you can use Jira or GitHub issues to track your todos, but those are a little heavy-duty for a single-person project or for planning your day-to-day tasks. I like using PlainTasks for that — it helps me keep track of which issues I’m planning on working on next and notes on said issues.

After you install it, you can create a new file and save it with the “.todo” extension to create a PlainTasks file. Use COMMAND+Enter to create a new task and COMMAND+D to toggle it as done. This is also a great way to keep track of everything you’ve done on previous days, in case you want to review your progress.

SideBarEnhancements

The base sidebar menu for Sublime Text feels positively anemic. Install SideBarEnhancements to add all the menu options you ever wished were there. This one is so simple, but very essential.

SublimeCodeIntel

If you’ve used a variety of IDEs before, you’ve probably encountered some that parse your code and provide some fancy features based on that intelligence. SublimeCodeIntel fills that role here and grants you the ability to jump to function/variable definitions, clever autocomplete, and function tooltips.

After installing, give it a bit to index your code, then give it a spin! Auto-complete and tooltips should work out of the box, and symbol jumping works with CONTROL+Click on OSX and ALT+Click on Windows.

SublimeLinter

Whereas SublimeCodeIntel helps you write your code, SublimeLinter helps you write clean code, automatically reviewing it for coding style and highlighting problem lines. This may sound a bit fiddly, but properly linted code lowers confusion and increases reading comprehension, which is tremendously important.

SublimeLinter by itself doesn’t do much, but it provides the framework for language-specific linters to use. I use SublimeLinter-PHP and SublimeLinter-jshint in my daily life. You’ll need to make sure PHP and jshint are installed and on your PATH for these linters to work, but after that, they’re pretty much automatic.

Make It All Look Good

Now that we’ve gone and added all kinds of great functionality, it’s time to add a bit of sparkle and shine. A pretty editor is a satisfying editor, and I just feel better working in an editor that looks good. Let’s explore a few plugins that add some style.

BracketHighlighter

First up is a package that straddles the line between home improvement and interior decoration: BracketHighlighter. With this package installed, if you put your cursor on a bracket of any kind, it will automatically highlight the matching bracket. Very simple, but incredibly useful, especially in cases where people are using old-styple PHP array() semantics inside a function call or two and it’s hard to tell which parenthesis matches up with which.

PrettyJSON

Again, this package is part utility, part style. If you’ve ever copied (or written) a big chunk of JSON text and found it to be a big hunk of unreadable garbage, you can use PrettyJSON to format it in a way that you can read. Select your text (or just open your JSON by itself in a file) and hit COMMAND+CTRL+J, and now you can actually read that mess of text.

Material Theme

Finally, a package that’s just for looks: Material Theme. This theme is gorgeous. I recommend using the Darker version of the theme, with the orange accents:

{
    "theme": "Material-Theme-Darker.sublime-theme",
    "color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",
	"material_theme_accent_orange": true,
}

Some Useful Settings Changes

Hopefully we’re not nearing your bandwidth limit for the month yet, but if we are, have no fear – we’re done with downloading. The last thing I’d like to go over is just some useful settings you may want to know about.

Up first is “folder_exclude_patterns” and “file_exclude_patterns”. Anything matching these expressions will be excluded from showing up in your project list. This is useful for hiding your .git, .svn, or .vagrant folders, which you should never need to dig into. Similar, but slightly different is “binary_file_patterns”. If you have files that you want to show in the sidebar, but never be indexed for searching, add them to this list. I find that adding your vendor, npm, and bower folders to this option makes searching a lot quicker, and how often are you really searching for something inside a vendor folder anyway?

If you want to make your current line a little easier to see, set “highlight_line” to true. If you work in a location with poor lighting, this can make all the difference. In a slightly similar vein, if you ever find yourself trying to keep your lines to a certain length and want a visible indicator of where that 80 or 100 column width is, use the “rulers” setting to add a thin vertical line at the specified column. You can set up multiple columns, in case you wanted 80 as a soft limit, and 100 as a hard cap, for example.

Here’s a lifesaver: set “save_on_focus_lost” to true right now. This will mean that the moment your file loses focus, it’ll save to disk, even when switching between tabs. Even if your computer is utterly reliable and you have never lost data and plan on never losing any, it still saves immense amounts of time if you don’t have to think about going and saving all your changes in various different tabs before going to your browser and refreshing.

I know that personally when working on a new file, having to stare down at the bottom of my laptop screen all the time can get pretty uncomfortable. In my writing programs, you can scroll so the last line is at an arbitrary spot on the screen, and if you set “scroll_past_end” to true in Sublime Text, you can do so here too. Eye strain be gone!

If you workin a project with multiple files named all the same (“index.md”, “page.js” or what have you), it can be confusing to remember which file you have open is actually which. If you set “show_full_path” to true, the full path to the file will show in the title bar, making it a lot easier to figure out exactly what file you’re working on.

Finally, if you’re a bit of a stickler on how whitespace is treated in your files, you can set “trim_trailing_white_space_on_save” to well, trim trailing whitespaces when you save. Combined with “save_on_focus_lost” up there, you’ll quickly remove any and all excess whitespace in your project.

A good start!

We’ve covered a lot of my favourite additions and changes to Sublime Text, but that doesn’t mean they’ll end up as your favourites. If you’re looking for something that didn’t show up in this post, I heartily recommend investigating the settings yourself, and if that doesn’t scratch your itch, definitely visit the Package Control repository site. From there, you can search and browse all the various packages you can install via Package Control.

Who knows? Maybe you’ll find that one final add-on that really ties your editor together and unlocks your hidden potential as a programmer! Or maybe you’ll find the perfect colour scheme, or syntax highlighter, or snippet collection. Or maybe you’ll find nothing at all, but at least you’re aware of what there is, and when you start programming in Go, you know exactly the tools you have available to you.

Coding
Gulp.js – an AMAZING build system!
Coding
Rage-quit support for fish shell
There are currently no comments.