best-of-sublime-text
Bar Talk

Best of Sublime Text 3: Features, Plugins, and Settings

Sublime Text 3 is an amazing piece of software. To start, it is a clean, functional, and fast code editor. Not only does it have incredible built in features (multi-edit and vim mode), but it has support for plugins, snippets, and many other things.

I know there have already been many articles like this online, but I am teaching a class on Sublime Text and thought it would be good to have all the information online. In this article, we’ll be diving into the best parts of Sublime Text. You’ve probably already heard of some of these, but maybe not some others.

Features

Command Palette ctrl + shift + p

The command palette let’s you access pretty much anything in the settings menus, call your package commands, change file syntax, handle Sublime projects, and so much more.

For instance, you are able to call Git commands add, branch, commit, push, and pull all from the command palette.

To Use: ctrl + shift + p

set-syntax-html
git-commands

File Switching ctrl + p

Sublime Text provides a really fast way to open up new files. Just press ctrl + p and start typing the name of the file you want. Once it shows up, just press enter and start typing directly into that file!

To Use: ctrl + p

sublime-file-opener

Goto Symbols ctrl + r

When you have a large file with a bunch of methods, pressing ctrl + r will list them all and make them easier to find. Just start typing the one you want and press enter.

To Use: ctrl + r

goto-symbol

Sublime Text 3 also has a new feature (Goto Definition). It provides Sublime Text with more capabilities closer to an IDE. Take a look at that if you’re interested.

Multi-Edit ctrl + click

This is in my opinion, the absolute best feature of Sublime. After using it here, it’s hard to go back to other text editors. There are many different ways to use multi-edit:

  • ctrl + d: Select the current word and the next same word
  • ctrl + click: Every place you click will create a cursor to edit
  • ctrl + shift + f AND alt + enter: Find a word in your files and then select them all

multiedit

Snippets

Snippets are yet another great feature of Sublime Text. You can use the pre-installed ones, build your own, or install a package that has more. All you have to do is type in a word and it will expand into your snippet. For example, typing lorem will generate lorem ipsum text.

To Use: Type a word that activates a snippet (ie lorem) and press tab.

sublime-snippet-lorem
sublime-snippet-lorem-tab

Here’s a great article on creating snippets.

Keyboard Shortcuts

The amount of keyboard shortcuts in Sublime are astounding. This is my other absolute best feature of Sublime. The less I can move away from the home keys on my keyboard, the more efficient I can be.

For a full list of the Sublime Text Keyboard Shortcuts, take a look at our keyboard shortcuts article.

Projects

Projects is an integral part of my workflow in Sublime Text. A project is just a Sublime workspace in which your folders are open and stored in the sidebar. This helps since you can define a project and add folders to it, and be able to switch between folders quickly.

Using projects, you will no longer have to go digging in Windows Explorer or Finder to get the project you want and drag it into Sublime.

To Save a Project: Go into the command palette and type save project

To Switch Projects: ctrl + alt + p

sublime-project-switch

Packages/Plugins

Package Control

The absolutely necessary package manager for Sublime. This is the optimal way to install all of the plugins and themes listed below.

Go ahead and install that at the package control site.

To Use: Go into the command palette (ctrl + shift + p) and type install.

Package Control will load all the packages available for install. Take a look at all the great things you can install and find your favorite packages..

Alignment

A very simple and easy to use plugin. I’m a very big fan of making your code organized and good looking. It helps tons when you revisit the code later down the road. Alignment helps with that.

To Use: Highlight the lines you want to align and press ctrl + alt + a

alignment-before
alignment-after

BracketHighlighter

This plugin provides bracket highlighting for all sorts of brackets.

brackethighlighter

Colorpicker

Have the ability to change colors with a colorpicker on the fly.

To Use: ctrl + shift + c

sublime-colorpicker

Note: This plugin is much prettier when using it on Mac

Emmet

Emmet is an absolute time saver. You can build HTML on the fly easily and quickly.

To Use: ctrl + alt + enter and start typing your Emmet styled HTML

sublime-emmet-start
sublime-emmet-finish

Check out our Emmet Interactive Guide to learn more and try out Emmet for yourself.

DocBlockr

