I'm new to editing html with VIM. I'm using matchit, ultisnips and surround to help me along the way.
One area which I can't seem to accomplish easily is editing attributes.
I want to go from: (cursor is |)
<input type="submit|" name="some_name" value="" id="some_name">
to:
<input type="submit" id="submit_button">
What is the fastest way to do this? Right now, I'm doing a lot of 'f' based searches.
I usually just use dW, which deletes the name, equals character and the value in parenthesis (including the parenthesis).
In some cases if I want to delete the rest of attributes to the end of the HTML tag I'm using dt/ (delete everything until you find / which is the end of input tag <input ... />)
I was also looking for a solution for this, and using w and W wasn't working great for me when dealing with AngularJS where you can have attributes like this:
<input ng-show="product.inUse" ng-model="product.customerPrice" />
What I've started doing is moving my cursor to the whitespace before the attribute, for example here:
<input| ng-show="product.inUse" ng-model="product.customerPrice" />
Then press d2f" (y instead of d for copying), which gives me:
<input| ng-model="product.customerPrice" />
It will look for a " character two times and delete everything including the last one.
Possible solutions
wd2W
This method requires counting so maybe you would rather do wdW and just hit . until it is correct.
wd/ id<cr>
Moves to the next word so the start of name=".." the delete with d til / id. This solution can also delete across lines. You can use /... with other operators as well, e.g. c, y, and =.
Of course you can do the method you are using currently with f and just repeat with .
For your example, I would use: wdw.....wwci"submit_button
w to move at the end of the current wdw to erase a "word". to repeat the last command and erase as many word as you want.ww to move quickly between the "ci" to change content inside "submit_button See :help text-objects for more explanation on ciw. (please not there is a tag text object so you can things like cit to change content of a tag quickly.
You could probably use something like wd4w but you have to be sure beforehand that you want to erase 4 words.
Have you heard about Zencoding.vim ?
This is plugin designed to quickly write html or css.
I am not sure there are features to edit, but to write new codes it beats everything.
I would use ci> and retype the form. Lot of times my snippets have tons of attributes I don't need like <form action=""> so ci> blows it up and lets me start from scratch when I need to. I find it faster.
<input type="submit" name="some_name" value="" id="some_name">
You can also use dt>, it will delete until the character >
dwxda".dwto delete the attribute name,xto delete the=, thenda"to delete everything inside the quotes, and the quotes themselves.dW(this includes the name, the=and the quoted value). Unless it's the last attribute before the tag's closing>. In that case I'd use2df"or @Will's solution.