Brackets

Brackets est un IDE pour le web nouvelle génération. En effet, il est écrit en JavaScript, HTML et CSS !! (Il utilise nodejs notamment sous le capot).

Brackets est open source mais est issu d’Adobe et sert de base pour leur éditeur Edge Code. Il est compatible Windows, Mac et Linux (à télécharger ici).

Il est développé en mode agile via des sprint (une version toutes les 2 semaines et demi environ) et il est possible de suivre l’avancement et de proposer des idées via Trello (Un tableau agile).

Brackets

Fonctionnalités

Il offre des fonctionnalité de base très intéressante :

Editeur CSS

Intégration d’un sélecteur de couleur dans l’éditeur CSS (via Ctrl-E ou clic-droit > Edition Rapide)
Brackets - Sélecteur de couleur

Intégration d’un documentation dans l’éditeur CSS (via Ctrl-K ou clic-droit > Documentation Rapide)
Brackets - Documentation Rapide

Editeur HTML

Possibilité d’éditer ou de créer les règles CSS d’un élément directement depuis le HTML (via Ctrl-E)
Brackets Edition CSS dans Editeur HTML

Pré-visualiseur d’image au survol d’un élément image
Brackets - Prévisualisation Image

Editeur JavaScript

Intégration native de JSLint
Brackets - JSLint

Extension

Il est également extensible via un système d’extensions. La gestion se fait directement dans Brackets en cliquant sur l’icône en forme de lego en haut à droite.
Brackets - Extensions

Vous pouvez trouvez sur le blog de brackets une présentation des extensions. La liste complète est disponible ici.

Voici quelques extensions que j’utilise :

  • brackets-code-folding : permet de pouvoir afficher / masquer du code
  • Autoprefixer : permet d’ajouter automatiquement les préfixes CSS
  • Theseus for Brackets : debuger JavaScript pour Chrome
  • Emmet : génere du code HTML à partir d’une syntaxe CSS
  • CanIUse : les informations de CanIUse.com directement dans Brackets
  • Indent Guides : afficher les lignes d’indentation

Live Reload

Brackets inclus par défaut la fonctionnalité de Live Reload (en cliquant sur l’éclair en haut à droite). Cela permet de recharger la page dans Chrome (version incluse dans Brackets) automatiquement à la sauvegarde d’un fichier.

Liens

Conclusion

Brackets est éditeur encore jeune mais très prometteur. Je vous invite à le tester d’autant que le développement en mode agile permet d’apporter régulièrement de nouvelles fonctionnalités.

5 réflexions sur « Brackets »

  1. Je n’avais pas été convaincu par brackets lors de mes tests il y a quelques mois. Je suis partit sur sublime text . Vu son évolution, ca a l’air d’avantage intéressant ! Vais y jeter un nouvel oeil ! En plus, brackets a l’avantage d’être open source et d’avoir un rythme de développement semble-t-il plus rapide !

    1. Sublime Text est super bien aussi mais presque trop complexe à mon goût…
      La dernière version de Visual Studio est vraiment super aussi. Je suis en train de la tester et ils ont ajouté pas mal de choses super sympa (code lens, peek definition, code map, …) Va falloir que je fasse un article dessus 🙂 .

      1. ne faisant presque plus que des projets javascript (angularjs and co…), c’est vrai que brackets peut bien faire le boulot. Maintenant, je me sert de l’éditeur preque que pour avoir coloration et autocomplétion. Le reste : build, minimification, publication, livereload, jshint (plus pratique au passage que jslint) je le fait avec des directives grunt. Faut juste se mettre dans le concept de node.js mais ca vaut l’investissement de quelques soirs !

          1. Via yeoman pour la mise en place initiale…
            Une fois configuré, grunt me vérifie, me build mon code js, reload la page de dev. C’est un peu de temps pour mettre le tout en place, mais c’est ultra rentable !

Laisser un commentaire

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