Brackets, l’éditeur qui a remplacé SublimeText sur ma machine

Brackets est un projet open-source crée par Adobe sous licence MIT. C’est un éditeur de code web plutôt sympathique qui à remplacé SublimeText comme éditeur préféré.
@goetter m’a initié à cet outil, et j’avoue, après avoir été sceptique au début, l’UI ainsi que ces possibilités m’ont réellement convaincues.

Fonctionnalitées

Les principales fonctionnalités :
– Edition du CSS directement dans l’HTML
– Ajout de fonctionnalitées grâce aux extensions
– Live reload dans Chrome.
– ColorPicker dans le CSS
– Auto-complétion vraiment bien faite
– Include des fichiers simplifié

Sans oublier que Brackets est multi-plateforme et en plus gratuit !

Voici à quoi ressemble Brackets sur mon Mac, avec plusieurs extensions, que je vais lister plus bas dans l’article.
Brackets UI

L’UI est quand même plus sympatique que celle de Sublime Text à mon goût, plus clean et dans l’air du temps, et ça fait du bien de voir qu’un soin particulier à été apporté à ce niveau, tant la plupart des softs de ce type ont des interfaces que je qualifierais de « développeur friendly » sans être méchant.

L’édition de CSS depuis le HTML
Brackets CSS edit

Le colorpicker depuis le CSS
Brackets Color Picker

Mine de rien ces petits ajouts sont réellement pratiques, et accessibles depuis une combinaison de touches simple ( CMD-E sur Mac ).
L’include des fichiers est très pratique aussi, en proposant une autocomplétion bien utile !

Brackets Autocompletion

Les extensions

Globalement, les extensions les plus connues sont disponibles sur Brackets, la transition depuis SublimeText n’en sera que facilitée. D’ailleurs ici, contraitement à SublimeText, le moteur d’extensions est une fonctionnalité directement disponible sans ajout ou manipulation.

Brackets Extensions

Mes extensions

Voici une liste des extensions que j’ai installées :
(j’ai laissé les descriptions en anglais volontairement)

Autoprefixer – Parse CSS and add vendor prefixes automatically. – Plus d’infos…
Beautify – Format JavaScript, HTML, and CSS files – Plus d’infos…
Brackets Git – Integration of Git into Brackets – Plus d’infos…
Brackets Icons – File icons in Brackets’ file tree. – Plus d’infos…
Brackets Snippets – Provides ability to use code snippets in Brackets. – Plus d’infos…
colorHints – Show colors you used in your CSS file before as code hints. – Plus d’infos…
CSSLint – Adds CSSLint support to Brackets. – Plus d’infos…
Emmet – High-speed HTML and CSS workflow – Plus d’infos…
Indentator – Re-indent a document using your current indentation settings. – Plus d’infos…
Install from Bower – Quickly install front-end packages from Bower. – Plus d’infos…
Markdown Preview – Live preview of markdown documents – Plus d’infos…
Preferences setup UI – Form for editing preferences. – Plus d’infos…
Quick Search – Automatically highlights occurrences of the selected word (like Notepad++ smart highlighting) – Plus d’infos…
W3CValidation – Adds W3C validation support to Brackets. – Plus d’infos…

La liste n’est pas trop longue, mais améliore considérablement les fonctionnalitées de Brackets, et réponds parfaitement à mes attentes.

Le seul point noir de Brackets pour moi reste le Markdown, qui n’est pas très plaisant à lire / éditer. Je n’ai pas eu de plantages ou d’instabilitées notables, et en suis plutôt satisfait.
Je vous le recommande, le tester c’est l’adopter !

Auteur : Matthieu Bousendorfer

Matthieu Bousendorfer aka edenpulse — Directeur Artistique, Paris. Geek & minimal design addict.

