https://github.com/leerob/vim-for-react-devs
A bite-sized course to get you quickly productive with Vim.
https://github.com/leerob/vim-for-react-devs
reactjs vim
Last synced: 2 months ago
JSON representation
A bite-sized course to get you quickly productive with Vim.
- Host: GitHub
- URL: https://github.com/leerob/vim-for-react-devs
- Owner: leerob
- Created: 2024-09-22T00:55:20.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-10-07T19:39:38.000Z (8 months ago)
- Last Synced: 2025-03-28T16:06:06.365Z (2 months ago)
- Topics: reactjs, vim
- Language: TypeScript
- Homepage: https://vimforreactdevs.com
- Size: 83 KB
- Stars: 820
- Watchers: 2
- Forks: 38
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vim for React Developers
by [leerob](https://leerob.com)
This mini-course is designed to help **React developers** learn **Vim** commands and apply them to real-world scenarios by fixing and editing React code. The course focuses on the most helpful Vim commands when working with React and JavaScript.
**https://vimforreactdevs.com**
## Prerequisites
Before starting this course, you should have neovim installed and configured:
1. Install Neovim and dependencies
- macOS: `brew install nvim fzf ripgrep`
- Windows: `choco install -y neovim git ripgrep wget fd unzip gzip mingw make`
2. Follow [this Neovim quickstart](https://github.com/nvim-lua/kickstart.nvim)
That's it! Download the [course file](./public/course.tsx) and start neovim with `nvim course.tsx`.
## Course Content
View the completed [course file](./public/course.tsx).
## Cheat Sheet
### Modes
- Normal Mode: Default mode for navigation and commands (`Esc`)
- Insert Mode: `i`, `I`, `a`, `A` (exit with `Esc`)
- Visual Mode: `v` (character), `V` (line), `Ctrl+v` (block)
- Command Mode: `:`
### Navigation
- Basic: `h` (left), `j` (down), `k` (up), `l` (right)
- Words: `w` (next word), `b` (previous word), `e` (end of word)
- Lines: `0` (start), `^` (first non-whitespace), `$` (end)
- Scrolling: `Ctrl+d` (down), `Ctrl+u` (up)
- File: `gg` (top), `G` (bottom)
### Actions
- `d`: Delete
- `c`: Change (delete and enter Insert Mode)
- `y`: Yank (copy)
- `v`: Visual selection
### Motions
- `i`: Inside
- `a`: Around
### Objects
- `w`: Word
- `p`: Paragraph
- `t`: Tag
- `q`: Quote (or `'`, `"`, ```)
- `b`: Bracket (or `(`, `{`, `[`, `<`)
### Examples
- `dw`: Delete Word
- `cw`: Change Word
- `yy`: Copy Entire Line
- `y$`: Copy To End Of Line
- `diq`: Delete Inside Quotes
- `ca{`: Change Around Braces
- `ci(`: Change Inside Parenthesis
- `yap`: Yank Paragraph
- `dab`: Delete Around Brackets
- `yiw`: Yank Inside Word
- `ciw`: Change Inside Word
- `vit`: Visual Selection Inside Tag
- `ct"`: Change To Next `"` (leaving the `"`)
- `df|`: Delete to Next `|` (including the `|`)
### Miscellaneous
- `.`: Repeat Last Command
- `gd`: Go To Definition
- `f`: Find Character
- `t`: To Character
- `ZZ`: Save & Close Vim
- `u`: Undo
- `Ctrl+r`: Redo