Update (9/23/18): I’ve switched to Visual Studio Code. Read more here.
I always strive to be as efficient as possible in whichever editor I’m using at the time. I’ve settled on Sublime Text for the last few years because it is fast and customizable. I’ll share the plug-ins that I use the most while working on Bot Land, but keep in mind that I’m writing Bot Land in JavaScript (specifically ES6), so some of the plug-ins that I show may not be relevant for your project.
Just a note: to install any of these packages, take a look at the Package Control installation guide.
DocBlockr (link)
Description: forms comments and automatically uses the JSDoc style.
Explanation: JavaScript is not statically typed, so let’s say you write a function that takes in a person as an argument. Should that person be a plain JavaScript object? Should it be a Person? Is it optional? What is the return type of the function, if anything? Making JSDocs will clarify this for you, and DocBlockr makes it easy, even abiding by any rulers that you’ve set in Sublime so that comments don’t extend too far horizontally.
Extra details: one “gotcha” for this plug-in is that sometimes you want to write comments like this:
// Individual comment line #1.
//
// Individual comment line #2. The line directly above is
// intentionally blank
function foo() {
}
If you put the cursor on line one and try autoformatting (default: alt+Q on Windows), you’ll end up with this:
// Individual comment line #1. Individual comment line #2. The line directly // above is intentionally blank
To fix this, make sure line 2 doesn’t have a trailing space.
Evaluate (link)
Description: runs the selected text through a Python `eval()` call.
Explanation: this is one of those plug-ins whose use is not immediately clear. It is just a wrapper around `eval`, meaning you could always open Sublime’s built-in Python interpreter (ctrl+backtick on Windows) and input your expression there. Here are a few instances where I’ve found it helpful (the first bullet point accounts for 99% of my uses with it):
- Evaluate mathematical expressions: `54 * 32` turns into 1728. That’s pretty straightforward, but this can be very useful with multiple cursors. For a contrived example, imagine you have this:
var life = 20; var damage = 50;
Using multiple cursors, you could select both semicolons, insert `*2` before each one, then evaluate the selections to give you:
var life = 40; var damage = 100;
- If you’re actually coding in Python, then Evaluate can be useful for testing Python behavior from right inside Sublime. For example, evaluating `[1, 2, 3] + [4, 5, 6]` will give you `[1, 2, 3, 4, 5, 6]`.
- Generate long repeated strings: `”*” * 80` will give me 80 asterisks in a row. I use this for logging to the console sometimes.
FileDiffs (link)
Description: this lets you diff selections or tabs of arbitrary content.
Explanation: every programmer has a need for diffing text at some point, so I don’t think there’s too much to explain here. One nice thing is if you’re looking through a file and you want to compare, say, two functions to see what the differences are, you can just highlight them both, right-click, and choose “Diff Selections”.
Sublime Text Git (link)
Description: this is an interface for Git directly in Sublime (e.g. you can do “git status”, “git diff”, “git log”, etc. from the command menu).
Explanation: I got this for performing “git diff” from inside Sublime, but I honestly don’t find myself ever using it. I instead end up using TortoiseGit on Windows, but I still wanted to keep this on the list since I think it’s a good plug-in.
Extra details: make sure you initialize your repo by going to Tools → Git → Init. Specify the parent of a “.git” folder. Then, to use any of the “Git:” commands, you need to be working on a file that is a descendant of the folder you chose.
GitGutter (link)
Description: this shows an icon in your gutter when a line in the current file is different from what you have in your Git repository.
Explanation: this plug-in provides something that is seemingly very insignificant, but I really like seeing an icon when I’ve modified a line. It’s hard for me to articulate why though; I think I just like knowing that I’m not crazy and that I did indeed change a file without having to actually perform a diff. Plus, if you see the icon on a blank line, you know you’ve changed whitespace.
Extra details: in all of my time using Sublime, I’ve never had performance problems until I installed GitGutter. After that, moving lines up and down started acting very slow, but only on Windows. I changed two settings and the problems were fixed (update: May 17th, 2018: there’s only one setting now, and perhaps it no longer negatively impacts performance):
- Set “live_mode” to false.
The easiest way to make these changes is to go to Preferences → Package Settings → GitGutter → Settings – Default, but you really should override the defaults in the “Settings – User” file.
JsFormat (link)
Update (May 17th, 2018): I now use PrettierJS and a Sublime plug-in called JsPrettier to format files, but I’ll keep this section here since JsFormat is used in the video at the bottom of the post still.
Description: this runs JS Beautifier on the selected text, automatically correcting formatting and style.
Explanation: I installed this plug-in because the built-in command for “Indentation: Reindent Lines” never seemed to do what I wanted.
It can turn this code:
a=function squished(foo,bar){if(true){return foo+bar;}else{return foo*bar;}};
into this:
a = function squished(foo, bar) {
if (true) {
return foo + bar;
} else {
return foo * bar;
}
};
ReverseR (link)
Update (February 16th, 2017): I’ve switched to using ToggleWords because it was written more sanely. I suggest you look at their GitHub page and ignore this section on ReverseR.
Description: converts a selected word into its opposite (e.g. “true” becomes “false”, “left” becomes “right”).
Explanation: I made this plug-in because of how often I needed to edit a configuration file and toggle something like “isDevMode: true” to “isDevMode: false”. I figured I might as well add in more pairs of words that are opposites (or close enough to opposites, e.g. “x” and “y”, “width” and “height”).
It also maintains casing:
- All lowercase: “true” becomes “false”
- All uppercase: “TRUE” becomes” FALSE”
- First letter capitalized: “True” becomes “False”
This means you can highlight `Width` in `getWidth`, run ReverseR, and now you’ll have `getHeight`.
Extra details: I did not ever plan on sharing this code, so I only uploaded it to http://botland.net, but if enough people say they like it, I could turn it into a proper Sublime package.
PlainTasks (link)
Description: this forms a TODO list with checkable items.
Explanation: I tend to keep “committable” items in a PlainTasks TODO list directly in Sublime, that way I can just switch tabs to see what I have left to do.
Extra details: the default color scheme is terrible. Go into Preferences → Package Settings → PlainTasks → Settings – User to change it:
{
"color_scheme": "Packages/PlainTasks/tasks-monokai.hidden-tmTheme"
}
EasyMotion (link)
Description: quickly navigates to a particular character on the screen.
Explanation: suppose you’re on a line of code and want to get a particular instance of the letter ‘h’ on the screen.
You can invoke EasyMotion (ctrl+; by default), then type ‘h’, and it will tag all of the instances of that letter on your screen with a single-character keyboard key:
Now I can choose which ‘h’ I want to navigate by pressing the corresponding highlighted character. For example, to go to the very first ‘h’ on the page, I can type ‘k’.
Extra details: EasyMotion also comes with a shortcut (ctrl+shift+; by default) which will select all text between the original and new cursor positions.
Other plug-ins / thoughts
I don’t think these are worth linking to, but I’ve installed several plug-ins just for syntax highlighting: batch, PowerShell, 6502 assembly, ES6, and probably a few others.
If you ever find yourself typing a block of code repeatedly, consider making your own snippet. For example, in Bot Land, I frequently need to get a component from an entity, so I wrote a snippet to do that. There are resources online that show you how to do this, so if you need help, seek those out or look at the existing snippets that come bundled with Sublime.
Demo
I recorded a quick demo of some the above plug-ins:
[youtube https://www.youtube.com/watch?v=YN-5IaU3TaM&w=420&h=315]