A really great way to easily create doc blocks for many languages including JavaScript, PHP, and CoffeeScript. Just type in /** above your function and press tab. Watch the magic as DocBlockr takes the function name and variables and creates your doc block.

sublime-docblockr-example-start
sublime-docblockr-example-finish

Git

Git helps you interact with your Git repo. It has support for all sorts of things like init, push, pull, branch, stash, and more.

GitGutter

This is a small, but useful plugin that will tell you what lines have changed since your last Git commit. An indicator will show in the gutter next to the line numbers.

sublime-git-gutter

Gist

This plugin allows you to pull your Gists and insert them into your file. This is helpful when you have a Gist to start an HTML file or any other reusable code you have.

To Use: Open up the command palette and type gist. You can also use the shortcuts that are shown.

sublime-gist

SidebarEnhancements

This plugin provides a great deal more choices when right clicking on a file in the sidebar. The ability to open, find, copy and paste, and more are all provided.

Here is the old menu vs the SidebarEnhanced menu.

sublime-sidebar-enhancements-before
sublime-sidebar-enhancements-after

Themes

There are some really cool looking themes you can install for Sublime. You can find these by using Package Control.

Install a theme with Package Control and then update your User Settings to use it.

// User/Preferences.sublime-settings
{
	"theme": "Soda Light.sublime-theme"
}

Note: You might have to restart Sublime for these changes to take effect.

Some popular themes:

Theme – Soda comes with light and dark

soda-2-light-theme
soda-2-dark-theme

Theme – Flatland

sublime-flatland

Predawn

sublime-predawn

An offshoot of Flatland. Check out the repo and the great work by Jamie Wilson.

Spacegray

“A Hyperminimal UI Theme”. More information found here. Thanks to the link by Jentan Bernardus.

spacegray-sublime-text-theme

More Themes

Here is a great writeup on Beautiful Themes for Sublime Text 3 by Abu Ashraf Masnun. Take a look at more great themes there.

Color Schemes

In addition to changing your theme, you can also change your color scheme. These differ from themes since themes are packages for Sublime. Color Schemes are just a color scheme file and changing your settings.

To Change Color Scheme: Go into your menus, Preferences > Color Scheme and select one.

You will see changes immediately and can check if you like it or not. For a list of some great color schemes, check out Dayle Rees’s colour schemes repo or color sublime, a great project.

Settings

Sublime comes with an insane amount of settings. I would encourage you go look at everything it has to offer.

To get to your user settings, use the command palette and type in user.

Here are my current settings, most are self explanatory. Pick and choose the good parts for yourself and make your own custom settings!

// User/Preferences.sublime-settings
{
	"bold_folder_labels": true,
	"color_scheme": "Packages/Theme - Flatland/Flatland Monokai.tmTheme",
	"font_face": "Ubuntu Mono",
	"font_options": "subpixel_antialias",
	"font_size": 14,
	"highlight_line": true,
	"highlight_modified_tabs": true,
	"ignored_packages":
	[
	],
	"line_padding_bottom": 1,
	"line_padding_top": 1,
	"rulers":
	[
		80
	],
	"scroll_past_end": true,
	"tab_size": 4,
	"tab_completion": false,
	"theme": "Soda Light.sublime-theme",
	"translate_tabs_to_spaces": true,
	"trim_trailing_white_space_on_save": true,
	"vintage_start_in_command_mode": true,
	"word_wrap": true
}

I use the great Vintage mode in Sublime. It provides vi editing commands inside of Sublime Text. It isn’t as fully featured as the original vi package, but it is the closest that I’ve seen in any text editor currently. That along with your keyboard shortcuts and command packages will make for a very fast developer.

The settings above automatically turn on Vintage mode when you open a file. If you don’t like this feature, just remove vintage_start_in_command_mode and if you want to disable Vintage altogether, remove the ignored_packages setting.

Conclusion

There are so many parts to Sublime that I’m sure I missed some great things. Let me know if you find any other awesome packages or features and happy coding!

Craving more Sublime…

Check out our very extensive series going over every aspect of Sublime Text 3:

Chris Sevilleja

Design, development, and anything in between that I find interesting.

View My Articles

Stay Connected With Us
hover these for magic

Get valuable tips, articles, and resources straight to your inbox. Every Tuesday.

  • Pingback: Sublime Text Keyboard Shortcuts ♥ Scotch

  • Niven Ranchhod

    Thanks a lot! I have heard so much about it, but never really had time to go have a read about it and see if it’s worthwhile moving over from Komodo.
    You’ve just sold me on Sublime!

    • http://scotch.io/ Chris Sevilleja

      Great to hear! Enjoy your newfound editor!

    • Erik

      I moved over from Komodo about a year ago… haven’t looked back :)

  • http://www.aureliendebord.com/ Aurélien-Alexandre Debord

    Thanks !

  • Aldren Terante

    Amazing! Thanks again for this wonderful post :)

  • Tareq89

    I didnt know about alignment plugin, thanks for that :)

  • Pingback: Вечерний чай #18 | Вечерний чай

  • Vince

    Congrats Sublime 3…LOL, don’t worry, one day it will catch up to Visual Studio LOL…

    • Aha

      One day Visual Studio will catch up to Vim.

  • Erik

    After using a number of IDE’s over the years, I can safely say that Sublime Text takes the cake hands down. Thanks @sevilayha:disqus for the article. I was unaware of the BracketHighlighter plugin. Installed. Enjoyed.

    Look at nearly any credible/authoritative tut/video. What editor are they using? ….. Sublime (or vim or course) ;)

    I’ve been using ST2 for a while now and haven’t made the switch to ST3 …. I don’t really see any major difference… maybe it is time….

    • http://scotch.io/ Chris Sevilleja

      ST2 is super fast. ST3 is blazing fast. The other major difference is Goto Definition in ST3. Also, there are some packages that don’t work on ST3 yet.

      Honestly, either way you go, its the right way.

  • Pingback: Weekly Design News (N.214)

  • Pingback: Weekly Design News (N.214) « Refined Sites Blog

  • Pingback: Weekly Design News (N.214) | WordPress Webdesigner

  • Eugene Figursky

    For Git there’s a great plugin called SublimeGit. It’s paid but has a free trial version. And it does its work awesome. https://sublimegit.net/

  • http://muddypa.ws nportelli

    I bought SublimeText2 and I’m sorry I did. I was willing to pay for an upgrade to SublimeText3, but since I bought it so long ago, I didn’t qualify for an upgrade. Not sure I want to get burned again. I mean I pay because I like the software and want to support the developer, then not be able to upgrade at a reduced cost?

    • John

      If you are so generous to “support the developer” instead of using the editor for better productivity, why do you want a discount? Just support him again.

  • Diverently

    Is ST3 still being developed? The last post on their website (and Twitter) from June, 28 says it’s still in beta.

    • http://scotch.io/ Chris Sevilleja

      I guess we got our answer. Sublime Text 3 just got upgraded yesterday.

    • http://abhinavk.me/ Abhinav Kumar

      Dev channel is being regularly updated. http://www.sublimetext.com/3dev

  • Mayra

    You have an error on the Alignment section. To align you need to use ctrl + comand + a
    It took me a while to try to figure out this one! Thanks for the tips :)

    • http://scotch.io/ Chris Sevilleja

      This tutorial was written for Windows users. Thanks for providing the Mac version for Alignment.

  • Pingback: Weekly Design News (N.214) | Sophisticated Design News

  • http://www.petrchutny.cz/ Petr Chutný

    Thanks for a nice article! I also like your design of the blog :)

    • http://scotch.io/ Chris Sevilleja

      Thanks!

  • Asdbasjkbdl

    LOL windows

  • Pingback: If you love Sublime, here a couple of useful tips, features, plugins and setting… | Useful Stuff For Front-End Developers from the authors of the Smashing Magazine Facebook Page <3

  • http://twelvetwo.net/ Clay Asbury

    Thanks for this – how does sublime stack up against Coda2? I use it and love it but always looking for ways to speed things up.

    • ncerminara

      @crucesignati:disqus – Do a project with Sublime and it will change your life!

      On my Mac Book Pro, I use Sublime as much as possible. I’m ultra productive on it compared to other text editors. Sublime doesn’t however have that seamless FTP editing and uploading that Coda has without third-party packages. So, when I have no choice (usually work related) and have to develop on an FTP only restricted server, I actually will still use Coda – although, I find myself doing whatever I possibly can to work locally and with Sublime Text.

  • JayGilmore

    For me one of the best features of SublimeText (2 and 3) is Select and CMD+CTRL+G (Mac) to select and edit all instances of the selection. It’s faster than using the find all and edit if you’re at the item. Another multi edit feature is CMD+A and then Shift+CMD+L to edit all lines in the selection. This makes it insanely fast to then wrap everything into paragraphs in HTML, for instance. Going from plaintext to fully marked up HTML is a matter of seconds vs minutes in other editors.

    • http://scotch.io/ Chris Sevilleja

      Thanks for the great info. That’ll speed up development greatly.

  • jimbavia

    Thanks much for the update.

  • Pingback: Sublime Text Editor | [email protected]

  • Juan

    Excellent post!

  • http://Typecastexception.com John Atten

    Nice post. Learned some new things about Sublime Text!

  • http://www.creartinc.com/ Bilal Khettab

    I like the blue theme on you ST ! how did you get it ? it’s not within these themes you mentioned!

    • Chris Sevilleja

      It’s actually the Flatland Theme. It’s the second one we mention here and its currently my favorite!

  • Rezwanul

    plz show how to build in system to run any problem for the languag

    es like C/C++,ruby etc

  • JayZee

    For diffs viewing and merging files, Sublimerge is the absolutely top plugin!

    • http://scotch.io/ Chris Sevilleja

      That is awesome. I’m compiling a list of more plugins to add to this article. That’ll be on the list. Thanks.

  • Pingback: Sublime Text | Pearltrees

  • Pingback: Best of Sublime Text 3 | Startrap

  • Pingback: I augekroken på nett – Veke 3 | Benjamin Ulstein

  • André Morgan

    Thanks for the round up! Didn’t know about Lorem!

  • Almer Leo Almazan

    Thanks.
    Vintageous is also a great plugin for Vim users using ST3. =)
    https://github.com/guillermooo/Vintageous

    • http://scotch.io/ Chris Sevilleja

      That’s awesome. Thanks for the link.

  • http://www.eclecticradio.nl Jasper

    No matter what I try, I just can’t get used to the way how autocomplete works in this editor, and for the life of me I can’t really pin down what’s so different than Dreamweaver (yes, I use that and boy I love it’s auto complete features). I can really code super-duper fast in dreamweaver and with sublime I am stuck in between html tags all too often.

    Dreamweaver NEVER EVER EVER closes a tag unless you want to. Sublime text does, but not always. I also don’t get that it does accept div.website and then creates a and places your cursor in between those divs. WHY? I never asked for you to close that div? I hate that and it annoys me enough to close Sublime text and re-open dreamweaver.

    Also find-replace in project is better in DW, updating file locations is better in DW (“the file you’re trying to move is linked in this and this file. Update paths?)

    These are the things I can’t live without after 10+ years of doing this, so Sublime is not so sublime for me.

    • http://scotch.io/ Chris Sevilleja

      I can totally understand the frustration. Some people are very picky about how autocomplete works. Sublime text has a setting where you can turn off all autocomplete (and Sublime Text 3 has a different autocomplete than Sublime Text 2, which were you using?).

      Just go to Preferences -> Settings – User and add this line: "auto_close_tags": false

      The div.website tab thing is the plugin called Emmet. It places you inside the div because if you did div.website*3 and tabbed it, then you could tab through all 3 divs and enter data. This is convenient for giant li lists. http://scotch.io/bar-talk/write-html-crazy-fast-with-emmet-an-interactive-guide

      I personally think the find in project feature is great in Sublime, but to each their own. Multiple cursor and Vintage mode are the big winners for me for Sublime over Dreamweaver.

      Dreamweaver is also closer to an IDE than Sublime. Sublime is closer to a text editor so you’ll definitely see those major differences like updating paths and stuff like that. To each their own, Dreamweaver has some great features and that’s the editor I used for a while. Maybe try tweaking a few of the settings in Sublime to match your coding ways?

      • http://www.eclecticradio.nl Matt Labour

        will most defo try it again, as the features in Sublime are awesome. If I can figure out how autocomplete works exactly, perhaps I can adjust my workflow to it, but tbh I doubt it. Nevertheless, I’ll try it again.
        //EDIT sorry other G account

      • http://www.eclecticradio.nl Jasper

        Just wanted to add that indeed, I now only use ST3 :) It’s amazing, and after some configuring it does exactly what I want. perfect :)

        • http://scotch.io/ Chris Sevilleja

          That is an awesome thing to hear! Glad to see you picking up some of the great features and the editor itself.

          Next step: Vim and Vintage Mode!

    • http://id.linkedin.com/in/rizky Rizky Syazuli

      i think that div.website thing came from Emmet plugin. it’s not a default Sublime feature.

      but i can understand you. as a frontend. i was also very picky about HTML/CSS auto-complete. but when i found out about Emmet (used to be called Zen Coding), auto-complete now seems irrelevant.

      right now, as long as the editor/IDE supports Emmet. i’m good to go. see it here: http://emmet.io/

      yeah, it might not suit your style at first. but you will code a lot faster.

      • http://www.eclecticradio.nl Jasper

        Can’t believe I posted this 21 days ago and now I’m on my third project in ST3 and I LOVE IT! I gave it another whirl on a sideproject of mine and became so addicted to ST, it’s unbelievable. Emmet, yes that’s indeed the big and expanded version but typing div#rizky will give you a div with #rizky as ID out-the-box. Same goes for ul, li, a, p and a few more tags.

  • sarthak

    Thank for your Awesome Guide Chris..
    I researched and found this https://www.sublimetext.com/docs/2/index.html
    Docs for sublime text 2 :D

  • Pingback: The Complete Visual Guide to Sublime Text 3 ♥ Scotch

  • Pingback: Programmingclass | Pearltrees

  • soyuka

    You should mention DocBlockr wich is an awesome helper to comment functions or whatever ;)

    • http://scotch.io/ Chris Sevilleja

      Can’t believe that wasn’t included. I use DocBlockr daily. Thanks for pointing that out. It’s in the article now.

  • Pingback: Google

  • Pingback: Sublime Text Plugins and Package Control - Haiz Design Note Pad

  • Pingback: The Complete Visual Guide to Sublime Text 3: Getting Started and Keyboard Shortcuts ♥ Scotch

  • Pingback: The Complete Visual Guide to Sublime Text 3: Themes, Color Schemes, and Cool Features ♥ Scotch

  • Pingback: The Complete Visual Guide to Sublime Text 3: Plugins Part 1 ♥ Scotch

  • Pingback: The Complete Visual Guide to Sublime Text 3: Plugins Part 2 ♥ Scotch

  • Pingback: Lo mejor para Sublime Text 3 | Blog de unique3w

  • Pingback: Article Roundup for 04.11.2014 | Tvenge Design

  • Pingback: (Tweet) Make Sublime Text 3 even better: http://t.co/UVYIg... / Avsides

  • Pingback: Sublime Text Keyboard Shortcuts | [w] k a n a ♥ p u !

  • http://www.maurice-renck.de maurice

    Great article, thank you!
    Unfortunately ST3 crashes from time to time, whenever I use the BracketHighlighter, so I had to remove it :(

    I use some additional plugins, which may be interesting for others as well (http://www.maurice-renck.de/en/blog/top10-sublime-text-plugins/), have a look, if you like.

  • cjohann

    Good article, thank you . I personally like the Markdown preview plugin !

  • Yuvraj Jadhav

    Thank You Chris.
    This article is really helpful for the people like me who wanted to explore sublime text packages.

  • Pierre Michauville

    I believe Sublime Text’s UI is only in English. I’ll wait till it is translated.

  • Pingback: Sublime Text 3 – Ubuntu / Debian | SUCKUP.de

  • Pingback: #11 ~> Things to take care | Learn Ruby on Rails

  • Pingback: A Sublime Text Feature That Saves Time and Your Sanity | Brett Berchtold

  • Pingback: Bootstrap 3 Tips and Tricks You may not Know | Bootstrap 3Bootstrap 3

  • Pingback: Sublime Text Plugins | Pearltrees

  • Pingback: De Código y Algo Más | Sublime Text