5 Terminal Commands That Make Frontend Work Faster
You’re deep in a React project with hundreds of components. You need to find every file that imports a specific hook, locate that utility function you wrote last week, and recall the exact build command you ran yesterday. Clicking through folders and scrolling through browser history wastes minutes that compound into hours.
These five commands solve those problems. They’re not build tools or framework scaffolding—just fast CLI workflows that help you search, navigate, and work more efficiently inside large codebases.
Key Takeaways
- Ripgrep (
rg) searches file contents across thousands of files faster than standardgrep, automatically ignoringnode_modulesand respecting.gitignore. - fzf provides interactive fuzzy finding that lets you locate files by typing partial names, eliminating the need to remember exact paths.
- Ctrl+R searches your shell history for previously run commands, and pairing it with fzf upgrades this to a visual fuzzy search.
- fd offers simpler syntax than the traditional
findcommand for locating files by name pattern. - tree and eza display directory structures hierarchically, helping you understand project layouts at a glance.
1. Ripgrep: Fast In-Project Text Search
Problem it solves: Finding every file that references a prop, function, or import across thousands of files.
Standard grep -R works, but ripgrep (rg) is dramatically faster. It automatically ignores node_modules, respects .gitignore, and searches recursively by default.
rg "useState" --type jsThis finds every JavaScript file containing useState in your project. Need to find where a component receives a specific prop? Search and navigation commands like this take seconds instead of minutes.
Pro tip: Add -l to list only filenames, or -C 2 to show two lines of context around each match.
2. fzf: Fuzzy Finding for Everything
Problem it solves: Opening files when you only remember part of the name.
fzf is an interactive fuzzy finder that transforms how you navigate projects. Type a few characters, and it instantly filters thousands of files to show matches.
fzfStart typing btncomp and it finds src/components/ButtonComponent.tsx. Fuzzy matching eliminates the mental overhead of remembering exact paths.
Editor integration: Pipe results directly to your editor:
code $(fzf)3. Ctrl+R with Enhanced History Search
Problem it solves: Recalling long commands you ran days ago.
Every shell stores command history. Press Ctrl+R and start typing to search backwards through it. This is essential for frontend developers who run complex build, test, or deployment commands.
# Press Ctrl+R, then type "build"
# Finds: npm run build:prod --env=stagingPower move: Install fzf and it automatically upgrades Ctrl+R to a visual fuzzy search through your entire history. You’ll find that obscure webpack command from last month in seconds.
Shell compatibility: Works in Bash and Zsh. Fish uses Ctrl+R differently but offers similar functionality.
Discover how at OpenReplay.com.
4. fd: Modern File Finding
Problem it solves: Locating files by name pattern without remembering arcane find syntax.
The traditional find command works but requires verbose flags. fd is a simpler, faster alternative that ignores hidden files and node_modules by default.
fd "\.test\.js$"This finds all test files in your project. Need to find that config file you created recently?
fd config --type f --changed-within 1weekThese commands help you navigate unfamiliar codebases quickly.
5. tree or eza: Clear Directory Structure
Problem it solves: Understanding project layout without clicking through folders.
When you join a new project or explore an unfamiliar package, seeing the structure at a glance helps. The tree command displays directories hierarchically.
tree -L 2 -I node_modulesThis shows two levels deep, excluding node_modules. For a more modern alternative, eza (the maintained successor to exa) provides colorized output with git status:
eza --tree --level=2 --git-ignoreQuick Reference
| Task | Command |
|---|---|
| Search file contents | rg "pattern" |
| Find files by name | fd "pattern" |
| Fuzzy open files | fzf |
| Search command history | Ctrl+R |
| View directory structure | tree -L 2 or eza --tree |
Conclusion
Pick one command and use it for a week. rg and Ctrl+R offer the fastest payoff—you’ll immediately stop manually searching through files or retyping long commands.
These tools work across any frontend project regardless of framework. They form the foundation of fast CLI workflows that compound over time. Once you internalize them, you’ll wonder how you worked without them.
FAQs
Yes, all five tools work on Windows. Ripgrep, fd, fzf, and eza can be installed via package managers like Scoop or Chocolatey. The tree command is built into Windows Command Prompt. For the best experience, consider using Windows Terminal with WSL or Git Bash, which provide a more Unix-like environment where these tools feel native.
Most package managers support these tools. On macOS, use Homebrew with commands like brew install ripgrep fzf fd eza. On Ubuntu or Debian, use apt for some tools, though you may need to download others from their GitHub releases. Windows users can use Scoop or Chocolatey. Each tool's GitHub page provides detailed installation instructions for your operating system.
No, these tools are designed for speed in large codebases. Ripgrep and fd are written in Rust and optimized for performance. They automatically skip node_modules and respect gitignore files, which prevents them from scanning unnecessary directories. Most searches complete in under a second even in projects with thousands of files.
Yes, many IDEs integrate with these tools. VS Code has extensions for fzf and ripgrep integration. JetBrains IDEs use similar search algorithms internally. However, learning the terminal versions gives you consistent workflows across any editor or remote server. You can also pipe results from these tools directly into your editor using command substitution.
Gain control over your UX
See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
