{ Tuto } Brackets - Un éditeur de code complet !

Open-source et gratuit, Brackets est un puissant outil qui va vous permettre d'éditer vos codes sources HTML, CSS et JavaScript de manière simple, efficace et intuitive. Brackets dispose d'une interface minimaliste et très bien pensée, mais il regorge également de nombreux outils et fonctionnalités auquel s'ajoutent les différents plugins que vous pourrez télécharger en fonction de l'utilisation que vous souhaitez en faire. Vous pouvez le télécharger sur cette page.

Afin de s'y retrouver et de vous faire découvrir Brackets, j'ai listé pour vous les outils, fonctionnalités et plugins que j'ai trouvé intéressant de vous faire partager, avec en prime quelques astuces.

L'aperçu en direct

Parmi les nombreuses fonctionnalités de Brackets, l'aperçu en direct est certainement l'une des plus utiles, car elle permet, pendant que vous éditez votre code, de voir les changements que vous opérez directement dans votre navigateur préféré et ce, de manière instantanée et sans sauvegarde !
Pour rendre cela possible, il suffit simplement de cliquer sur le petit éclair situé en haut de la sidebar droite. une page devrait s'ouvrir dans votre navigateur avec votre site.

Surlignement dans l'aperçu en direct

Pour rendre cela encore plus interactif, sachez que depuis la version 1.9 de brackets, il est possible d'utiliser la fonction " surlignement dans l'aperçu en direct " mais dans les 2 sens. Je m'explique. Cette fonction était déjà implanté dans les éditions précédentes, mais ne fonctionnait que dans le sens éditeur --> navigateur. Dorénavant lorsque vous cliquerez sur une partie graphique de votre site dans le navigateur, la partie du code concernant celle ci ce mettra en surbrillance dans Brackets. Et donc inversement, si vous cliquez sur une partie de votre code, celle ci ce mettra en surbrillance sur la partie graphique de votre site dans le navigateur. Pratique non ?

Pour l'activer, il faudra ce rendre dans "affichage"  dans la barre d'outils du haut et cliquer sur " surlignement dans l'aperçu en direct ".

Édition rapide

Comment gagner du temps sans avoir à naviguer entre ses différents fichiers à éditer ? En utilisant l'édition rapide ! C'est une fonctionnalité  accessible dans vos documents HTML par un simple raccourci ( ctrl + E ) ou avec un clique droit. Elle permet, comme son nom l'indique d'éditer rapidement le code CSS rattaché au sélecteur choisi directement dans votre code HTML.

édition rapide des couleurs

Une autre fonction très intéressante avec l'édition rapide, c'est celle qui permet d'éditer rapidement les couleurs dans vos fichiers CSS en faisant apparaître un éditeur chromatique. Tapez dans votre fichier CSS une couleur quelconque, pour un background par exemple : background: #000; positionnez vous sur le code couleur et faite ctrl + E ... Magie :)

Documentation rapide

Si vous avez un trou de mémoire quand à l'utilisation de tel attribut avec tel style CSS,  vous pouvez vous appuyer sur cette documentation ( En Anglais ) fournie par webplatform.org en faisant un clique droit ou un ctrl + K sur le style en question.  Il sera possible, pour plus de documentation, de ce rendre sur leur site internet depuis un lien " en savoir plus ".

Complétions automatique

Toujours dans l'optique de vous faire gagner du temps, une fonction de complétions automatique du code à été ajouté. Par exemple, commencez par ouvrir un crochet dans votre document HTML , une liste déroulante apparaîtra avec les différentes balises utilisables, ajoutez une lettre pour réduire la liste, D pour div par exemple, il vous suffira alors de sélectionner dans la liste la balise qui correspond à une div pour compléter votre code, enfin fermez les crochets pour ajouter la balise de fermeture. Il en sera de même avec vos styles CSS et certaines fonctions Javascript et Jquery.

Navigation simplifié entre vos différents documents

