Brackets

Voir la vidéo

Brackets est un éditeur open source qui va vous permettre de travailler de manière plus efficace et plus rapide sur votre HTML et votre CSS.

L'interface est plutôt agréable

Alors qu'apporte cet éditeur par rapport à Sublime Text ou autre ?

Live Inspect

Brackets intègre un outil live preview qui permet de lancer rapidement un serveur HTTP pour prévisualiser le rendu de votre page. Cette live preview permet ainsi d'avoir un rendu en temps réel de votre page. Dès que vous modifiez le code HTML ou CSS de votre page, les modifications sont directement reportées sur le navigateur.

Un inspecteur de courbe plutôt pratique Cette live preview va au delà du simple rechargement automatique. Il est en effet possible d'inspecter un élément HTML pour obtenir une liste des règles CSS qui l'affecte, et on peut ainsi faire des modifications rapides sur le CSS.

Côté CSS on retrouve ce même inspecteur qui permet de modifier certaines valeurs comme les courbes d'animation ou encore les couleurs, finit la pipette photoshop !

Des plugins pour tous les goûts

Par défaut brackets est plutôt light, mais il est possible d'ajouter de nouvelles fonctionnalités très simplement avec un système de plugins. Je n'utilise pas cet éditeur depuis longtemps donc je ne saurais pas vous faire une longue liste de plugin indispensables mais il y a de quoi faire.
Il est important de noter que les préprocesseur sont supportés, comme par exemple SASS avec l'utilisation de libSass (il reste quelques petits problème par ci et par là mais c'est déjà prometteur).

Brackets + Adobe Extract

Comme vous le devinez Adobe n'a pas pu s'empècher d'y mettre sa touche et il faut avouer que pour une fois ils ont bien fait les choses. En effet, il ne s'agit pas ici d'une n ième tentative de remplacer le développeur par un outil automatisé, mais d'un réel assistant.
Brackets intègre Adobe Extract ce qui permet plusieurs choses :

  • L'extraction des assets directement dans l'éditeur, sans avoir à ouvrir Adobe Photoshop
  • L'inspection des éléments qui permet d'obtenir en un clin d'oeil les dimensions des éléments
  • L'import automatique qui permet d'obtenir automatiquement le CSS associé à un élément (plus besoin d'aller faire des allers-retours avec photoshop pour obtenir la font et taille de police)

Un éditeur à suivre de près

J'avais testé brackets il y a un petit moment et je suis impressionné par le chemin parcouru par l'outils. L'intégration d'Adobe Extract est une véritable bonne nouvelle et de très bonnes idées sont déjà en place. Malgré tout, l'éditeur n'est pas exempt de bug et la plupart des outils proposés deviennent inutiles si on travaille avec un langage côté serveur (plus de live preview, plus d'inspection).

Publié
Technologies utilisées
Auteur :
Grafikart
Partager