Share
Il y a près d'un an, Jeffrey Way a passé en revue le projet open source Brackets. Depuis le début de cette revue, Brackets est allé assez loin, célébrant récemment sa 33ème édition du Sprint. Dans cet article, je parlerai de nombreuses mises à jour et expliquerai pourquoi Brackets est mon éditeur préféré..
Brackets se concentre principalement sur le développement Web.
Au cas où vous ne le sauriez pas, Brackets est un éditeur de code open source axé sur le développement Web et construit avec les normes Web. Oui - un éditeur construit avec HTML, JavaScript et CSS. Il a été publié en juillet 2012 sur GitHub (http://github.com/adobe/brackets). Tandis que lancés par Adobe, les commanditaires derrière Brackets incluent des personnes de nombreuses sources. (En passant, l’équipe Brackets donne la priorité à la concentration sur non-Demandes d'extraction Adobe.)
Les crochets sont principalement axés sur le développement Web. Bien sûr, vous obtenez l'édition et les conseils de code attendus pour HTML, CSS et JavaScript, mais vous disposez également de fonctionnalités puissantes. La fonctionnalité "Aperçu en direct" connecte votre éditeur de supports à votre navigateur. Lorsque vous modifiez CSS, les mises à jour se produisent en temps réel et fournissent un retour instantané. Le simple fait de sélectionner des éléments CSS fournira des points forts dans le navigateur afin que vous sachiez exactement avec quoi vous travaillez. Une autre fonctionnalité, l'édition rapide, vous permet de sélectionner une balise HTML et d'accéder instantanément au code CSS qui s'applique à cette partie du DOM. Ce qui n'est pas directement pris en charge dans Brackets peut être obtenu via une API d'extension riche (utilisant à nouveau les normes Web) pour permettre aux développeurs d'ajouter les fonctionnalités de leur choix. Des extensions ont été créées pour le linting CSS, la validation HTML, l'intégration GitHub, etc. (J'écris cet article dans Markdown dans l'éditeur de crochets en utilisant une extension Markdown qui me donne une mise à jour en direct de l'affichage.)
C'est là que les crochets ont commencé. Parlons maintenant de ce qui est arrivé et de ce à quoi nous pouvons nous attendre dans le futur..
Des améliorations ont été apportées à tous les aspects (HTML, CSS et JavaScript).
Lorsque Brackets a été lancé pour la première fois, il s’agissait d’une expérience. Pourriez-vous utiliser les normes Web pour créer un éditeur pour les développeurs Web? Plus important encore, pourriez-vous construire quelque chose qui serait performant? Comme il s’agissait là d’une expérience et de nombreuses préoccupations d’architecture de bas niveau, certains éléments dignes d’un éditeur convenable, tels que le changement de nom de fichiers, par exemple, n’ont pas été livrés depuis longtemps. Les crochets étaient ne pas commercialisé comme étant prêt pour le prime time. Au lieu de cela, l'idée était d'essayer quelque chose de nouveau et de voir ce qui fonctionnait.
Il est maintenant juste de dire que Brackets a toutes les bases couvertes. Des tâches telles que la création de nouveaux fichiers, la suppression, l'ouverture du système de fichiers, etc., sont désormais intégrées. Bien que ce ne soit pas forcément une source d'inquiétude, si le manque de ces fonctionnalités de base était la seule chose qui vous empêchait d'utiliser Brackets, c le temps de vérifier. (Et pour ceux qui attendent une version Linux, une version est prête pour vous!)
Parallèlement aux opérations de base sur les fichiers, les conseils de code ont été considérablement améliorés au fil du temps. Des améliorations ont été apportées à tous les aspects (HTML, CSS et JavaScript). Récemment, Brackets a ajouté la prise en charge de l'analyse et du guidage de vos propres fonctions. Imaginez que vous ayez écrit deux fonctions JavaScript. Au fur et à mesure que vous tapez vos appels à ces fonctions, Brackets essaie de comprendre à la fois les arguments et les types d'arguments requis et fournit une prise en charge du code lors de la frappe. Voici un exemple simple:
/ * * @param numéro x premier numéro * @param numéro y deuxième numéro * / function ringTheBell (x, y) 'use strict'; var total = x + y; retour total; fonction sayHello (name) 'use strict'; retourne "Bonjour" + nom;
Mon code a deux fonctions, une appelée sonne la cloche et un appelé dis bonjour. J'ai fourni des métadonnées supplémentaires pour sonne la cloche, mais ce n'est pas obligatoire. Si vous le fournissez, les indications de code seront un peu plus agréables. Maintenant, je vais taper un appel à sonne la cloche:
Remarquez comment il a détecté les arguments et et le type. Si j'entre une valeur pour le premier argument, remarquez comment le code suggère le deuxième argument:
Même dans les cas où Bracket ne peut pas déterminer le type d'argument utilisé dans une fonction, il vous fournira toujours le prénom de l'argument qui peut être utile:
Récents supports ajoutés réal support pour HTML live connect.
Live Connect est probablement l’un des aspects les plus intéressants de Brackets. Comme je l'ai mentionné ci-dessus, il vous permet d'éditer le CSS et de voir les mises à jour en temps réel. Besoin de modifier le rembourrage ou les marges? Vous pouvez utiliser votre éditeur et voir l'impact immédiatement. Les navigateurs le permettent généralement (Outils de développement Chrome), mais ne fournissent normalement pas un moyen facile de récupérer ces modifications dans le code source. Chrome a fait de grands progrès récemment dans ce domaine, mais bien que j'aime Chrome, je préfère écrire mon code dans un éditeur..
Cela a bien fonctionné pour CSS, mais il ne supportait pas HTML. Les crochets rechargeraient automatiquement votre navigateur pour enregistrer un fichier HTML, mais si vous souhaitez prévisualiser vos modifications sans pour autant une sauvegarde, vous avez eu de la chance. Récents supports ajoutés réal support pour HTML live connect. Lorsque vous modifiez votre code HTML, le navigateur se met à jour en temps réel. Vous verrez également des points forts dans le DOM pour la zone que vous modifiez. Cela ne se traduit pas vraiment par les captures d'écran, mais imaginez le code HTML suivant.
Tester C'est un test
fooioikkkllklkkopkk
Si je clique dans le h2 ci-dessus, Chrome rendra l'un des points forts de cet élément:
Si je modifie le texte à l'intérieur du h2, Chrome reflétera immédiatement ces modifications.
Une autre mise à jour importante de Brackets concerne le support d’extension. En coulisse, ce que les extensions peuvent faire et comment elles peuvent s’améliorer se sont améliorées progressivement à chaque sprint. Bien que cela n’ait pas nécessairement une importance pour l’utilisateur final, les améliorations apportées aux utilisateurs écrivant des extensions avaient grandement facilité l’ajout de nouvelles fonctionnalités aux supports. Si vous pouvez passer moins de temps sur le code standard et plus de temps sur les fonctionnalités, c'est une victoire totale pour l'extension des supports. Les crochets révèlent également la possibilité d'utiliser Node.js lui-même pour les extensions. Cette fonctionnalité donne à vos extensions la possibilité d'utiliser tout ce que peut faire Node - ce qui en soi vous ouvre le monde entier. Il s'agit d'un sujet plutôt complexe, mais si vous souhaitez en savoir plus, lisez ce guide: Processus de nœuds de supports.
C'est dans les coulisses, mais pour l'utilisateur final, Brackets a parcouru un long chemin en facilitant l'utilisation des extensions. Les supports sont maintenant livrés avec un gestionnaire d’extension à part entière. Disponible via le Fichier menu ou une icône dans la gouttière droite, en cliquant dessus, le gestionnaire sera lancé:
Notez que pour chaque extension installée, vous pouvez voir les détails de la version, des liens pour obtenir des informations supplémentaires et, mieux encore, un moyen rapide de supprimer l’extension si elle pose problème. Au bas de ce gestionnaire se trouve un bouton qui vous permet d’installer des extensions à partir d’une URL. C'est pratique si vous savoir quelle extension vous voulez (ainsi que l'URL GitHub), mais si vous ne le faites pas? Cliquez simplement sur le Disponible languette:
Vous pouvez maintenant naviguer (et même filtrer) à travers un longue liste des extensions disponibles. Mieux encore, l'installation est aussi simple que de cliquer sur un bouton. Notez que le gestionnaire d’extensions de Bracket est même assez intelligent pour reconnaître le fait qu’une extension peut ne pas être compatible avec votre version de Brackets:
La mise à jour la plus intéressante de Brackets (du moins pour moi) est l'intégration de Theseus. Theseus est un projet open source créé par des membres d'Adobe et du MIT. Il se concentre sur la fourniture d’un support de débogage pour Chrome et Applications Node.js. Imaginez pouvoir déboguer une application Node.js composée de JavaScript côté serveur ainsi que du code côté client. Thésée fournit justement cela. Theseus, qui en est encore à ses débuts, est maintenant intégré à Brackets et peut être utilisé dans l'éditeur lui-même..
Theseus fournit actuellement trois caractéristiques principales:
Regardons quelques exemples de ceux-ci. Le support de couverture de code de Theseus indiquera la fréquence à laquelle une fonction est appelée. Cela semble simple, mais peut être puissant. J'ai récemment essayé Theseus sur une simple démonstration utilisant AJAX pour appeler un programme côté serveur. J'ai remarqué que ma démo ne fonctionnait pas et l'intégration de Theseus dans Brackets l'a confirmé. Notez le rapport "0 appels" par mon rappel:
Il s'avère que mon code côté serveur n'a pas été configuré correctement et Je n'ai pas écrit mon code JavaScript pour prendre en charge un rappel d'erreur pour l'appel AJAX. C'était littéralement la première fois que je jouais avec Theseus et cela a immédiatement aidé à signaler un problème dans mon code. Après avoir modifié mon code frontal, je pouvais voir tout de suite la différence:
Pour être clair, tout cela se fait en temps réel. Lorsque Brackets est ouvert et que Chrome est ouvert, je peux cliquer sur mon application et voir les mises à jour de Brackets synchronisées avec mes actions dans le navigateur..
En plus de voir le nombre d'appels, je peux également cliquer sur un élément et voir ce qui lui a été transmis. C’est la fonction d’inspection rétroactive que j’ai mentionnée ci-dessus. Notez que vous pouvez cliquer sur des propriétés complexes et vraiment creuser dans les données..
Enfin, pour les appels asynchrones qui surviennent à un moment indéterminé après leur appel initial, Theseus n’a aucun problème à gérer et à organiser correctement ces appels sous leur initiateur..
L'une des premières fonctionnalités de Brackets était l'édition en ligne pour les éléments CSS. Vous pouvez placer votre curseur dans n’importe quel élément HTML, cliquez sur CMD / CTRL + E, Brackets analysera votre projet pour rechercher les fichiers CSS pertinents ainsi que la règle de correspondance appropriée. Cela a rendu incroyablement facile la mise à jour rapide des feuilles de style applicables à votre contenu..
Cela a bien fonctionné - tant que votre contenu a réellement eu une règle CSS correspondante. Dans la dernière mise à jour de Brackets, l'éditeur reconnaît désormais lorsqu'un élément n'a pas de règle CSS correspondante.
Vous pouvez maintenant ajouter directement une nouvelle règle CSS directement à partir de l'éditeur intégré.
Enfin, un nouveau look "shell" est ajouté à Brackets. Actuellement disponible uniquement pour Windows (mais le sera bientôt dans la version OSX), l'aspect "sombre" représente l'avenir de l'apparence des supports..
Votre éditeur principal est un très décision personnelle pour un développeur.
Votre éditeur principal est un très décision personnelle pour un développeur. Je me suis retrouvé à utiliser Sublime Text il y a quelques mois et j'ai remarqué que quelque chose ne fonctionnait pas correctement. Il s'est avéré que j'essayais d'utiliser une fonction Brackets. Ce jour-là, je suis passé de Sublime comme éditeur principal à Brackets. J'utilise toujours Sublime (et pour être clair, c'est un éditeur vraiment génial!) Mais maintenant, mon travail quotidien se fait presque entièrement dans Brackets.
Évidemment, j'aimerais beaucoup que vous partie - maintenant - et que vous téléchargiez Brackets. Mais si vous voulez creuser un peu plus avant de vous engager (hé, je comprends, établir une relation avec un éditeur est une entreprise sérieuse), consultez ces ressources:
Accentsconagua