Vous connaissez l'existence des touches suivant ↑ et précédent ↓ ? Les utilisez vous souvent ? Car dans mon cas, mise à part quand je désactiver le pavé numérique par inadvertance, et que je me rappelle leur existence en voulant écrire 9 ou 3 ( Ça vient de Saint Denis bébé ... ) , je ne m'en sert pas beaucoup. Non, mais plus sérieusement, en utilisant les touches ctrl + ↑ ou ↓ vous pourrez naviguer entre vos différents documents composant votre projet. C'est donc un moyen rapide (2spi ? ) d'accéder à vos documents. ( j'avais dit sérieux ? :)

Lier son serveur local à Brackets

Cette fonction est très utile car elle s'utilise en commun avec wampserveur 3 ( par exemple ). Elle permet donc de lier le dossier de projet que vous utilisez dans Wampserveur 3 à Bracket. Elle est surtout utile quand vous avez une configuration particulière pour votre serveur et que vous souhaitez la tester en live. Elle est disponible dans fichier >>> Paramètre de votre projet, il suffira de rentrer l'adresse de votre serveur local, par exemple http://localhost/mon-site-trop-bien pour pouvoir en profiter. Et bien sur l'aperçu en direct fonctionne aussi avec cette fonction.

Toujours plus de fonctionnalités dans Brackets

Je pense avoir fait le tour du gros des fonctionnalités et outils de Brackets, Cela dit, il existe quelques petites chose pratiques comme l'arborescence dans le code, qui permet d'ouvrir et fermer certains de vos blocs de code de façon a travailler plus efficacement. Avec ça vient la numérotation des lignes ainsi que le code en couleurs ( je ne me souvient plus du terme... c'est pas sérieux tout ca ! ) , un classique me dirait vous. La recherche et le remplacement au sein d'un document ( amélioré avec la version 1.9 ). Vous avez également la possibilité de modifier Brackets... Et oui, il est lui même codé en HTML CSS JS !  Les outils de développement sont là pour ça, il sont accessible directement depuis le menu déboguer ou en appuyant sur F12.

Les extensions pour Brackets

Il encore possible d'améliorer Brackets grâce à des extensions.  Les extensions sont très nombreuses et ajoutent nombre de fonctionnalités à Brackets.
Je vous ai simplement fait une petite liste de celle que j'utilise régulièrement mais comme dit précédemment, il en existe beaucoup, vraiment beaucoup en dehors de cette liste, donc cherchez, installez, essayez et si elle vous plaise, adoptez :).

Emmet

Emmet est un workflow HTML et CSS que je qualifierais d'essentiel en production, car elle vous permettra de gagner un temps considérable dans l'écriture de vos codes sources. Le seul inconvénient c'est qu'il faudra bien sur le prendre en main, mais une fois que sera le cas, vous ne pourrais plus vous en passer. Personnellement je n'ai pas encore saisie toutes les subtilités de cette extension, je me rends donc régulièrement sur la documentation " Cheat Sheet " qui est d'une aide précieuse.

AutoPrefixer

Cette extension permet d'ajouter les préfixes nécessaires au bon fonctionnement de certaines règles CSS avec les navigateurs propriétaires. Au choix, vous pouvez l'utiliser à la sauvegarde du document, lorsque que le fichier est modifié ou bien en sélectionnant une règle à préfixer et en appuyant ensuite sur ctrl + maj + p.

Beautify

Simple mais au combien utile, voici la baguette magique qui vous permettra de mettre en beauté votre code. Une fois installé, l'icône pour l'utiliser ce trouve placé sous le bouton des extensions à droite, cliquez dessus et magie !

Js css minifier

Cette extension vous permet de minifier vos fichiers CSS et JS afin de réduire leur poids. Vous pouvez choisir de créer une copie minifier à l'enregistrement de votre fichier ou en enregistrer une en cours de travail.

Schnapsum

Vous connaissez le Lorem Ipsum ? Et bien dite bienvenue au Schnapsum ! Créé par Alsacréations, il s'agit d'une extensions permettant de remplir vos pages avec du faux texte... en Alsacien, histoire de changer un peu du latin !

En conclusion

Je pense vous avoir fait faire le ( grand ? ) tour de Brackets. Comme vous avez pu vous en rendre compte, c'est un éditeur de code vraiment complet et personnalisable selon vos besoins, notamment grâce à ces extensions très nombreuses. Je ne peux que vous recommander de vous le procurer, vous ne le regretterez pas. Si vous souhaitez apporter votre pierre à l'édifice et me suggérer quelques extensions ou autres à ajouter dans cette article, n'hésitez pas. Sur ce je vous souhaite une bonne journée !

Christian Aslan