5 Terminal-Befehle, die Frontend-Arbeit beschleunigen

Sie stecken tief in einem React-Projekt mit Hunderten von Komponenten. Sie müssen jede Datei finden, die einen bestimmten Hook importiert, diese Utility-Funktion lokalisieren, die Sie letzte Woche geschrieben haben, und sich an den exakten Build-Befehl erinnern, den Sie gestern ausgeführt haben. Das Durchklicken von Ordnern und Scrollen durch die Browser-Historie verschwendet Minuten, die sich zu Stunden summieren.

Diese fünf Befehle lösen diese Probleme. Es handelt sich nicht um Build-Tools oder Framework-Scaffolding – nur um schnelle CLI-Workflows, die Ihnen helfen, in großen Codebasen effizienter zu suchen, zu navigieren und zu arbeiten.

1. Ripgrep: Schnelle Textsuche im Projekt

Gelöstes Problem: Jede Datei finden, die eine Prop, Funktion oder einen Import über Tausende von Dateien hinweg referenziert.

Standard-grep -R funktioniert, aber ripgrep (rg) ist deutlich schneller. Es ignoriert automatisch node_modules, respektiert .gitignore und durchsucht standardmäßig rekursiv.

rg "useState" --type js

Dies findet jede JavaScript-Datei, die useState in Ihrem Projekt enthält. Müssen Sie herausfinden, wo eine Komponente eine bestimmte Prop erhält? Such- und Navigationsbefehle wie dieser dauern Sekunden statt Minuten.

Profi-Tipp: Fügen Sie -l hinzu, um nur Dateinamen aufzulisten, oder -C 2, um zwei Zeilen Kontext um jeden Treffer herum anzuzeigen.

2. fzf: Fuzzy-Finding für alles

Gelöstes Problem: Dateien öffnen, wenn Sie sich nur an einen Teil des Namens erinnern.

fzf ist ein interaktiver Fuzzy-Finder, der die Art und Weise verändert, wie Sie durch Projekte navigieren. Tippen Sie ein paar Zeichen, und es filtert sofort Tausende von Dateien, um Übereinstimmungen anzuzeigen.

fzf

Beginnen Sie mit der Eingabe von btncomp und es findet src/components/ButtonComponent.tsx. Fuzzy-Matching eliminiert den mentalen Aufwand, sich exakte Pfade merken zu müssen.

Editor-Integration: Leiten Sie Ergebnisse direkt an Ihren Editor weiter:

code $(fzf)

3. Ctrl+R mit erweiterter Verlaufssuche

Gelöstes Problem: Lange Befehle abrufen, die Sie vor Tagen ausgeführt haben.

Jede Shell speichert einen Befehlsverlauf. Drücken Sie Ctrl+R und beginnen Sie mit der Eingabe, um rückwärts danach zu suchen. Dies ist essentiell für Frontend-Entwickler, die komplexe Build-, Test- oder Deployment-Befehle ausführen.

# Drücken Sie Ctrl+R, dann tippen Sie "build"
# Findet: npm run build:prod --env=staging

Power-Move: Installieren Sie fzf und es aktualisiert Ctrl+R automatisch zu einer visuellen Fuzzy-Suche durch Ihren gesamten Verlauf. Sie finden diesen obskuren Webpack-Befehl vom letzten Monat in Sekunden.

Shell-Kompatibilität: Funktioniert in Bash und Zsh. Fish verwendet Ctrl+R anders, bietet aber ähnliche Funktionalität.

4. fd: Moderne Dateisuche

Gelöstes Problem: Dateien nach Namensmuster lokalisieren, ohne sich an arkane find-Syntax erinnern zu müssen.

Der traditionelle find-Befehl funktioniert, erfordert aber ausführliche Flags. fd ist eine einfachere, schnellere Alternative, die versteckte Dateien und node_modules standardmäßig ignoriert.

fd "\.test\.js$"

Dies findet alle Testdateien in Ihrem Projekt. Müssen Sie diese Config-Datei finden, die Sie kürzlich erstellt haben?

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

Diese Befehle helfen Ihnen, unbekannte Codebasen schnell zu navigieren.

5. tree oder eza: Klare Verzeichnisstruktur

Gelöstes Problem: Projektlayout verstehen, ohne durch Ordner zu klicken.

Wenn Sie einem neuen Projekt beitreten oder ein unbekanntes Paket erkunden, hilft es, die Struktur auf einen Blick zu sehen. Der tree-Befehl zeigt Verzeichnisse hierarchisch an.

tree -L 2 -I node_modules

Dies zeigt zwei Ebenen tief, ohne node_modules. Als modernere Alternative bietet eza (der gepflegte Nachfolger von exa) farbige Ausgabe mit Git-Status:

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

Kurzreferenz

Fazit

Wählen Sie einen Befehl aus und verwenden Sie ihn eine Woche lang. rg und Ctrl+R bieten die schnellste Amortisation – Sie werden sofort aufhören, manuell durch Dateien zu suchen oder lange Befehle erneut einzutippen.

Diese Tools funktionieren in jedem Frontend-Projekt unabhängig vom Framework. Sie bilden die Grundlage für schnelle CLI-Workflows, die sich im Laufe der Zeit potenzieren. Sobald Sie sie verinnerlicht haben, werden Sie sich fragen, wie Sie jemals ohne sie gearbeitet haben.

FAQs

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.