Búsqueda en los editores de código — encuentra cualquier cosa en reglas largas
Una regla CSS puede crecer hasta cientos de líneas. Un fragmento de JS también. Desplazarse para encontrar ese selector concreto que necesitas retocar se vuelve cansino rápido. JustZix ahora pone una barra de búsqueda de verdad encima de cada editor de código — contador, resaltado, flechas de navegación y atajos de teclado. Así funciona.
Dónde aparece la barra de búsqueda
La barra de búsqueda se sitúa directamente encima del editor CodeMirror en tres lugares:
- el editor CSS en una regla;
- el editor JS en una regla;
- el editor de código JS para acciones.
Es el mismo componente en todas partes, así que una vez que lo aprendes en un sitio lo conoces en todos.
Lo básico: campo de entrada y contador
La barra es un campo de texto más un botón con icono de búsqueda. Escribe una consulta y JustZix encuentra cada aparición en el editor actual. Un contador de coincidencias muestra tu posición como n / total — por ejemplo 3 / 12 significa que estás en la tercera de doce coincidencias. Si no hay nada que encontrar, el contador también te lo dice.
Resaltado: la activa frente al resto
Cada coincidencia se resalta para que veas la dispersión de un vistazo, y los dos estados son deliberadamente distintos:
| Estado | Resaltado |
|---|---|
| Todas las coincidencias | Fondo azul, texto blanco |
| Coincidencia actual / activa | Fondo amarillo, texto negro |
La coincidencia activa también se desplaza a la vista automáticamente — nunca tienes que buscar dónde estás. Pasa a la siguiente coincidencia y el resaltado amarillo salta contigo, mientras que el anterior vuelve a azul.
Navegar entre coincidencias
Cuando una búsqueda arroja más de un resultado, aparecen las flechas ▲ y ▼ en la barra. Haz clic en ▼ para la siguiente coincidencia, en ▲ para la anterior. El contador se actualiza, el resaltado amarillo se mueve, el editor se desplaza. Con una sola coincidencia las flechas no hacen falta y se mantienen apartadas.
Teclado: lo esencial
Rara vez necesitas el ratón. Desde dentro del campo de búsqueda:
| Tecla | Acción |
|---|---|
| Enter | Ir a la siguiente coincidencia |
| Shift+Enter | Ir a la coincidencia anterior |
| Esc | Limpiar el campo de búsqueda |
Un detalle que conviene saber: Enter normalmente salta a la siguiente coincidencia existente — pero si cambiaste el texto de la consulta desde la última búsqueda, Enter vuelve a buscar desde cero. Así que puedes editar tu consulta y simplemente pulsar Enter; no tienes que limpiar y volver a escribir.
Atajos globales — busca sin salir del editor
Los atajos más útiles funcionan desde dentro del editor de código, no solo del campo de búsqueda:
| Atajo | Acción |
|---|---|
| Ctrl+Alt+F | Mover el foco del editor de código al campo de búsqueda |
| Ctrl+Alt+→ | Saltar a la siguiente coincidencia |
| Ctrl+Alt+← | Saltar a la coincidencia anterior |
El par Ctrl+Alt+←/→ funciona tanto desde el campo de búsqueda como desde el propio editor de código. Eso significa que puedes ejecutar una búsqueda, volver a hacer clic en el código para editar y aun así recorrer las coincidencias sin quitar las manos del teclado.
Un flujo de trabajo típico
- Estás editando una regla CSS larga. Pulsa Ctrl+Alt+F — el foco salta al campo de búsqueda.
- Escribe
margin. El contador muestra1 / 8; ocho coincidencias brillan en azul, la primera brilla en amarillo y se desplaza a la vista. - Pulsa Enter unas cuantas veces para recorrerlas, o Shift+Enter para retroceder.
- Encontraste la que querías. Haz clic en el código, edítalo.
- ¿Necesitas la siguiente? Ctrl+Alt+→ — sin necesidad de volver al campo de búsqueda.
- Listo — Esc limpia el campo.
Editar invalida los resultados — por diseño
Una vez que editas el código, los resultados resaltados ya no reflejan el texto actual — así que se invalidan y vuelves a buscar. Esto es intencionado: resaltados obsoletos apuntando a texto movido o eliminado serían peores que no tener resaltados. Simplemente pulsa Enter en el campo de búsqueda (o Ctrl+Alt+F y luego Enter) para ejecutar una búsqueda fresca contra el código actualizado.
Por qué importa para reglas grandes
Una regla universal que oculta avisos de cookies, arregla diseños y parchea una docena de sitios puede ser larga. La búsqueda dentro del editor convierte el «desplazarse y entrecerrar los ojos» en «escribir y saltar». Es una pequeña función que usarás constantemente.
Consulta también
- Novedades en JustZix — la búsqueda de código junto a AI Helper y la Consola de Salida reconstruida.
- Todas las funciones de JustZix — la lista completa de ventanas y editores para desarrolladores.
Descarga JustZix — gratis, sin cuenta, Chrome 100+. Barras de búsqueda encima de cada editor de código, listas para usar.
Valora este artículo
Sin valoraciones — sé el primero.