Brackets, l'éditeur front-end, un passage en douceur?

Il était une fois l'éditeur de code

Il y a fort longtemps, dans le Royaume du web, on déplaçait des layers dans un logiciel WYSIWYG de rêve et laissais la magie opérer. Sauf que la magie a toujours un prix et alors qu'en apparence tout allait bien, il se tramait de drôles de choses sous le chapeau, dans le code. Et à force d'aller réparer dans ce fameux éditeur de code, il est devenu logique de commencer directement par là et d'avoir un parfait contrôle sur la sortie.

Mon premier éditeur a été, comme pour beaucoup, Notepad++.J'ai ensuite essayé Aptana Studioquelques temps mais sans vraiment m'y faire. En passant de Windows à MacOsX, j'ai découvert deux softs sympas qui semblaient plus tournés vers le front-end : Codaet Espresso. Je n'ai jamais réussi à en choisir un puis est arrivé Sublime Text. Jusqu'a aujourd'hui je n'ai plus utilisé que lui. Simple, léger, avec des extensions à foison, il s'est superbement bien intégrer dans mon workflow et m'a rarement fait défaut.

Sauf que les usages changement et qu'il n'est pas rare qu'un petit nouveau survitaminé vienne bouleverser les habitudes. Ce petit nouveau c'est Brackets, un éditeur open source développé par Adobe sous license MIT. Je l'ai d'abord regardé de loin, attendant que ses promesses deviennent réalité puis j'ai franchi le pas.

Un éditeur pour les gouverner tous

Brackets est très orienté développement front-end et ça tombe bien c'est ce que je fais. Brackets amène surtout un lot de petites fonctions qui change pas mal la vie! De plus en plus, je tends vers du design dans le browser. Ce n'est pas le propos de l'article mais c'est, pour mes projets solo, un gros gain de temps et quelque chose qui prend toute son importance à l'heure du responsive web design et de ses nombreuses intéractions. Pour faciliter ce genre de pratique, il est important d'automatiser le refresh du browser pour ne pas avoir le faire manuellement à chaque modification dans un fichier.

Le live preview

Dans Sublime Text, couplé à CodeKit, le refresh se fait à la sauvegarde des fichiers. C'est le minimum mais ça oblige quand même à passer par une commande à chaque fois que l'on veut voir les modifications. Comme palliatif, on peut toujours aller "jouer" avec les css dans les developer tools du navigateur et reporter les bonnes valeurs dans le code , mais ça fait une étape d'aller retour supplémentaire.

Dans Brackets, on oublie tout ça, il s'occupe de tout, à la fois pour les css mais également pour le html. Et c'est vraiment très pratique! Dans les phases de prototyping, avec par exemple un framework type Bootstrap, la vue se rafraichit à l'ajout des classes css sur les éléments. Pour qui connait un peu les classes courantes du framework, on peut monter une page sans jamais quitter son fichier html. Ca fonctionne de la même façon pour les css et bonne nouvelle, si on utilise un pré-processeur, il existe des extensions !

L'édition rapide

L'autre gros point fort de Brackets c'est sa fonction Quick Edit qui permet, en plaçant le curseur sur une classe css, de l'éditer directement depuis le fichier html sans avoir à retourner et chercher dans le fichier css. On peut même créer une nouvelle classe à la volée et choisir dans quel fichier la placer.

Dans les fichiers css, cette commande Quick Edit permet par exemple d'ouvrir un Color Picker quand on est sur une propriété color ou mieux encore, d'éditer une courbe de bézier quand on utilise des propriété d'animation. Dans le même esprit, on a accès à la documentation rapide de n'importe qu'elle propriété via Quick Documentation.

Les extensions : vers l'infini et au delà

Tout comme Sublime text, Brackets dispose de plugins/extensions pour ajouter d'autres fonctionnalités. L'installation est très simple puisqu'elle repose sur un gestionnaire d'extensions qui ressemble à n'importe quel autre gestionnaire de paquets. Il y en a pour tous les goûts et toutes ne sont pas utiles selon vos habitudes de travail. Voici la liste de celle que j'utilise pour le moment :

