NUS Hackers Wiki
NUS Hackers Wiki
  • NUS Hackers Wiki
  • Hackerschool
    • Virtual Machines and Linux
    • Beginners' Guide to the Terminal
      • Introduction to the Terminal
      • Modern Shell Tools
      • Shell Scripting
      • Real World Scripting
      • Resources
    • Self-Hosting: Three Easy Pieces
      • 1. Setting up your server
      • 2. Running Services
      • 3. Monitoring your server
    • Vim
    • Introduction to Zig
      • Language Basics
      • Error Handling
      • Memory Management
      • Working with C
      • Exploring comptime
    • CI/CD with Github Actions
      • Background
      • Basics of Github Actions
        • Target workflow
        • Running unit tests
        • Linting code
        • Deploying to Github Pages
      • Advanced use cases
        • Pollers
        • Github script
        • Executing third-party scripts
        • Reusable workflows
      • Cookbook
    • Lightning Git
      • Git Concepts
      • Getting Started with Git
      • Making your first commit
      • Branching
      • Merge Conflicts
      • Integrating remote repositories
      • Collaborative Workflows
      • Commit Manipulation and Reflog
      • Interactive rebasing
      • filter-repo
  • Orbital
    • JavaScript
      • Browser Developer Tools
      • Getting Started
      • Datatypes
      • Operators and Operations
      • Loops and Conditions
      • Functions
      • Strings
      • Arrays
      • HTML
        • Getting Started
        • Tag Attributes
        • HTML Forms
        • Browser Inspector
      • CSS
        • Selectors
        • Colors in CSS
        • Measurements in CSS
        • The Box Model
        • Adding Styles - Part 1
        • Adding Styles - Part 2
      • Working with the DOM
        • Querying the DOM - Selectors
        • Querying the DOM - Element Attributes
        • Querying the DOM - Element Styles
        • Events with JS and HTML
        • Exercise: Click Counter
        • Editing the DOM
        • Fetch Requests
        • Exercise: The NUSMods API
    • React
      • Setup
      • State
    • React Native
      • Setup
      • Intro to JSX
      • Basic Syntax
      • Handling UI
      • Props
      • State Management
    • Git
      • Setup
      • Command Glossary
      • Fundamental Concepts
        • Getting Started
        • Integrating Remote Repositories
        • Branching
        • Merge Conflicts
      • Collaborative Workflows
        • Fork and PR Workflow
        • Branch and PR Workflow
      • Advanced Concepts
        • Ignoring Files
        • Commit Message Conventions
        • Github Collaborators
        • CI/CD with Github Actions
        • Advanced Git Commands
      • FAQ
    • Telegram Bot
      • Creating a TeleBot
      • API Calls
      • Telebot Basics
      • Integrating API's
    • Relational Database
      • Database Overview
      • Database Design
      • Entity Relationship Diagram
      • SQL Basics & PostgreSQL
    • TypeScript
      • Types and Interfaces
      • Utility Types
      • Typing Component Props, Events, and Hooks
      • Why You Should Avoid Using any (and What to Do Instead)
      • TypeScript Tricks You’ll Use All the Time in React
Powered by GitBook
On this page
  • Slides
  • Motivation
  • Learning a new editor
  • Introduction to vim
  • Origins of Vi(m)
  • Philosophy of Vim
  • Using Vim
  • Normal to Command mode
  • Any mode to Normal mode
  • Navigation in Normal mode
  • Practice
  • Editing Text
  • Practice
  • Visual Mode
  • Practice
  • Opening Files and other commands
  • Macros
  • Practice
  • Extending Vim
  • Modern Vim/Neovim Workflows
  • Vim Emulation
  • Help
  • Resources
Edit on GitHub
Export as PDF
  1. Hackerschool

Vim

Previous3. Monitoring your serverNextIntroduction to Zig

Last updated 27 days ago

Slides

You can get the slides for this workshop here:

Motivation

Writing code or editing files on a computer has a lot of moving parts: you spend a lot of time switching between files, navigating and editing code compared to writing a long stream of words sometimes.

As programmers, or just general power users, we will spend a lot of time doing these things, so it is extremely beneficial to invest some time into learning an editor.

Learning a new editor

People tend to have extremely strong opinions on editors to learn. See:

For purposes of this workshop, we'll be trying to learn vim, a command line editor. Feel free to bring your experience of learning a new editor to any other editor

Introduction to vim

Within NUS, vim is the main editor you'll learn and use (you'll probably use it if you've done CS2030 within SOC). Vim is an editor with an extremely rich history. Vim is actually an acronym for VI iMproved, created by the late Bram Moolenaar in 1991, who unfortunately passed on in 2023.

As the name suggests, it was based of another text editor, vi, created by Bill Joy in 1976.

