33 | Vim for React Developers 34 |

37 | Vim has been around for over 30 years, and vi (which Vim extends) 38 | almost 50 years. 39 |

42 | So why does it feel like everyone is talking about Vim right now? 43 | There’s been a Vim renaissance lately from the popularity of Neovim 44 | and its growing community. 45 |

48 | Yet, somehow, I had never tried out Vim (or Neovim). I had been using 49 | VS Code for the past six years, and honestly, hadn’t spent much time 50 | exploring other options. 51 |

54 | I’ve used Notepad, Eclipse, Android Studio, XCode, Sublime Text, and 55 | finally VS Code over the years. VS Code felt like the best place to do 56 | web development with its git integration and ecosystem of extensions. 57 | But it’s started to feel bulky and slow (to me at least). 58 |

61 | The web community has largely chosen VS Code as the go-to IDE. 62 | However, the landscape is changing fast. There’s new tools, like Zed 63 | and Cursor, that are providing AI-enhanced editors. Yet, I haven’t 64 | seen as many web developers considering Neovim as another contender. 65 |

68 | I’ve spent the past month learning Vim motions, making Neovim my 69 | default editor, and I believe it’s one of the better options for web 70 | developers right now. Everything I love about VS Code I’m able to get 71 | with Neovim, including fantastic options for git, time-saving 72 | shortcuts for common web dev actions, and even AI tools. 73 |

76 | As I learned Vim motions, I applied them to a React codebase to see 77 | what patterns would work well. This mini course takes those patterns 78 | and tips and is designed to get you up to speed on the Vim motions you 79 | need to know. I’ve also included a cheat sheet of the most common 80 | commands needed (and how to think about them as a vocabulary, making 81 | them easier to utilize). 82 |

85 | This free course will not teach you every possible Vim motion. 86 | Instead, it will focus on the commands I've found to be most helpful 87 | when working with React and JavaScript. However, they apply more 88 | generally outside React. Are you ready? 89 |

92 |

93 | What You'll Learn 94 |

95 |

{topic}

100 |

103 |

Course Benefits

104 |

{benefit}

109 |

`. 202 | 203 | function App() { } 204 | 205 | // Expected result: 206 | // function App() { 207 | // return ( 208 | //

209 | //

210 | // ); 211 | // } 212 | 213 | // Let's add a `

` tag inside the `

`. 214 | 215 | // Steps: 216 | // 1. Place your cursor anywhere on the `

` line. 217 | // 2. Press `o` to create a new line below and enter insert mode. 218 | // 3. Type `

Hello

` and press `Esc`. 219 | // Bonus tip: you can also use `O` to create a new line above, rather than below. 220 | 221 | // TODO: Add a `

` tag with the text "Hello" inside the `

`. 222 | 223 | function App() { 224 | return ( 225 |

226 |

227 | ); 228 | } 229 | 230 | // Expected result: 231 | // function App() { 232 | // return ( 233 | //

234 | //

Hello

235 | //

236 | // ); 237 | // } 238 | 239 | // Now, let's practice moving to the start and end of lines. 240 | 241 | // Steps: 242 | // 1. Place your cursor anywhere on the `

` line. 243 | // 2. Press `0` (zero) to move to the start of the line. 244 | // 3. Alternatively, to enter insert mode at the beginning of the line, press `I` (capital i). 245 | // 4. Notice how `I` will also match the indentation level – nice! 246 | // 5. When navigating back to the start, you can also use `^` to go to non-whitespace chars. 247 | 248 | // TODO: Move to the beginning of the `

` line. 249 | 250 | function App() { 251 | return ( 252 |

253 |

Hello

254 |

255 | ); 256 | } 257 | 258 | // Now, let's do the opposite. 259 | 260 | // Steps: 261 | // 1. Press `$` to move to the end of the

line. 262 | // 2. Alternatively, to enter insert mode at the end of the line, press `A` (capital a). 263 | // 3. Remember to exit insert mode by pressing `Esc`. 264 | // 4. Try going back and forth with `0` and `$` a few times. 265 | 266 | // TODO: Move to the end of the `

