These are the notes from my presentation for the new class at Hack Reactor.  I know the time constraints make it tough to answer everything, so feel free to ask here.

Choose your own talk

  • How to exit or save & exit VIM
  • How to enable/disable VIM mode in Sublime
  • Sublime short-cuts in general
  • Multi-select
  • Strip out HTML
  • How to learn in general
  • Build JS from Sublime

tools_presentation

VI Crash course

Why it's worth it to learn at least the basics

  • VI is the default editor on most unix machines.
  • It's available for almost anything.
  • It's keyboard-only and great for cramped spaces.
  • It's very fast for proficient users.
  • If you don't, it will be completely baffling when it pops up for a git commit

There are two modes: edit mode and command mode

  1. Edit mode is like a "normal" editor.
    • What you type appears.
    • Press esc to enter command mode
  2. Command mode is where the magic (or frustration happens)
    • Commands let you do complex things more quickly
    • Just a few commands are enough to get around
    • With more commands comes more power
    • You can repeat any command by entering a number first
    • Regex can be used in VI
    • There are several commands to return to edit mode (a, i, p, o, etc...)

Basic VI commands

Use your right hand for basic movement:

  • h - left
  • j - down
  • k - up
  • l - right

Other movement:

  • w - go to the the next word
  • b - go back a word
  • ^ - go the the beginning of a line
  • $ - go the the end of the line
  • /foo - searches for foo
  • n - goes to the next instance of whatever you just searched for
  • N - goes to the previous instance of whatever you searched for

Cutting, pasting and copying:

  • dd - delete the current line
  • yy - yank the current line into memory without deleting it
  • dw - delete from the cursor to the current word
  • db - delete from the cursor back to the beginning of the word
  • y$ - yank everything from the cursor to the end of the line
  • p - paste whatever you last yanked or deleted

Don't forget about using numbers!

  • 7k - up 7 lines
  • 15j - down 15 lines
  • 2p - paste two copies of whatever you last deleted or yanked
  • 4w - forward 4 words
  • 5dd - delete 5 lines
  • 3yyp - make 3 copies of the current line

Switching into insert move

  • i - go into insert mode right before the cursor
  • a - go into insert mode right after the cursor, AKA append
  • o - open up a new line below the cursor and go into insert mode
  • O - open up a new line above the cursor and go into insert mode

I lied to you all

VI actually has a third mode

  • Hit esc:, or just : from command mode, to open the command line
  • :w writes, or saves the current file
  • :q quits and closes the file
  • :q! quits and closes the file even if you haven't saved yet
  • :35 goes to line number 35
  • :$ goes to the last line in the file
  • :/\d3/ regex match 3 digits to use in subsequet finds
  • :s/\d*px/10px/ change some number +px on the current line into 10px
  • :4 s/cat/dog/g change all copies of the word 'cat' on line 4 to 'dog'
  • :1,$ s/.*padding.*$//g delete every line with the word 'padding'

Sublime

Sublime Shorcuts

  • cmd + shift + f to do a global find accross all files
  • cmd or fn + left/right to go to the beginning or end of a line
  • option + left/right to go forward or back a word
  • cmd + click to add another cursor for multi-edit
  • cmd + d to highlight copies of the curently selected word for multi-edit
  • cmd + shift + d to duplicate the current line
  • cmd + ctrl + up/down to move the current line up or down
  • cmd + j to concatenate the next line onto the current one

The Sublime Command Palette

  • cmd + shift + p to open the command palette
  • You can install, uninstall, enable and disable packages from here

Packages I like:

  • sublime-better-coffescript adds coffeescript highlighting compilation and more
  • Vintage and VintageEx - add VI support into Sublime, but no regex support.
  • SublimeLinter draws attention to syntax problems
  • TrailingSpaces lets you eliminate all the trailing spaces in a file by hitting ctrl + s.

Adding a JS build-system to Sublime

  • Open the Tools>Build System menu and select "new build system"
  • Name it Node, and a new file called node.sublime-build will be created.
  • Add the following data to it and save:
{
    "cmd": ["node", "$file", "$file_base_name"],
    "working_dir": "${project_path:${folder}}",
    "selector": "*.js"
}
  • Restart Sublime
  • Select Node as the build system for your file and hit cmd + b to build from Sublime!

Common command-line tasks

  • cp -r source destination: copies the source directory and all its children to the target destination
  • rm -rf dirToDestroy: removes the directory and all its sub directories
  • ls -la: lists all files including hidden ones and shows them in long form
  • history: list the history of recently executed commants
  • !871: re-run the 871st command in the history
  • cat somefile prints out a file
  • cat somefile | grep someword prints out lines of somefile that include someword

Reference links:

Huge bag of VI tricks: http://rayninfo.co.uk/vimtips.html

Leave a Reply

Your email address will not be published. Required fields are marked *

1 reply
  • ola says:

    Thank you a lot, this is great but please I am stuck. it is like I could not see the node on the built pull down menu as explained in your video. please I need help on this if you can help me out