Learn Practice Daily golf Reference
Foundations·Lesson 1 of 6·7 min·0/7 exercises

Meet the modes

In Normal mode your keyboard is a remote full of commands; in Insert mode it types. i switches to typing, Esc back to the remote, x is your first button, and u takes back a mistake.

Scene

Day one at Byte Burrito, the startup that delivers burritos by e-bike, mostly on time. Your laptop is set up, your mouse is in a drawer (company policy: "ninjas don't click"), and your first ticket is a typo in menu.ts.

You click into the file, start typing, and nothing appears. The cursor jumps around instead. The editor isn't broken. It just has two moods, and you haven't met them yet.

Two modes, two jobs

Vim starts in Normal mode, where your keyboard works like a TV remote: every key is a button that does something (move, delete, undo), and none of them types. Press i and it becomes a keyboard again: that's Insert mode, where keys type text. Esc turns it back into a remote, and the status line under the editor always says which one you're holding.

1const greeting = "world";
NORMALLoading the editor…1:19
Try it

Your first edit

Three words went missing from the menu. The cursor is already in place each time: press i, type the word, then Esc.

1 of 3Type Pastor where it's shown in green
1export const menu = [
2 { id: "al-pastor", name: "Al ", price: 9.5, spicy: true },
1 { id: "veggie", name: "Garden Veggie", price: , spicy: false },
2 { id: "carnitas", name: "Carnitas", price: 10, : false },
3];
NORMALLoading the editor…1/30.0s2:32

This exercise needs a keyboard. Read on, and play it at your computer.

1const greeting = "world";
NORMALLoading the editor…1:19

The undo button

Pressed the wrong buttons? Nothing is lost. Press Esc so you're holding the remote, then u: the undo button. It takes back the last change, whether that was a word you typed in the wrong place or a line a stray button opened. The next round hands you three accidents to take back.

Try it

Take it back

Each round starts with an accident that already happened. You're back on the remote: press u to undo it.

1 of 3Someone typed jjj while the keyboard was still typing, and it landed in the menu. Press u.
1 { id: "veggie", name: "Garden jjjVeggie", price: 8.25, spicy: false },
NORMALLoading the editor…1/30.0s1:35

This exercise needs a keyboard. Read on, and play it at your computer.

Back to the remote

Finishing a word is only half the job. Until you press Esc, every key you press is a letter, including the ones you meant as buttons. Make leaving a reflex: type, Esc, look. In the next round you start in Insert mode, mid-sentence.

Try it

Back to Normal

The status line says INSERT. Finish what was being typed, if anything, and press Esc.

1 of 3That's it. Press Esc to finish
1export const slogan = "Code by day, burritos by night";
INSERTLoading the editor…1/30.0s1:54

This exercise needs a keyboard. Read on, and play it at your computer.

Your first button

Back in Normal mode, letters stop being letters. x is the delete button: it removes the character under the cursor, and pressing it again takes the next one. It's your first real command, and it leaves the remote in your hand: you're still in Normal mode afterwards.

1{ name: "Carnitassss", price: 10 }
NORMALLoading the editor…1:18
Try it

Press delete

Someone leaned on the keyboard. The cursor sits on each extra character: delete it with x.

1 of 4Delete the text marked red
1export const menu = [
2 { id: "al-pastor", name: "Al Pastorr", price: 9.5, spicy: true },
1 { id: "veggie", name: "Garden Veggie", price: 8.25, spicy: false },
2 { id: "carnitas", name: "Carnnitas", price: 100, spicy: false },
3];
NORMALLoading the editor…1/40.0s2:38

This exercise needs a keyboard. Read on, and play it at your computer.

Check yourself

Which mode are you in?

1const price = 9.5;
NORMAL
Keys pressed: ix

You press i, then x. What happens to the line?

Pick an answer (or press its number), then watch the engine prove it.
From memory

Remote or keyboard?

From memory: which key does it?

Start typing right before the cursor.
scroll here, then press the keys
1 of 5
Start typing right before the cursor.
Challenge

First commit

Your first pull request: eight fixes in menu.ts, some missing text, some extra. The cursor waits at each one. i to type, Esc when you're done, x to delete, u if a button misfires. A clock times the run for your own records; getting it right comes first.

1 of 8Type true where it's shown in green
1export const menu = [
2 { id: "al-pastor", name: "Al Pastor", price: 9.5, spicy: },
1 { id: "veggie", name: "Garden Vegggie", price: 8.25, spicy: false },
2 { id: "carnitas", name: "", price: 110, spicy: false },
3];
4
5export function findItem(id: str) {
6 const item = menu.find((m) => m.id === xid);
7 if (!item) throw new Error("not on the : " + id);
8 return item;;
9}
NORMALLoading the editor…1/80.0s2:60

This exercise needs a keyboard. Read on, and play it at your computer.

MergedFinish the exercise above to see it.

Extra practice optional

The chapter is done. These rounds keep going as long as you like: stop whenever it stops being useful.

Endless

Proofreading

Endless typos from around the codebase: a letter missing or a letter too many. The cursor is always on the spot. Stop whenever you like.

Level 1Delete the text marked red
1export class Kixtchen {
1 private queue: Order[] = [];
2 private buxsy = false;
3
4 enqueue(orzder: Order) {
5 this.queue.push(order);
6 this.startNext();
7 }
8
9 startNext() {
10 if (this.busy || this.queue.leqngth === 0) return;
11 this.busy = true;
12 const next = this.queue.shzift();
13 cook(next).then(() => this.finish());
14 }
15}
NORMALLoading the editor…lv 1 · 0 done0.0s1:16

This exercise needs a keyboard. Read on, and play it at your computer.