Code Editing Workflows

Vim's editing model is fundamentally different from other editors. Instead of selecting with a mouse and typing, you compose operations using a grammar of operators, motions, and text objects.

The Vim Grammar

Every Vim editing command follows this pattern:

[count] [operator] [count] [motion/text-object]

Examples:

• d3w = delete 3 words
• c$ = change to end of line
• 2dd = delete 2 lines
• di( = delete inside parentheses
• >5j = indent next 5 lines

Operators (Verbs)

Operators perform actions on text.

Motions (How Far)

Motions define where the operator acts.

Word Motions

Example:

javascript
const userName = "John";
      ↑        ↑   ↑
      w moves here
               e moves here
                   w moves here

// w = treats userName as one word
// W = treats everything as one WORD until space

Line Motions

Search Motions

Example:

javascript
const result = calculateTotal(price, tax);
                              ↑      ↑
                              fa finds 'a'
                                     t) goes before ')'

Paragraph/Block Motions

Text Objects (What to Act On)

Text objects define boundaries intelligently.

Inner vs Around

• i = inner (excludes surrounding delimiters)
• a = around (includes surrounding delimiters)

Common Text Objects

Practical Examples

Changing Text Inside Delimiters

javascript
// Cursor anywhere inside the quotes
const message = "Hello World";

ci"           → Change inside quotes
→ Result: const message = "|";  (in insert mode)

// Cursor anywhere in the function call
calculate(price, tax)

