Brackets, l'éditeur spécialisé front-end

Outil par (Intégrateur du Dimanche, Strasbourg)
Créé le (55277 lectures)
Tags : ide, édition

Brackets est un éditeur de code open-source nouvelle génération, multi-plateformes, et tout particulièrement adapté au profil d'intégrateur et de webdesigner.

L'interface de Brackets est avant tout conçue pour être agréable et ergonomique. Nul besoin d'aller fouiller dans la console ou des fichiers XML pour modifier la configuration ou installer des plugins. En outre, de nombreuses fonctionnalités sont natives sur Brackets alors qu'elles nécessitent des extensions sur d'autres éditeurs.

Principaux avantages

Les éditeurs récents, notamment SublimeText, Atom et Brackets, s'adaptent de plus en plus aux nouvelles contraintes du front-end et apportent des fonctionnalités toujours plus riches.

Brackets est clairement moins orienté PHP et back-end que certains concurrents mais compense largement ce déficit dans le domaine du webdesign.

Jugez par vous-même :

Live refresh

Brackets propose par défaut un aperçu en direct dans le navigateur très pratique car il intègre la possibilité de mettre en exergue les éléments HTML et CSS ciblés dans le document au fur et à mesure de la frappe.

Cette option fonctionne nativement avec le navigateur Google Chrome, mais il est également possible d'installer le plugin Live Reload pour obtenir l'équivalent sur Safari ou Firefox.

live refresh

Aperçus divers en live (images, couleurs, dégradés)

En survolant le code HTML ou CSS d'une image, un aperçu visuel de celle-ci apparaît en infobulle. Il en est de même pour les couleurs et les dégradés de couleurs.

img viewer

color viewer

Édition rapide

Brackets intègre une édition rapide des styles CSS directement au sein des documents HTML. En activant le raccourci Ctrl + E sur un élément HTML, une fenêtre CSS interne s'ouvre directement sous l'élément HTML et permet de le styler sans avoir à sortir du fichier HTML.

quick edit

Mais aussi

