Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Brackets

Par Anis BENZIANE Publié le 31/10/2015 à 20:32:49 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Cet article va nous permettre de jeter un coup d’œil à Brackets, un editeur open-source à l’origine développé par Adobe. Il peut ne pas avoir eu le même niveau de publicité et de « hype » que Atom. Il reste une option prometteuse pour les développeur Front-End

Le public visé

Il est intéressant de souligner que brackets est principalement destiné aux « front développeurs » et les concepteurs Web. Bien qu'il soit essentiellement un éditeur de texte et donc approprié pour le codage d’à peu près tout, il est optimisé pour HTML, CSS, et JS (ainsi que des dérivés tels que SASS, Less, CoffeeScript, et ainsi de suite). Les développeurs Ruby, Python, PHP, pourraient être mieux servis regarder ailleurs, que ce soit pour un IDE à part entière ou de quelque chose de plus léger tel que SublimText, ou bien Atome.

En quoi Brackets est différent

Brackets fait une grosse affaire du fait qu'il est écrit en utilisant une combinaison d’HTML, CSS et JavaScript. Alors que cela peut signifier peu pour l'utilisateur occasionnel, ceux qui souhaitent prolonger - ou même pirater - avoir la possibilité de le faire en utilisant les technologies qui lui sont probablement déjà familiers. Le fait qu'il soit open-source permet aussi de se démarquer de la foule. Sublime, par exemple, est un produit commercial, alors que Atom est à code source fermé et ne sera pas toujours gratuit.

Obtenir Brackets

Brackets peut être téléchargés à partir du site Web, et est disponible pour Mac OSX, Windows, et Linux (32 ou 64 bits)

Premiére étape

Lorsque vous ouvrez Brackets pour la première fois, vous êtes jeté directement dans un fichier tutoriel basé sur HTML avec CSS qui l'accompagne, ce qui est une excellente façon de commencer à explorer.

La colonne de gauche répertorie les fichiers de travail, et au-dessous qui est une vue de dossier. Il est comme Sublime, vous pouvez voir un fichier en un seul clic sans réellement ouvrir. Un double clic ouvre le fichier pour l'édition, l’ajoutant à la liste des fichiers de travail.

La colonne de droite contient des icônes pour ouvrir Live Preview (que nous verrons sous peu) et pour le gestionnaire d'extensions.

Un petit tour des fonctionnalité

Regardons quelques-unes des principales caractéristiques de Brackets.

Live Preview

La fonction Live Preview lance une nouvelle fenêtre Chrome montrant la page en cours qui non seulement ne nécessite pas un rafraîchissement manuel lorsque vous modifiez un fichier, mais aussi lorsque que vous tapez. Il est essentiellement l'inspecteur Web de Chrome, mais avec tous les avantages d'un éditeur autonome. Il s’agit la d’une excellente fonctionnalité, surtout si vous avez une configuration avec plusieurs écrans. Elle ne fonctionne pas seulement avec les fichiers HTML. Si vous apportez une modification à un fichier CSS liée qui influe sur la page actuelle, la page se réfléchit immédiatement dans le navigateur.

Edition Rapide

La fonction d'édition rapide est spécifique au contexte. Regardons quelques-unes de ses utilisations.

CSS :

Lorsque vous modifiez HTML, si vous cliquez sur une étiquette avec une déclaration CSS correspondant situé dans un fichier lié et appuyez sur Ctrl / Commande + E, un éditeur en ligne apparaît, vous permettant de modifier rapidement cette règle. Ceci est probablement plus compréhensible illustré avec la capture d'écran ci-dessous.

Couleurs :

Planant au-dessus d'une couleur dans une déclaration CSS montre une petite nuance de cette couleur. En outre, le même raccourci clavier (Ctrl / Commande + E) vous donne un sélecteur/convertisseur de couleur assez sophistiqué, comme illustré ci-dessous.

Courbes :

Bien que qu’il ait peu de chances d'être utilisé aussi souvent que la règle CSS ou un éditeur de couleur, l'éditeur de courbe de Bézier est un petit dispositif très impressionnant. Encore une fois, il vaut mieux l’illustrée par une capture d'écran.

JSlint :

Activé par défaut, un support intégré JSLint va vérifier votre code Javascript lors de l'enregistrement, avec ses résultats affichés comme un panneau en dessous de la fenêtre d'édition principale.

Autres caractéristiques

Comme vous lattendez d'un éditeur de code, Brackets implémente la complétion de code. Et, elle est rapide. Très rapide. Je l'ai trouvé morose dans un certain nombre d'éditeurs dans le passé, qui a un impact négatif de l'expérience, mais pas ici. Cela ne veut pas dire qu'elle est parfaite.

Et plus encore...

Le vrai pouvoir de Brackets, réside dans son potentiel d'extension. Il existe déjà un nombre important d'extensions disponibles. Je vais jeter un oeil à quelques-uns qui se démarquent pour moi. Le processus d'installation d'une extension ne pouvait pas être plus facile. Il vous suffit de cliquer sur l'icône "brique" en haut à droite, vous pouvez rechercher et installer à partir de l'application.

Si vous êtes à la recherche pour les fonctionnalités présentes dans d'autres éditeurs de code, il existe des extensions pour le code-folding, snippets, et la mise en valeur intelligente, entre autres. Theseus est un débogueur JavaScript pour Brackets, qui est compatible avec Chrome et Node.js. Il mérite probablement son propre article, je ne vais en parler en détail ici. Si vous travaillez avec Markdown, vous trouverez peut-être l'extension Markdown Preview qui pourra vous être utile. Lorsque vous ouvrez ou créez un fichier Markdown dans brackets, il divise l'écran horizontalement en deux panneaux - l'un pour l'édition, et l'autre pour un aperçu en direct, voici une capture d'écran pour illustré.

Conclusion

Brackets est comme une extension des outils de développement de Chrome. La fonction Live Preview est incroyablement utile, combinant les avantages de codage dans le navigateur avec celles d'un éditeur dédié. Son autre « fonctionnalité de la mort » pour moi l’Edition rapide, même si pour moi elle est assez loin de son plein potentiel. Cependant, en puisant dans les connaissances des utilisateurs des technologies du web, il semble probable que les lacunes seront rapidement comblés par les contributions. D'un point de vue personnel, je ne me vois pas passer à Brackets pour le travail côté server, car j’utilise le PHP. Pour le coté front-end je peux le voir devenir une partie utile de ma boite à outils. Si vous êtes un développeur front-end alors je vous conseil vivement à l’essayé au moins, après tous c’est libre et gratuit.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels