Maintenant, vous savez comment améliorer Brackets pour avoir une coloration syntaxique plus précise. Mais plus que le thème, les extensions ajoutent à Brackets des fonctionnalités importantes qui en modifie et en améliore le comportement. En voici trois, qui vont nous être utile avant de passer en mode projet, pour pouvoir éditer notre code de manière plus efficace…
- Beautify, l’embellisseur de code,
- W3CValidator, le validateur de code du W3C, mais intégré à Brackets.
À vos Brackets, prêt·e·s ? Partez !
Beautify, pour un code propre et compréhensible
Ceci n ‘est qu’un rappel pour celles et ceux d’entre vous qui n’auraient pas réussi la manip en cours; pour les autres, passez directement au point suivant…
Après avoir tapé/effacé/retapé des dizaines de lignes de code, il arrive que votre code devienne illisible assez peu lisible. Et un code peu lisible est source d’erreurs sur lesquelles on s’arrache les cheveux (et vous y tenez, à vos cheveux, n’est-ce pas?).
Ce serait tellement bien s’il existait un truc qui remettait notre code au propre de temps en temps, qu’on s’y retrouve…
Et bien ce truc existe, c’est l’extension Beautify.
Installation
Pour l’installer, on passe toujours par le menu Fichiers>Gestionnaire d’extensions dans Brackets, puis on tape Beautify dans le champ Rechercher.
On l’installe comme on l’a fait pour installer un thème (voir la partie Installer un thème de l’article précédent). L’extension est maintenant active, et elle apparaît tout en bas du menu Modifier.
Comment ça marche ?
Le plus simplement du monde. Vous êtes en train de refaire pour la nième fois votre code HTML et ça ne ressemble plus à rien ? Vous avez maintenant trois manières d’accéder à Beautify pour tout remettre en ordre :
- Allez dans le menu Modifier, cliquez sur Beautify.io ;
- ou bien, plus geek, retenez le raccourci-clavier associé, pour lancer Beautify sans interrompre votre flux de travail : sur mac, c’est Maj + Cmd + L (et sur PC, j’imagine, Maj+Ctrl+L) ;
- ou encore, version pousse-bouton, cliquez sur la baguette magique en haut à droite de la fenêtre de Brackets.
Ta daaaaa ! Beautify remet en ordre votre code, l’indente correctement, et tout d’un coup, il redevient lisible !
Vérifier son code depuis Brackets
Vous vous souvenez qu’on a parlé des validateurs du W3C. Maintenant que nous allons entrer en phase de projet, il va devenir obligatoire de vérifier la validité de son code au fur et à mesure de l’avancement du projet.
Mais ce serait tellement mieux de le faire sans avoir à sortir de Brackets !
Et ben, comme on disait pour les apps chez Apple, il y a une extension pour ça. Et elle s’appelle W3CValidation.
Pour l’activer, il suffit de refaire le chemin : Brackets>Fichier>Gestionnaire d’extension>Rechercher: W3C, et d’activer l’application qui s’affiche.
Elle s’installe dans le menu Modifier, et son raccourci clavier est une touche de fonction, la touche F9
- le tiret-du-bas ou underscore est facile à trouver sur un PC (c’est le tiret du 8), mais parfois méconnu sur Mac (il faut appuyer sur
Maj+-pour l’obtenir)
