Sublime Text 3 (ST3) is a powerful editor just as it is. But if you want to step up your game, you need to take advantage of all that ST3 has to offer by learning the keyboard shortcuts and customizing the editor to meet your individual needs…
Be sure to set up the
subl command line tool, which can be used to open a single file or an entire project directory of files and folders, before moving on.
Goal: Never take your hands off the keyboard!
Command Palette (CMD-SHIFT-P) - Accesses the all-powerful Command Palette, where you can run toolbar actions - setting the code syntax, accessing package control, renaming a file, etc..
Goto Anything (CMD-P) - Searches for a file within the current project or a line or definition in the current file. It’s fuzzy so you don’t need to match the name exactly.
@- Definition - class, method, function
:- Line #
Distraction Free Mode (CMD-CTRL-SHIFT-F) - Eliminates distractions!
Hide/Show the Sidebar (CMD-K, CMD-B) - Toggles the sidebar.
- Comment Your Code (CMD-/) - Highlight the code you want to comment out, then comment it out. If you do not highlight anything, this command will comment out the current line.
- Highlight an entire line (CMD-L)
- Delete an entire line (CMD-SHIFT-K)
- Multi-Edit (CMD+D) - Simply select the word you want to edit, and press CMD-D repeatedly until you have selected all the words you want to change/update/etc..
Grab the cheat sheet in PDF.
You can customize almost anything in ST3 by updating the config settings.
Config settings can be set at the global/default-level or by user, project, package, and/or syntax. Setting files are loaded in the following order:
Always apply your custom configuration settings to at the User level, since they will not get overridden when you update Sublime and/or a specific package.
- Base User Settings: Sublime Text 3 > Preferences > Settings - User
- Package User Specific: Sublime Text 3 > Preferences > Package Settings > PACKAGE NAME > Settings - User
- Syntax User Settings: Sublime Text 3 > Preferences > Settings - More > Syntax Specific - User
Base User Settings
Don’t know where to start?
1 2 3 4 5 6 7 8
Add this to Sublime Text 3 > Preferences > Settings - User.
- The ruler is a simple reminder to keep your code concise (for readability).
- We added white space markers and trimmed any trailing (err, unnecessary) white space on save.
- Finally, word wrapping is automatically applied
What else can you update? Start with the theme.
For example -
Simply add this to that same file.
You can find and test themes online before applying them here.
Want more features? There’s a ton of extensions used to, well, extend ST3’s functionality written by the community. “There’s a package for that”.
Package Control must be installed manually, then, once installed, you can use it to install other ST3 packages. To install, copy the Python code for found here. Then open your console (CTRL-`), paste the code, press ENTER. Then Reboot ST3.
Now you can easily install packages by entering the Command Palette (remember the keyboard shortcut?).
- Type “install”. Press ENTER when Package Control: Install Package is highlighted
- Search for a package. Boom!
Let’s look at some packages…
SublimeLinter is a framework for Sublime Text linters.
After you install the base package, you need to install linters separately via Package Control, which are easily searchable as they adhere to the following naming syntax - SublimeLinter-[linter_name]. You can view all the official linters here.
Start with the following linters:
Sidebar Enhancements extends the number of menu options in the sidebar, adding file explorer actions - i.e., Copy, Cut, Paste, Delete, Rename. This package also adds the same commands/actions to the Command Palette.
Press CTRL-ALT-F to turn this mess…
1 2 3 4 5 6 7 8
DocBlockr creates comment blocks based on the context.
1 2 3 4 5 6 7 8
Now add an opening comment block -
/** - and as soon as you press tab, it will create a dummy-documentation-comment automatically.
1 2 3 4 5 6 7 8 9 10 11 12
GitGutter displays icons in the “gutter” area (next to the line numbers) indicating whether an individual line has been modified since your last commit.
With Emmet you can turn a symbol or code abbreviation into a HTML or CSS code snippet. It’s by far the best plugin for increasing your productivity and efficiency as a web developer.
Try this out: Once installed, start a new HTML file, type a bang,
!, and then press tab.
1 2 3 4 5 6 7 8 9 10
Check the official docs to see all the expressions/symbols/abbreviations that can be used for generating snippets.
Go pimp your editor.
Want a package? It’s just Python. Hire me!
Comment below. Check out the repo for my Sublime dotfiles. Cheers!
- Sublime Text Tips Newsletter - awesome tips, tricks
- Community-maintained documentation
- Package Manager documentation
- Unofficial documentation reference
- Setting Up Sublime Text 3 for Full Stack Python Development - my other ST3 post