Recherche dans les éditeurs de code — trouvez tout dans les longues règles
Une règle CSS peut atteindre des centaines de lignes. Un extrait JS aussi. Faire défiler pour trouver le seul sélecteur que vous devez ajuster devient vite lassant. JustZix place désormais une véritable barre de recherche au-dessus de chaque éditeur de code — compteur, surlignage, flèches de navigation et raccourcis clavier. Voici comment ça marche.
Où apparaît la barre de recherche
La barre de recherche se place directement au-dessus de l'éditeur CodeMirror à trois endroits :
- l'éditeur CSS d'une règle ;
- l'éditeur JS d'une règle ;
- l'éditeur de code JS pour les actions.
C'est le même composant partout, donc une fois que vous l'apprenez à un endroit vous le connaissez partout.
Les bases : champ de saisie et compteur
La barre est un champ de texte plus un bouton avec une icône de recherche. Tapez une requête et JustZix trouve chaque occurrence dans l'éditeur courant. Un compteur de correspondances affiche votre position sous la forme n / total — par exemple 3 / 12 signifie que vous êtes sur la troisième de douze correspondances. S'il n'y a rien à trouver, le compteur vous le dit aussi.
Surlignage : active vs. le reste
Chaque correspondance est surlignée pour que vous voyiez la répartition d'un coup d'œil, et les deux états sont délibérément différents :
| État | Surlignage |
|---|---|
| Toutes les correspondances | Fond bleu, texte blanc |
| Correspondance courante / active | Fond jaune, texte noir |
La correspondance active est aussi amenée dans le champ de vision automatiquement — vous n'avez jamais à chercher où vous êtes. Passez à la correspondance suivante et le surlignage jaune saute avec vous, tandis que le précédent retombe au bleu.
Naviguer entre les correspondances
Quand une recherche donne plus d'un résultat, des flèches ▲ et ▼ apparaissent dans la barre. Cliquez sur ▼ pour la correspondance suivante, ▲ pour la précédente. Le compteur se met à jour, le surlignage jaune se déplace, l'éditeur défile. Avec une seule correspondance, les flèches ne sont pas nécessaires et restent à l'écart.
Clavier : l'essentiel
Vous avez rarement besoin de la souris. Depuis l'intérieur du champ de recherche :
| Touche | Action |
|---|---|
| Entrée | Aller à la correspondance suivante |
| Maj+Entrée | Aller à la correspondance précédente |
| Échap | Effacer le champ de recherche |
Un détail à connaître : Entrée saute normalement à la correspondance existante suivante — mais si vous avez modifié le texte de la requête depuis la dernière recherche, Entrée relance la recherche de zéro. Vous pouvez donc modifier votre requête et simplement appuyer sur Entrée ; vous n'avez pas à effacer et retaper.
Raccourcis globaux — chercher sans quitter l'éditeur
Les raccourcis les plus utiles fonctionnent depuis l'intérieur de l'éditeur de code, pas seulement depuis le champ de recherche :
| Raccourci | Action |
|---|---|
| Ctrl+Alt+F | Déplacer le focus de l'éditeur de code vers le champ de recherche |
| Ctrl+Alt+→ | Sauter à la correspondance suivante |
| Ctrl+Alt+← | Sauter à la correspondance précédente |
La paire Ctrl+Alt+←/→ fonctionne à la fois depuis le champ de recherche et depuis l'éditeur de code lui-même. Cela signifie que vous pouvez lancer une recherche, recliquer dans le code pour l'éditer, et toujours parcourir les correspondances sans lever les mains du clavier.
Un workflow typique
- Vous éditez une longue règle CSS. Appuyez sur Ctrl+Alt+F — le focus saute au champ de recherche.
- Tapez
margin. Le compteur affiche1 / 8; huit correspondances brillent en bleu, la première brille en jaune et entre dans le champ de vision. - Appuyez sur Entrée quelques fois pour parcourir, ou Maj+Entrée pour revenir en arrière.
- Trouvé celle que vous vouliez. Cliquez dans le code, modifiez-le.
- Besoin de la suivante ? Ctrl+Alt+→ — pas besoin de retourner au champ de recherche.
- Terminé — Échap efface le champ.
L'édition invalide les résultats — par conception
Dès que vous éditez le code, les résultats surlignés ne reflètent plus le texte courant — ils sont donc invalidés et vous relancez la recherche. C'est intentionnel : des surlignages périmés pointant vers du texte déplacé ou supprimé seraient pires que pas de surlignage du tout. Appuyez simplement sur Entrée dans le champ de recherche (ou Ctrl+Alt+F puis Entrée) pour lancer une nouvelle recherche sur le code mis à jour.
Pourquoi cela compte pour les grandes règles
Une règle universelle qui masque les bannières de cookies, corrige les mises en page et rapièce une douzaine de sites peut être longue. La recherche dans l'éditeur transforme « faire défiler et plisser les yeux » en « taper et sauter ». C'est une petite fonctionnalité que vous utiliserez constamment.
Voir aussi
- Quoi de neuf dans JustZix — la recherche de code aux côtés d'AI Helper et de la console de sortie reconstruite.
- Toutes les fonctionnalités de JustZix — la liste complète des fenêtres de développeur et des éditeurs.
Téléchargez JustZix — gratuit, sans compte, Chrome 100+. Des barres de recherche au-dessus de chaque éditeur de code, prêtes à l'emploi.
Notez cet article
Aucune note — soyez le premier.