5.7 Configuring and Mastering Split Windows

One of the coolest features in Sublime Text 2 is its ability to create split windows, and especially vim users will find this very familiar. So, to have something to work with I'm gonna create a project, and we'll bring it into Sublime Text. Next I'm gonna use the fetch plug in to fetch the latest copy of HTML 5 boilerplate. There we go. And, by the way, I'm toggling the sidebar with Cmd+K+B. And each time I press that it'll toggle it. That's one you'll definitely want to remember. So let's say that you are working with index.html, and you're also working with main.css. Now I'm gonna hide the sidebar. And most of the time you'll just go back and forth between these two. But sometimes it'll be very beneficial to have split windows, especially if you're on a bigger screen. Well, we can create split windows in Sublime, by going to View > Layout and then you'll see, you have a variety of choices. On the Mac, we hit Opt+Cmd+1, 2, 3, 4, and 5 respectively. So, if I hit Cmd+Opt+2, now we have two windows. If I hit 3 for three windows, 4. And if I do 5, that's gonna create a grid for you. But let's go back to 2 by pressing Shift+Opt+2, and now what if I want to bring main.css over there? Well, you have a couple choices. One, you can just grab the folder, bring it over like so. Another way is to go to, once again, View> Move File to Group and you can see what the shortcut is there, Ctrl+Shift+2. So if I bring this back now, I hit Cmd+Opt+1 to start over, Cmd+Opt+2 and then Shift+Ctrl+2 and that's gonna move that file over. If we happen to have three panels like this and I want to move index.html all the way over to the third panel, once again Shift+Opt+3, and now it's in the third position. But I'll bring that back and switch back over to two windows. Now what if I want to change the cursor from the left side to the right side? Well, a bit awkwardly, I have to do something like Ctrl+1 to be on the first position, Ctrl+2, and now it's on the second position. But one thing that I don't like about this is, it's very difficult to show, and hopefully John will fix this in a future version. But notice how I'm going back and forth. I'm hitting Ctrl+1, 2, 1, 2. And I can barely tell. There's very little of an indicator here and that's one thing that I'm not a huge fan of. But the other thing is that if I go back to one panel, when I switch to two panels I then manually have to remember how to move a tab over if I don't want to touch the mouse. And remember it's Shift+Ctrl+2. So that's one issue, the shortcuts can be difficult to remember. And the other issue is, especially when working on a lower resolution, I frequently use a Macbook Air, is you end up in situations like this where I want to see both sides, but occasionally, I want a little more breathing room. And the only way to do that, to the best of my knowledge, is to grab the mouse and bring it over. So when I want more room here, I move that. When I'm back into index.html, I can hit Shift+Cmd+2 to make them even again and then once again, use the mouse to give myself some extra breathing room. It'd be nice if I had a shortcut for that. So let's edit some key bindings. I'm gonna go back to one panel and shift, Preferences > Key Bindings> Default. And I'm gonna look for groups. We're working with groups here. All right, so let's take a look. First, notice all these things here: cols, rows, cells. That is how we're defining the layout when we go to one of these. So when I hit Cmd+Alt+2, like so, this section here is what's defining that. So if I were to instead, set the calls to maybe .3, and then another one at .66 and then 1, if I run it again, now we have three windows, so we can see that's how it's defining it. So that's good to know. Well, why don't we create a couple helpers that will give us a little more control over the dimensions? So I'm gonna copy this right here and go into Preferences> Key Bindings > User. And I'll add a comma and add another one. So now when I press Super+Alt and we'll say left, we wanna trigger this sequence right here. And if I do it right now. Yep, it does work, but it's still doing the default. So let's change this somewhat. Instead of separating these equally in half, I'm gonna make 1, 2, .33. So now when I run it, this one only takes up a third of the full window size, and the other one takes up from .33, to 1. So already this is helpful. I can be working on a project. Maybe bring this over. And if I happen to need a little more room over here, I hit Cmd+Opt+Left. And now it's given us a third more real estate. All right, so let's mimic this and do the exact same thing for the other one. I'll make sure I add a space. And the only difference is we're gonna change this to right. And we'll change this from 0 to 0.66. So now. Super+Alt+Left, Super+Alt+Right, and we can switch between those. Now the only thing I'm noting though is, I think I might have this switched up. When I hit Super+Alt+Left, I would expect to have more real estate on the left side, but we have those switched up. So I'm going to change that. And now, when I need more real estate over here, I have it. When I wanna go back to 50-50, Cmd+Opt+2. Now the next thing that I wanna fix is how I move files around. By default, once again, we go to View > Move File, and it's Ctrl+Shift+1, 2, 3, and 4. But that can be difficult for me to do on my laptop, so I'm going to switch that up. Once again, when you can't remember what the command is, see what the default setting is. If I look for group, here we go. Move to group. So I will copy all four of those and bring them in to our user settings. Now, rather than Ctrl+Shift+1, why don't we try Alt+1. And I'll change it for each of these. I'll hit Cmd+D to create multiple cursors and switch that accordingly. So now let's try it. I'm gonna create two panels, and now if I want to move index.html over, I hit Opt+2. And now that's a little bit easier for me to remember. Opt+1, Opt+2, and we happen to have three panels, then I would do Opt+3. So our custom settings are saved. Let's go back to one panel and now we set things up exactly how we want. When we're working on both of these files, I hit Cmd+Opt+2. I'm gonna go to main.css and we can switch from tab to tab the normal way for your OS. And that would be Shift+Cmd+left bracket and right bracket to go back and forth. So we will select main.css. I'll hit Opt+2 to switch that over. I can be working on this file and if I happen to need a little bit more room I hit Cmd+Opt+ right just to give me a little bit more room on the right. And then when I'm done I can go back to 50, 50. I can hit Ctrl+1 or 2 to go back and forth. So with Ctrl+2 I'm on the style sheet. Ctrl+1, I'm in the index.html file. Once again if I need more room over here I hit Cmd+Opt+left and now I have that extra real estate. And now, we have a very flexible layout for viewing and working with split windows.