Ma sélection d’extensions préférées pour Brackets

Sélection d'extensions pour Brackets

C’est tentant, mais je n’ai jamais fait de liste d’extensions pour WordPress.
Il en existe tellement sur le Web, et des bien mieux que ce que j’aurais pu produire.

Par contre, on trouve peu de listes, notamment en français, pour Brackets, ce nouvel éditeur gratuit orienté développement Web Front End. Alors c’est parti.

Brackets ?

Le logo de BracketsJe profite de cette occasion pour vous faire découvrir Brackets si vous ne connaissez pas encore cet éditeur.

Il est orienté développement Web Front End, c’est-à-dire qu’il est utile pour travailler sur des projets en HTML, CSS et JavaScript. Il comprend également LESS et SCSS, mais aussi les langages orientés serveur comme PHP par exemple.
D’ailleurs il a été écrit en Node.js et fonctionne sous Windows, Linux et OSX.

Brackets est donc parfait pour écrire des applications Web avec AngularJS.

Il est créé et développé par Adobe, mais il est gratuit et Open Source sous licence MIT.

Pour prouver (relativement) la fiabilité du projet, Brackets est intégré par Intel à son IDE, Intel XDK, pour créer des applications pour smartphones et tablettes à partir d’applications HTML5, CSS3 et JavaScript.

Si vous voulez un aperçu rapide de l’utilisation de Brackets, je vous conseille ce guide rapide.

J’ai tout de même relevé un inconvénient à Brackets : j’ai l’impression qu’il ne travaille qu’avec un fil d’exécution (ou thread).
En clair, dès qu’une action prend un peu de temps, comme la recherche dans tous les fichiers du projet ou l’ouverture d’un (relativement) gros fichier, comme bootstrap.css, l’éditeur est bloqué et il devient impossible de travailler jusqu’à ce que la tâche soit terminée.
J’espère que ce problème sera bientôt résolu.

Les principales fonctionnalités

Comme je vous le disais, même s’il est tout à fait possible de l’utiliser pour travailler en PHP ou tout autre langage de Back End, Brackets est résolument orienté Front End en nous proposant des outils permettant de simplifier le travail.

Tout d’abord, la fonction Quick Edit dans un document HTML permet, avec le curseur sur un nom de classe CSS, d’ouvrir les occurrences de cette classe, et même les modifier directement sans quitter le fichier HTML.

Sélection d'extensions pour Brackets : l'édition rapide
L’édition rapide
Cette édition rapide est possible pour les classes CSS, mais aussi les couleurs, et depuis peu, pour contrôler la courbe de vitesse des transitions CSS !

Sélection d'extensions pour Brackets : l'édition rapide des animations
L’édition rapide des animations
Avec le curseur sur une propriété CSS, la fonction Quick Docs ouvre une aide complète de l’attribut, avec les différentes valeurs possibles. L’aide vient du site WebPlatform.org, que j’avais déjà évoqué.
Pour l’instant, seule l’aide CSS est disponible, mais comme WebPlatform.org fournit aussi l’aide pour HTML et JavaScript, j’imagine que ce n’est qu’une question de temps pour les voir intégrées aussi.

Sélection d'extensions pour Brackets : la documentation CSS
La documentation CSS
La complétion automatique de code est contextuelle et plutôt efficace.

Les fichiers sont gérés par projet, ce qui confère quelques fonctionnalités bien pratiques comme l’ouverture rapide de fichiers mais surtout la complétion automatique de chemins, très appréciable lors de l’inclusion d’un fichier CSS ou JavaScript dans un fichier HTML.

Une autre fonctionnalité mise en avant est la prévisualisation automatique des fichiers modifiés directement dans le navigateur, appelé le Live Preview. Le problème avec cette aperçu automatique, c’est que le passage d’un fichier HTML à un autre dans l’éditeur est également reproduit dans le navigateur, ce qui n’est pas toujours le comportement attendu.
Dans mon cas, avec AngularJS, j’édite des fichiers partiels (les vues), et l’aperçu de ces fichiers partiels seuls ne sert à rien.
En plus j’ai une autre solution qui fonctionne très bien, dont je parlerai très prochainement.

Mes extensions préférées

Brackets est extensible, je vous ai concocté une liste de plugins pour bien démarrer.

Beautify

Beautify permet de rendre du lisible du code minifié.

Brackets bookmarks

Cette extension est toute simple : elle permet de marquer des lignes avec ctrl+F4, et d’y revenir rapidement avec une pression sur F4 ou shift+F4.

Brackets snippets

Brackets snippets permet de créer des raccourcis permettant d’écrire du code automatiquement : des snippets.

Par exemple, dans un fichier JavaScript, saisir f nomDeFonction puis ctrl+alt+V permet de créer le code d’une fonction nommée nomDeFonction.

Il est d’ailleurs possible de créer ses propres snippets.

Brackets code folding

Brackets code folding permet d’ajouter une arborescence dans la marge du code pour ouvrir et fermer les blocs de code.

Sélection d'extensions pour Brackets : le code folding
Le code folding en action

Emmet

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. Par exemple :

a#twitter.social-network

suivi d’une pression sur la touche de tabulation écrit automatiquement :

<a id="twitter" class="social-network"></a>

Et il est même possible d’indiquer directement l’URL et l’ancre.

Les raccourcis concernent aussi bien HTML que CSS, d’ailleurs la documentation et le cheat sheet sont disponibles sur le site officiel.

Après avoir essayé ce plugin, il est difficile de s’en passer.

Indent guides

Indent guides ajoute des lignes verticales pour visualiser en un coup d’oeil l’indentation.

Sélection d'extensions pour Brackets : le guide d'indentation
Le guide d’indentation

Indentator

Indentator permet d’indenter automatiquement un fichier entier selon votre habitude.

Quick search

Après avoir sélectionné un mot ou quelques lettres, Quick search met en évidence toutes les autres occurrences dans le texte.

WD minimap

WD minimap affiche une mini carte du code et l’emplacement en cours.

Le mot de la fin

Brackets est Open Source, gratuit et bourré de fonctionnalités bien pratiques. La communauté de cet éditeur est en train de grandir, alors si une fonctionnalité reste manquante, il y a fort à parier qu’une extension comblera le manque si ce n’est pas fait par l’équipe de développement de Brackets elle-même.

Pour ma part, j’utilise toujours Notepad++ pour la partie Back End, mais je ne peux déjà plus me passer de Brackets pour mes projets Front End.

Cet article vous a été utile ? Partage it !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.