The Best Sublime Text Plugins for Front End Developers

Every developer has their own tooling and special setup, I know I do. It’s that tooling that can help you become a faster, stronger, and more productive developer.

One of the ways I find new tools is through pairing with other developers. I’ll be working on a problem, and see the person I’m pairing with do some magical thing in a two second flash.

This is the moment I interrupt the pairing session to find out what that tool was, where to get it, and how to use it. This is by no-means the most efficient way of finding new tools, but it’s often when I find the best ones.

With all this in mind, I spent some time polling front end developers here at Shopify, to get a list of all the essential Sublime Text plugins they just can’t live without.

To make things a bit easier, I broke the plugins into the following categories:

1. Installation

Package Control

The first and probably most essential plugin, is Package Control. It enables the easy installation, download, and update of packages or plugins, into Sublime Text. The terms package and plugin are often used interchangeably.

Package control website.

To install Package Control, follow the instructions found on the Package Controlwebsite. From there, you can simply type in ctrl+shift+p on Windows, or cmd+shift+p on a Mac to open the Command Palette.

Installing package control in Sublime Text 3.
Installing Package Control.

Once the Command Palette is open, you can then type Install Package, to install a plugin from the Package Control website. You can also type Add Repository, which allows you to add plugins that are not hosted on the Package Control website, by simply using their repository url (make sure not to include .git at the end). And finally, Remove Package, will let you uninstall a plugin from your system by removing it, as well as any assets from the Sublime packages directory.

2. Snippets and code style

Snippets are a great built-in feature of Sublime Text. You can build your own, in addition to using the preinstalled ones, or use a plugin that has a bunch for you like Emmet. The way snippets work is simple; you simply begin typing a keyword that activates a snippet, and press tab to expand the text.

Emmet

Expanding markup with Emmet.
Expanding markup with Emmet.

Emmet is a plugin that enables faster HTML and CSS creation with the use of snippets. It uses abbreviations that expand to valid HTML tags.

For example, to build out a navigation you only need to type the following code:

  #page>div.logo+ul#navigation>li*5>a{Item $}

Which will expand to:

  <div id="page">
  <div class="logo"></div>
  <ul id="navigation">
  <li><a href="">Item 1</a></li>
  <li><a href="">Item 2</a></li>
  <li><a href="">Item 3</a></li>
  <li><a href="">Item 4</a></li>
  <li><a href="">Item 5</a></li>
  </ul>
  </div>

 

Alignment

Aligning variable definitions with Alignment plugin.
Aligning variable definitions with Alignment.

This plugin helps to easily align multiple selections, or multi-line selections. What that means is you can align multiple selections, or lines, via delimiter such as =. Simply type ctrl + alt + a on Windows, or cmd + ctrl + a on a Mac, to align your selection. To align with : follow this tutorial to setup custom delimiters.

3. Git integration

Most developers use some type of version control. These days, Git seems to be the most popular. Here are a few Git related plugins for Sublime Text that make working with Git a lot easier.

SublimeGit

SublimeGit screenshot.

You used to have to pay for this plugin (that’s how awesome it is), but this past year it was open-sourced. SublimeGit brings Git into Sublime, so you don’t need to go back and forth between the command line and your text editor. It has a huge list of features, which you can find in the SublimeGit docs. To get started quickly, install the plugin and use the Command Palette to launch your Git commands.

GitGutter

GitGutter screenshot.
Modified line, deleted region borders, and inserted line indicators in the Sublime Text gutter.

GitGutter brings some native Atom functionality to Sublime, adding diff hints to the gutter of the sidebar. You can additionally hover on the indicators in the sidebar, to see a diff popup. You can perform a variety of commands on the change, such as copying the content of the diff state, reverting the changes back to the state in Git, jumping to next or previous change, and more.

GitHubinator

GitHubinator opening GitHub blame.
Opening Git blame on Github for selected lines.

Githubinator is a plugin that shows selected text on a remote GitHub or Bitbucket repository. You simply highlight the text you want to search for, right click to open the context menu, and launch the corresponding Github or Bitbucket web page in your default browser. This plugin is amazing if you need to figure out who’s worked on a file previously, or check the Git blame.

GitOpenChangedFiles

GitOpenChangedFiles screencast.

This plugin isn’t coy about what it does; its name says it all. Simply install and run cmd + option + o on a Mac, or ctrl+ shift + o on Windows, and watch this plugin open the corresponding files for you in Sublime Text, with all the files you’ve changed in your branch.

You might also like: The Essential List of Resources for Shopify Theme Development.

4. Linters and syntax highlighting

SublimeLinter

SublimeLinter website.

This is the most popular linter available on Sublime, as it currently sits in the top 25 downloads on Package Manager. Once installed, you’ll also want to install plugins for the various languages that you might code in.

To do this, just open Package Control to install plugins with the same name. Simply type SublimeLinter-<lintername>, for example SublimeLinter-jshint. You must install linter plugins with SublimeLinter — the version for Sublime Text 3 doesn’t come with them pre-installed.

ChangeQuotes

ChangeQuotes screencast.
Changing double to single quotes, with the Command Palette.

This plugin “converts single and double quotes, and and re-escapes quotes within the string,” according to their docs. Once installed, whenever you want to change quotes, make sure your cursor is inside the quoted text. Open the Command Palette to run ChangeQuotes — there is no need to select the text to change quotes.

Syntax Highlighting

Syntax highlighting of Babel
Syntax highlighting courtesy of Babel.

There are a ton of plugins for syntax highlighting. These are the two major plugins we use at Shopify, that fall outside the existing syntax highlighting that ships with Sublime Text.

SASS 
Adds syntax highlighting as well as tab/code completion, for Sass and SCSS files.

Babel 
Adds syntax definitions for ES6 JavaScript, with React JSX extensions.

Siteleaf Liquid Syntax
Adds liquid syntax highlighting for Liquid as well as some handy snippets.

5. Editor enhancements

SidebarEnhancements

SidebarEnhancements screenshot.
Left: Before SidebarEnhancements. Right: After SidebarEnhancements.

SidebarEnhancements provides enhancements to the operations on Sidebar of Files and Folders for Sublime Text. Particularly, it sets delete options as a “Move to trash,” includes an “Open with…”, gives you the ability to move files, and more.

GhostText

GhostText screencast.
Linking CodePen to Sublime Text.



share
keyboard_arrow_up