I’m in the middle of taking the “Up and Running with Sublime Text 2” course on LinkedIn Learning with Kevin Yank and thought it would be a good idea to jot down (as a tutorial) the major areas of what I think is important. All too often, I take a course and have trouble retaining what I’ve learned. Of course, I know where to look back when I need a tidbit of knowledge, but perhaps recording things here is a better, more centralized, location.
I want to mention a quick, yet interesting, coincidence here – Kevin Yank was the author of a PHP book I purchased way back somewhere around 2000. Boy, it’s been a long time. Funny how things come full circle. I still have that book.
Sublime Text seems to be the text editor of choice these days for designers, developers and hardcore coders alike. I have sort of an “against the mainstream” type of personality, so I’m continuously on the hunt for alternatives, but in this instance, I can’t help but to get involved with Sublime. Even though there are very qualified editors in the market, when I see instructor after instructor use Sublime, I think it would be in my best interest to understand and use the industry standard. By the way, Kevin Yank has a great post written about what setup he likes for his install of Sublime. Check it out if you want a behind the scenes glimpse of how a pro operates.
Sublime’s Interface
Left Gutter – Line numbers as well as arrows for expanding and collapsing sections of code. Examples of code that can collapse is functions, loops, if statements, commented areas and more. Also on that side are tab columns which offer a much more clear picture of where your code is tabbed. Very nice feature.
Bottom Status Bar – Shows line and column number of current placement of cursor. This status bar also shows your file’s current indent settings. You may edit those settings for future coding by simply clicking the current settings text in the status bar. Lastly, over to the right, Sublime displays the coding language it thinks your open file is written in and will highlight the syntax accordingly. To alter that highlighting, simply (again) click on the current text that’s shown in that status bar and a menu will appear.
Right Column – A mini map of your code is displayed. This map shows your code in its entirety and allows for simplified scrolling through long documents.
Keyboard Shortcuts & Helpful Actions
Windows / Mac
Ctrl+N or Command+N – Create new file. Opens new tab called “untitled.” You may also choose “New File” from the File menu.
Ctrl+O or Command+O – Opens existing file. You may also choose “Open File” from the File menu. You can also drag your file over into the application window (while Sublime is running) or simply drag your file over to your desktop icon (while Sublime is not running). That’s a fun one.
Ctrl+W or Command+W – Closes existing file. You may also choose “Close File” from the File menu.
Ctrl+Shift+T or Shift+Command+T – Re-opens most recently closed file. You can choose to do this via the File menu by clicking on “Open Recent.”
Toggling Between Tabs
Alt+ or Command+(Number On the Keyboard) – Choose the number on your keyboard that corresponds to the placement of the tab you’d like to work on. Toggles between tabs easily if you’ve got fewer than ten tabs open.
Ctrl+Page Up / Page Down or Option+Command+Left/Right Arrow – Toggles between open tabs sequentially.
Ctrl+Tab – Toggles between the most used tabs. Great for saving time focusing only on “working” files.
Ctrl+P or Command+P – Displays list of open files as a drop-down. It’s also searchable.
All of these commands can be found under the “Goto” menu.
Cool Editing Features
Line Endings – You can choose what types of line endings you want your file to include by clicking “View > Line Ending” from the top menu bar.
Spell Check – You can have your document spell checked by Sublime by choosing “View > Spell Check” from the top menu. Misspelled words will appear in your code with a red underline. To be presented with suggestions for the correct spelling, simply right click on the misspelled word.
Indenting – Ctrl+] or Command+] (those are right brackets) to indent blocks of code. To unindent, simply choose the other square bracket. For multiple indents, keep clicking the square bracket. If you’ve unindented too far, click “Edit > Line > Reindent” and Sublime will indent how it sees fit.
Bracket Matching – Sublime identifies opening and closing brackets. Use Ctrl+M to jump between them with your cursor. Works for brackets, parenthesis and curly braces. To take advantage of this option from the top menu, click “Goto > Jump To Matching Bracket.”
Split Windows & Layouts
Sublime Text has some really nice features for splitting up the windows you’re working in. If you have multiple files open, you can click “View > Layout” from the top menu bar and choose what you want your layout to look like. It you want to toggle between your working files, you can use the Ctrl+1, 2, 3 and so on keyboard shortcuts. To get your files in the new panes once you choose your layout, simply drag each tab where you want. If you want to go back to a single window, no need to drag your tabs again. You only need to choose the single window option from the top menu.
If you’d like to work on one file, multiple places simultaneously, you can do that. Go to the top menu and choose “File > New View Into File” and your working file will be duplicated as another tab. Drag that tab to another window and begin editing. You’ll notice that any change from one view will instantly change the other view as well.
Opening Folders & Working in Projects
If you’d like to open a folder in Sublime, simply drag the folder into the workspace. You’ll notice the left bar opens with your folder structure available. Alternatively, you can also click “File > Open Folder” from the top menu.
If you’d like to save the folder as a project, you can click “Project > Save Project As” from the top menu and you’re project will be saved. If you open multiple projects, you can switch between them by clicking “Project > Switch Project in Window” (Ctrl+Alt+P or Ctrl+Command+P). Remember that all changes will remain and files will be saved when switching through projects.
Finding & Replacing
Sublime’s find and replace features are really good. I’m sure it’s one of their best selling points. Below, I’m going to list out some keyboard shortcuts and after that, I’ll offer up some commentary on a few.
Find – Ctrl+F or Command+F – Searches current file. Utilize the “Enter” key to progress through the search results.
Note: When you perform a search, option buttons appear to the left of the search bar at the bottom. Those option button are: Regular Expression (Alt+R), Case Sensitive (Alt+C), Whole Word (Alt+W), Reverse Direction, Wrap, In Selection and Highlight Matches.
The buttons on the right of the search bar are: Find, Find Prev and Find All.
To close the search box, click “Esc” on your keyboard.
Find Next – F3
Find Previous – Shift+F3
Incremental Find – Ctrl+I or Command+I – Searches and after hitting “Enter” you’re cursor is left at your first result. If you click the “Esc” key while using Incremental Find, your cursor will return to its original location.
Replace – Ctrl+H or Option+Command+F – Replaces text. You also have the ability to keep your text case if you use the “Preserve Case” (Alt-A) button down to the left of the “Replace With” field.
Replace Next – Ctrl+Shift+H
Quick Find – Ctrl+F3
Quick Find All – Alt+F3
Quick Add Next – Ctrl+D
Quick Skip Next – Ctrl+K, Ctrl+D
Use Selection For Find – Ctrl+E
Use Selection For Replace – Ctrl+Shift+E
Find in Files – Ctrl+Shift+F – One of the coolest features of Sublime’s search (in my opinion) is the ability to search across files. If you use the shortcut I listed above, you can search within your entire project. The results are shown in their own tab. As you browse your results, you can double click on your results to land exactly where your search result is within its file. I first saw Carrie Dils performing this type of search during her Genesis class and this feature by itself is part of the reason I decided to take Kevin Yank’s course.
If you don’t like the separate tab option, you can choose to have your results shown in their own box below your files. Same thing there – just click the results in that box and you will land on your desired code. To jump through your search results, simply press F4 on your keyboard.
Personally, I think these search features alone warrant the money paid for the registered version of Sublime Text.
PS – Check out this post by CSS Tricks to learn some great features Sublime Text offers.
Customizing Your Sublime Text Editor
There are some pretty neat ways you can make your install of Sublime look and act the way you want it to. In this post, I’m going to go over a few of those techniques. And since I’m running Windows, the instructions I give will be geared towards my machine.
Adjusting Your Settings
If you open Sublime Text and click on “Preferences > Settings – Default” from the top menu, you’ll see a file that looks like this:
This file is where Sublime holds your preferences. Now, if you scroll through all the lines in this file, you’ll most likely see something you’d like to change. There are some enticing options, such as to show or hide the gutter, what you want your margin to be, your font size, whether or not you want spell check. Tons of lines and they’re all begging for you to start editing. Don’t do it!
This isn’t to say that you shouldn’t edit your preferences. You just shouldn’t edit them in this file. Where you want to customize your editor is in your user preferences file. The way to find that is to click “Preferences > Settings – User” from the top menu. If you open that file, you’ll see something that looks like this:
Yes, it’s basically an empty file. It does have a line or two of text up top, though, that says:
Code:
// Settings in here override those in "Default/Preferences.sublime-settings", and
// are overridden in turn by file type specific settings.
{
}
If you’re familiar with CSS or how WordPress templates work, this should be easy for you to figure out. These settings files cascade just like they do. To adjust your preferences, what you want to do is to find the line you want to edit in the “Preferences > Settings – Default” file, copy it and then paste it into the “Preferences > Settings – User” file. It’s simple. Here’s an example.
Say I want to edit the font size my editor uses for the code that displayed on the screen. Like I said above, I’d go into the default settings file and find the area where the font settings are held. On my install, it looks like this:
Code:
// Note that the font_face and font_size are overridden in the platform
// specific settings file, for example, "Preferences (Linux).sublime-settings".
// Because of this, setting them here will have no effect: you must set them
// in your User File Preferences.
"font_face": "",
"font_size": 10,
All I need to do is to paste that code into the user settings file, in between the curly braces (while updating the font size). In this case, my edit would look like this (in the user settings file):
Code:
// Settings in here override those in "Default/Preferences.sublime-settings", and
// are overridden in turn by file type specific settings.
{
"font_size": 12
}
Notice how I left off the comma.
I want to let you know that you can also customize your settings by file type, per syntax, per project, etc…If you want to learn how to do that, check out Sublime’s settings page. They give some excellent instructions. Also, if you’d like to expand on the instructions I just gave you regarding the settings file and your available options, you can check out Scott Granneman’s page on just that.
Adding a Custom Theme to Sublime Text
I’ve heard some grumbling out there regarding the “stock” look of Sublime Text. I’m not sure what these folks are referring to because I kind of like the way this editor looks right out of the box. But, since Kevin Yank is going over how to update the current theme to the “Soda Theme” in his course, I guess I’ll play along. But this isn’t something I would do. If you sense my lack of enthusiasm, this is why.
Okay, these are the instructions that were given to me in order to update to the Soda Theme.
1. Head over to GitHub at this URL (https://github.com/buymeasoda/soda-theme) to find the available download of the theme.
2. Download the theme by clicking the “Download Zip” at the bottom of the right column.
3. Unzip your folder and rename the “soda-theme-master” to “Theme – Soda” (it’s very important to name it exactly as you see here).
4. In Sublime, click “Preferences > Browse Packages” in the top menu and you should see a folder open. Drag or copy your “Theme – Soda” folder in that packages folder.
5. Once that’s done, click “Preferences > Settings – User” and inside that file, type:
Code:
{
"theme": "Soda Light.sublime-theme"
}
6. Lastly, close Sublime Text and then re-open it. Your changes should now take effect.
Updating Your Color Scheme
Color schemes in Sublime are super simple to change. To update to a scheme that already ships with Sublime, simply click “Preferences > Color Scheme” from the top menu. From there, you’ll see a drop-down menu from which you can choose something to your liking.
If nothing appeals to you there, you can shop around on Google for something else. I just did this and came across a website that offers all sorts of color schemes for Sublime. It’s called, “ColorSublime” and it’s pretty good.
If you’d like to download a color scheme from someplace like GitHub, just follow the instructions I gave you above for how to add a custom theme. This time though, after you add the folder to your packages folder, you’ll need to choose your new scheme from the Color Scheme menu I just described.
Customizing Your Key Bindings (Keyboard Shortcuts)
If you’re used to a certain keyboard shortcut doing a certain thing and just can’t get past the fact that Sublime uses that keyboard shortcut differently, you can change the situation. What I’m trying to say here is that you can alter Sublime’s standard settings for shortcuts.
The way to do this is to, first, check out what the default key bindings for Sublime are. Simply click “Preferences > Key Bindings – Default” from the top menu and you should see something like this:
Do you remember when I told you that you shouldn’t edit your default settings? Well, the same thing goes for this file. Don’t edit it. And if you couldn’t figure this out already, the way you customize a key binding is to grab (copy) the lines you want to change from the default file and paste them into the “Preferences > Key Bindings – User” file. So, if you wanted to switch the copy keyboard shortcut (Ctrl+C) with the paste keyboard shortcut (Ctrl+V), all you would need to do is copy this from the “Preferences > Key Bindings – Default” file:
Code:
{ "keys": ["ctrl+c"], "command": "copy" },
{ "keys": ["ctrl+v"], "command": "paste" },
…and paste it into the “Preferences > Key Bindings – User” file. It would look like this:
Code:
[
{ "keys": ["ctrl+v"], "command": "copy" },
{ "keys": ["ctrl+c"], "command": "paste" }
]
Notice how I switched the “c” and the “v” and how I left off the last comma. You can do this for any key binding you see in the default file.
Editing Code in Sublime Text
From what I’ve heard and read, programmers love to code quickly. If you’ve ever had the chance to watch an experienced programmer at work, you know what I’m talking about. Even tutorials on Youtube sometimes include someone who’s flying around at the speed of sound. That style isn’t great for teaching, but it sure is good for getting things done.
Sublime has many features to assist in speeding up the editing of files. Speeding up editing means speeding up work – and that means finishing projects with the most efficiency possible.
In this post, I’m going to go over some techniques programmers use to code like it’s, well, their jobs. It’s good stuff.
Selection
I’m going to quickly discuss the “Selection” menu in Sublime Text. There are many handy tools you can use to speed up your selecting of text and code in your files. I’ll show the keyboard shortcut and then explain what each does.
Ctrl+A – Select everything in the file.
Ctrl+D – Select the word your cursor is on.
Ctrl+L – Select the line your cursor is on.
Ctrl+Shift+A – First, selects the contents of a tag your cursor is in. If you continue hitting the “A,” your selection will expand to include the tags themselves, then their containing tags and eventually the entire page of code.
Ctrl+Shift+M – Selects the contents of a set of brackets. If you continue to hit the “M” key, your selection will expand to include the brackets themselves, their parents, and onward. Brackets are considered parentheses, square brackets and curly braces.
Ctrl+Shift+J – Selects the indented area your cursor resides (and indented children). If you start at a multiple indented piece of code and continue to hit the “J” key, your selection will expand upward to cover the each parent. So, if you start at the furthest child indentation, it will step up to cover each parent, but if you start at the highest parent, you will select all children at once.
Ctrl+Shift+Space – Selects everything within a certain scope. If you have colored code in Sublime and your cursor is residing in some of it, you will select all the colored code in that scope.
Expand Selection to Paragraph – Select the paragraph your cursor is in. Paragraphs are considered blocks of code that have an empty line before them and after them. They needn’t be real paragraphs. Currently, there is no keyboard shortcut assigned to this, but you can get there by “Selection > Expand Selection to Paragraph” in the top menu.
Alt+Left or Right Arrow – Instead of moving one letter at a time, your cursor moves one word at a time.
Alt+Shift+Left or Right Arrow – Instead of only moving one word at a time, your cursor selects each word you move to, progressively.
Transposing & Swapping
Ctrl+T – If you place your cursor between two letters, you can transpose them with each other. They will simply switch positions.
Ctrl+Shift+Up or Down Arrow – If you would like to move an entire line up or down through your code, use these keys. Also works for any chunk of code you highlight. You can move the whole chunk.
Bookmarking
Under the “Goto” menu, you can find a Bookmarks side menu. I’ll go over some bookmarking features below.
Ctrl+F2 – This will create a bookmark (small arrow) in the left gutter of the line your cursor resides. If you are on a laptop like I am, and you have to click a “Fn” key to select your “F” keys, you will need to hit Ctrl+Fn+F2. It works just the same.
F2 – This will move you to your next bookmark.
Shift+F2 – This will move you to your previous bookmark.
Ctrl+Shift+F2 – This will clear all your bookmarks.
Alt+F2 – This will select all your bookmarks.
Just as a side note, once you create a bookmark, the line it’s on will appear in the “Goto > Bookmarks” menu. Clearing them will make them disappear from that menu.
Goto Anything
Ctrl+P – Will pull up the Goto Anything menu. From there, you can search files in your project. If you want to just browse each file in the menu, hit the up and down arrows.
# – If you type the # symbol while the Goto Anything menu is open, you will enter fuzzy matching mode. You should see many items appear in Various rows. You can either click on one of those items or start typing any letters in the text you would like to find. If the word “dog” appeared in your code somewhere, you would simply need to type “#dg.” If you wanted to find “bird,” you would simply need to type “#bd.”
Partial File Name+# – If you have a project open and would like to search a specific file for something, you would only need to type a partial file name (until that file shows in your search bar) in the Goto Anything menu and then the # symbol.
:+Line Number – If you would like to search for a specific line number in the GotoAnything menu, simply type a “:” and then the line number and you will jump right to that line number.
Partial File Name+:+Line Number – If you’d like to take a glance at a line in a file that’s not open, in the Goto Anything menu, type the partial file name and then “:” and the line number. You would jump right to that line without opening the file.
Command Palette
Ctrl+Shift+P – This palette offer a list of all available commands. Accepts fuzzy matching for searches of those commands. Basically, if you would like to quickly search for a command, open this menu and start typing what you think the name of it is. Your choices will be filtered as you type and the closer you get, the clearer your choices will become.
Multiple Selection
If you’re reading this post, you’ve most likely seen the multiple selection feature of Sublime Text. If you’re like me, your mouth probably dropped open when you saw it. It’s one of those really, really neat things to be able to do.
Ctrl – To make multiple selections with your cursor, simply place your cursor where you would like your first selection and then hold down the “Ctrl” key. Then, click each next spot you would like to select. When you are finished, you should have multiple blinking cursors.
Ctrl+Alt+Up or Down – Instead of clicking each area you’d like your additional cursor to be, you can simply click the first one again and then click the Ctrl+Alt+Up or Down keys to trail your cursor in either direction. When you’re finished, you should have the same as above – multiple blinking cursors.
Ctrl+Shift+L – If you’d like a different way to make multiple selections, you could highlight the lines you’d like to make your selections in and then split those lines. Once your lines are highlighted, click “Ctrl+Shift+L” and you’ll see your cursor blinking at the end of each line. Just hit the left arrow to move your cursors to the beginning of each line and then the space bar to the spot you’d like to make your edits. You may also click the “Alt+Left or Right Arrows” to jump by word.
Kristina says
Great stuff. I’ve been using Sublime for a few years now and had no clue about the preferences or how to change the settings between default and user. Thanks!
Kody says
I’m still learning from you as I’m trying to achieve my goals. I definitely liked reading everything that is posted on this site. Keep the stories coming. I liked it!