29 réflexions sur « Brackets, l’éditeur qui a remplacé SublimeText sur ma machine »

  1. Hello boy !
    Merci pour ton retour d’expérience et le partage de ta liste de plugins.
    Entre les deux (SublimeText et Brackets), mon cœur balance encore…

  2. Bon compte-rendu, merci !

    Pour la lecture du Markdown, sache que tu peux créer ta propre extension et en gérer les styles assez facilement, c’est du pur JS + CSS :-)

    Je ne connaissais pas l’extension pour les icônes, merci ;)

      1. Direct sur le FTP je ne crois pas, mais il existe FTPSync effectivement. et EQFtp semble proposer cette fonctionnalité, mais télécharge le fichier, l’édite en local et au Save l’uploade vers le FTP

        1. Effectivement, dommage qu’il faille re-cliquer sur charger pour envoyer (je bosse souvent sur serveur distant même pour du dev, et direct en FTP c’est beaucoup plus rapide : c’est pour ça que mon PsPad est difficilement battable à ce jeu).

          Sinon effectivement, cet éditeur envoie du lourd pour le peu que j’ai essayé pour le moment…

  3. Salut,

    J’avais tester les premières release et ton article m’a donné envie de tester à nouveau (grâce à ta liste d’ extensions) mais au final j’ai encore trouvé l’expérience décevante.

    Déjà, il faut obligatoirement installer Brackets sur son Mac pour qu’il fonctionne correctement (passe encore c’est une mauvaise habitude que j’ai de ne pas vouloir polluer mon dossier Applications).
    Une fois installé en dehors de l’image disque, le lancement se passe bien mais pour ma part impossible d’installer des extensions avec la release 39.
    Du coup, j’ai testé chez moi les raccourcis copier/coller ne fonctionne pas, pareil pour le raccourci « Quitter ».

    Sinon, y’a vraiment des choses sympa, le JSLint qui s’affiche automatiquement en bas sur un fichier JS, l’aperçu du Markdown (contrairement à toi) qui est plaisant mais qui mériterai une option pour choisir l’orientation de l’aperçu,
    Bref, déception pour ma part, ça manque de polish je trouve même si je trouve que c’est le feeling de l’application est bien plus agréable que SublimeText.

    Je re-testerai un jour dans quelques dizaines de release.

    1. Très bizarre que tu ne puisse installer des extensions. Je n’ai aucun soucis pour ma part, et je ne pense pas qu’il nécessite d’avoir les outils de dév, git ou ce genre de choses d’installées pour qu’il fonctionne.
      Idem pour les raccourcis, CMD-C/V/Q/W/X. C’est très bizarre !

      1. Probablement un soucis sur mon Mac, en changeant de Mac les extensions fonctionnent et les raccourcis claviers aussi.

        Bref, j’ai enfin pu tester correctement, c’est vrai que c’est plutôt bien pensé et que ça a l’air pas mal pour coder.

  4. Pour le développement JavaScript j’ajouterais : Ternific (Javascript hinting with Tern in Brackets) et Interactive Linter (Interactive Linter brings realtime JSHint/JSLint/CoffeeLint reports into brackets as you work on your code).

    Sinon +1 pour l’adoption. Je suis dessus depuis 1 mois je ne l’ai plus lâché

    1. Je l’avais installé il y a un bout de temps mais désinstallé parce qu’il n’est pas possible d’avoir un raccourci clavier sympa pour exécuter les snippets.
      Du coup, j’ai préféré ajouter mes propres snippets à emmet : plus intuitif de ne se servir que de la touche tab

  5. ça semble pas mal. Dommage que ça soit très orienté Front et moins adapté pour du Back pur et dur ( je ne parle pas de nodeJS ).
    C’est déjà pas mal pour un soft gratuit :)

  6. Bel article et bien (re)motivant mais..
    J’ai à plusieurs reprises tenté de passer à Brackets une fois pour toute.. Mais il reste encore des choses à voir..
    Dont le muli-curseur et une meilleure gestion des pop-pops (emmet > wrap).

    Personnellement ST reste le meilleur en fonctionnalité. En qualité/prix je dis sans hésiter Brackets.

  7. La dernière fois que je l’ai essayé, je n’ai pas trouvé de moyen pour faire de la sélection intelligente : mot, ligne, scope de fonction alors poubelle.

  8. Bonjour,

    Je découvre ce logiciel qui a l’air vraiment bien.
    J’ai cependant un léger souci, j’ai installé CSSLint mais je ne vois plus le panneau d’erreurs. Je l’ai vu quand j’ai installé l’extension mais je l’ai fermé par erreur. Comment le rouvrir ?

    Merci de votre réponse

  9. Cool, je suis d’accord Brackets est top et ne crashe pas contrairement à SublimeText ! En revanche il n’y a pas de e à la fin du mot « fonctionnalités » ^^

Laisser un commentaire

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