Bienvenue dans cette version super alpha de Brackets, un nouvel éditeur imaginé pour la prochaine génération du web. Nous sommes de grands fans des standards du web et nous souhaitons créer de meilleurs outils pour JavaScript, HTML, CSS et les technologies ouvertes du web en général. Ceci est notre modeste première contribution.
Vous avez sous les yeux une des premières versions de Brackets. A bien des égards, Brackets est un type d'éditeur différent. Une différence notable est que cet éditeur est écrit en JavaScript. Si Brackets n'est probablement pas encore prêt pour votre usage de développement au quotidien, nous l'utilisons déjà tous les jours pour développer Brackets.
Lorsque vous éditez du HTML, utilisez le raccourci clavier Cmd/Ctrl + E pour ouvrir un éditeur rapide qui affiche, dans le contexte, toutes les CSS. Modifiez une propriété CSS, appuyez sur la touche échap ESC et vous êtes de retour dans votre document HTML. Autrement, vous pouvez aussi laisser ouvert l'éditeur rapide de CSS qui deviendra partie intégrante de votre éditeur HTML. Si vous appuyez sur la touche échap ESC en dehors de l'éditeur rapide (quick editor), alors, ils se refermeront tous. Vous n'aurez plus besoin de passer d'un document à l'autre en perdant constamment votre contexte de développement.
Vous souhaitez le voir en action? Placez votre curseur sur le tag ci-dessus et appuyez sur les touches Cmd/Ctrl + E. L'éditeur rapide de CSS devrait alors apparaître. Notez que s'affiche sur la droite une liste de règles CSS qui sont liées à ce tag. Faites simplement défiler ces règles avec les touches Alt + Haut/Bas pour trouver celle que vous souhaitez modifier.Vous connaissez tous la danse du "enregistrer et rafraîchir" que nous pratiquons depuis des années? Cette danse qui vous fait faire une modification dans le code, appuyez sur "Enregistrer", activer la fenêtre du navigateur et rafraîchir la page pour admirer le résultat? Avec Brackets, vous n'aurez plus à pratiquer cette chorégraphie.
Brackets va ouvrir une connexion directe avec votre navigateur en local et envoyer vos modifications CSS au fur et à mesure que vous tapez sur le clavier! Vous faites déjà sûrement ce type d'exercice avec les outils intégrés aux navigateurs modernes, mais avec Brackets, vous n'avez pas besoin de copier-coller le résultat final de votre CSS dans l'éditeur. Le code s'exécute dans le navigateur, mais est déjà présent dans votre éditeur!
Si vous avez Google Chrome, vous pouvez facilement le tester. Cliquez sur l'icône en forme d'éclair en haut à droite de l'interface, ou appuyez sur les touches Cmd/Ctrl + Alt + P. Quand l'aperçu en direct (Live Preview) est activé dans un document HTML, tous les documents CSS liés à ce document peuvent être édité en temps réel. Désormais, placez le curseur sur le tag ci-dessus et appuyez sur les touches Cmd/Ctrl + E pour ouvrir les règles CSS appliquées. Essayez de modifier l'épaisseur de la bordure d'1px en 10px, ou modifier la couleur de fond en "hotpink" (rose) plutôt que "dimgray" (gris). Si vous avez placé Edge Code et votre navigateur côte à côte, vous devriez voir vos modifications être prises en compte en temps réel dans le navigateur. Pas mal, non?Aujourd'hui, Brackets ne supporte l'aperçu en direct que pour les CSS. Nous ajouterons le support de l'aperçu en direct pour le HTML et le JavaScript dans une version future. L'aperçu en direct ne fonctionne qu'avec Google Chrome aujourd'hui. Nous souhaitons qu'elle fonctionne avec tous les grands navigateurs du marché, et espérons pour cela travailler rapidement avec les éditeurs de ces navigateurs.
Brackets est un projet open-source. Des développeurs web du monde entier contribuent à ce projet pour bâtir un meilleur éditeur de code. Dîtes nous ce que vous en pensez, soumettez vos idées ou contribuez directement au projet.