Lecture 3: Editors (vim) (2020)

Okay, cool. So, welcome to the third

lecture of the missing semester of your

si a second today we're going to be

talking about text editors this is a

topic that I really like I think it's

one of the most valuable topics that

we're teaching in this class because as

programmers you spend so much of your

time editing text editing programs that

if you invest time into making yourself

more efficient at doing this you'll save

a ton of time probably hundreds of hours

over the course of your undergrad or

over the course of your career so text

editors are a little bit different than

other programs you might use to edit say

things like English prose because

programming is different than writing

English prose when you're programming

you spend a lot of time reading what

you've written you spend a lot of time

navigating around a buffer and you spend

a lot of time making little edits to

code all over the place rather than just

writing in a long stream like you do

when you're writing an essay or

something and so it makes sense that

there different programs for these

different purposes right so yeah things

like Microsoft Word for writing essays

and things like vim and Emacs and vs

code and sublime for writing code so the

way you learn a text editor and become

really good at it is you start with a

tutorial and so that's basically going

to be the function of today's lecture

plus the exercises we've given you and

then after the tutorial you need to

stick with the editor for all your

editing tasks and when you're learning a

sophisticated tool so today we're going

to teach you vim which is one powerful

editor that a lot of programmers use

when you're learning such a

sophisticated tool it may be the case

that initially switching to this tool

slows you down a little bit when you're

programming but stick with it because

I'd say that in about 20 hours of

programming using a new editor you'll be

back to the same speed at which you

programmed using your old tool and then

after that the benefits will start and

you'll get faster and faster as you

learn more with these sophisticated

programs like them it takes not way too

long to learn the basics but a lifetime

to master and so throughout the time

you're using this tool make sure you

look things up as you go if you ever get

to a point where you're like oh this is

a really inefficient way of doing things

is there a better way the answer is

almost always yes because these text

editors were written by programmers for

programmers and so of course like the

peep

I wrote these tolls ran into the same

kinds of issues and fixed them so that

you don't need to deal with these

anymore and so yeah as you're learning

make sure you look things up as you go

either use Google or feel free to send

us emails if you have questions or come

to office hours and we'll help you

figure out how to do things really fast

so as far as which editor to learn in

previous iterations of this class we

actually avoided teaching a specific

editor because we didn't want to enforce

our opinions on you guys but we actually

think that it's really useful to teach

you how to use one particular tool and

use it well and so people have really

strong opinions about editor so you can

see the course notes for more links on

this topic looking at which editors have

been popular over the years Stack

Overflow I'm sure you've all heard of

that does a survey every year asking

developers various questions and one

thing to ask is which TextEdit Derk do

you use and it seems to be that

currently the most popular kind of

graphical editor is vs code and the most

popular editor that is based within a

command line interface is vim and so

we're going to be teaching you vim and

there a couple reasons for this one is

that all the instructors so me John and

Jose use vim as our primary editor and

we've been doing this for many years and

we've been very happy with it

and we think that there are a lot of

interesting ideas behind them so even if

you don't end up using this particular

tool in the long term I think it's

valuable to learn these ideas and also a

lot of tools have actually been really

excited about the ideas in vim and so

they support a vim emulation mode for

example vs code what's apparently the

most popular editor in use today

supports vim bindings and this vim

emulation mode as of now has like 1.4

million downloads and as you'll see over

the course of this lecture a lot of

different tools like including your

shell including things like the Python

repple and like Jupiter notebook and all

sorts of other things even your web

browser can support of emulation mode

and so yeah we're going to be teaching

you this really neat tool today and in

this lecture we can't really cover all

of them right it's a very powerful tool

but our goal is to teach you and the

core philosophy of them like the really

neat ideas behind it and then in

addition to that some of the basics like

how do you open a file close a file

navigate around a file make edits and

things like that and

you may not remember every single little

detail from this lecture because we're

gonna go pretty fast through some of the

material but it's all in the lecture

notes and then the exercises actually