Vim is built around a bunch of cool ideas, and a lot of tools support vim emulation. It is probably really useful to learn the neat ideas of vim even if you end up using a different editor for your day to day use.

Origins of Vi(m)

Bill Joy was trying to create an editor that was usable with a 300 baud modem. To put this into context, this is approximately 0.3 kbits/second connection, and transmitting text was often much slower than the time it took to read it. This is why vim has somewhat unintuitive commands when you first start out. Because you could type only about one letter a second, the commands had to be really, really short.

As it turns out, if you build an editor with the purpose of minimizing keystrokes, you have a really efficient editor.

Philosophy of Vim

The key idea behind vim is that as a power user, you spend most of the time reading, not writing. As such, vim is built to be a modal editor: it has different modes for inserting text and manipulating text. Vim itself is a programmable with Vimscript and other languages. As such, there is also a huge thriving plugin community around vim. Vim itself is also a programmable interface, keystrokes are commands and we can compose them to do complex actions. While vim does have mouse support, to efficiently use vim, we very much avoid the use of the mouse, simply because it's too slow; Vim even avoids using the arrow keys because it would take too much time to move your hands to the arrow keys.

Summary

  1. Vim is built to be as efficient as possible

  2. Vim itself is a programmable interface: individual keystrokes become our commands and we can combine them to do some cool stuff.

  3. Vim tends to avoid anything that requires the movement of the hand off the homerow of the keyboard. This means less emphasis on arrow keys and the mouse, even though they still work in vim.

Using Vim

There are a few primary modes of vim:

  • Normal Mode - For moving around a file and making small edits

  • Insert Mode - For inserting text

  • Visual Mode - For selecting blocks of text

  • Command Mode - For entering commands

Keystrokes have very different meanings in different operating modes. For example, xin insert mode will just insert the 'x' character, but in normal mode it would delete a character.

In its default configuration, Vim shows the current mode in the bottom left. The initial/default mode is Normal mode. You’ll generally spend most of your time between Normal mode and Insert mode.

Opening vim and quitting vim

There's a common joke that if you give a web designer a computer with vim loaded up, and ask them to quit vim, you will get a random string generator. To open vim, just type vimin the terminal. To quit, just type :q. This might seem unintuitive at first, but we'll explain it as we go along.

If you're confused why vim is built this way, remember that the whole philosophy of vim is doing things with as little keystrokes as possible.

Normal to Command mode

Command mode is where we run commands similar to a command line in vim. To go to this mode, simple press : . A text bar should appear at the bottom of the screen. From there, we can execute several vim commands.

  • : - go to command mode

  • q (in command mode) - quits the file

  • w (in command mode) - saves the file

  • ! - force an action

  • :wq - save the file then quit

  • :q! - force quit file without saving

Once you are done, vim should automatically put you back in normal mode

Any mode to Normal mode

Normal mode is your default mode where you should spend most of your time. In vim, if you ever get lost or are not sure what is happening, always reset to normal mode Esc will bring you to normal mode from any of the other modes. You will be using this a lot.

But why escape?

It might seem quite counterintuitive to use escape since it’s quite out of place on your keyboard. However, vi was created using an ADM-3A terminal. It looks like this:

Notice where the Esckey is?

You will use the Esckey a lot when using vim. Consider remapping your Caps Lock:

  • If you're using Linux, you'll figure it out ;)

Navigation in Normal mode

First let’s open up a file using vim by using vim (filename). We can navigate the file by using hjkl (left, down, up, right respectively) Why not arrow keys (or a mouse)? Historically, it’s because the old keyboards did not have arrow keys or a mouse. However, in practice, it is extremely efficient as you don’t need to move you hands away from the alphanumeric keys to do anything.

Here are more movement options in Normal mode:

Type
Description

Basic

hjkl: left, down, up, right

Word

w: next word, b: back a word

File

gg: go to top of file, G: go to bottom of file

Line

0: beginning of line, $: end of line, ^: first non-whitespace of line

Line Numbers

34G: Go to line 34

Screen

H: igh part of screen, M:iddle of screen, L:ow part of screen

Braces

%: go to corresponding braces

Repeating

10j: to go down 10 times

Scroll

Ctrl + d: scroll down, Ctrl + u: scroll up

Find (inline)

f: to find further up the line, F: to find everything before the cursor, ,/;: to navigate between results

Search (file)

/ + query: to search forward from the cursor, ?to search backwards from the cursor

Practice

Open a text file using the command vim file. It could be any piece of text. Try navigating around the file with the above commands!

Editing Text

Make sure you are in normal mode. Esc

  1. i to insert before cursor

  2. I to insert at the start of line

  3. a to insert after cursor

  4. A to insert at the end of line

  5. o to start a next line and insert

  6. O to start a line above the current selection and insert

