Mieux utiliser Brackets
Regardons comment mieux utiliser les fonctionnalités natives et de quelques extensions dans Brackets (dont Adobe a arrêté les mises à jour depuis le 01/09/2021).
Quick Edit
Ctrl + E ou Clic-droit / édition rapide
Positionner le curseur sur le nom de la balise, ou sur la classe ou l’attribut.
Faire Ctrl+E ou un clic droit/édition rapide.
Il s’affiche une fenêtre où sont répertoriés tous les ciblages CSS les concernant
On peut directement éditer ces règles.
On peut créer une nouvelle règle CSS directement à partir de l’éditeur (Nouvelle règle).
Dans tout fichier avec une couleur hexagonale ou une couleur rgb/rgba/hsl/hsla – Quick Edit ouvre un sélecteur de couleur en ligne pour prévisualiser et ajuster la couleur. Le sélecteur de couleurs répertorie également les couleurs les plus utilisées dans d’autres parties du fichier pour un accès rapide.
Dans un fichier CSS/LESS/SCSS avec le curseur sur une fonction de temporisation de transition cubic-bezier() ou steps() – Quick Edit ouvre un éditeur graphique de courbes de transition. Les fonctions de temporisation prédéfinies ease, ease-in, ease-out, ease-in-out, step-start et step-end sont également des points de départ valables.
Quick Docs
Ctrl + K ou Clic Droit / Documentation rapide
Dans un fichier CSS/LESS/SCSS avec le curseur sur une propriété/valeur CSS – Quick Docs ouvre la documentation du projet Web Platform Docs.
En savoir plus vous ouvrira la page MDN Web Docs Mozilla concernant l’article de la fonction.
Live Preview (Aperçu en direct)
Ctrl+Alt+P ou Bouton éclair
Par défaut, l’aperçu s’ouvre avec Google Chrome mais on peut changer ça:
Menu Déboguer/Ouvrir le fichier de préférences
À droite dans le fichier “brackets.json”,
ajouter la ligne :
« livedev.multibrowser »: true, Sauvegarder le fichier brackets.json. Redémarrer Brackets.
L’aperçu s’ouvrira avec le navigateur par défaut (Firefox, Safari).
Multi-Sélection et déplacement de lignes
Pour la multi-sélection, on peut utiliser plusieurs méthodes:
On clique à l’endroit souhaité et avec Ctrl on additionne des positions de curseurs (Ctrl + U = Undo sélection)
On détermine un point de départ et avec Alt + Maj + Up or Down ou Alt + Souris Up or Down, on élargit la zone de sélection.
Pour le déplacement de lignes :
On sélectionne la ou les lignes qu’on souhaite déplacer, puis avec Ctrl + Maj + Up ou Down, on monte ou on descend les lignes sélectionnées.
Extensions
Beautify: ré-indentation, ré-agencement avec les valeurs de tabulations. Améliore la lisibilité du document en JS, HTML et CSS.
Html comment button : transforme la partie HTML sélectionnée en commentaire.
Indent Guides : ajoute des lignes verticales pour visualiser en un coup d’oeil l’indentation.
Zoom wheel : permet d’augmenter ou de diminuer la taille des caractères avec Ctrl + Molette de la souris.
No distraction (déjà installée) : n’affiche que les fenêtres de codes Ctrl + Maj + 2 ou menu Affichage
Brackets icons: affiche de petites icônes devant les types de fichiers (html, css, font, images, etc…)
Emmet Les raccourcis
Le pdf “Cheat Sheet” d’Emmet est à télécharger ici
Il y a 24 pages d’explications de syntaxe et de raccourcis du type : ov:h = overflow: hidden;
Déboguer Le fichier de préférences
Dans le menu “Déboguer/Ouvrir le fichier de préférences”, on accède à 2 fichiers :
– defaultPreferences.json à gauche, qui est un fichier en lecture seule qui montre les préférences prises en charge par Brackets. Cela permet de modifier le fichier de l’autre volet “brackets.json”. Pour mieux comprendre comment faire les modifications voir ce lien.
– brackets.json à droite, qui est le fichier de préférences, avec par exemple, le thème d’affichage, la taille de police, etc… Il faut redémarrer Brackets après avoir sauvegardé les modifications du fichier.
À MANIPULER AVEC SOIN !
Conclusion
Il y a encore beaucoup de choses à explorer dans Brackets et de nombreuses extensions à tester.
L’enjeu est de faire gagner du temps car le temps c’est de l’argent comme dirait l’autre…
À vos Brackets !