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.

Transcript

1. Vim for
 Front-end Developers Harry Roberts • @csswizardry
3. Hey!
4. I’m Harry… Consultant Performance Engineer Leeds, UK @csswizardry
11. Clearing the Air
12. Quitting Vim
14. :q Just like ⌘+Q
15. :wq Just like ⌘+S ⌘+Q
16. :q! Force quit without saving
17. Vim is ugly…
19. …but that’s a solvable problem
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
 n i d
 g d _
 e e _
32. v a t
 i r a
 s o g
 u u s
 a n _
 l d _
34. c i p
 h n a
 a s r
 n i a
 g d _
 e e _
36. Reformat Messy Code
37. =it Reformat code inside tags
39. Tabs vs. Spaces
40. :retab
42. vi}
 :retab Visualise in braces
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
49. gUi} Go uppercase in braces
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
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
58. Maths
59. Incrementing and Decrementing
60. <C-a> / <C-x> Increment number under cursor Decrement number under cursor
61. 16<C-a> Add 16 to the number under the cursor
62. 29<C-x> Subtract 29 from the number under the cursor
64. The Dot Command
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
70. Moving Lines
71. Move lines around without moving yourself
72. :-3 t . Copy line (-3)… …(t)o current line (.)
74. :m . -4 (m)ove current line… …(4) lines up
75. :-4,-3 t . Copy lines -4 to -3… …to the
 current line (.)
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
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… …and
 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 meetup?”
87. Thank You speakerdeck.com/csswizardry csswizardry@gmail.com @csswizardry harry.is/for-hire