Advanced Editing Commands in Vim
Since one of the top reasons to use Vim is efficiency, this guide focuses on efficient ways that you can edit files. Included in this lesson is a walk through on how to quickly edit HTML, JavaScript and CSS files.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

I've been really excited to start on this lesson, because this lesson is gonna walk through some of the very powerful kind of editing tools that you have available in Vim that you really just don't see in many other text editors. You're just gonna be able to see all of the power and automation, I shouldn't say all, because there's a lot more than this, but it should at least start kind of putting you on the path where you can see all the cool things that you can do in Vim.

I'm not sure if you've ever watched any kinds of professional coding screencasts before, where the developer was using vim, and some of the things they do may look like magic, where they are making things happen on the screen all over the place, and it seems like all kinds of automated editing processes are occurring.

Well that is all possible with the way that Vim is structured, and I gave the last lesson and focused on talking about some of the shortcut editing commands like CW. And I did that because that is gonna be the foundation of a lot of the things that we're gonna talk about in this guide that is gonna let us have some really automated editing tools as developers. So right here I created a basic HTML file, and let's kind of do a little bit of review on CW.

So if I skip ahead, say that I want to get rid of give and change this to gave, I could type in CW, it'll get rid of that, switch me into insert mode and I can instantly start typing gave. Now in addition to this, we also have the ability in Vim to pass arguments that will let us create any kind of customization we want. So for example right here, we have the you character and if I switch into visual mode, I'll highlight this. So you is one word, a is a second word, complete is a third word then account. So that's four words right there.

Say that I want to get rid of that entire section where it says you a complete account. Now if I come to you right here, and I type in four CW, then it will actually get rid of all four those words.

large

So CW and just the command C is one of my favorite parts of Vim, because it has so much flexibility. So right here we were able to delete four words just by typing the command four C and W, and that got rid of it for us. But now C has so much more that it can offer. So that gets rid of a word and then that got rid of four words. Let's see what we could do.

Let's say that you have this HTML code right here, and you need to get rid of all of it. So say this is lorem ipsum text, but now you have a ton of actual content. It would be really clunky to do something like switching into visual mode, and then going down and then having to go backwards. Yeah that's not the way that you want to go and edit these items, and then you'd have to delete and then start typing.

Instead what you can do and this is something available in Vim with the cit command, and just so you can see it, this is cit. What this stands for is this is going to change all the text, all the way up within the tag. That's what the T stands for. So this is also going to show how Vim's familiar with HTML and different programming languages.

Watch what happens if I type cit, you can see that it got rid of all of the content inside of the tags, that's what cit stands for.

large

Now I can start putting in any other content I want, it switched me instantly into insert mode. When I first saw that in Vim that was one of the things that actually sold me on just loving it and just loving how powerful it is, is that this gives me the ability to instantly make changes without having to go and highlight things, and it does it on a programming specific kind of level, which I just find fascinating.

And to prove that let's close this out and I'm gonna create a JavaScript file. So I'm gonna say application.js, and inside of this let's just create a function, and we'll just call it myFunction. It won't take any arguments, and then inside of this we can just have a few console log statements. So hey and there.

funciton myFunction() {
  console.log('Hey');
  console.log('There');
}

So very basic and dead simple kind of JavaScript function. Now as you notice before in HTML, we were able to do cit and that went and it deleted everything in the tags.

Now in JavaScript you have the same kind of functionality except the command isn't cit. CI is incredibly flexible and it lets you pass any items, so right here you notice with JavaScript we have curly braces. We have a curly brace here at the end on this side and then we also have curly braces right here on line four.

So what we can do is type in C I and then curly braces, and I did the left curly brace and that deleted everything inside of the curly braces.

large

When I saw this I just fell in love with it because no longer did I have to go and get my cursor and drag it over all the items inside of a function when I needed to clear it out and I didn't have to go delete items manually. I was able to very quickly and efficiently implement this type of behavior.

And as you may have guessed, this also applies to CSS. So say that I have some type of class rule here and all kinds of rules, so I could have, you can imagine all the different things. And many times CSS rules can have a ton of rules. So you could have 30 items inside of here, you can run the same command.

So from anywhere with inside of this and that is the one thing that you have to do. You have to be inside of the code that you're wanting to edit. I can run CI curly braces and it's going to wipe all those out for me and switch me into insert mode, so that I can start typing those in.

large

So I absolutely found this to be one of the most fascinating things I had ever done when I started learning Vim. And its really what sold me on it. So we're still not stuck with this though, so we're not stuck with just curly braces and HTML tags. We can run these type of commands and these type of editing commands on any element and the only rule is you have to be inside of it.

So say that we have something like a font family declaration, and it's something like this. And so what we can do is say that we're in the middle of it and we don't want to have to circle back to go to the front to run CW. All you have to do is run CI and then whatever the border element is. So in this case the border element are these curly brackets.

So we have a curly bracket here and we have a curly bracket right here. So all you have to run is C, I'm sorry not curly bracket, double quotation marks. So anything that we want to run, we can run as long as we're inside of it. So with those elements and seeing those elements I can run CI and then run the quotation marks, double quotation marks. So CI quotation marks and look at that.

large

It deleted all of those items and switched me into an insert mode where I can go and type a different type of font just like that, and this does not have to be something that is specific to a single line. So say that we switch back to our example code here and we have let's see. So say on this paragraph, notice how we have quotation marks starting here and they go all the way down almost to the end.

large

If we are inside of this, so let's say we want to go right into the middle right here. If I type in CI and then the quotation marks, it removes all of those items just like that. And then it switches me into insert mode and I can start editing just like that.

large

So that is I spent a little bit of extra time to give you all kinds of different examples so that you could see the power of that, and this hopefully starts to kind of put in your mind the power of what you can do with vim because you can truly use these type of commands and extend them no matter what programming language you're using or no matter what you're doing.

The author of the Game of Throne books, a lot of people don't realize he actually wrote the entire book series in Vim. So as a developer this has some great powerful tools but you can also use Vim to the write books or blog posts or anything like that. And the more that you use it, if you're like me the more you fall in love with all of the different little customizations and efficiencies you can have and when it comes to editing files in VIm that's really where I think it shines and it's part of the reason why I love using it as an editor.