ci(           → Change inside parens
→ Result: calculate(|)  (in insert mode)

Deleting Function Arguments

javascript
function greet(name, age, location) {
  // ...
}

// Cursor on "name"
di(           → delete inside ()
→ Result: function greet() {

// Or delete including the parens
da(
→ Result: function greet {

Changing HTML Tag Contents

html
<div class="container">Old content here</div>

<!-- Cursor anywhere in the tag -->
cit           → Change inside tag
→ Result: <div class="container">|</div>  (insert mode)

<!-- Delete tag and contents -->
dat
→ Result: (empty line)

Yanking (Copying) and Pasting

javascript
const userName = "John";

// Yank word
yiw           → Yanks "John"

// Move cursor somewhere else
p             → Paste after cursor
P             → Paste before cursor

// Yank entire line
yy            → Yank line
Y             → Also yanks line

// Yank 3 lines
y3j           → Yank current + 3 down

Duplicating Lines

javascript
const name = "John";

// Duplicate line
yy            → Yank line
p             → Paste below
→ Result:
const name = "John";
const name = "John";

Indenting Code Blocks

javascript
function hello() {
const x = 1;
const y = 2;
return x + y;
}

// Cursor inside function
>i{           → Indent inside {}
→ Indents all lines inside braces

// Or indent 3 lines
3>>           → Indent current + next 2 lines

Commenting Out Code (with nvim-surround)

LazyVim includes nvim-surround for quick wrapping.

javascript
const value = 42;

// Add single-line comment
ys$c          → Surround to end of line with comment
→ Result: // const value = 42;

// Surround word with quotes
ysiw"         → Surround inner word with "
→ Result: const "value" = 42;

// Change surrounding quotes
cs"'          → Change surrounding " to '
→ Result: const 'value' = 42;

// Delete surrounding quotes
ds"           → Delete surrounding "
→ Result: const value = 42;

The Dot Command (Repeat)

The . command repeats your last change.

This is one of Vim's most powerful features.

Example 1: Change Multiple Words

javascript
const oldName = "test";
const oldName2 = "test";
const oldName3 = "test";

// On first line:
ciwnewName<Esc>    → Change "oldName" to "newName"

// Move to second line:
j^                 → Down, to start
.                  → Repeat (changes oldName2 to newName)

// Move to third line:
j^
.                  → Repeat again

Example 2: Delete Function Calls

javascript
console.log("debug 1");
console.log("debug 2");
console.log("debug 3");

// On first line:
dd                 → Delete line

// On second line:
.                  → Repeat (delete line)

// On third line:
.                  → Repeat (delete line)

Example 3: Indent Multiple Blocks

javascript
function a() {
code;
}

function b() {
code;
}

// On first function:
>i{                → Indent inside braces

// Navigate to second function:
}                  → Jump to next block
.                  → Repeat indent

Visual Mode (Selection)

Sometimes you need to see what you're operating on.

Visual Modes

Visual Mode Workflow

javascript
const userName = "John";

// Select "userName" and change it:
v              → Enter visual mode
iw             → Select inner word
c              → Change (deletes and enters insert)
newName<Esc>   → Type new name

// Or more simply:
ciw            → Same thing without visual mode!

Visual mode is useful when:

• You're learning and want to see the selection
• You need to verify what you're about to delete
• Working with complex, irregular selections

But usually it's faster to skip visual mode:

• ciw instead of viw + c
• dap instead of Vap + d

Multiple Cursors (Visual Block)

Visual block mode (Ctrl+v) lets you edit multiple lines at once.

Example: Add semicolons to multiple lines

javascript
const a = 1
const b = 2
const c = 3

// On first line, end of line:
$              → Go to end
Ctrl+v         → Visual block mode
jj             → Select down 2 lines
$              → Extend to end of each line
A              → Append (insert at end)
;              → Type semicolon
<Esc>          → Apply to all lines

→ Result:
const a = 1;
const b = 2;
const c = 3;

Example: Comment multiple lines

javascript
const x = 1;
const y = 2;
const z = 3;

// At start of first line:
Ctrl+v         → Visual block
jj             → Select 3 lines
I              → Insert at start
// <Esc>       → Add comment, apply to all

→ Result:
// const x = 1;
// const y = 2;
// const z = 3;

Search and Replace

Within File

vim
:%s/old/new/g        " Replace all in file
:%s/old/new/gc       " Replace with confirmation
:s/old/new/g         " Replace in current line
:'<,'>s/old/new/g    " Replace in visual selection

Across Multiple Files (with Telescope)

vim
" 1. Find all occurrences
Space + s + g → Type "oldFunction"

" 2. Send to quickfix
Ctrl+q

" 3. Replace in all files
:cdo s/oldFunction/newFunction/g

" 4. Save all
:wa

Macros (Record and Replay)

Macros record a sequence of commands and replay them.

Record a Macro

vim
qa             " Start recording to register 'a'
<commands>     " Do your edits
q              " Stop recording

Replay Macro

vim
@a             " Replay macro 'a'
@@             " Replay last macro
10@a           " Replay 10 times

Example: Format JSON Lines

json
name: "John"
age: 30
city: "NYC"

" Want to add quotes around keys:
" Record macro:
qa             " Start recording
^              " Go to start
i"<Esc>        " Add opening quote
f:             " Find colon
i"<Esc>        " Add closing quote
j              " Move to next line
q              " Stop recording

" Replay:
@a             " Runs on second line
@a             " Runs on third line

→ Result:
"name": "John"
"age": 30
"city": "NYC"

Essential Workflow Patterns

Pattern 1: Change Inside Thing

Problem: Change text inside delimiters

Solution: ci + delimiter

javascript
const msg = "old text";
ci"             → Change inside quotes

function(arg1, arg2)
ci(             → Change inside parens

<div>content</div>
cit             → Change inside tag

Pattern 2: Delete Around Thing

Problem: Delete function call entirely

Solution: da + delimiter

javascript
console.log("debug");
da(             → Delete including parentheses
→ Result: console.log

Pattern 3: Yank and Duplicate

Problem: Duplicate a block

Solution: yap + p

javascript
function test() {
  return 42;
}

yap             → Yank around paragraph (entire function)
p               → Paste below

Pattern 4: Indent Block

Problem: Indent nested code

Solution: >i{ or >ap

javascript
function test() {
code;
more code;
}

>i{             → Indent inside braces

Pattern 5: Quick Word Change

Problem: Change one word

Solution: ciw

javascript
const oldName = 42;
      ↑ cursor here
ciwnewName<Esc>
→ Result: const newName = 42;

Common Mistakes and Fixes

❌ Using backspace to delete words → Use db (delete back word) or daw (delete around word)

❌ Selecting with visual mode for simple changes → Use text objects: ciw instead of viwc

❌ Not using the dot command → After any change, repeat with . on similar items

❌ Repeating the same manual edit → Record a macro with qa, do the edit, q, then @a to repeat

❌ Not learning text objects → ci", di(, ca{ are the most powerful Vim features

Keybinding Cheat Sheet

Practice Exercise

Try these edits on this code:

javascript
function calculateTotal(price, tax) {
  const subtotal = price;
  const total = subtotal + tax;
  console.log("Debug: total is " + total);
  return total;
}

Tasks:

1. Change price to amount (use ciw)
2. Delete the console.log line (use dd)
3. Change the string inside the console.log before deleting (use ci")
4. Indent the entire function body (use >i{)
5. Duplicate the function (use yap then p)
6. Change function name (use ciw on function name)

Solutions:

1. Cursor on "price", ciw, type "amount", <Esc>
2. Cursor on console.log line, dd
3. Cursor in string, ci", type new text, <Esc>
4. Cursor in function, >i{
5. Cursor in function, yap, p
6. Cursor on "calculateTotal", ciw, type new name, <Esc>

Related:

• Neovim - The Vim Ecosystem - Understanding modal editing
• File Navigation in LazyVim - Finding files before editing
• LSP and Code Intelligence - Automated refactoring
• Git Integration in LazyVim - Committing your changes