Vim splits and tabs

I was doing some coding down at Portland Code School recently, and a classmate wandered by and paused when he saw my screen. “Is that Vim?” he asked. “What plugins are you using to make it look like that?” The screen he was looking at was much like this one:

vim-vsThis is actually all plain vanilla Vim–I’ve got a couple of plugins that add a little functionality (tpope’s Surround, Unimpaired, and Repeat are about it)–but nothing that changes the display of Vim at all. I’ve thought about picking up NerdTree because I’ve heard about it a lot, but I’m still feeling like a new-enough Vim convert that I don’t want to start using anything too far from the basic functionality of Vim, just because┬áthere’s so much to learn in the basic program that so many people don’t know about–which brings us back to my classmate and his question about my screen setup.

What you’re looking at there are three different JavaScript files–two Backbone views, and an Express server–for the capstone group project three other students and I did for the program. They’re in vertical splits, which are really easy to make: if you’ve got file1 open and want to see file2 next to it, all you need is :vs file2. If the files are in different directories, you’ll need to use the path to the file you want, as you might expect. To navigate to the file on the right from the file on the left, it’s ctrl-w l, and the other direction is of course ctrl-w h. You can move the splits around with the captial letters of the movement keys after the ctrl-w. There are also horizontal splits available with :sp, and you can have both kinds of splits going at once, like this:

vim-splitsAs you might guess, you use ctrl-w j and ctrl-w k to navigate to splits below or above your current file, and the capitalized versions to move splits around. It’s worth noting that when you start moving splits around you can get some pretty unexpected results–I have yet to wrap my head around it.

In all of these splits, you’ll see the name of the file below the split containing that file. In addition, at the top of the screen, you’ll see a tab highlighted in blue that shows the name of the currently active file. And that, of course, brings us to tabs. In both of the images above, you’ll see more file names in addition to those highlighted in blue. These are the active splits on the other open tabs.

To open a file in a new tab, you can use :tabe file3, again making sure to include the path to the file if it’s not in your current directory. Once you’re in that file, you can of course open up more tabs, or some splits on that tab. Moving between tabs is gt to move one tab to the right and gT to move one to the left.

With all these tabs and splits available, I’ve been able to keep ready access to the files I’m using in a not-too-complex Backbone project. A much more complex site might require something like NerdTree to keep track of everything that’s in use, but for now I’m happy with splits and tabs.



Leave a Reply

Your email address will not be published. Required fields are marked *