The Complete Visual Guide to Sublime Text 3: Plugins Part 1

Third-Party Plugins

We already have a good post that covers a ton of the awesome plugins that Sublime Text 3 has here. We’ll go over some of these again, some in more detail, and then some new ones that we might have missed.

Plugins Explained

All of Sublime Text 3’s plugins are built on the same API. This means all of their settings and configurations are basically the same. Whenever I install a plugin via Package Control, one of the first things I usually do is check out the different options via its settings. Some settings for plugins will extend beyond this, but this is the basic idea:

Settings

When you install a plugin, it comes with two files:

  • Settings – Default
  • Settings – User

The Default Settings (if the package/plugin has any) will have a list of all the different config options in a nice JSON object. If you need to override any of these settings, you can simply create a JSON object in the User Settings and override them with the same key/value pair. The simplest way to do this is to just copy and paste the settings over.

Key Bindings

Key Bindings settings also have two different files:

  • Key Brindings – Default
  • Key Brindings – User

Key Bindings are literally just keyboard shortcuts. If the plugin or package that you installed has any, here’s how you can customize or change them. It works the exact same way as the Settings options.

Advanced New File

 Official Resource
Advanced New File is an fantastic plugin that I came across because of a post by the very awesome Jeffrey Way. Some of the features that Advanced New File have are:

  • Quicker method for creating files (no standard system pop-up)
  • Create folders and paths to your files.

Advanced New File lets you quickly add a file to an existing folder without having to get a popup to save from Windows, Mac, or your Linux OS. It also allows you to create folders and subfolders to your new file. For example you could do something like this:

assets/js/power.js
This will create the assets folder, the js folder, and the power.js file. If the folders already exist, it will simply just save it to the folder instead. It’s extremely convenient to use.

Apple  ⌘ + ⌥ + n
Windows  ctrl + alt + n

SideBarEnhancements

 Official Resource
SideBarEnhancements (or Side Bar Enhancements) gives you a ton of options when you right click a file or folder in the sidebar. Some of these additional options and enhancements that wouldn’t come default with Sublime Text are:

  • Open / Run
  • Open in Browser
  • Open on Testing Server
  • Open on Production Server
  • Open with:
  • Additional Find and Replace Options
  • Copy Folder Path
  • And some more cool things

Alignment

 Official Resource
The plugin Alignment is really neat. It lets you quickly align your code neatly based on characters like =. The settings allow you to configure it to align on any characters of your choosing. You use this all via a quick-access keyboard shortcut.

Auto-Align

Apple  ⌘ + ^ + a
Windows  ctrl + alt + a

AlignTab

 Official Resource
This plugin is very similar to Alignment, but it has some extra features to it that are really useful. I personally like to use this in conjunction with Alignment. AlignTab allows you do align your code based on a regular expression. AlignTab features:

  • Regular Expression Alignment
  • Live Alignment Preview (real-time testing of alignment)
  • Table Alignment

BracketHighlighter

 Official Resource
BracketHighlighter (or Bracket Highlighter) is an awesome plugin that helps you see your code more clearly. Not only does it highlight your HTML element’s start and end points, but it also will set markers for all of the following:

  • <tag></tag>
  • []
  • ()
  • ""
  • ''

The highlighing also includes putting nice icons in your editors gutter by your line numbers.

<

div class=”tile”>

Clipboard History

 Official Resource
Clipboard History is exactly what it sounds like. It keeps everything you copy within Sublime Text to be retrievable later. It also comes with a very handy shortcut that lets you retrieve these shortcuts very naturally from the keyboard.

View Clipboard Histroy

Apple  ⌘ + ⎇ + v
Windows  ctrl + alt + v

Color Picker

 Official Resource
The Color Picker plugin lets you quickly choose a color on the fly based on your systems OS color picker. I tend to use Photoshop besides having this on hand, but it’s still nice knowing this exist.

Minifier

 Official Resource
This allows you to easily minify CSS and JavaScript files or write them to a separate minified file. This nice trick if you don’t use a command line task runner like Grunt to automatically minify your files.

HTMLPrettify

 Official Resource
Sublime Text 3 out of the box has a nice utility for reindenting your code automatically. It works really well, too. To access it, simply popup open the Command Palette. However, it doesn’t automatically format it with new lines, beautify minified code, and more. For this you can simply use HTMLPrettify. It works for HTML, CSS, JS, and JSON files.

Sublime Snippets

Snippets are short pieces of code that can get called on the fly though the Command Palette. People can write snippets and serve them as plugins. This means you get a ton of options from people who have written great plugins. Here’s some that are worth noting.

There’s snippets for pretty much everything. Just search the Package Manager for one’s that fit your needs.


Getting Started and Keyboard Shortcuts

Themes, Color Schemes, and Cool Features

Plugins Part 1

Plugins Part 2