• Brackets Snippets : permet d'ajouter des snippets;
• Beautify : pour réindenter joliment votre code;
• Brackets Color Palette : pour choisir des couleurs directement depuis une image;
• Brackets Css Color Preview : affiche une preview des couleurs dans le fichier css;
• Brackets File Icons : affiche des icônes en face des fichiers selon leur extension;
• Brackets File Tabs : permet la navigation par onglet;
• Brackets Sass : compile les fichiers scss à la volée pour le Live preview;
• Can I Use : affiche la compatibilité cross-browser d'un propriété;
• Code Folding : permet de folder des portions de code;
• CssComb Brackets plugin : permet de réordonner les propriétés css;
• Css Lint : linter css (très verbeux);
• Emmet : permet d'utiliser la syntaxe rapide d'emmet (ex Zen coding);
• Html Lint : linter html;
• Image Dimensions extractor : affiche les dimensions d'une image;
• Ident Guides : affiche des repères visuels pour l'indentation;
• Inline Gradient Editor : permet d'éditer les gradients linéaires avec Quick Edit;
• Inline Image Css HTML image Tag : convertit les images en data-uri;
• More HTML Code Hints : complète la liste des code hints;
• Multi-project support : ajout d'un mode multi-projets;
• Projets : ajoute une jolie modale pour la sélection des projets;
• SassHints : ajoute l'autocomplétion des variables sass/scss;
• Scss Lint : linter scss;
• Show Whitespace : permet de visualiser les espaces;
• W3CValidation : permet de valider son code;

Le parfait est imparfait

J'aurai aimé que tout se passe pour le mieux et qu'à l'installation je sois directement opérationnel mais il y a deux trois petites choses qui m'ont un peu compliqué la tâche.

A fond la font

Au niveau de l'apparence : brackets supporte évidement les thèmes et Monokai est de la partie donc je me suis vite retrouvé avec mes repères. Mais ça coinçait au niveau de la police, je ne suis pas fan de Source Sans Pro et surtout très habitué à Menlo. Bon rien de grave on peut changer de police...

Sauf que, étonnement, le rendu dans Brackets et très différent de celui dans Sublime Text! L'espace entre les lettres est plus important et, travaillant avec une font-size de 16px, les lignes sont longues, trop longues... Si vous avez également ce problème, on peut facilement le résoudre en créeant une extension. Il suffit juste d'ajouter une propriété letter-spacing : -1px et tout rentre dans l'ordre.

Deux instances valent mieux qu'une

En installant l'extension multi projets, je m'attendais à quelque chose de similaire à Sublime Text mais j'avais tord. J'ai l'habitude d'ouvrir plusieurs projets face à face pour comparer ou reprendre du code. Ca ne fonctionne pas comme ça avec Brackets qui est plutôt mono fenêtre. Et même si on peut scinder la vue en deux pour ouvrir plusieurs fichiers, dans le cas de multi projets je n'ai pas retrouvé la même ergonomie que deux instances ouvertes.

En fouillant les menus, il y a une solution, certes bancale mais fonctionnelle : Deboguer -> Nouvelle fenêtre Brackets. Ca ouvre une seconde instance dans laquelle on peut placer d'autres projets. A noter qu'il doit certainement être possible de lancer une seconde instance via un applescript mais je n'ai pas essayé.

Pour conclure

Brackets c'est du bon, mangez-en ! Le soft est encore jeune, il n'est pas encore parfait et parfois il se montre un peu lent ou manque de réactivité. Mais dans le cas de développement front-end il est vraiment très adapté. A chacun de l'inclure à sa façon dans son workflow. Je n'ai pas encore exploré toutes les possibilités et certaines feront certainement l'objet d'un autre article comme la synchro avec un ftp ou l'intégration de git.