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
Tweet

More Decks by Harry Roberts

Other Decks in Design

Transcript

  1. Vim for

    Front-end Developers
    Harry Roberts • @csswizardry

    View full-size slide

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

    View full-size slide

  3. Clearing the Air

    View full-size slide

  4. Quitting Vim

    View full-size slide

  5. :q
    Just like ⌘+Q

    View full-size slide

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

    View full-size slide

  7. :q!
    Force quit
    without saving

    View full-size slide

  8. Vim is ugly…

    View full-size slide

  9. …but that’s a
    solvable problem

    View full-size slide

  10. Getting to Know Your Ex

    View full-size slide

  11. The Ex Editor
    Ex is a ‘line editor’
    Vim is a ‘screen editor’
    Ex is sub-editor within Vim

    View full-size slide

  12. :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

    View full-size slide


  13. “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

    View full-size slide

  14. ed » em » ex » vi » Vim
    1971
    1975
    1976
    1976
    1991

    View full-size slide

  15. Vim Has a Steep
    Learning Curve

    View full-size slide

  16. Productivity
    Time

    View full-size slide

  17. Natural Language

    Text Editing

    View full-size slide

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

    View full-size slide

  19. c i w

    h n o

    a s r

    n i d

    g d _

    e e _

    View full-size slide

  20. v a t

    i r a

    s o g

    u u s

    a n _

    l d _

    View full-size slide

  21. c i p

    h n a

    a s r

    n i a

    g d _

    e e _

    View full-size slide

  22. Reformat Messy Code

    View full-size slide

  23. =it
    Reformat code
    inside tags

    View full-size slide

  24. Tabs vs. Spaces

    View full-size slide

  25. vi}

    :retab
    Visualise
    in braces

    View full-size slide

  26. Change Case of Strings

    View full-size slide

  27. gU / gu
    Go uppercase Go lowercase

    View full-size slide

  28. gUt:
    Go uppercase ’til the :

    View full-size slide

  29. guiw
    Go lowercase
    in current word

    View full-size slide

  30. gUi}
    Go uppercase
    in braces

    View full-size slide

  31. Alphabetise CSS

    View full-size slide

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

    View full-size slide

  33. vi{

    :sort
    Visualise code in
    current braces
    Sort it

    View full-size slide

  34. .foo {
    background: green;
    color: red;
    display: block;
    display: block;
    font-size: 12px;
    padding: 1em;
    }
    Whoa! We’ve
    got a duplicate

    View full-size slide

  35. vi{

    :sort u
    Visualise code in
    current braces
    Sort it, leaving
    only unique lines

    View full-size slide

  36. Incrementing and Decrementing

    View full-size slide

  37. /
    Increment number
    under cursor
    Decrement number
    under cursor

    View full-size slide

  38. 16
    Add 16 to the number
    under the cursor

    View full-size slide

  39. 29
    Subtract 29 from the
    number under the cursor

    View full-size slide

  40. The Dot Command

    View full-size slide

  41. The Expression Register

    View full-size slide

  42. =(16*4+24)/16
    Insert result of (16*4+24)/16
    at current cursor position

    View full-size slide

  43. Moving Lines

    View full-size slide

  44. Move lines around
    without moving yourself

    View full-size slide

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

    View full-size slide

  46. :m . -4
    (m)ove current line…
    …(4) lines up

    View full-size slide

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

    current line (.)

    View full-size slide

  48. Commenting Out Lines

    View full-size slide

  49. :g/color/ normal I//
    Run a
    global command
    And on lines
    Containing ‘color’
    Enter

    normal mode
    And insert // at

    the beginning

    of the line

    View full-size slide

  50. :g/color/ normal I//
    This pattern… …and this

    command…
    …can be pretty much whatever you want

    View full-size slide

  51. :g/^\/\// normal dd
    Find lines that

    start with a comment…
    …and

    Delete ’em

    View full-size slide

  52. :g/-moz-/ normal >>
    Find vendor-prefixed

    declarations…
    …and

    indent ’em

    View full-size slide


  53. “How do you spot a

    Vim user at a meetup?”

    View full-size slide

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

    View full-size slide