D'autres fonctionnalités permettent d'économiser du temps et de la sueur :

  • Autocomplétion intelligente
  • Intégration native LESS / Sass (avec Liverefresh tant qu'à faire)
  • Sélection multiple, raccourcis clavier nombreux
  • Gestionnaire d'extensions intégré et convivial
  • etc.

Raccourcis-claviers utiles

Voici quelques-uns des raccourcis les plus pratiques, en version Windows (l'équivalent existe bien sûr sur les autres systèmes) :

  • Ctrl + E : édition rapide de codes CSS, JS, fonctions, etc (mini-fenêtre ouverte directement dans le document)
  • Ctrl + B : sélection de l’occurence suivante (comme Ctrl + D de SublimeText)
  • Ctrl + D : duplication d'une ligne
  • Alt + F3 : sélection de toutes les occurences dans le document
  • Ctrl + T : navigation entre les occurences
  • Ctrl + K : documentation rapide (bien fichue !)
  • Ctrl + F : rechercher
  • Ctrl + H : rechercher/remplacer

Du côté des extensions

Voici la liste des extensions que nous employons chez Alsacréations, classées par thème:

Indispensables tout le temps

  • EMMET : raccourcis clavier ++ (tapez des bout de mots, puis tabulation. Anciennement Zencoding) (Emmet, c’est la vie)
  • W3C Validation : affiche les erreurs de validation
  • HTMLhint : linting HTML (parfois plus pertinent que le simpliste Validateur) (compatible avec W3C Validation)
  • Projects : Pour gérer le multi-projets
  • Brackets file tabs : affiche les fichiers sous forme de tabulation plutôt qu’à gauche dans la sidebar
  • Beautify : ré-indentation, ré-agencement, etc. Augmente sensiblement la lisibilité du document en dev (pour JS, HTML et CSS) (configurable à la sauvegarde)

Indispensables si pas de workflow (Prepros, Gulp, Grunt…)

  • Autoprefixer : ajout de préfixes automatiques (configurable à la sauvegarde)
  • Minifier : Minifie CSS et Js via YUIcompressor dans un fichier *.min.css (configurable à la sauvegarde)
  • LESS autocompile : compilation LESS automatique à la sauvegarde (voir la page de l’extension pour configurer les chemins et la parenté)

CSS/LESS

  • CSSlint : affiche les erreurs de CSS et les conseils “OOCSS”
  • Epic Linter : complément de CSSlint, affiche des indications visuelles en live
  • ColorHints : affiche la liste des dernières couleurs utilisées dès que l’on commence à taper une couleur (#)
  • CSScomb : réordonne les propriétés CSS dans leur ordre d’importance, très pratique pour la lisibilité du code en dev
  • Image Dimension Extractor : affiche la largeur et la hauteur des images CSS via clic droit

JavaScript

  • JSHint : JShint (vérification syntaxe moins poussée que jslint) dans Brackets
  • JSLint : JSlint dans Brackets. Voir la page officielle pour la configuration des options dans le fichier des préférences de Brackets.
  • JSLint Configurator : pour insérer dans le document les options jslint avec une GUI pour les cocher

Divers

  • CodeOverview : aperçu du code en petit (un peu comme SublimeText)
  • Brackets New Project Creator : crée un nouveau dossier de projet-type (stocké en local)
  • Quick Search : highlight du mot sélectionné (et de toutes les autres occurences)
  • Brackets File Icons : affichage de pictos devant les noms des fichiers, favorise la lisibilité
  • Indentator : ré-indente tout le fichier selon ses préférences d’espacements (Ctrl+Alt+I)
  • Show Whitespace : affiche le type des espaces (tabulations ou espaces)
  • Reopener : Réouvrir un onglet fermé (par le menu ou ctrl+shift+w)
  • PHP Code Quality Tools : Linter pour PHP (nécessite un binaire php et codesniffer sur la machine) : désactiver CodeSniffer dans les options (Affichage > PHP Code Quality Tools) pour les disques réseau.
  • Brackets Git : interface Git
  • Gist Manager : permet de créer, voir, modifier des Gists publics ou privés
  • Autosave Files on Window Blur : ça fait ce que ça dit que ça fait

La différence avec Edge Code ?

Nous vous avions déjà présenté Edge Code il y a deux ans. Brackets et Edge Code sont assez similaires au point de les confondre.

Sachez que Brackets est le nom du projet open-source qui sert de base à Edge Code, le produit d'Adobe.

Edge Code contient toutes les fonctionnalités de Brackets plus certaines extensions spécifiques à Adobe, par exemple :

  • Edge Inspect
  • Edge Web Fonts
  • Adobe Kuler

Commentaires

Jordane L. a dit le

Je trouve le live refresh plus intéressant dans Brackets que Live Reload et autre puisqu'il se fait sans sauvegarder mais bien en temps réel. De plus avoir le live refresh et le live preview (qui encadre en bleu) avec sass c'est que du bonheur, je ne pourrais plus m'en passer. Euh petite parenthèse par rapport au dernier paragraphe, Edge Inspect et Edge Web fonts fonctionnent également avec Brackets. Sinon pour ma part les extensions liées au SVG (Brackets SVG Code Hints, SnapSVG Documentation, SVG Preview) complètent quelques manque de Brackets à ce niveau là.

Gyzm0 a dit le

Il a l'air bien sympathique ce petit IDE je vais tester tout ça :) merci pour l'info !

Nico3333fr a dit le

Effectivement, j'avais fait un essai il y a fort fort lointain, et ça a beaucoup progressé depuis.

À noter, l'extension eqFTP permet d'éditer direct sur un FTP (ce dont je ne peux pas me passer), et l'extension "Various improvements" permet de lowercase/uppercase un texte (indispensable pour tout typo-nazi qui aime par exmeple les majuscules accentuées).

Par contre, je suis complètement circonspect sur l'extension CSS Lint : à peu près tous les conseils donnés sont à côté de la plaque. Cela se paramètre ?

papillon41 a dit le

Tourne sous linux (xubuntu chez moi).

Raphael a dit le

@Nico3333fr : il me semble pourtant que le plugin applique strictement les règles de https://github.com/CSSLint/csslint/wiki/Rules

Nico3333fr a dit le

@Raphael : ah donc, je m'en passerai, beaucoup, mais alors vraiment beaucoup trop de faux positifs (l'extension qui hurle sur le box-sizing, les sélecteurs d'attribut pourtant bien qualifiés, etc.).

En tout cas, je sens que je vais m'éclaircir la voix avec sur mon prochain projet, cet éditeur a vraiment de bons arguments :) (et merci pour les plugins, certains sont top)

Didodu258 a dit le

Convaincu ! Je vais tester ...

JackNUMBER a dit le

Je passe mon chemin, on restreint souvent l'intégration à du HTML/CSS :(
Dès qu'on travail dans un environnement dynamique ça change tout, ce n'est pas la même chose qu'un fichier .htm local (template php, serveur distant, compilation SASS sur le serv, etc.).
Et c'est pareil pour Wordpress :/

Raphael a dit le

@JackNUMBER : Effectivement, cela dépend bien entendu de l'environnement de travail, des contraintes de production et du wordkflow en place. Par contre, j'ai bien précisé que l'éditeur était spécialisé Front-End. Tout ce que tu cites "(template php, serveur distant, compilation SASS sur le serv, etc.)" fait certes partie de la vie de certains intégrateurs, mais pas forcément du front-end. Enfin je crois.

kustolovic a dit le

Je travaille aussi généralement avec des IDE bien plus lourds dans des workflows collaboratifs. Par contre, j'ai toujours à côté un petit éditeur de code léger, pour pouvoir éditer et consulter des fichiers hors projets. Lors de mon dernier changement de machine, j'ai opté pour Brackets qui remplis effectivement très bien son rôle.
De plus, je réalise dans certains projets des maquettes web qui doivent aller plus loin qu'un fichiel Illustrator ou Photoshop. Dès lors, le mode fractionné + le live preview sur un grand écran est un délice.

bwbk a dit le

Pour en dire plus… je l'utilise depuis 2 ans pour enseigner les bases du html/css.
Certains aimeront le split d'écran depuis la v1 :)
On peut aussi avec Emmet ajouter (depuis peu) un json perso de raccourci snippets (j'ai ajouté clearfix et reset :))
Brackets est écrit en javascript (sauf erreur ), on peut même l'inspecter…
@Nico3333fr attention à l'édition en live sur ftp, si ton transfert échoue et que ton cache te trahit, tu peux perdre ton fichier :(

Thomasjson a dit le

Brackets installé et testé depuis la lecture de votre article, et c'est vrai qu'il est hyper adapté pour l'intégration web ! De plus, l'ergonomie est travaillée, le manager de plugin efficace et les menus sont structurés. Le livereload est tout simplement au top, il fonctionne même en ajoutant le plugin sass.

Mention spéciale pour la nouvelle fonction d'extract psd (en mode full adobe cc), qui permet de directement générer des images dans le code.

En bref, peu de défauts, et Sublime Text va probablement finir à la casse chez moi.

Olivier C a dit le

Je vais l'essayer aussi. Je pense toutefois que Sublime Text va s'aligner sur son concurrent pour ce qui est des modifications en temps réel.

samIntegrateur a dit le

Content que vous parliez de l'éditeur que j'utilise depuis un an maintenant !
Mon avis : très pratique une fois qu'on a bien configuré son environnement de travail en trouvant les plugins qui nous conviennent. Par contre à l'inverse il peut arriver qu'on en installe qui nuisent complètement à la fluidité et provoquent des erreurs. Les montées de versions sont également très délicates car les plugins peuvent devenir incompatibles (le temps qu'ils soient mis à jour).

erwan21a a dit le

En test depuis ce weekend et l'avis est pour le moment positif. C'est en effet un IDE pensé pour le front mais surtout pour les intégrateurs front. Là où Sublime Text me semblait trop complexe, Brackets sait rester élémentaire.

Seul bémol pour le moment, il a tendance à "laguer" facilement. J'ai du désinstaller des plugins pour l'alléger et au bout de quelques heures de travail je doit le redémarrer pour qu'il demeure utilisable.

Olivier C a dit le

J'ai passé une bonne partie de ma journée à le tester : pas mal en effet, mais je suis d'accord avec ceux qui disent qu'il a tendance à laguer...

Sinon, habitué au confort de Sublim Text je n'ai pas trouvé d'équivalent au thème Monokaï sur ce support, ou plutôt un équivalent... un peu moins bien fait je trouve. J'en ai donc créé un de toute pièce. C'est un détail, je vous l'accorde, mais quand on passe son temps sur son IDE...

Olivier C a dit le

Je viens de poster mon thème pour Brackets sur le forum, c'est par ici :

http://forum.alsacreations.com/topic-4-73938-...

Fricazoid a dit le

Merci pour ce post !
Je travaille avec Brackets depuis quelques mois et comme éditeur HTML gratuit, je ne vois pas mieux. L'ergonomie, la gestion des extensions, ...
Bravo. J'ai tout de même une remarque. Lorsque j'essaie d'ouvrir un projet réalisé sous Dreamwaever, on m'indique qu'une erreur s'est produite et Brackets ne prends pas en charge les fichiers texte avec encodage UTF-8. Je n'ai pas trouvé d'extension pour corriger ce problème...

lulldelull a dit le

Est-ce que brackets permets l'accès au ftp directement ? Je cherche à ne plus utiliser Dreamweaver auquel je me suis habitué (et lassé aussi pour plusieurs points), mais certaines options restent unique et bien foutue (ftp, recherche par dossier d'un mot, d'une classe...), je cherche...
Je viens de tester notepad++ mais le plugin FTP laisse vraiment à désirer...
Sublimetext, pas de ftp..
Aptana, gestion ftp vraiment nulle.
je cherche, je cherche... mais je veux tout pouvoir faire à partir du même logiciel travaillant quasi tout le temps en direct sur serveur.

stephweb a dit le

Bonjour,
SVP, est ce que il y a un plugin pour la correction d'orthographe?
(je sais que notepad en a un, mais je préfère Brackets)
Merci beaucoup

BLVCK a dit le

Merci pour ce logiciel OpenSource, Brackets est très agréable avec une fluidité hors du commun. Je passe directement à Brackets sans hésitation.

Olivier C a dit le

@lulldelull : Il existe une option ftp pour Sublim Text, mais... payante.

tdimnet a dit le

Hello,

petite question : j'utilise Mozilla et je cherche à tester cette fonction LiveReload sous mon navigateur adoré mais ça ne fonctionne pas :/.

J'ai pourtant :
-bien installer l'extension sous firefox.
-bien installer l'extension sous Brackets.
-bien activer la fonction LiveReload sous Brackets.

Des idées sur ce qui pourrait clocher ? J'avoue que souiller Chrome avec mon Pc de travail me tente assez peu :/

tdimnet a dit le

Je fais un léger up de mon post.
En fait, je suis un idiot, le LiveReload fonctionne bien avec Mozilla ;)

Pedrothelion a dit le

Je suis désolé j'ai laissé ma brackets ouverte...

vitamine a dit le

@Olivier C : Je ne pense pas, pas de nouvelles MAJ pour Sublime depuis décembre 2013. Je pense qu'il risque de disparaître lentement ...

Olivier C a dit le

@vitamine. Je pense qu'il y a confusion : Brackets n'est pas un équivalent de Sublime Text car ce dernier est plus performant pour le développement back-end (nombreux langages pris en charge).

Quand à son développement : Sublime Texte continue être développé... dans sa version 3, dont la dernière MAJ date à ce jour du 29 août 2014.

s2prod a dit le

Ca m'a l'air bien sympa, mais j'avoue que je vais avoir du mal à décrocher de Sublime Text, de ses packages et snippets qui facilitent énormément le développement.

GuiomDesigner a dit le

Cet éditeur m'a l'air sympa mais impossible d'installer les extensions quelles qu'elles soient (aucune ! Même pas Emmet ni même Extract pourtant téléchargé avec...), que ce soit par le gestionnaire d'extension ou manuellement : "Erreur d'extension" me dit-on... Je ne comprends donc pas et me retrouve avec une IDE qui n'a d'utilité que ses raccourcis et refresh en live... Si c'est déjà arrivé à qqun qui a trouvé la solution je suis preneur !

imikaweb77 a dit le

Bonjour,
je suis un nouvel utilisateur de brackets, tout se passait bien jusqu'a ce que l'autocompletion en javascript ne se fasse plus... j'ai cherché un peu partout j'ai pas trouvé, si quelqu'un peut m'aider.

merci.

imikaweb77 a dit le

@tdimnet :
salut je veux bien que tu me dise comment tu as fait pour que ça marche car je n'y arrive pas et pour le moment je souille mon pc avec chrome...
merco.

thierry10 a dit le

Je viens d'installer et de configurer un peu cet IDE qui me semble plus que bien sympathique ! J'adopte !!, c'est vachement mieux que Notepad++ :-)

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Vous identifier (déjà inscrit)

Nouvel inscrit

Être inscrit sur Alsacréations vous permet de :

  • participer à la communauté
  • intervenir sur les actualités
  • créer des sujets sur le forum et y répondre
  • participer aux concours
  • vous inscrire à des événements tels que la KiwiParty
  • publier votre profil

Indiquez un e-mail valide pour recevoir votre mot de passe :

Votre adresse e-mail restera strictement confidentielle, ne sera ni divulguée à un tiers ni spammée.

Annonces par e-mail

Souhaitez-vous recevoir les newsletters officielles par e-mail ?   Fréquence d'envoi : tous les 3 à 6 mois, annulation possible à tout moment

En vous inscrivant, vous confirmez accepter les règles d'utilisation.

Retour à l'accueil