Suche in den Code-Editoren — finden Sie alles in langen Regeln
Eine CSS-Regel kann auf hunderte Zeilen anwachsen. Ein JS-Snippet auch. Das Scrollen, um diesen einen Selektor zu finden, den Sie anpassen müssen, wird schnell mühsam. JustZix setzt jetzt eine echte Suchleiste über jeden Code-Editor — Zähler, Hervorhebung, Navigationspfeile und Tastenkürzel. So funktioniert es.
Wo die Suchleiste erscheint
Die Suchleiste sitzt direkt über dem CodeMirror-Editor an drei Stellen:
- der CSS-Editor in einer Regel;
- der JS-Editor in einer Regel;
- der JS-Code-Editor für Aktionen.
Es ist überall dieselbe Komponente, also wenn Sie sie an einer Stelle gelernt haben, kennen Sie sie an allen.
Die Grundlagen: Eingabe und Zähler
Die Leiste ist ein Texteingabefeld plus eine Such-Symbol-Schaltfläche. Tippen Sie eine Abfrage, und JustZix findet jedes Vorkommen im aktuellen Editor. Ein Trefferzähler zeigt Ihre Position als n / total — zum Beispiel bedeutet 3 / 12, dass Sie auf dem dritten von zwölf Treffern sind. Wenn es nichts zu finden gibt, sagt der Zähler Ihnen das auch.
Hervorhebung: aktiv vs. der Rest
Jeder Treffer wird hervorgehoben, sodass Sie die Verteilung auf einen Blick sehen, und die beiden Zustände sind bewusst unterschiedlich:
| Zustand | Hervorhebung |
|---|---|
| Alle Treffer | Blauer Hintergrund, weißer Text |
| Aktueller / aktiver Treffer | Gelber Hintergrund, schwarzer Text |
Der aktive Treffer wird außerdem automatisch in den sichtbaren Bereich gescrollt — Sie müssen nie suchen, wo Sie sind. Springen Sie zum nächsten Treffer, und die gelbe Hervorhebung springt mit Ihnen, während die vorherige zurück zu Blau wechselt.
Zwischen Treffern navigieren
Wenn eine Suche mehr als ein Ergebnis liefert, erscheinen ▲ und ▼ Pfeile in der Leiste. Klicken Sie auf ▼ für den nächsten Treffer, ▲ für den vorherigen. Der Zähler aktualisiert sich, die gelbe Hervorhebung bewegt sich, der Editor scrollt. Bei einem einzelnen Treffer werden die Pfeile nicht benötigt und bleiben Ihnen aus dem Weg.
Tastatur: das Wesentliche
Sie brauchen die Maus selten. Aus dem Suchfeld heraus:
| Taste | Aktion |
|---|---|
| Enter | Zum nächsten Treffer gehen |
| Shift+Enter | Zum vorherigen Treffer gehen |
| Esc | Das Suchfeld leeren |
Ein Detail, das man kennen sollte: Enter springt normalerweise zum nächsten bestehenden Treffer — aber wenn Sie den Abfragetext seit der letzten Suche geändert haben, sucht Enter von Grund auf neu. Sie können also Ihre Abfrage bearbeiten und einfach Enter drücken; Sie müssen nicht löschen und neu tippen.
Globale Kürzel — suchen, ohne den Editor zu verlassen
Die nützlichsten Kürzel funktionieren aus dem Code-Editor heraus, nicht nur aus dem Suchfeld:
| Kürzel | Aktion |
|---|---|
| Ctrl+Alt+F | Fokus vom Code-Editor zum Suchfeld bewegen |
| Ctrl+Alt+→ | Zum nächsten Treffer springen |
| Ctrl+Alt+← | Zum vorherigen Treffer springen |
Das Paar Ctrl+Alt+←/→ funktioniert sowohl aus dem Suchfeld als auch aus dem Code-Editor selbst. Das bedeutet, Sie können eine Suche ausführen, zurück in den Code klicken, um zu bearbeiten, und trotzdem durch die Treffer schreiten, ohne die Hände von der Tastatur zu nehmen.
Ein typischer Arbeitsablauf
- Sie bearbeiten eine lange CSS-Regel. Drücken Sie Ctrl+Alt+F — der Fokus springt zum Suchfeld.
- Tippen Sie
margin. Der Zähler zeigt1 / 8; acht Treffer leuchten blau, der erste leuchtet gelb und wird in den sichtbaren Bereich gescrollt. - Drücken Sie ein paar Mal Enter, um durchzuschreiten, oder Shift+Enter, um zurückzugehen.
- Den gewünschten gefunden. Klicken Sie in den Code, bearbeiten Sie ihn.
- Brauchen Sie den nächsten? Ctrl+Alt+→ — kein Bedarf, zum Suchfeld zurückzukehren.
- Fertig — Esc leert das Feld.
Bearbeiten macht die Ergebnisse ungültig — beabsichtigt
Sobald Sie den Code bearbeiten, spiegeln die hervorgehobenen Ergebnisse den aktuellen Text nicht mehr wider — also werden sie ungültig gemacht, und Sie suchen neu. Das ist beabsichtigt: veraltete Hervorhebungen, die auf verschobenen oder gelöschten Text zeigen, wären schlimmer als gar keine Hervorhebungen. Drücken Sie einfach Enter im Suchfeld (oder Ctrl+Alt+F, dann Enter), um eine frische Suche gegen den aktualisierten Code auszuführen.
Warum es für große Regeln wichtig ist
Eine universelle Regel, die Cookie-Banner versteckt, Layouts repariert und ein Dutzend Websites flickt, kann lang sein. Die Suche im Editor verwandelt "scrollen und blinzeln" in "tippen und springen". Es ist eine kleine Funktion, die Sie ständig nutzen werden.
Siehe auch
- Was ist neu in JustZix — Code-Suche neben AI Helper und der neu gebauten Output-Konsole.
- Alle JustZix-Funktionen — die vollständige Liste der Entwicklerfenster und Editoren.
Laden Sie JustZix herunter — kostenlos, ohne Konto, Chrome 100+. Suchleisten über jedem Code-Editor, einsatzbereit.
Bewerte diesen Beitrag
Noch keine Bewertungen — sei der Erste.