5 commandes de terminal qui accélèrent le travail frontend

Dec 13, 2025 · 4 min read

5 commandes de terminal qui accélèrent le travail frontend

Vous êtes plongé dans un projet React comportant des centaines de composants. Vous devez trouver chaque fichier qui importe un hook spécifique, localiser cette fonction utilitaire que vous avez écrite la semaine dernière, et vous rappeler la commande de build exacte que vous avez exécutée hier. Naviguer dans les dossiers en cliquant et parcourir l’historique du navigateur fait perdre des minutes qui se transforment en heures.

Ces cinq commandes résolvent ces problèmes. Ce ne sont pas des outils de build ou des scaffolding de framework—juste des workflows CLI rapides qui vous aident à rechercher, naviguer et travailler plus efficacement dans de grandes bases de code.

Points clés à retenir

Ripgrep (rg) recherche le contenu des fichiers parmi des milliers de fichiers plus rapidement que grep standard, en ignorant automatiquement node_modules et en respectant .gitignore.
fzf fournit une recherche floue interactive qui vous permet de localiser des fichiers en tapant des noms partiels, éliminant le besoin de mémoriser les chemins exacts.
Ctrl+R recherche dans l’historique de votre shell les commandes précédemment exécutées, et le coupler avec fzf transforme cela en une recherche floue visuelle.
fd offre une syntaxe plus simple que la commande traditionnelle find pour localiser des fichiers par motif de nom.
tree et eza affichent les structures de répertoires de manière hiérarchique, vous aidant à comprendre l’organisation des projets en un coup d’œil.

1. Ripgrep : recherche de texte rapide dans le projet

Problème résolu : Trouver chaque fichier qui référence une prop, une fonction ou un import parmi des milliers de fichiers.

La commande standard grep -R fonctionne, mais ripgrep (rg) est considérablement plus rapide. Il ignore automatiquement node_modules, respecte .gitignore, et effectue des recherches récursives par défaut.

rg "useState" --type js

Cela trouve chaque fichier JavaScript contenant useState dans votre projet. Besoin de trouver où un composant reçoit une prop spécifique ? Les commandes de recherche et de navigation comme celle-ci prennent quelques secondes au lieu de plusieurs minutes.

Astuce : Ajoutez -l pour lister uniquement les noms de fichiers, ou -C 2 pour afficher deux lignes de contexte autour de chaque correspondance.

2. fzf : recherche floue pour tout

Problème résolu : Ouvrir des fichiers quand vous ne vous souvenez que d’une partie du nom.

fzf est un outil de recherche floue interactif qui transforme votre façon de naviguer dans les projets. Tapez quelques caractères, et il filtre instantanément des milliers de fichiers pour afficher les correspondances.

fzf

Commencez à taper btncomp et il trouve src/components/ButtonComponent.tsx. La correspondance floue élimine la charge mentale de mémoriser les chemins exacts.

Intégration avec l’éditeur : Redirigez les résultats directement vers votre éditeur :

code $(fzf)

3. Ctrl+R avec recherche d’historique améliorée

Problème résolu : Se rappeler les longues commandes que vous avez exécutées il y a plusieurs jours.

Chaque shell stocke l’historique des commandes. Appuyez sur Ctrl+R et commencez à taper pour rechercher en arrière dans cet historique. C’est essentiel pour les développeurs frontend qui exécutent des commandes complexes de build, de test ou de déploiement.

# Appuyez sur Ctrl+R, puis tapez "build"
# Trouve : npm run build:prod --env=staging

Technique avancée : Installez fzf et il mettra automatiquement à niveau Ctrl+R vers une recherche floue visuelle dans tout votre historique. Vous trouverez cette commande webpack obscure du mois dernier en quelques secondes.

Compatibilité des shells : Fonctionne dans Bash et Zsh. Fish utilise Ctrl+R différemment mais offre une fonctionnalité similaire.

