sublime text packages

This article originally appeared on the blog of Jonathan Stassen, Frontend Developer at Sprout Social. Especially for our friends and customers with engineering backgrounds and interests, we hope you find it useful in making your workflow more manageable.


I primarily use Sublime as my code editor of choice; a bunch of us at Sprout do. It’s simple, clean, lightweight on system resources, and it has some pretty sweet packages. I’ve found a number of packages that increase my efficiency developing and thought I’d share several of these personal favorite Sublime 3 packages here.

If you’re on Sublime 2, upgrade to Sublime 3; it’s totally stable.

To get started, you’ll need to install Sublime Package Control into Sublime. It’s fairly simple, and then you’re read to go. The “Package Control: Install Package” command will now be available in your command pallet via Cmd+Shift+P or Ctrl+Shift+P.

SublimeLinter

SublimeLinter

This is a base package for all linters. Syntax error highlighting can greatly reduce the save-run-revise cycle time. Most IDEs already have syntax error highlighting—why not add it to Sublime?

There are many SublimeLinter packages. Browse through them find what fits your workflow. Be sure to follow each package’s setup instructions; each will be a bit different.

My personal must-haves are:

  1. SublimeLinter-phplint
  2. SublimeLinter-jshint
  3. SublimeLinter-jsxhint
  4. SublimeLinter-csslint
  5. Sublime​Linter-contrib-scss-lint

BracketHighlighter

BracketHighlighter

This offers even better bracket highlighting than what comes with Sublime. It also shows starting and ending brackets in the gutter and can matching for [ ], ( ), { }, ” “, ‘ ‘, <tag> </tag>.

SideBarEnhancments

Give the context menu more options when right clicking on files in a project. Duplicate files, move, rename and more.

DocBlockr

DocBlockr

This allows easier creation of document blocks for functions, classes, methods. It’s intelligent and looks ahead to see what you’re documenting to prefill the base info (such as input parameters and what is returned). Documenting is now convenient.

Pro tip: Use the tab key to navigate through the generated documented block; no need to click or use arrow keys.

Shell-Turtlestein

Launch the terminal/command line right in the context of your project directly from Sublime, either as a new window or as its own panel within sublime.

GitGutter

GitGutter visually shows the diff since the last commit in the gutter. At a glance, you can see what lines are additions, modifications or deletions.

Origami

Split Sublime into multiple horizontal and vertical panes for side-by-side work. Remove the need to switch between tabs or windows as frequently when comparing files.

TrailingSpaces

This highlights and helps clean up end-of-line trailing spaces. Nobody likes them, right? Or maybe we just don’t notice them.

There are many other great packages out there for Sublime: code snippets, theme and syntax highlighting. These are just some of my favorites.