give you links to some tutorials and

things so I highly recommend that you

actually go through all the exercises at

least the non advanced exercises any

questions so far great okay so one of

the really cool ideas behind them is

that vim is a modal editor what does

this mean modal comes from the word mode

and this means that vim has multiple

operating modes and this is kind of

developed from the idea that when you're

programming there often times where

you're doing different types of things

like sometimes you're reading code

sometimes you're making small edits to

code like you're finding a particular

point like changing a little thing

somewhere sometimes you're just writing

a lot of code in one go like suppose

you're just writing a function from

scratch and so there's different

operating modes for doing these

different types of things and so I'm

actually want to write this down on the

blackboard so I'll have a useful thing

to refer to later so when you start vim

up it starts up in what's called normal

mode and in this mode all the different

key combinations behave in one way and

then there are different key

combinations that switch you between

normal mode and other modes which change

the meaning of different keys so for the

most part you'll be spending most of

your time in vim in normal mode or what

is called insert mode and to go to

insert mode you press the key I for

normal mode and to go from insert mode

back to normal mode you press the Escape

key a little note on notation because

we'll need this later in the notation

I'm going to be using in this lecture

and what's also in the lecture notes and

what vim uses to give you feedback they

have a couple different ways of talking

about different keys so when they're

talking about bare keys like just the

eye key on your keyboard they'll just

say eye but for a different key

combinations like when you press control

and something like say control V it's

notated in one of like approximately

three ways one way that can be notated

is a caret and then the control

character so this is control V another

way this might be written I think we've

written it this way in

lecture notes as control-v this is

probably the one you're more used to

seeing and then in some parts of them

this is written as angle brackets C - V

close angle bracket so just a little bit

of notation that will be useful later

so yeah vim has a couple different modes

where normal mode is designed for

navigating around a file reading things

going from file to file things like that

and then insert mode is where you type

in text so most keys that you press here

will just go into your text buffer where

as keys that you press here are not

being put into the buffer and instead

are used for things like navigation or

making edits and actually the picture is

a little bit more complicated than this

there are a whole bunch of other modes

and I'm just gonna write them down here

because we'll have them here to refer to

later and so if it also has a replace

mode for rather than inserting text and

kind of pushing what's ahead of it

forward it will overwrite text and then

it has a bunch of different modes for

selection so it has a mode called visual

mode and then it has visual line and

visual block this one is enter via the R

key this was entered via the V key this

one is entered via shift B and this one

is entered via control V and then

there's the command line mode which is

entered via the colon key

okay so now that we have that on the

board to refer to later we can actually

try some of this out all right so one

thing we noticed looking at that picture

is that to go from normal mode to any of

the other modes we press some key but to

go from any of the other modes back to

normal mode where we spend a lot of our

time we use the Escape key on our

keyboard so for this reason since you

under pressing the Escape key a lot when

using vim a lot of programmers rebind

one of the keys on their keyboard to be

escape because it's really inconvenient

to reach up with your left pinkie to

press that tiny little Escape key in the

corner of your keyboard and so a lot of

people use the caps lock key instead so

it's right there in the home row and we

have some links in the lecture notes for

how you can do this key rebinding okay

so now that we've talked about kind of

one of the core ideas of vim the idea of

modal editing we can talk about some of

the basics like how do you open up this

text editor how do you open file save

files and things like that and so this

is a command line based program although

there are some graphical variants and

the way you start this program is by

running vim one thing you might notice

is that in the bottom left corner of my

screen they actually saw what I just

typed this will be useful later in this

lecture where I'm actually typing in

commands for vim and I'll be saying what

I'm typing but you'll also see it on the

screen so if I press ctrl C see it says

ctrl C over there is that text big

enough for everybody to read great okay

so the way we open vim is just by

running the program vim on our command

line and this comes pre-installed on

most systems and if you don't have it

you can install it using your package

manager vim can also take an argument if

we want to use it to edit a particular

file instead of just opening up the

