Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vim for Front-end Developers

Harry Roberts
February 08, 2018

Vim for Front-end Developers

When most people think of Vim, they think of hardcore programmers and sysadmins staring at green and black terminal screens all day. In this talk, I’ll demystify some of Vim’s more esoteric ways, and show how we as front-end developers can make use of its powerful features.

**N.B.** These slides won’t make a great deal of sense without their animated GIFs—sorry.

Harry Roberts

February 08, 2018

More Decks by Harry Roberts

Other Decks in Design


  1. The Ex Editor Ex is a ‘line editor’ Vim is

    a ‘screen editor’ Ex is sub-editor within Vim
  2. :wq :%s/FOO/BAR/g :v/FOO/d Save and quit Replace all
 instances of

    FOO with BAR Delete all lines
 that don’t contain FOO
  3. “ “ex was eventually given a full-screen visual interface, thereby

    becoming the vi text editor. “Although there is overlap between ex and vi functionality, some things can only be done with ex commands…” — csswz.it/2D5WLPp
  4. ed » em » ex » vi » Vim 1971

    1975 1976 1976 1991
  5. c i w
 h n o
 a s r

    i d
 g d _
 e e _
  6. v a t
 i r a
 s o g

    u s
 a n _
 l d _
  7. c i p
 h n a
 a s r

    i a
 g d _
 e e _
  8. Alphabetic CSS 1.You’re wrong 2.Automate it with a commit hook

    etc. 3.Get your editor to do it for you Don’t do
 it manually
  9. .foo { background: green; color: red; display: block; display: block;

    font-size: 12px; padding: 1em; } Whoa! We’ve got a duplicate
  10. :g/color/ normal I// Run a global command And on lines

    Containing ‘color’ Enter
 normal mode And insert // at
 the beginning
 of the line
  11. :q