Getting the most from Sublime Text 3
For those new to programming the learning curve can be very steep in the initial stages. Making a decision on which text editor to use is important as the features can vary significantly between different editors. Picking Sublime is an excellent choice and spending a little time getting to know its shortcuts and some of its package extensions is definitely time well spent.
Useful shortcuts
Sublime by default has some pretty cool features included. The list below is a small list of some of the best shortcuts I think you should be using.
- Command + B: Runs your current file in the correct environment and displays the results in a console window. You have to have the file saved for Sublime to know which build environment to use. (Click here to see it in action)
- Command + /: Makes the current line a comment. Partcularly useful in languages like HTML and CSS where there is opening and closing comment tags. If you want to comment out mulitple lines highlight and and use Command + /. If the line is already a comment it will remove the comment tags. Simple and a real time saver. (Click here to see it in action)
- Command + Control + ↑ OR ↓: Coding and found a bug? Realised you need to change the order of your code. Command + Option + ↓ will allow you to move your current line down the page without the need to copy and paste. Need to move multiple lines? Just highlight the lines you want to move and use Command + Option + ↑ OR ↓. (Click here to see it in action)
- Command + [ OR ]: Typing code and realise you have forgotten to indent the code? Command + ] will add the indent for you, no need to move the cursor to the beginning of the line and use tab. Command +[ will remove extra indents. If you’ve modified existing code and need to add or remove an indent on multiple lines, highlight the lines and Command + ] will add the indent to all the selected lines. (Click here to see it in action)
- Command + K Repeated: Repeating this combination twice deletes the code on the current line from the cursor on. (Click here to see it in action)
- Command + D: Selects next substring. If you’ve decided your variable name and too vague and want to change it, using Command + D will give you multiple cursors to delete and type in multiple locations. Also useful in HTML when you decide the change a h4 element to a h5 using Command + D twice selects the opening and closing tags. You need to try this to see how cool this feature is! (Click here to see it in action)
If you’re not using a Mac most of the commands in this tutorial can be run in Linux by using the control instead of the command key.
Changing Sublime Defaults
Command + , will open sublimes settings in a split windows. The left is Preferences.sublime-settings — Default and the right is Preferences.sublime-settings — User. Any settings you wish to change should be done in the User window as any changes made in Default will be overwritten when Sublime updates, but the User’s file will persist. My User file is quite simple — I like to change the default tab behaviour translate them to spaces with the spellchecker on. (It can get in the way sometimes but it can also pick up simple typo’s that are a pain to debug). So my User file looks like this.
Snippets
Selecting Tools → Snippets will open a menu of snippets available for your language.
This is a small selection of Snippets available in Ruby. Each snippet comes with it’s own Tab Trigger. For example if we wanted to use the when …. Snippet instead of opening the Snippet menu when can type when + Tab and when text will be converted to the code within the When Snippet.
If you think the default Snippets are not quite to your liking you can download other developers Snippets which they have created and shared on Github, like these Snippets made for use with ERB. (included as part of the Ruby on Rails Framework)
If this still isn’t quite to your liking you can create your own. Tools → Developer → New Snippet. This will open a template where you need to replace the sample Snippet with your code. The code below is a basic template for a new HTML5 page I made.
If you copy and paste the above code into your Sublime text and save it you can see how it works. You can name it however you like but the file extension must be .sublime-snippet. To use it you must be in a file that has been saved as html (It can be blank, but because we set the scope to text.html it will only work in html files). Simply type html5 → tab and the following code should appear.
If it doesn’t work you might have your keyboard set incorrectly. I had to change mine the US in the Operating System to get the Tab Trigger to function.
Adding Package Control
Adding third party packages can be a real time saver and can be surprisingly helpful when you are learning a new language. The easiest way to access these is to install Package Control. The installation instructions change as the maintainers update Package Control so you will need to visit their site and follow the instructions.
Once installed restart Sublime and use Command + Shift + P. Once the menu appears type ‘Package Control: Install Package’ until you see it appear and click it. Now a new menu will appear and you can start typing the name of the package you wish to install. Once you see it click it that’s it, you will see it install in the status bar then it’s ready to use.
Whilst the list below is a few of the packages I like, Package Control also has a list of all the available packages listed in order of popularity here. You should spend a little time here and see what’s available to help you becoming a productive programmer.
Emmet
Adding Emmet will give you some great shortcuts for writing HTML. Not having to write out the opening and closing tags is a massive time saver. To get the most out of Emmet will require you to read the documentation (it’s a good habbit to form so start now if you haven’t already) and find a good how-to video, this will be a must have once you see how it works.
With Emmet we can use CSS like syntax for creating Classes and ID’s to create long HTML code quickly. Not only does Emmet do it for us by using tab to convert Emmet Syntax into HTML but we can also tab through our elements. Emmet knows you will want to add text between each <li></li> and will position the cursor there for you.
You can see above the code created with the single line in the original index.html. If you plan on doing HTML you need Emmet.
GitGutter
GitGutter is a simple package that helps us track the changes since the last commit. If you start seeing the green + signs throughout your code it’s a sign you probably need to commit.
Terminal
You can probably already guess what Terminal does from it’s name. Working on a rails app and want to start the server or add the changes to Git? Terminal gives us a shortcut to opening the terminal in the current file or project folder. Just use cmd+shift+t and you’re in the right directory to commit or start your rails server.
Snake
Frustrated with a bug in your code you can’t find? Why not unleash a snake and gobble up lines of code. Not particularly useful but think of it as a bit of therapy to recharge the brain. Who knows, maybe the snake will gobble up the offending code and fix things? Well, it won’t but it’s a bit of fun anyway.
All you need to do is press command + shift + alt + s to play. It starts a new window with a copy of the code you’re working on. There’s not much to it, just keep a track of your high score and enjoy!
Conclusion
Whilst this is a brief introduction to Sublime Text I hope you found it useful. If you have things you think should be in this tutorial or corrections to help new comers to Sublime Text and coding, you can contact me via Twitter @rhysonrails or visit rhysbrooker.com. I hope you enjoyed this article… and happy coding! :)
