1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

Vim for React Developers

Vim has been around for over 30 years, and vi (which vim extends) almost 50 years.

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

Yet, somehow, I had never tried out vim (or neovim). I had been using VS Code for the past six years, and honestly, hadn’t spent much time exploring other options.

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

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

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

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

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

What You'll Learn

  • How to quickly navigate through code with Vim
  • Examples for how to refactor React patterns
  • Searching, finding, and replacing text
  • Time-saving vim motions to memorize
  • Recommended patterns and neovim configuration

Course Benefits

  • Created specifically for React developers
  • Focused on practical, real-world scenarios
  • Learn to navigate and edit code faster
  • Includes a comprehensive cheat sheet
Download Course File