` line. 267 | 268 | function App() { 269 | return ( 270 |

271 |

Hello

272 |

273 | ); 274 | } 275 | 276 | // Now, we want to change "Hello" to "World". 277 | 278 | // Steps: 279 | // 1. Use `w` (move forward by word) to move the cursor to "Hello". 280 | // 2. Press `cw` (change word) to change the word. (`cw` stands for "change word"). 281 | // 3. Type `World` and press `Esc`. 282 | 283 | // TODO: Change "Hello" to "World". 284 | 285 | function App() { 286 | return ( 287 |

288 |

Hello

289 |

290 | ); 291 | } 292 | 293 | // Expected result: 294 | // function App() { 295 | // return ( 296 | //

297 | //

World

298 | //

299 | // ); 300 | // } 301 | 302 | // Let's add another paragraph below. 303 | 304 | // Steps: 305 | // 1. From normal mode, navigate to the end of the `

World

` line. 306 | // 2. Press `o` to create a new line below and enter insert mode. 307 | // 3. Type `

Welcome to the Vim course.

` and press `Esc`. 308 | 309 | // TODO: Add another `

` tag with the text "Welcome to the Vim course." 310 | 311 | function App() { 312 | return ( 313 |

314 |

World

315 |

316 | ); 317 | } 318 | 319 | // Expected result: 320 | // function App() { 321 | // return ( 322 | //

323 | //

World

324 | //

Welcome to the Vim course.

325 | //

326 | // ); 327 | // } 328 | 329 | // --- End of Basic Motions Lesson --- 330 | 331 | // NOTE: ✦ Lesson: Search and Replace 332 | 333 | // Let's learn how to search for a keyword and replace it. 334 | 335 | // Steps: 336 | // 1. Suppose we have multiple instances of the word "World" in our code. 337 | // 2. Press `/World` and press `Enter` to search for "World". 338 | // 3. Press `n` to go to the next occurrence, and `N` to go back. 339 | // 4. Once you're on the instance you want to change, press `cw` (change word). 340 | // 5. Type `Developer` and press `Esc`. 341 | 342 | // TODO: Replace the word "World" with "Developer" using search. 343 | 344 | // Add another instance of "World" for practice. 345 | 346 | function App() { 347 | return ( 348 |

349 |

World

{/* Change me */} 350 |

Welcome to the Vim course.

351 |

Hello World!

352 |

353 | ); 354 | } 355 | 356 | // Expected result: 357 | //

Developer

358 | //

Welcome to the Vim course.

359 | //

Hello World!

360 | 361 | // --- End of Search and Replace Lesson --- 362 | 363 | // NOTE: ✦ Lesson: Refactoring 364 | 365 | // Inside our `App` function, let's add local state with `useState`. 366 | 367 | // Steps: 368 | // 1. Move inside the `App` function, after the opening `{`. 369 | // 2. Press `o` to create a new line below and enter insert mode. 370 | // 3. Type `const [name, setName] = useState();` and press `Esc`. 371 | 372 | // TODO: Add a new `useState` declaration for `name`. 373 | 374 | function App() { 375 | return ( 376 |

377 |

Developer

378 |

Welcome to the Vim course.

379 |

Hello World!

380 |

381 | ); 382 | } 383 | 384 | // Expected result: 385 | // const [name, setName] = useState(); 386 | 387 | // Let's add a `` and press `Esc`. 393 | 394 | // TODO: Add a ` 410 | 411 | // Let's refactor the `onClick` handler into a separate function. 412 | 413 | // Steps: 414 | // 1. Place your cursor at the start of the line with ` 439 |

440 | ); 441 | } 442 | 443 | // Expected result: 444 | // function App() { 445 | // const [name, setName] = useState(); 446 | // 447 | // const handleClick = () => setName('Lee') 448 | // 449 | // return ( 450 | //

451 | //

Developer

452 | //

Welcome to the Vim course.

453 | //

Hello World!

454 | // 455 | //

456 | // ); 457 | // } 458 | 459 | // What if you don't want to replace the entire `onClick` content? 460 | 461 | // Steps: 462 | // 1. Place your cursor on the ` 479 |

