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. Vim for
 Front-end Developers Harry Roberts • @csswizardry

  2. None
  3. Hey!

  4. I’m Harry… Consultant Performance Engineer Leeds, UK @csswizardry

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. Clearing the Air

  12. Quitting Vim

  13. None
  14. :q Just like ⌘+Q

  15. :wq Just like ⌘+S ⌘+Q

  16. :q! Force quit without saving

  17. Vim is ugly…

  18. None
  19. …but that’s a solvable problem

  20. None
  21. Getting to Know Your Ex

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

    a ‘screen editor’ Ex is sub-editor within Vim
  23. :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
  24. “ “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
  25. ed » em » ex » vi » Vim 1971

    1975 1976 1976 1991
  26. Vim Has a Steep Learning Curve

  27. Productivity Time

  28. Natural Language
 Text Editing

  29. [cdyv=][iatf][w{"pt)sB] Verbs Motions Objects

  30. c i w
 h n o
 a s r

    i d
 g d _
 e e _
  31. None
  32. v a t
 i r a
 s o g

    u s
 a n _
 l d _
  33. None
  34. c i p
 h n a
 a s r

    i a
 g d _
 e e _
  35. None
  36. Reformat Messy Code

  37. =it Reformat code inside tags

  38. None
  39. Tabs vs. Spaces

  40. :retab

  41. None
  42. vi}
 :retab Visualise in braces

  43. None
  44. Change Case of Strings

  45. gU / gu Go uppercase Go lowercase

  46. gUt: Go uppercase ’til the :

  47. guiw Go lowercase in current word

  48. None
  49. gUi} Go uppercase in braces

  50. None
  51. Alphabetise CSS

  52. 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
  53. vi{
 :sort Visualise code in current braces Sort it

  54. None
  55. .foo { background: green; color: red; display: block; display: block;

    font-size: 12px; padding: 1em; } Whoa! We’ve got a duplicate
  56. vi{
 :sort u Visualise code in current braces Sort it,

    leaving only unique lines
  57. None
  58. Maths

  59. Incrementing and Decrementing

  60. <C-a> / <C-x> Increment number under cursor Decrement number under

  61. 16<C-a> Add 16 to the number under the cursor

  62. 29<C-x> Subtract 29 from the number under the cursor

  63. None
  64. The Dot Command

  65. None
  66. The Expression Register

  67. <C-r>=

  68. <C-r>=(16*4+24)/16 Insert result of (16*4+24)/16 at current cursor position

  69. None
  70. Moving Lines

  71. Move lines around without moving yourself

  72. :-3 t . Copy line (-3)… …(t)o current line (.)

  73. None
  74. :m . -4 (m)ove current line… …(4) lines up

  75. :-4,-3 t . Copy lines -4 to -3… …to the

    current line (.)
  76. None
  77. Commenting Out Lines

  78. :g/color/ normal I// Run a global command And on lines

    Containing ‘color’ Enter
 normal mode And insert // at
 the beginning
 of the line
  79. None
  80. :g/color/ normal I// This pattern… …and this
 command… …can be

    pretty much whatever you want
  81. :g/^\/\// normal dd Find lines that
 start with a comment…

 Delete ’em
  82. :g/-moz-/ normal >> Find vendor-prefixed
 declarations… …and
 indent ’em

  83. :q

  84. $ vimtutor

  85. @vimgifs

  86. “ “How do you spot a
 Vim user at a

  87. Thank You speakerdeck.com/csswizardry [email protected] @csswizardry harry.is/for-hire