Brackets, l’éditeur de texte


Technique

Brackets a été créé et développé par Adobe, il est gratuit et Open Source sous licence MIT.
Il est là pour faciliter le code et améliorer l’environnement de développement. Pour le télécharger rien de plus simple ! Allez simplement sur le site brackets.io et téléchargez la version qui convient pour votre machine.

 

brackets01 Brackets, l’éditeur de texte

 

L’interface est jolie et flat avec plusieurs thèmes disponibles.
Allez sur l’icône de gestionnaire d’extension sur la droite (sous l’éclair) puis dans l’onglet thème et faites votre choix !
S’il est vrai que vous pouvez coder avec n’importe quel langage sur Brackets, il reste néanmoins plus orienté dev front grâce à ses nombreux outils.

 

Les principales fonctionnalités

 

Le quick édit avec la commande cmd + E ou ctrl+ E sur une class/id ou élément html. Vous avez la possibilité de modifier le css directement à partir du fichier sur lequel vous êtes par l’ouverture d’un onglet. S’il n’y a pas encore de style appliqué on vous propose d’en créer sur le fichier de votre choix. Sinon, vous pouvez aussi crééer une nouvelle fiche de style :

brackets023 Brackets, l’éditeur de texte

 

ou simplement le compléter comme ici :

brackets033 Brackets, l’éditeur de texte
Le live preview déjà utilisé chez les autres, vous ouvre une fenêtre navigateur (Chrome par défaut) et se met à jour automatiquement sans besoin de rafraîchir la page. Pour le lancer, cliquez sur l’icône en forme d’éclair, attendez qu’il se remplisse et la page se lancera toute seule.

L’extract for brackets permet de charger un psd directement à partir de l’éditeur. Vous devez vous connecter sur votre compte Adobe. Telechargez l’extension et un onglet apparaîtra sur la droite. Cliquez, puis connectez-vous avec votre AdodeID et le tour est joué. Glissez/déposez un psd dans l’onglet en bas de l’éditeur et attendez que votre fichier se charge. Vous pouvez alors avoir des infos sur la taille de la font, la taille des éléments. L’espacement entre eux permet de copier/coller directement le texte sans avoir à changer d’outil, un vrai gain de temps !

 

brackets043 Brackets, l’éditeur de texte

 

Voici quelques raccourcis clavier très pratiques :

  • cmd +D ou ctrl + D pour dupliquer la ligne du dessus
  • cmd + L ou ctrl + L pour sélectionner la ligne sur laquelle on se trouve.

 

Brakets vous propose également un grand nombre d’extensions et certaines sont très utiles et très bien élaborées.
Voici un petit top d’extensions intéressantes :

  • Bracket Git permet d’associer son compte github, être informé de la branche sur laquelle on se trouve, commit/push/pull, avoir l’historique des fichiers, raccourci pour ouvrir git bash, choisir son dépôt distant.

Quand une ligne est modifiée on a une bordure jaune sur cette même ligne à gauche, rose pour une suppression et vert pour un ajout, très pratique pour se repérer.

  • Brackets snippets permet de créer des raccourcis permettant d’écrire du code automatiquement : des snippets. On peut aussi créer ses propres snippets accessibles très facilement. Alt + S accès aux snippets. Possibilité de les ajouter au Gist/ supprimer/modifier/créer
  • Markdown permet d’éditer un fichier en .md
  • Emmet est un outil de développement Web disponible pour plusieurs éditeurs, dont Brackets (vous vous en doutiez…). Une fois bien pris en main, il permet de simplifier l’écriture de code de manière significative.
  • PageSuck récupère le contenu html d’une page dont vous aurez renseigné l’URL en faisant Alt + G et vous crée une copie sur votre machine
  • Beautify permet de rendre du lisible du code minifié.
  • Indent guide ajoute des lignes verticales pour visualiser en un coup d’oeil l’indentation.
  • Brackets File Icons permet d’avoir les icônes sur chaque fichier selon le langage
  • Autoprefixer ajoute pour vous les préfixes css pour ne plus avoir à se soucier des compatibilités de vos styles.