480 | ); 481 | } 482 | 483 | // Expected result: 484 | // 485 | 486 | // --- End of Refactoring Lesson --- 487 | 488 | // NOTE: ✦ Lesson: Text Objects 489 | 490 | // Let's practice using text objects to manipulate text inside quotes. 491 | 492 | // Steps: 493 | // 1. Place your cursor anywhere on the line with `'Click Me'` before the string. 494 | // 2. Press `ci'` (change inside quotes) to delete the content inside the quotes and enter insert mode. 495 | // 3. Type `Update Name` and press `Esc` to exit insert mode. 496 | 497 | // TODO: Change the text inside the quotes of `'Click Me'` to `'Update Name'`. 498 | 499 | function App() { 500 | const [name, setName] = useState(); 501 | 502 | const handleClick = () => setName('Lee'); 503 | 504 | return ( 505 |

506 |

Developer

507 |

Welcome to the Vim course.

508 |

Hello World!

509 | 510 |

511 | ); 512 | } 513 | 514 | // Expected result: 515 | // {'Update Name'} 516 | 517 | // Now, let's try changing from `'` to a string template, using `caq`. 518 | // "Change around quotes" is even better than a specific character, as it 519 | // will handle `"`, `'`, and even `` ` ``. `caq` comes from the `mini.ai` 520 | // plugin, which the Neovim Quickstart sets up for us. 521 | 522 | // Steps: 523 | // 1. Place your cursor anywhere on the line with `{'Update Name'}`. 524 | // 2. Press `caq` to delete the string and enter insert mode. 525 | // 3. Type `Name: ${name}` and press `Esc` to exit insert mode. 526 | 527 | // TODO: Modify the button text to be a string template literal. 528 | 529 | function App() { 530 | const [name, setName] = useState(); 531 | 532 | const handleClick = () => setName('Lee'); 533 | 534 | return ( 535 |

536 |

Developer

537 |

Welcome to the Vim course.

538 |

Hello World!

539 | 540 |

541 | ); 542 | } 543 | 544 | // Expected result: 545 | // 546 | 547 | // --- End of Text Objects Lesson --- 548 | 549 | // NOTE: ✦ Lesson: More Refactoring 550 | 551 | // Let's replace the contents inside the `

` tag. 552 | 553 | // Steps: 554 | // 1. Navigate anywhere inside of the `

` tag in the return statement. 555 | // 2. Press `cit` (change inside tag) to delete all children of `

` and enter insert mode. 556 | // 3. Type `

This is the new content.

` and press `Esc` to exit insert mode. 557 | 558 | // TODO: Replace the contents inside the `

` tag with `

This is the new content.

