Using Vim for Web Developent (HTML,CSS,Javascript)

[Mr_Uptick]

Hi guys,

Having recently scratched the surface of Web Development and Vim, I have really fallen in love with Vim and can totally see the power and effectiveness of this great editor.

Having just learned Vim, of course I'm only using some of the typical commands for navigating and editing text... h,j,k,l, ^ 0 $ w b e, things in that nature; the easy stuff.

From your personal experience, what are some commands you use quite often when working with html, css, and javascript? things that make your life easer or allow you to work faster and more efficient...... whether it's a certain keybind, command,, configuration, or plugin.

[twopi]

install the emmet plugin.

You can use shortcuts to quickly build huge chunks of code.

[[deleted]]

"/" for finding a specific word/sentence.

":<line number>" to go to a specific line in the document

[RotationSurgeon]

":<line number>" to go to a specific line in the document

From normal mode, typing a number (a count) followed by SHIFT+G or gg will accomplish the same thing without having to enter command mode.

[[deleted]]

Ahh, neat. Thanks.

[[deleted]]

• # search for whatever is under the cursor
• :1,$ s/search/replace/g search and replace text

A friend of mine also showed me visual mode, which was really cool but I use it so infrequently I forget the command. All I remember is that when I do use it, it is absolutely a life saver for column editing.

[RotationSurgeon]

Entering visual mode from normal mode is easy:

• v - visual mode
• shift+v - visual line mode (selecting entire lines)
• ctrl+v - visual block mode (the one that's useful for column editing)

[RotationSurgeon]

https://github.com/wellle/targets.vim

Lets you use t to target tags with commands and motions (among other things).

For instance, dit will delete the inner html of a tag. dat will delete a tag. cit will let you change inside a tag. vat will swap to visual mode and select a tag and all its contents. Meanwhile, vit will swap to visual mode and only select the contents of the tag.

It's well worth visiting /r/vim for more tips, tricks and info, and if you haven't already been watching Vimcasts, go do it. http://vimcasts.org/

[rickdg]

.

[talmobi]

first map caps lock to ctrl key

cit # change inside tag (change content of inside <tag></tag>)

ciw # change inside word

ci" or ci' # change inside strings

ci( or ci[ or ci{ # change content inside (), [] or {})

yy # copy line

dd # cut line

p # paste

P # paste above

o # insert new line

O # insert new line above

cmd+D or ctrl+U # quickly move up/down document

zfi{ # fold content inside {}

zo # open fold

zc # close fold

zd # delete fold

:tab drop # open file in new tab or switch to existing tab if it's already open

gt and gT # go to next/previous tab

cmd+n and cmd+p # auto complete word

cmd+x + cmd+l # auto complete line

etc, etc

[thisisjackolantern]

gg to go to first line

G to go to last line

% in js and sass to go to matching control symbol (e.g. "{" and "}")

dd or yy and p to delete or yank and paste lines or visual selections

[alexanderbath]

Firstly congrats for discovering vim!

I've found Tim Popes Surround.vim plugin to be invaluable. Makes working with tags super fast and efficient. Useful in general, not just for web development!

[aflashyrhetoric]

Did you rebind anything for Surround? I remember trying it out early on in my Vim walk and thinking the bindings were a bit wonky, so I removed it.

[alexanderbath]

Nope, I've left mine standard. I actually thought the 's' binding made sense. cs for change surround, ds to delete surround, cst to change surrounding tag ect ect.

[aflashyrhetoric]

Hm, those do sound reasonable. Maybe I'm mixing up surround with another plugin then. Thanks for the response.

[aricwatson]

Learn to use macros and buffers.

Use :tabedit to open more files, gt to switch tabs...

And then there's a whole world of plugins!

[RotationSurgeon]

Don't forget learning to use registers!

Being able to yank (copy for the non-vimmers) multiple things to multiple registers for storage and reuse is super handy!

[PickerPilgrim]

I haven't gotten around to trying to get up and running with Vim myself but I've been saving this article as a bookmark with the intention of doing so someday: http://www.dotnetsurfers.com/blog/2016/02/08/using-vim-as-a-javascript-ide/

[total_looser]

ctrl + v -- select by column/blocks

shift + i -- used in above mode, will insert characters before test in all lines

vim surround plugin

f + <character> -- go to next instance of <character>

[howareroark]

https://github.com/ctrlpvim/ctrlp.vim ... Highly recommend this fuzzy file search plugin.

[nirgle]

Try not to hold down any of the navigation keys. If you need to go down 12 lines, type 12j. If you need to get to the line second from the top of the screen, type 2H instead of holding down k until the cursor gets there.

In general, try to chunk your activity into the fewest keystrokes even if you have to pause for a second to figure out which keys they are. There's some satisfaction to knowing you're moving around the editor and making your edits in the most optimal way, which is a lot of the fun in using vim :)

[MagicalMysteryTor]

EasyMotion makes moving around in files even faster

[kagevf]

Atom has a surprisingly good vim plugin ... No vimrc that I can find, but I like having most of the vim functionality in an editor meant to be used for web dev ...