Ricerca negli editor di codice — trova qualsiasi cosa nelle regole lunghe
Una regola CSS può crescere fino a centinaia di righe. Lo stesso può uno snippet JS. Scorrere per trovare quell'unico selettore che devi ritoccare diventa noioso in fretta. JustZix ora mette una vera barra di ricerca sopra ogni editor di codice — contatore, evidenziazione, frecce di navigazione e scorciatoie da tastiera. Ecco come funziona.
Dove appare la barra di ricerca
La barra di ricerca si trova direttamente sopra l'editor CodeMirror in tre punti:
- l'editor CSS in una regola;
- l'editor JS in una regola;
- l'editor di codice JS per le azioni.
È lo stesso componente ovunque, quindi una volta che lo impari in un posto lo conosci in tutti.
Le basi: input e contatore
La barra è un campo di testo più un pulsante con icona di ricerca. Digita una query e JustZix trova ogni occorrenza nell'editor corrente. Un contatore di corrispondenze mostra la tua posizione come n / totale — per esempio 3 / 12 significa che sei sulla terza di dodici corrispondenze. Se non c'è nulla da trovare, anche di questo te lo dice il contatore.
Evidenziazione: attiva vs. il resto
Ogni corrispondenza è evidenziata così puoi vedere la distribuzione a colpo d'occhio, e i due stati sono deliberatamente diversi:
| Stato | Evidenziazione |
|---|---|
| Tutte le corrispondenze | Sfondo blu, testo bianco |
| Corrispondenza corrente / attiva | Sfondo giallo, testo nero |
La corrispondenza attiva viene anche portata in vista automaticamente — non devi mai cercare dove sei. Spostati alla corrispondenza successiva e l'evidenziazione gialla salta con te, mentre la precedente torna al blu.
Navigare tra le corrispondenze
Quando una ricerca produce più di un risultato, nella barra appaiono le frecce ▲ e ▼. Clicca ▼ per la corrispondenza successiva, ▲ per la precedente. Il contatore si aggiorna, l'evidenziazione gialla si sposta, l'editor scorre. Con una singola corrispondenza le frecce non servono e restano fuori dai piedi.
Tastiera: l'essenziale
Raramente ti serve il mouse. Da dentro il campo di ricerca:
| Tasto | Azione |
|---|---|
| Invio | Vai alla corrispondenza successiva |
| Shift+Invio | Vai alla corrispondenza precedente |
| Esc | Cancella il campo di ricerca |
Un dettaglio che vale la pena conoscere: Invio normalmente salta alla corrispondenza esistente successiva — ma se hai cambiato il testo della query dall'ultima ricerca, Invio ricerca da capo. Quindi puoi modificare la tua query e premere semplicemente Invio; non devi cancellare e ridigitare.
Scorciatoie globali — cerca senza lasciare l'editor
Le scorciatoie più utili funzionano da dentro l'editor di codice, non solo dal campo di ricerca:
| Scorciatoia | Azione |
|---|---|
| Ctrl+Alt+F | Sposta il focus dall'editor di codice al campo di ricerca |
| Ctrl+Alt+→ | Salta alla corrispondenza successiva |
| Ctrl+Alt+← | Salta alla corrispondenza precedente |
La coppia Ctrl+Alt+←/→ funziona sia dal campo di ricerca sia dall'editor di codice stesso. Questo significa che puoi eseguire una ricerca, tornare a cliccare nel codice per modificare e comunque scorrere le corrispondenze senza togliere le mani dalla tastiera.
Un flusso di lavoro tipico
- Stai modificando una lunga regola CSS. Premi Ctrl+Alt+F — il focus salta al campo di ricerca.
- Digiti
margin. Il contatore mostra1 / 8; otto corrispondenze brillano di blu, la prima brilla di giallo e viene portata in vista. - Premi Invio alcune volte per scorrere, o Shift+Invio per tornare indietro.
- Trovata quella che volevi. Clicca nel codice, modificala.
- Ti serve la successiva? Ctrl+Alt+→ — non c'è bisogno di tornare al campo di ricerca.
- Fatto — Esc cancella il campo.
La modifica invalida i risultati — di proposito
Una volta che modifichi il codice, i risultati evidenziati non riflettono più il testo corrente — quindi vengono invalidati e ricerchi. Questo è intenzionale: evidenziazioni obsolete che puntano a testo spostato o eliminato sarebbero peggiori di nessuna evidenziazione. Premi semplicemente Invio nel campo di ricerca (o Ctrl+Alt+F poi Invio) per eseguire una nuova ricerca sul codice aggiornato.
Perché conta per le regole grandi
Una regola universale che nasconde i banner dei cookie, sistema i layout e applica patch a una dozzina di siti può essere lunga. La ricerca nell'editor trasforma "scorri e strizza gli occhi" in "digita e salta". È una piccola funzionalità che userai di continuo.
Vedi anche
- Novità in JustZix — la ricerca di codice accanto ad AI Helper e la Console di Output ricostruita.
- Tutte le funzionalità di JustZix — l'elenco completo di finestre per sviluppatori ed editor.
Scarica JustZix — gratuito, senza account, Chrome 100+. Barre di ricerca sopra ogni editor di codice, pronte all'uso.
Valuta questo articolo
Nessuna valutazione — sii il primo.