program then later opening a file so for

example I have a file in this directory

this is actually the lecture notes for

this lecture so I can do vim editors MD

and press ENTER and then boom them is

started and then in this lecture I'm not

running vim in the completely Exton I've

configured a couple of things that

behave a little bit nicer by defaults

little things like having line numbers

on the left or having some more status

information on the bottom and if you

want to start with this default

configuration we have a link to this in

the lecture notes so you can get a

slightly more sane config by default. So,

once you've opened Vim, what do you do?

Well, as I said earlier, Vim starts in

normal mode, so if I just start typing

letters like, say, type X it didn't insert

X into the buffer. You can see the cursor

up in the top left: it actually deleted

one of the characters. That's because I'm

in normal mode, not insert mode. So insert

mode is basically what you're used to with

all the other text editors you've used

in the past, where there's a cursor

somewhere, you press the character, and it

just goes into your buffer. I'm instead

in vim you start a normal mode and you

can press I to go into insert mode so

see I've pressed I and then in the

bottom left notice that it says - -

insert the bottom left always tells you

what mode you're in unless this normal

mode in which case it's blank and now

that I'm an insert mode if I press the X

character for example see it just gets

inserted into my text buffer and I can

backspace over at type other stuff and

now my text editor kind of behaves like

you'd expect any other program to behave

so from this point how to go back to

normal mode if I want to stop inserting

characters. Yes, exactly. I press escape.

And, that's the symbol my keystroke

visualizer uses for escape, so

just be aware of that. And then, Vim has

this idea, that using the mouse is

inefficient, like your hands are on the

keyboard, moving your hand over to the

mouse takes a lot of time, right, like you

don't want to waste those couple of

milliseconds while you're programming,

like in the middle of things. So, instead,

all Vim functionality can be accessed

just through the keyboard. And, it's all

sorts of things you might be used to

doing like opening files by going, like,

file open, or file save, or things like

that, or instead access through the

keyboard. And, how is that done? That's

done through one of the other Vim modes

that are on the board over there. In

particular, through command line mode. So,

if you're in normal mode, and you press

the ":" key, you'll notice that the

cursor - I guess my visualizer is covering

the thing right now but it's gone - the

cursor jumps to the bottom - the bottom

left - and it shows that ":" I just typed.

Now, I can type in a command. So, you can

think of this almost like the command

shell that we've talked been talking

about over the last few days, except this

is Vim's

command shell, so you give Vim commands

here, instead of shell commands. And

there are a bunch of built-in commands

that do all the things that you're used

to. Like, for example, one command that you

might want to know is how to quit this

editor. You might notice that if you're in

normal mode, I can press "Escape" to go

back from command line mode to normal

mode, and I press "control C", unlike what

happens to a lot of programs, this doesn't

quit Vim. So, how do I quit Vim? I can

press ":", and then go into command

line mode, and then I can type in the

command "quit". "Q-U-I-T". You'll see that I

- maybe I should move this over to the

middle or something - see, it says ":quit"

and I press ENTER, and it quits Vim. I can

open Vim up again. There's actually a

short form for this command, just ":q", and

that'll do the same thing. And, there are a

bunch of other useful commands like this.

So, some other handy ones to know are

how do you save a file? So, suppose I make

some edits here, like "hello world".

So, I pressed "i" to go into insert mode - or

let me redo that - I press "i" to go into

insert mode. Right now, I can use the down

arrow to... I think I've slightly I

should fix that. Can you fix the config,

actually, John? Never mind that.

Okay, so, suppose I go down to this line,

and I press "i" to go into insert mode, and

type in some text, and then press "escape"

to go back to normal mode. Now, how do I

actually save this file? Well, there's

another command for that. So, ":" to go

into command mode, and then I can type "W"...

...and press "Enter". "W" stands for write. And,

it says in the bottom "editors.md"

whatever blah blah written. And, so, this

means it saved the file and so now if I

":q" to quit and open the same file,

