5 Comandos de Terminal Que Tornam o Trabalho Frontend Mais Rápido
Você está imerso em um projeto React com centenas de componentes. Precisa encontrar todos os arquivos que importam um hook específico, localizar aquela função utilitária que escreveu na semana passada e lembrar o comando de build exato que executou ontem. Clicar em pastas e rolar pelo histórico do navegador desperdiça minutos que se acumulam em horas.
Estes cinco comandos resolvem esses problemas. Não são ferramentas de build ou scaffolding de frameworks—apenas fluxos de trabalho CLI rápidos que ajudam você a buscar, navegar e trabalhar com mais eficiência dentro de grandes bases de código.
Principais Conclusões
- Ripgrep (
rg) busca conteúdo de arquivos em milhares de arquivos mais rápido que ogreppadrão, ignorando automaticamentenode_modulese respeitando.gitignore. - fzf fornece busca fuzzy interativa que permite localizar arquivos digitando nomes parciais, eliminando a necessidade de lembrar caminhos exatos.
- Ctrl+R busca no histórico do shell por comandos executados anteriormente, e combiná-lo com fzf atualiza isso para uma busca fuzzy visual.
- fd oferece sintaxe mais simples que o comando tradicional
findpara localizar arquivos por padrão de nome. - tree e eza exibem estruturas de diretórios hierarquicamente, ajudando você a entender layouts de projetos rapidamente.
1. Ripgrep: Busca Rápida de Texto no Projeto
Problema que resolve: Encontrar todos os arquivos que referenciam uma prop, função ou import em milhares de arquivos.
O grep -R padrão funciona, mas ripgrep (rg) é dramaticamente mais rápido. Ele ignora automaticamente node_modules, respeita .gitignore e busca recursivamente por padrão.
rg "useState" --type jsIsso encontra todos os arquivos JavaScript contendo useState no seu projeto. Precisa encontrar onde um componente recebe uma prop específica? Comandos de busca e navegação como este levam segundos em vez de minutos.
Dica profissional: Adicione -l para listar apenas nomes de arquivos, ou -C 2 para mostrar duas linhas de contexto ao redor de cada correspondência.
2. fzf: Busca Fuzzy para Tudo
Problema que resolve: Abrir arquivos quando você lembra apenas parte do nome.
fzf é um localizador fuzzy interativo que transforma como você navega em projetos. Digite alguns caracteres e ele instantaneamente filtra milhares de arquivos para mostrar correspondências.
fzfComece digitando btncomp e ele encontra src/components/ButtonComponent.tsx. A correspondência fuzzy elimina a sobrecarga mental de lembrar caminhos exatos.
Integração com editor: Direcione os resultados diretamente para seu editor:
code $(fzf)3. Ctrl+R com Busca de Histórico Aprimorada
Problema que resolve: Lembrar comandos longos que você executou dias atrás.
Todo shell armazena histórico de comandos. Pressione Ctrl+R e comece a digitar para buscar retroativamente nele. Isso é essencial para desenvolvedores frontend que executam comandos complexos de build, teste ou deploy.
# Pressione Ctrl+R, depois digite "build"
# Encontra: npm run build:prod --env=stagingMovimento poderoso: Instale fzf e ele automaticamente atualiza Ctrl+R para uma busca fuzzy visual através de todo seu histórico. Você encontrará aquele comando obscuro do webpack do mês passado em segundos.
Compatibilidade de shell: Funciona em Bash e Zsh. Fish usa Ctrl+R de forma diferente, mas oferece funcionalidade similar.
Discover how at OpenReplay.com.
4. fd: Busca de Arquivos Moderna
Problema que resolve: Localizar arquivos por padrão de nome sem lembrar a sintaxe arcana do find.
O comando tradicional find funciona, mas requer flags verbosas. fd é uma alternativa mais simples e rápida que ignora arquivos ocultos e node_modules por padrão.
fd "\.test\.js$"Isso encontra todos os arquivos de teste no seu projeto. Precisa encontrar aquele arquivo de configuração que criou recentemente?
fd config --type f --changed-within 1weekEsses comandos ajudam você a navegar rapidamente em bases de código desconhecidas.
5. tree ou eza: Estrutura de Diretório Clara
Problema que resolve: Entender o layout do projeto sem clicar em pastas.
Quando você entra em um novo projeto ou explora um pacote desconhecido, ver a estrutura de relance ajuda. O comando tree exibe diretórios hierarquicamente.
tree -L 2 -I node_modulesIsso mostra dois níveis de profundidade, excluindo node_modules. Para uma alternativa mais moderna, eza (o sucessor mantido do exa) fornece saída colorida com status do git:
eza --tree --level=2 --git-ignoreReferência Rápida
| Tarefa | Comando |
|---|---|
| Buscar conteúdo de arquivos | rg "pattern" |
| Encontrar arquivos por nome | fd "pattern" |
| Abrir arquivos com fuzzy | fzf |
| Buscar histórico de comandos | Ctrl+R |
| Ver estrutura de diretório | tree -L 2 ou eza --tree |
Conclusão
Escolha um comando e use-o por uma semana. rg e Ctrl+R oferecem o retorno mais rápido—você imediatamente parará de buscar manualmente em arquivos ou redigitar comandos longos.
Essas ferramentas funcionam em qualquer projeto frontend independentemente do framework. Elas formam a base de fluxos de trabalho CLI rápidos que se acumulam ao longo do tempo. Uma vez que você as internalize, vai se perguntar como trabalhou sem elas.
Perguntas Frequentes
Sim, todas as cinco ferramentas funcionam no Windows. Ripgrep, fd, fzf e eza podem ser instalados via gerenciadores de pacotes como Scoop ou Chocolatey. O comando tree é integrado ao Prompt de Comando do Windows. Para a melhor experiência, considere usar o Windows Terminal com WSL ou Git Bash, que fornecem um ambiente mais semelhante ao Unix onde essas ferramentas funcionam nativamente.
A maioria dos gerenciadores de pacotes suporta essas ferramentas. No macOS, use Homebrew com comandos como brew install ripgrep fzf fd eza. No Ubuntu ou Debian, use apt para algumas ferramentas, embora você possa precisar baixar outras de suas páginas de releases no GitHub. Usuários do Windows podem usar Scoop ou Chocolatey. A página do GitHub de cada ferramenta fornece instruções detalhadas de instalação para seu sistema operacional.
Não, essas ferramentas são projetadas para velocidade em grandes bases de código. Ripgrep e fd são escritos em Rust e otimizados para performance. Eles automaticamente ignoram node_modules e respeitam arquivos gitignore, o que os impede de escanear diretórios desnecessários. A maioria das buscas é concluída em menos de um segundo mesmo em projetos com milhares de arquivos.
Sim, muitas IDEs se integram com essas ferramentas. O VS Code tem extensões para integração com fzf e ripgrep. IDEs JetBrains usam algoritmos de busca similares internamente. No entanto, aprender as versões de terminal oferece fluxos de trabalho consistentes em qualquer editor ou servidor remoto. Você também pode direcionar resultados dessas ferramentas diretamente para seu editor usando substituição de comando.
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.