`. 559 | 560 | function App() { 561 | return ( 562 |

563 | {/* Existing content */} 564 |

565 | ); 566 | } 567 | 568 | // Expected result: 569 | // function App() { 570 | // return ( 571 | //

572 | //

This is the new content.

573 | //

574 | // ); 575 | // } 576 | 577 | // ✦ Lesson: Quick Deletes 578 | 579 | // Let's delete everything inside parentheses, commonly used for React props. 580 | 581 | // Steps: 582 | // 1. Place your cursor anywhere on the line with `function Component({ foo: 'bar' }) {`. 583 | // 2. Press `di(` (delete inside parentheses) to delete the content inside `()`. 584 | 585 | // TODO: Delete the props inside the component definition. 586 | 587 | function Component({ foo: 'bar' }) { 588 | // ... 589 | } 590 | 591 | // Expected result: 592 | // function Component() { 593 | // // ... 594 | // } 595 | 596 | // If you need to change the props, enter insert mode with `ci(`. 597 | 598 | // TODO: Try using `ci(` to delete the props and start typing immediately. 599 | 600 | function Component({ foo: 'bar' }) { 601 | // ... 602 | } 603 | 604 | // --- End of More Refactoring Lesson --- 605 | 606 | // NOTE: ✦ Lesson: Deleting Lines and Repeating Commands 607 | 608 | // Steps: 609 | // 1. Place your cursor on the first `

` line inside the `

`. 610 | // 2. Press `dd` to delete the line. 611 | // 3. Press `.` (dot) to repeat the last command. 612 | // 4. Repeat pressing `.` until you've deleted all the `

` lines. 613 | 614 | // TODO: Delete multiple lines using `dd` and repeat with `.`. 615 | 616 | function App() { 617 | return ( 618 |

619 |

Line 1

620 |

Line 2

621 |

Line 3

622 |

Line 4

623 |

Line 5

624 |

625 | ); 626 | } 627 | 628 | // Expected result: 629 | // (All `

` lines are deleted) 630 | // function App() { 631 | // return ( 632 | //

633 | //

634 | // ); 635 | // } 636 | 637 | // Now, to delete and change a line. 638 | 639 | // Steps: 640 | // 1. Place your cursor on the `

` line. 641 | // 2. Press `S` (capital S) to delete the line and enter insert mode at the start. 642 | // 3. Type `

`, fill the tag with "New", and press `Esc` to exit insert mode. 643 | // Reminder, you could also do `cit` if you wanted to keep the `div`, but just replace the content. 644 | 645 | // This is more efficient than doing `dd` followed by `O`. 646 | 647 | // TODO: Replace the `

` tag with `

`. 648 | 649 | function App() { 650 | return ( 651 |

Delete Me

652 | ); 653 | } 654 | 655 | // Expected result: 656 | // function App() { 657 | // return ( 658 | //

New

659 | // ); 660 | // } 661 | 662 | // --- End of Deleting Lines Lesson --- 663 | 664 | // NOTE: ✦ Lesson: Find and Replace 665 | 666 | // Let's perform a find and replace operation. 667 | 668 | // Steps: 669 | // 1. Press `:` to enter command mode. 670 | // 2. Type `:%s/unique/common/gc` and press `Enter`. 671 | // 3. Press `y` or `n` to confirm replacing found matches. 672 | 673 | // This command means: 674 | 675 | // - `%`: Apply to all lines in the file. 676 | // - `s`: Substitute. 677 | // - `unique`: The search pattern. 678 | // - `common`: The replacement string. 679 | // - `g`: Global (replace all occurrences in each line). 680 | // - `c`: Prompt for confirmation on each change. 681 | 682 | // TODO: Only replace instances of `unique` with `common` inside the component. 683 | 684 | function App() { 685 | return ( 686 |

687 |

unique

688 |

unique

689 |

690 | ); 691 | } 692 | 693 | // Then, hit `u` to undo these changes. 694 | 695 | // --- End of Find and Replace Lesson --- 696 | 697 | // NOTE: ✦ Lesson: Visual Mode 698 | 699 | // It's helpful to learn different ways to visually select text. Once text 700 | // is selected, you can then copy it (yank `y`), delete it (`d`), and more. 701 | 702 | // Steps: 703 | // 1. Place your cursor on the `return` line. 704 | // 2. Type `vi(` (or `vab`) to select all content inside parenthesis. 705 | // 3. You currently have the exact text selected (try `c` and see where you cursor lands) 706 | // 4. `Esc`, undo (`u`) the last change, and re-select with `vi(`. 707 | // 5. Type `va(` to select all content around the parenthesis. 708 | // 6. Type 'V' to change to line selection. Now `return` is also selected. 709 | // 7. Type `d` to delete and cut the entire `return` statement. 710 | 711 | // TODO: Try selecting and modifying the text below. 712 | 713 | function App() { 714 | return ( 715 |

716 |

Select Me

717 |

718 | ); 719 | } 720 | 721 | // Expected result: 722 | // function App() { 723 | // } 724 | 725 | // When you have content selected, you can also use `>` to indent to the right, 726 | // and `<` to shift content back left. 727 | 728 | // --- End of Course --- 729 | 730 | // NOTE: Congratulations! You've completed the course. 731 | 732 | // Now, to make this stick, start building using Vim and reference the cheat sheet. 733 | // You will make mistakes — this is okay! If you use the wrong command or mess up, 734 | // stop, undo (`u`), and try again. Try moving slower and think carefully 735 | // about the sequence of commands you'll use before you start typing. Enjoy! 736 | 737 | // Cheat sheet: https://github.com/leerob/vim-for-react-devs 738 | 739 | // NOTE: ✦ Recommended Neovim Plugins 740 | 741 | // Here are the plugins that I recommend for React and TypeScript development: 742 | 743 | // Included in the Neovim Kickstart: 744 | // - Telescope (find and open files, search across your directory) 745 | // - nvim-autopairs (Automatically close characters like `(`, `{`, `[`, `'`, `<`, and more) 746 | // - mini.ai (despite the name, not related to AI – this enables `dit`, `ciq`, and more) 747 | 748 | // Other Recommended Plugins 749 | // - neo-tree (Press `\` to toggle file system GUI, similar to VSCode) 750 | // - This is in the Kickstart, but you need to uncomment it 751 | // - lazygit (easy GUI for git commands) 752 | // - macOS: brew install lazygit 753 | // - Windows: choco install -y lazygit 754 | // - lazygit.nvim (open lazygit directly from Neovim with lg) 755 | // - defaults to `space` with Quickstart 756 | // - https://github.com/kdheepak/lazygit.nvim 757 | // - Avante (AI-driven code suggestions, similar to Cursor) 758 | // - https://github.com/yetone/avante.nvim 759 | // - nvim-ts-autotag (automatically close HTML tags, even from JSX) 760 | // - https://github.com/windwp/nvim-ts-autotag 761 | // - alpha-nvim (nice startup screen which shows recently used files) 762 | // - https://github.com/goolord/alpha-nvim 763 | // - inc-rename (rename all instances of a variable in the file) 764 | // - With a keymap, this can be faster than :%s/ 765 | // - https://github.com/smjonas/inc-rename.nvim 766 | // - mini.comment (`gc` to comment selection, `gcc` to comment line) 767 | // - https://github.com/echasnovski/mini.nvim/blob/main/readmes/mini-comment.md 768 | // - Paired with https://github.com/JoosepAlviste/nvim-ts-context-commentstring/wiki/Integrations#minicomment 769 | // - mini.move (select blocks of text and move them up/down with `j`/`k`) 770 | // - https://github.com/echasnovski/mini.nvim/blob/main/readmes/mini-move.md 771 | 772 | // NOTE: ✦ Neovim > VS Code 773 | 774 | // If you've made it this far, why not try to make Neovim your default editor? 775 | // You might be wondering, can I do everything in Neovim that I could in VS Code? 776 | // 777 | // - Jumping into function definitions (e.g. read the source for `useState`) — yes! 778 | // - `gd` allows you to "Go To Definition" 779 | // - Fuzzy find search for filenames (e.g. search `page` for `app/page.tsx`) — yes! 780 | // - Kickstart includes Telescope for this (this is also why we installed `fzf` and `ripgrep`) 781 | // - sf – Search Files (I remapped to , i.e. Cmd+P, to match VS Code) 782 | // - sg - Search across directory 783 | // - Quickly navigate to errors — yes! 784 | // - Neovim calls these errors "diagnostics" 785 | // - Again, Telescope makes this _really_ easy 786 | // - sd - "Search Diagnostics" 787 | // - While in a file, you can move between diagnostics with `[d` and `]d` 788 | // - This is helpful to quick move through TypeScript errors, for example 789 | // - Extensions — yes! 790 | // - Many of the extensions you love in VS Code are "Language Server Protocol" integrations 791 | // - Neovim can integrate with any LSP you need, e.g. TypeScript, Tailwind CSS, and more 792 | // - AI Workflows — yes! 793 | // - Check out the avante.nvim plugin above 794 | // - Navigate forward and backward between files — yes! 795 | // - `Ctrl + o`: Back 796 | // - `Ctrl + i`: Forward 797 | 798 | // NOTE: Additional Learning Resources 799 | 800 | // - Vim Tutor (run `:Tutor` inside Neovim) 801 | // - Understand Kickstart: https://www.youtube.com/watch?v=m8C0Cq9Uv9o 802 | // - Understand Neovim Configs: https://www.youtube.com/playlist?list=PLsz00TDipIffreIaUNk64KxTIkQaGguqn 803 | 804 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "strict": true, 12 | "noEmit": true, 13 | "esModuleInterop": true, 14 | "module": "esnext", 15 | "moduleResolution": "bundler", 16 | "resolveJsonModule": true, 17 | "isolatedModules": true, 18 | "jsx": "preserve", 19 | "incremental": true, 20 | "plugins": [ 21 | { 22 | "name": "next" 23 | } 24 | ], 25 | "paths": { 26 | "@/*": [ 27 | "./*" 28 | ] 29 | } 30 | }, 31 | "include": [ 32 | "next-env.d.ts", 33 | "**/*.ts", 34 | "**/*.tsx", 35 | ".next/types/**/*.ts" 36 | ], 37 | "exclude": [ 38 | "node_modules", 39 | "public" 40 | ] 41 | } 42 | --------------------------------------------------------------------------------