Sublime Text 3 (ST3) is the latest version of one of the most widely used text editors by web developers, coders, and programmers. It is also available for Mac, Windows, and Linux, and is free to download and use.
Get the most out of ST3 with these 25 top tips & tricks to help your web dev journey. Learn about must-have packages, magic shortcuts, and more.
1. User Preference Settings
By default, ST3 uses hard-tabs that are 4 characters long. This can result in hard-to-read code, as large table indents shift your work to the right. I recommend all developers add this to their user settings (Sublime Text 3 => Preferences => Settings - User):
{
"draw_white_space": "all",
"rulers": [80],
"tab_size": 2,
"translate_tabs_to_spaces": true
}This setting changes hard-tabs to spaces, makes indentation only two characters, places the ruler at the 80-character mark (to remind you to keep your code concise), and adds space markers. Here is a complete list of preference options if you want to further customize your ST3 environment.
2. Command Palette
ST3 Command palette allows you to perform toolbar actions (e.g. setting code syntax for an opened file) without lifting your finger from the keyboard. Although the command palette can be opened with the mouse via Tool => Command Palette, the best way to get to the Command Palette prompt is using a keyboard shortcut CTRL / ⌘-SHIFT-P....
Screenshot of the Command Palette in Sublime Text 3
3. Column & Row Workspace Panes
Are you a productive coder with lots of files open? ST3's excellent text editor lets you view files side by side, so you don't have to switch between an HTML file and its CSS document:
To see two columns (vertical) of panes side-by-side use the shortcut ALT-UP-2 (PC) or OPTION-⌘-2 (Mac). Replace the last stroke with "3" or "4" to see three or four panes respectively. Using "5" produces a grid of 4 panes.
To view two rows (horizontal) of panes side-by-side use the shortcut SHIFT-ALT-UP-2 (PC) or SHIFT-OPTION-⌘-2 (Mac). Replace the last stroke with "3" to view 3 panes each.
The column is divided into two using the ST3 Group feature.
If you want to divide the panel further, you can use the ST3's “Groups” feature, either CTRL-K, SHIFT-CTRL-UP (PC) or ⌘-K, SHIFT-⌘-UP (Mac) to create new groups within the panel.
4. Package Control
ST3 comes with many features beyond what we can imagine, but you can extend its functionality even further with "packages"---plugins written by the ST3 community. An alternative way to install these packages is by using Package Control . To install it, follow the installation instructions HERE .
If Package Control is successfully installed, you should be able to find Package Control actions in the Command Palette (CTRL/⌘-SHIFT-P):
Accessing Package Control from the Command Palette
Sublime Text 3 Packages Must Have
Note: Install these packages via Package Control by opening the Command Palette (CTRL/⌘-SHIFT-P), selecting "Package Control: Install Package", and searching for the package by name.
5. Sidebar Improvements
Sidebar Enhancements extends the functionality of the ST3 sidebar and makes it easier for you to reach files and folders that are not normally available. You can also manage files via this panel.
Extended functionality with Sidebar Enhancement
6. Emmet
Emmet makes HTML coding much easier by using shortcuts based on CSS selectors. What does that mean? See for yourself in the GIF below:
Emmet doesn’t stop at HTML tags, classes, & IDs. Lorem ipsum text is something that many web developers use. Often they’ll go to a lorem ipsum generator, but with Emmet, just type lorem and hit tab. Want a certain number of filler words (like 100 words of lorem ipsum)? Use lorem100 instead.
Emmet also extends to CSS. For example, CSS vendor prefixes are always a pain, so Emmet lets you use the shorthand -bdrs to set a border radius:
7. Git
The Git package allows you to run Git commands (e.g. "Git Diff" or "Git Blame") directly from the ST3 Command Palette.
Don't know what Git is, or how to use it? Check out THIS LINK .
8. GitGutter
GitGutter shows uncommitted additions, changes, and deletions alongside ST3 line numbers:
9. SASS
ST3 doesn't come with native SASS syntax and snippet support, but the ST3 "SASS" package adds it. Highly recommended for advanced front-end developers and Ruby on Rails programmers:
10. CoffeeScript is Better
There is also no syntax and snippet support for CoffeeScript in ST3, so this package fills that gap:
11. OSX Command Line Users
If you’re using a Mac and the terminal, Sublime also includes a command line tool that will allow you to open the text editor directly from the terminal. Run the following command in your terminal to set up this shortcut:
ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" ~/bin/sublIf you use Homebrew or /usr/local/bin is in your $PATH, the command to run is:
ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl
Keyboard Shortcuts
Learning the ST3 keyboard shortcuts in and out will take you from Sublime user to Sublime expert. Here are a few favorites:
12. Multiple Cursors
Multiple cursors are a killer feature of Sublime Text. They allow you to type in multiple places at once, saving you development time. To trigger multiple cursors, place your cursor on the word you want to highlight and press CTRL/⌘-D until you have selected all the words you want. You can also create multiple cursors by CTRL/⌘-MOUSECLICKing all the places you want to have cursors.
13. Goto Anything
Similar to the command palette, ST3 has a Goto Anything (pronounced "go to") feature that can take you to a specific file, line, or method definition. Bring up the Goto Anything search bar with CTRL/⌘-P. To switch between files, start typing the file name. Since this is a fuzzy search, the search query doesn't have to match the name exactly, and you don't have to type the entire file path:
14. Goto Line in File
Goto Anything not only takes you to a file, it can also take you to a specific line within a file. If you want to go to a line in the current file, simply open Goto Anything and type a colon followed by the line number (eg: 18 for line 18). To go to a line in another file, type the file name and then a colon and the line number:
15. Goto Definition in File
If you want to go to a class, method, or function definition in a file, Goto Anything has the same syntax as going to a line. Instead of colons, Goto Definition uses @. You'll get a list of all the definitions in the file you selected and typing the name of one and pressing ENTER will take you to the specified definition:
16. Distraction Free Mode
Sometimes being the most productive coder means eliminating all distractions. No other apps, windows, tabs, sidebars, and menus. Sublime offers an easy way to do this through Distraction Free Mode. Trigger it using SHIFT-F11 (PC) or ⌘-CTRL-SHIFT-F (Mac):
17. Hide/Show Sidebar
The sidebar is useful for displaying your files and directory structure, but sometimes you need a little window space to code. Using the keyboard shortcuts CTRL / ⌘-K, CTRL / ⌘-B (in this order) will toggle the sidebar. Remember the sidebar is only visible if you have multiple files or folders open.
18. Quickly Comment Your Code
This is a useful tip if you constantly comment your code or to temporarily test how disabling a block of code affects your project. To quickly comment code in ST3, highlight the code and use CTRL / ⌘- /. If you don't have any code highlighted, using this shortcut will comment out the entire line.
Selecting Text
We've looked at how to select words (CTRL / ⌘-D) but there are some other useful selection options in ST3.
19. Selecting the Overall Line
To select the entire current line: CTRL / ⌘-L.
20. Selecting Similarly Indented Code (same element)
To select all code that has indentation (elements with the same position) directly: CTRL / ⌘-SHIFT-J.
Indentation in KBBI can be interpreted as a member of a paragraph (starting from indenting).
21. Selecting Everything Inside HTML Tags
To select everything inside the current HTML tag: CTRL / ⌘-SHIFT-A.
22. Indent quickly
Developers know the importance of indentation because it makes your code readable and easier to understand. If you want to increase the indentation of the current line, use CTRL / ⌘-]. Decrease indent using another square bracket key (CTRL / ⌘- [).
23. Pasting with Indentation
When you copy/cut indented code and want to have the indentation level maintained when pasting, use CTRL / ⌘-Shift-V paste with indentation.
24. Switch Lines
Have you ever written code, only to realize that certain lines are out of order? ST3 has a time-saving shortcut that lets you move specific lines up or down in a document. CTRL-SHIFT-UP (PC) or CTRL-⌘-UP (Mac) moves one line up, while CTRL-SHIFT-DOWN (PC) or CTRL-⌘-DOWN (Mac) moves one line down.
25. Deleting Rows
For those times when a line of code isn't broken, but just needs to be deleted, ST3 has a handy shortcut for deleting lines without having to select the entire line. CTRL-SHIFT-K (PC and Mac) will delete the line your cursor is currently on.
Once you've mastered Sublime Text 3, you can focus on writing great code and becoming a better programmer. Keep learning with online video classes taught by experts on topics in coding, business, and design.
Get started in web development with our Immersive Web Development training.
Running Code in IdeOne Compiler Online
Ideone is an online compiler that attracts hundreds of thousands of users every month.
But do you know the technology that powers Ideone?
Your favorite compiler runs using the Sphere Engine™, a proprietary technology that brings you far more possibilities than just code execution.
- Sphere Engine™ executes your code on a remote server thanks to a simple API.
- Sphere Engine™ supports over 60 programming languages, is continuously updated and equipped with popular and non-standard libraries.
- Sphere Engine™ runs in a complete & secure runtime environment.
- Sphere Engine™ comes with optional modules and a Content Management System to organize programming challenges and programming contests.
- Sphere Engine™ is used commercially in: recruitment, training & certification, education, programming contests & hackathons,
Imagine how much you can do with this powerful technology to serve your company! You can try it for free: visit www.sphere-engine.com to see a demo in action, read the full documentation, and API.