Get out of insert once done. Esc

Deleting Text

In normal word, you can quickly delete a portion of text:

  • d + modifier, deletes a certain portion based on the modifier

    • dw – delete word

    • 6dw – delete 6 words

    • dd – delete the entire line

    • d$ – delete till end of line

    • dt + char – delete till character

Making small edits

Similarly, change allows you to quickly delete and change a certain portion of text:

  • c + modifier – deletes then puts you into insert mode

    • cw – change word

    • 7cw – change 7 words

    • c$ – change till end of line

    • ct + char – change till certain character

Copy and pasting

In normal mode, yank (y) copies text into a buffer (think of Ctrl + C). The following commands are variations:

  • yy – yank the entire line

  • yw – yank a single word

  • 6yw – yank 6 words

  • yt + char – yank till (but not including) a certain character

  • p – put/paste whatever is in the buffer (below the current line)

  • P – put/paste whatever is in the buffer (above the current line)

Misc

  • x – delete a certain character

  • r – replace a character

  • . – repeat the last action

  • u – undo the previous action

  • Ctrl + r – redo the last undone action

Counts

You can combine nouns and verbs with a count, which will perform a given action a number of times.

  • 3w move 3 words forward

  • 5j move 5 lines down

  • 7dw delete 7 words

Modifiers

You can use modifiers to change the meaning of a noun. Some modifiers are i, which means “inner” or “inside”, and a, which means “around”.

  • ci( change the contents inside the current pair of parentheses

  • ci[ change the contents inside the current pair of square brackets

  • da' delete a single-quoted string, including the surrounding single quotes

Practice

Try and fix the typos and small erros here!

Visual Mode

There are a few kinds of visual modes:

  • Visual – v

  • Visual Line – V

  • Visual Block – Ctrl + v

You can use these selections along with the commands covered above:

  • y (yank)

  • d (delete)

  • c (change)

Practice

It seems like the data from the first two lines are corrupted, lets remove them from our data!

Opening Files and other commands

Aside from saving and quitting, here are a few more important commands to know:

  • :enew – opens a new file

  • :e <filepath> – open the file at the specified path

  • :sp – open a new horizontal split

  • :vsp – open a new vertical split

  • :sort- sort selected text

Macros

Macros are one of the really powerful features in Vim that can significantly speed up your workflow:

  • q + register to start recording a macro, then q again to stop recording

  • @<register> to apply (play back) the macro

Practice

Let’s use a macro to extract the names from these emails!

Extending Vim

There are tons of plugins for extending Vim. Contrary to outdated advice that you might find on the internet, you do not need to use a plugin manager for Vim (since Vim 8.0).

  • https://github.com/amix/vimrc

  • https://vimconfig.com

Modern Vim/Neovim Workflows

Without giving a long, non-exhaustive list of plugins, here are some really cools ones you should try out!

These plugins not only try to speed up your vim workflows, but also add additional functionality to vim.

Vim Emulation

Many tools support Vim emulation. The quality varies from good to great; depending on the tool, it may not support the fancier Vim features, but most cover the basics pretty well.

Help

Vim is a really powerful editor if you are able to master it. Don’t worry, there are plenty of resources!

  • :help <command> – get the manual for a specific command

  • vimtutor – built-in Vim tutor. Give it a read; it shouldn’t take more than 30 minutes

  • VimGolf – a really good practice site: edit the file in the fewest keystrokes

  • There are tons of Vim wikis, guides, and cheat sheets out there—just search for them!

Resources

This workshop was loosely based of MIT's Missing Semester of your CS Education:

https://vim.fandom.com/wiki/Map_caps_lock_to_escape_in_macOS
https://vim.fandom.com/wiki/Map_caps_lock_to_escape_in_Windows#Keyboard_Manager_(Microsoft_PowerToys)
https://missing.csail.mit.edu/2020/files/vimrc
LogoBill JoyWikipedia
LogoEditor warWikipedia
LogoBram MoolenaarWikipedia
Logohackertools_materials/vim/vim.pdf at main · nushackers/hackertools_materialsGitHub
Logohackertools_materials/vim/errors.txt at main · nushackers/hackertools_materialsGitHub
Logohackertools_materials/vim/cities.csv at main · nushackers/hackertools_materialsGitHub
Logohackertools_materials/vim/getNamesfromEmail.txt at main · nushackers/hackertools_materialsGitHub
https://github.com/preservim/nerdtree
LogoVimium - Chrome Web Store
LogoEditors (Vim)Missing Semester
https://github.com/nvim-telescope/telescope.nvim
https://github.com/itchyny/calendar.vim
https://github.com/VSCodeVim/Vim