4. fd : recherche de fichiers moderne

Problème résolu : Localiser des fichiers par motif de nom sans mémoriser la syntaxe archaïque de find.

La commande traditionnelle find fonctionne mais nécessite des options verbeuses. fd est une alternative plus simple et plus rapide qui ignore les fichiers cachés et node_modules par défaut.

fd "\.test\.js$"

Cela trouve tous les fichiers de test dans votre projet. Besoin de trouver ce fichier de configuration que vous avez créé récemment ?

fd config --type f --changed-within 1week

Ces commandes vous aident à naviguer rapidement dans des bases de code inconnues.

5. tree ou eza : structure de répertoire claire

Problème résolu : Comprendre l’organisation du projet sans cliquer dans les dossiers.

Lorsque vous rejoignez un nouveau projet ou explorez un package inconnu, voir la structure d’un coup d’œil est utile. La commande tree affiche les répertoires de manière hiérarchique.

tree -L 2 -I node_modules

Cela affiche deux niveaux de profondeur, en excluant node_modules. Pour une alternative plus moderne, eza (le successeur maintenu d’exa) fournit une sortie colorisée avec le statut git :

eza --tree --level=2 --git-ignore

Référence rapide

Tâche	Commande
Rechercher le contenu des fichiers	`rg "pattern"`
Trouver des fichiers par nom	`fd "pattern"`
Ouvrir des fichiers avec recherche floue	`fzf`
Rechercher dans l’historique des commandes	`Ctrl+R`
Afficher la structure de répertoire	`tree -L 2` ou `eza --tree`

Conclusion

Choisissez une commande et utilisez-la pendant une semaine. rg et Ctrl+R offrent le retour sur investissement le plus rapide—vous cesserez immédiatement de rechercher manuellement dans les fichiers ou de retaper de longues commandes.

Ces outils fonctionnent avec n’importe quel projet frontend, quel que soit le framework. Ils constituent la base de workflows CLI rapides qui s’accumulent avec le temps. Une fois que vous les aurez intériorisés, vous vous demanderez comment vous avez pu travailler sans eux.

FAQ

Oui, les cinq outils fonctionnent sous Windows. Ripgrep, fd, fzf et eza peuvent être installés via des gestionnaires de paquets comme Scoop ou Chocolatey. La commande tree est intégrée à l'invite de commandes Windows. Pour une meilleure expérience, envisagez d'utiliser Windows Terminal avec WSL ou Git Bash, qui fournissent un environnement plus proche d'Unix où ces outils sont natifs.

La plupart des gestionnaires de paquets prennent en charge ces outils. Sur macOS, utilisez Homebrew avec des commandes comme brew install ripgrep fzf fd eza. Sur Ubuntu ou Debian, utilisez apt pour certains outils, bien que vous deviez peut-être télécharger d'autres depuis leurs pages GitHub releases. Les utilisateurs Windows peuvent utiliser Scoop ou Chocolatey. La page GitHub de chaque outil fournit des instructions d'installation détaillées pour votre système d'exploitation.

Non, ces outils sont conçus pour la vitesse dans de grandes bases de code. Ripgrep et fd sont écrits en Rust et optimisés pour les performances. Ils ignorent automatiquement node_modules et respectent les fichiers gitignore, ce qui les empêche d'analyser des répertoires inutiles. La plupart des recherches se terminent en moins d'une seconde, même dans des projets comportant des milliers de fichiers.

Oui, de nombreux IDE s'intègrent avec ces outils. VS Code dispose d'extensions pour l'intégration de fzf et ripgrep. Les IDE JetBrains utilisent des algorithmes de recherche similaires en interne. Cependant, apprendre les versions terminal vous donne des workflows cohérents sur n'importe quel éditeur ou serveur distant. Vous pouvez également rediriger les résultats de ces outils directement dans votre éditeur en utilisant la substitution de commande.

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.