again, you'll see that the changes have

been persisted. There are a couple other

there's... So, there's a ton of different

Vim commands that are useful for

different reasons. But, I'll just explain

a couple more to you now. One command

that's really useful is help. ":help"

And you can do ":help", and then type in a

particular key, or a particular command,

and get help for that keystroke or that

command. So, if I want to know what

":w" does, I

can do : help : W, and that'll give me

the documentation on : w or : write. If I

do : q, it'll close this window and bring

me back to where I was before.

And, notice that ":help :w" is different

from ":help w", because the W key is the W

that, like, when you're in normal mode and

press W, what happens is just the W key

here without the ":".

And, if I look for help for ":w", that's

the help for the W command. So, now you

basically have the bare fundamentals

needed to use them. right? You can open

the editor, use it to edit a particular

file, press "i" to go into insert mode and

type in some text, press "escape" to go

back to normal mode, and then :w to save

your changes, :w to quit. So, like already

you have the bare fundamentals necessary

to edit files using Vim, albeit somewhat

inefficiently. So, any questions so far?

Yeah in the back. Yeah so the question is,

What's the benefit of the

normal mode? And, we'll talk about that in

more detail, in like five minutes.

But, in short, insert mode is just for

typing in text. So, I'm in insert mode, I

can type in text. But, when I'm

programming, I actually spend a lot of

time moving around my file making small

little changes. So, I go here and like, oh

maybe I want to change this HTTPS link to

an HTTP.

I can make like small point edits, things

like that, in normal mode. And we'll see a

whole lot more of that in about five

minutes. Good question!

Any other questions? Okay cool. So, moving

along, one other thing that's kind of

useful to know, I think, is, at a high

level, Vim's model of

buffers versus windows versus tabs. So,

it's probably the case that whatever

program you were using before, like

Sublime Text or VS Code or whatever,

you could open multiple files in it,

right, and you could probably have

multiple tabs open and have multiple

windows open of your editor. So, Vim also

has a notion of those different things.

But, its model is a little bit different

than most other programs. So, Vim

maintains a set of open buffers - that's

the word it uses for open files - and so,

it has a set of open files, and then kind

of separately from that, you can have a

number of tabs, and tabs can have windows.

The kind of weird thing which makes Vim

a little bit different than the

program you've probably used in the past is

that there isn't necessarily a

one-to-one correspondence between

buffers and windows. So, one thing I can

do, for example, here - and we'll show you

the key combinations and stuff for this

later - but one thing you can do is create

two different windows. So, I have one

window up here, and then one window down

here. And, notice that the same files open

in both windows. So, if I make some edits

over here, they actually happen in the

bottom window, as well, because it's the

same buffer that's open in both windows.

And, this is kind of useful, for, say,

looking at two different parts of a

single file at the same time. Like, so you

want to be able to look at the top of a

file, say at an import to your program,

while you're down below, working

somewhere else. So, this is one helpful

thing to keep in mind, that Vim has this

idea of - there are a number of tabs, and

each tab has some number of windows, and

then each window has, uh, corresponds to

some buffer. But, a particular buffer can

be open in zero or more windows at a

time. Just one thing that confused me

when I was initially learning Vim, so I

want to explain that early on. And then,

the ":q" command, which we talked about

earlier, is not exactly quit. It's kind of

"close the current window", and then, when

there are no more open windows, Vim will

quit. So, here, if I do ":q", it'll only

close the window, I think, on the top here

because that's the one I was in, and, now,

the remaining window becomes fullscreen.

I can do : Q again to close this. Now we're in

the second tab that I'd opened. If I do :Q

a final time, okay, now, Vim exits. And if

you don't want to press ":q" way too many

times... Okay, so, here I have three split

windows. If I do ":qa", for quit all, it

closes all the open windows.

All right, so, now, to answer your question of

"What is normal mode actually for?" This is

another, really cool idea in Vim, and I

think this is actually, like, the most

fundamentally interesting idea of this

