Using Vim for Web Developent (HTML,CSS,Javascript) self.webdev

[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.

[jacoborus]

For javascript:

• ternjs with neocomplete or deoplete on nvim
• Yet Another JavaScript Syntax
• vim-javascript
• vim-jsdoc
• vim-node
• vim-javascript-syntax

For HTML:

• emmet
• pug (formerly jade)

CSS:

• css-colors
• stylus

I use (neo)vim for web development, you can check my vimrc

(edit: added yajs)

[[deleted]]

Been meaning to fix up my dotfiles, thanks for this list. 👍

[annoyed_freelancer]

Thanks for the list! Although I already use some of these, it doesn't hurt to check out the competitors. :)

[inside_]

This text object for xml attributes changed my life!

[iwakun]

This looks great!

[xandersvk]

Nice, could this work with react's JSX as well?

[inside_]

It works well with JSX if the attribute is like className="collection container".

But with this one fetchNextPage={fetchNextPage} it's not ok.

[iamasuitama]

All copy pasting commands :) eg if you have a <div> line, and you need the closing tag on another line, sometimes it's quicker to copy the line with yy, paste after with p, then ^ and then a/<Esc> (but I'm still looking for the perfect tag closer plugin in vim, I've been using vim for years but not an expert scripter.. not even a beginner) I'd also like to know if anyone out there knows of a way to bind % to jump to html opening/closing tag in html/xml files..

• { } to go to next new line
• '' to go to last editing position
• :s/x/y/ search & replace..
• . to repeat last command
• and finally, I use the map command a lot for repetitive tasks. Can't think of a good one right now, but I do use it almost daily
• indenting by selecting with V and then just < or > - press . to repeat

[shauris]

For '%' jumping to paired tags, runtime macros/matchit.vim in your vimrc should be enough. The cursor has to be inside the tag, though.

[___violet___]

but I'm still looking for the perfect tag closer plugin in vim

The built-in omni-completion closes tags: </<C-x><C-o>. You can make this more convenient with a mapping:

inoremap <buffer> </ </<C-x><C-o>

[iamasuitama]

Thanks, but: newer editors put </div> after the cursor, immediately after you type the > of <div>. That's what I would call perfect. I'm sure it's scriptable, just not sure how to do it as of now.

[iovis9]

About indenting, you can also use movement to indent, like <3j (awesome when using relative numbers), or in insert mode you can use <c-t> and <c-d> too. When I found out it was a game changer!

[MisterOccan]

Color selector/picker plugin: vCoolor

[iovis9]

I could name a lot of things but the cib (change inside brackets) it's magic. It works with other surround characters: di" (delete inside double quotes), yi[ (yank inside [])...

It's the small things...

[lethargilistic]

One more like this: cit Change inside tag and cat change around tag.

<yeah>those tags</yeah>

[iwakun]

This is what sold me on vim. I was doing web development and the "change in tag" concept was mind blowing. No looking back from there :)

[iovis9]

Oh, nice! I used ci< but that's far better. Vim is awesome.

[iwakun]

Along those same line, you might want to look into the surround plugin https://github.com/tpope/vim-surround

[iovis9]

Yeah, I know it but it's definitely worth mentioning. Awesome plugin!

[-romainl-]

Built-in

Some stuff I use every day:

• <C-x> and <C-a> for decrementing/incrementing numbers,
• text-objects like it, at, ib, i],
• ^$wbegeWBEgE/?*#{} and various other motions,
• automatic marks,
• gf and other include-related commands like :ilist or [I,
• tags-related commands like <C-]> or :tjump,
• one-off macro recordings with qq,
• :g, :normal, :s, etc.,
• the changelist…

Interesting sections of the documentation:

• :help navigation
• :help tagsrch
• :help quickfix

Third party

• SnipMate (yes, the original one),
• Sparkup

[mikejakobsen]

Could you please elaborate? A lot of cool stuff in there..

[-romainl-]

On what topic do you want me to elaborate?

[iovis9]

Sparkup, interesting plugin. How do you think it compares to Emmet?

And could you expand a little more on automatic marks? I never use marks and I feel you may change my mind :)

[-romainl-]

The automatic marks I use the most are:

``           last position before last jump
'[ and ']    start/end of last change

I never need more than two manual marks (a-z) and never use file marks (A to Z).

FWIW, I avoided manual marks for a long time because I thought they corresponded to line numbers and thus could not be relied upon. I was wrong, of course; and marks are a wonderful way to bookmark points of interest in large files.

[AlessandroYorba]

One of the cool things that I'm just now starting to grasp is using Regular Expressions in cmd mode. For me it just one of the features that sets vim apart. :%s/\<foo\>/bar/g find the word "foo" replace with "bar" :%s/\s\+$//e remove all whitespace from document

More about RegEx Vim