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.
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:
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 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
- 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:
Learn Tailwind CSS from Scratch
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|
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
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.
|Apple ||⌘ + ^ + a|
|Windows ||ctrl + alt + a|
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
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:
The highlighing also includes putting nice icons in your editors gutter by your line numbers.
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|
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.
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.
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.
- Bootstrap 3 Snippets
- jQuery Snippets
- Node.js Snippets
- Angular Snippets
- Laravel's Blade Snippets
- LESS Snippets
- Zurb Snippets
- Ruby on Rails Snippets
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
Like this article? Follow @whatnicktweets on Twitter