program. It's that, like, you're all

programmers, you like programming; Vim has

this idea that Vim's normal mode, like,

Vim's interface, itself, is a programming

language. And, let me repeat that.

That's like a kind of fundamentally

interesting idea: the interface is a

programming language.

What does that mean? It means that

different key combinations have

different effects, and, once you learn the

different effects, you can actually

combine them together - just like in a

programming language - you can learn

different functions and stuff and then

glue them all together to make an

interesting program. In the same way, once

you learn Vim's different movement and

editing commands, and things like that,

you can talk to Vim by programming Vim

through its interface. And, once this

becomes muscle memory, you can basically

edit files at the speed at which you

think. Like at least for me, I don't think

I've been able to do this with any other

text editor that I've used in the past,

but this one gets pretty close. So, let's

dig into how exactly normal mode works.

So, you can try to follow along with this,

like, open up some random file in Vim, and

follow some of the key combinations I

type in. So, one basic thing that you

might want to do, is just navigate around

a buffer. Like, move your cursor up/down/

left/right. And, so the way you do that in

Vim, is using the hjkl keys, not the arrow

keys. Though they do work by default, try

to avoid them, because you don't want to

have to move your hand all the way over

to the arrow keys. Like, there's a ton of

time you're wasting, right? HJKL is right

on the home row. And, so, J moves down, K

moves up, H moves left, and L moves right.

And, this may seem a little unintuitive

now; there was some historical reason for

it, like, the keyboard the original vi

developer used had the hjkl keys, like,

labeled, and arranged in a way that made

this more reasonable. But, this will very

soon become muscle memory. So, this is the

basic way you can move your cursor

around while in normal mode. Now, what

else can you do? Well, if we had to move

around files like this, it'd be really

slow. We don't want to have to

hold down these keys, and like, wait for a

long time for Vim to do its thing. And

so, there are all these other, different

key combinations for doing different

movements.

Also, by the way, this is all in the

lecture notes, so you don't need to

memorize every single key and its

meaning right now. Just try to understand

the overall idea that Vim's interface is

a programming language. So, another thing

you can do is press the W key. This moves

the cursor forward by one word. And then,

similarly, the "B" key moves the cursor

backward by one word. So, this allows

slightly more efficient movement within

the line. There's also the "E" key for

moving to the end of a word. I'm going to

move this over a little bit. So, if I'm

here, for example, and I press the "E" key

it'll go to the end of this word, end of

this word, end of the next word and so on.

You can also move by whole lines, so zero

moves to the beginning of a line, dollar

sign moves to the end of a line, and the

caret key moves to the first non-empty

character on a line. So, let me find one

of those, for example. So, here, my

cursor's right here; if I press 0, my

cursor goes to the beginning of the line,

dollar sign, end of the current line; and

if I press caret, where, like, on what

character will the curser end up? Can

anybody guess? So, caret goes to the first

non-empty character on a line, kind of

like Regex caret. Yeah, exactly! It goes

to this dash. Let's talk about some more

movement commands. There're ways to

scroll up and down in a buffer, so

control U goes up, and control D scrolls

down. So, this is better than holding down

the K or J keys, for example. This is a

lot slower than moving by entire pages.

Control D and control U. There's also

ways to move by the entire buffer. So,

capital "G" moves all the way down... "gg"

moves all the way up. Some of these

movement keys are mnemonics; so, they're

like, a little bit easier to remember for

that reason, right, like, "W" is word, "B"

is beginning of word, E is end of word. Those

all seem pretty logical. 0, caret and

dollar, kind of inspired from Regex, so

those make a little bit of sense. There's

some other ones that, like, don't

necessarily make way too much sense, but,

there are only so many keys on your

keyboard, so what are you going to do? For

example, the "L" key moves your cursor to

the lowest

line that's shown on the screen. "L" for

lowest makes sense, M for middle, and then H for

highest, I guess. And, there's a whole

bunch of other interesting movements

like this. So, we're obviously not going