Supports– un projet développé par Adobe. Initialement, il était destiné à être un éditeur de code permettant de créer facilement des applications Web. Au cours de la dernière année, plusieurs mises à jour ont été publiées qui ont non seulement amélioré les performances de l'éditeur, mais ont également ajouté plusieurs fonctionnalités qui seront utiles aux développeurs.

Actuellement, la version actuelle est Parenthèses 1.2.

Commençons par l'interface du programme :

Interface

L'interface du programme se compose de :

• Menu – fichier, modification, recherche, etc.
• Zone de sélection des fichiers de projet à éditer
• Zone d'écriture de code

Vous pouvez également sélectionner un bouton pour activer le mode Aperçu en direct, mais nous en reparlerons un peu plus tard.

Au départ, sans plugins ni thèmes, l'interface du programme est assez simple et standard. Rien de superflu pour un développeur débutant : une mise en évidence de la syntaxe du code dans la zone d'édition, un répertoire des répertoires de projets.

En utilisant la combinaison CTRL++ / CTRL+-, vous pouvez augmenter/diminuer la taille de la police.

Avec la sortie version 0.42 la prise en charge de la modification et de l'installation de thèmes est apparue. Selon la norme, il n'y avait que Lumière Et Sombre. Je dois admettre que le thème sombre est plus agréable à regarder pour moi.

Le changement de thème se fait dans l'onglet Voir – Thèmes. Dans le même onglet, vous pouvez modifier Police de caractère et lui taille.

Thèmes entre parenthèses

Vue partagé

Version 0.44 correction d'un grand nombre de bugs, amélioration des performances et ajout d'une fonctionnalité telle que Vue partagé. Cette fonctionnalité permettra diviser la zone d'édition en deux parties et travaillez avec deux fichiers en même temps. Je dois admettre que cela a considérablement simplifié le développement.

Une division horizontale est possible.

Division horizontale de la zone de l'éditeur Brackets

Vous pouvez également le diviser verticalement.

Division verticale de la zone de l'éditeur Brackets

Palette de couleurs

Brackets a également une fonction utile telle que l'appel de la palette de couleurs en utilisant la combinaison CTRL + E. Cela fonctionne comme ceci :

Définissez les parcours dans le code couleur et appuyez sur la combinaison CTRL+E. Une palette de couleurs s'ouvrira dans laquelle vous pourrez spécifier de quelle couleur et avec quelle transparence vous avez besoin.

Palette de couleurs des supports

Extrait pour parenthèses (Aperçu)

Trois ans après la sortie de la toute première version de Brackets version 1.0. En plus d'améliorer les performances, un plugin tel que Extrait pour parenthèses (Aperçu).

Il vous permet d'ouvrir des modèles au format PSD directement dans Brackets et visualisez-les comme dans Photoshop par couches. Avec son aide, vous pouvez voir les dimensions d'un élément de page particulier, par exemple des blocs, en pixels ou en pourcentage, ainsi que son emplacement, puis saisir immédiatement ces valeurs dans l'éditeur.

Extrait pour parenthèses (Revue)

Au départ, l’idée est géniale et plutôt utile. Mais le problème était que dans version 1.0 Le plugin ne fonctionnait pas correctement, ralentissait et surchargeait le système.

Un autre inconvénient est la nécessité d'avoir un compte dans Adobe Creative Cloud, car PSD les modèles y sont chargés.

Pour être honnête, même après la sortie de nouvelles versions, je n’utilise pas cette fonction car elle est buggée.

Extension Manager

L'installation du plugin s'effectue dans la fenêtre Extension Manager, vous pouvez également y installer thèmes de conception.

Plugins Les supports vous permettent d'étendre les fonctionnalités standard et de faciliter le développement de projets. Un de ces plugins, bien connu de tous Emmet.

Emmet– un plugin qui permet d’écrire du code volumineux en utilisant des abréviations, ce qui permet de gagner du temps.

Par exemple:

En écrivant ce code dans un document html :

XHTML

ul>li*4>a

ul>li* 4>a[ href= # ]

Après avoir appuyé sur les touches de raccourci (normalement réglées sur la touche LANGUETTE) le code écrit se « développera » en

XHTML

Aperçu en direct Et enfin, je vais vous parler d'une fonction aussi merveilleuse que Aperçu en direct. Avec cette fonctionnalité, vous pouvez voir le résultat en temps réel. Le principe est simple : vous choisissez HTML document, inclure Aperçu en direct. Une fenêtre de navigateur s'ouvrira dans laquelle votre projet sera affiché dans l'orthographe actuelle. Il convient d'ajouter que cette fonction ne fonctionne qu'avec le navigateur Chrome . Il semble qu'ils parlaient de la prise en charge d'autres navigateurs, mais uniquement dans les futures versions du programme. Mais cette fonction, à mon avis, est essentielle. Surtout pour les développeurs travaillant avec deux écrans. Conclusion C'est ici que je veux terminer cette critique. Je peux aussi ajouter ça Supports parfait pour les débutants développeurs web. En tant que concepteur de site Web débutant, je recommande de l'utiliser. Cet éditeur n'exige pas de ressources, possède une interface simple et, à l'aide de raccourcis clavier et de plugins, il vous permet d'accélérer et de simplifier l'écriture de code. Site officiel de l'éditeur Supports.

Contexte des parenthèses

Commençons par le nom et le logo. Les crochets sont traduits par [citations]. Ce sont ceux que nous voyons dans le logo. J'ai aussi récemment changé mon logo. Il est plus visuel et, surtout, reflète immédiatement l’essence de notre site en tant que ressource en matière de création de sites Web. La même chose est vraie ici - cela reflète parfaitement l'essence de l'éditeur de code, me semble-t-il.

Adobe Brackets, oui, vous avez bien entendu - ce programme est présenté par une société très connue dans nos cercles, Adobe. C'est grâce à leur contribution que nous avons commencé à développer ce logiciel. Cependant, il était d’abord connu sous le nom de Edge Code. Alors si on vous le demande, sachez que c’est la même chose.

Pourquoi ai-je aimé Brackets ?

La première association que j'avais en ouvrant le logiciel - putain, c'est Russian Sublime ! Le programme prend en charge de nombreuses langues et vous pouvez facilement télécharger Brackets en russe directement depuis hors site. Et cela rappelle incroyablement SublimeText.

Deuxièmement, la facilité d'utilisation. Bien sûr, à cette époque, les problèmes ont tout tué. Mais le programme en était encore au stade des tests et du développement. Et je n'ai tout simplement pas pris en compte les montants. Parce que le design y est plus beau et plus réfléchi, surtout pour les débutants. Il existe des boutons, des menus et d’autres avantages d’utilisation. Il semble que le minimalisme soit resté, et en même temps c'est très pratique.

Troisièmement, des idées originales, que je n'ai pas vu dans SublimeText ou dans d'autres éditeurs. Visualisation interactive et mise en évidence des éléments pendant la mise en page, édition rapide, conseils de couleurs, système d'aide intégré et bien plus encore. J'étais particulièrement intéressé par quelques plugins. J'en parlerai à la fin de l'article, dans la section - "Goodies de l'éditeur de Brackets".

Quatrièmement, c'est totalement gratuit et il existe une version russe et peut être téléchargé gratuitement sur le site officiel brackets.io. Il me semble qu'Adobe a délibérément attisé tout cela afin de chasser SublimeText du marché. Il est devenu très populaire.

Cinquièmement, tout le reste est également en vrac

- C'est multiplateforme. Vous pouvez facilement créer des supports « pionniers » pour Windows, Linux et d'autres systèmes d'exploitation. Cela est dû en partie au fait que l'éditeur est développé en HTML, CSS et JS. Et ils travaillent partout.

— Et de nombreux plugins et extensions différents. Ce qui vous permet de personnaliser complètement les supports en fonction de vos besoins.

— Et un tas de thèmes de design de toutes sortes de couleurs et de tons. Pour tous les goûts, pour ainsi dire.

Supports – paramètres et fonctionnalités

1. Installation de l'éditeur
2. Résoudre le problème de la police russe
3. Interface de l'éditeur
4. Configuration de base des supports
5. Split - écran partagé
6. Panneau latéral
7. Aperçu en direct - visualisation interactive
8. Éditeurs en ligne pour HTML - édition rapide
9. Éditeurs en ligne pour CSS - édition rapide
10. Documentation CSS rapide

Supports – plugins et extensions

1. Thèmes
2. Icônes de supports - icônes dans l'éditeur
3. Overscroll – rembobiner sous le code
4. Caractères spéciaux - tableau des caractères spéciaux
5. Brackets CSS Color Preview - aperçu rapide des couleurs
6. ColorHints - sélection rapide des couleurs
7. Palette de couleurs des supports - choisissez une couleur dans une image
8. Guides d'indentation - orientation dans l'imbrication du code
9. CodeFolding - pliage de code
10. Barre d'outils Documentets - panneau horizontal de fichiers ouverts
11. Emmet - saisie rapide de HTML et CSS
12. CssFier - insertion rapide de sélecteurs en CSS
13. Minifier - compression des fichiers CSS et JS
14. JS Beautifier - formatage du code
15. Préfixe automatique - préfixes automatiques
16. Extrait pour supports (aperçu) - Partie 1
17. Extrait pour supports (aperçu) - Partie 2
18. eqFTP - client directement dans l'éditeur
19. QuickFormTool - insertion rapide de formulaires
20. Police SVG - afficher les fichiers SVG
21. Extraits de supports (par zaggino) – extraits
22. Réponse pour les supports - conception réactive

Et maintenant, comme promis...

Fonctionnalités de l'éditeur de parenthèses

Tout d'abord, passons en revue les avantages du programme lui-même, puis abordons les extensions et plugins « spéciaux » que j'adore.

Aperçu en direct

La première chose à noter est la fonction Live View, ou comme beaucoup de gens l'appellent, la visualisation en direct. Grâce à lui, vous pouvez suivre les modifications du site dès la mise en page. Veuillez noter que le navigateur Google Chrome est requis pour fonctionner. C'est ici que votre site s'ouvre et que toutes les modifications sont affichées.

Je sais, je sais, maintenant tu dis - SublimeText a la même chose ! Cependant, veuillez prendre en compte le fait que pour cela, vous devez effectuer à chaque fois des « danses avec un tambourin » assez compliquées avant que tout ne commence à fonctionner. Et ici, nous avons tout prêt à l'emploi. Comme le dit une chanson : Appuyez sur le bouton et vous obtiendrez le résultat.

Actuellement, la navigation interactive fonctionne dans les fichiers HTML et CSS. Mais lors de la modification du javascript, vous devrez le sauvegarder.

Édition rapide (éditeurs en ligne)

Une chose très pratique. Le fait est que vous pouvez modifier CSS et JS directement à partir du document HTML. Sans basculer entre les fichiers. Croyez-moi, cela fait gagner énormément de temps. Et je reste généralement silencieux sur la commodité et le confort du travail. Tout peut être fait à partir d'un seul fichier.

Vous sélectionnez simplement la balise souhaitée, appuyez sur CMDCTRL+E et vous avez un Une fenêtre spéciale apparaît. Dans lequel vous pouvez ajouter des styles pour ce sélecteur. Dans ce cas, vous pouvez modifier les deux styles existants et en créer de nouveaux. Là, vous pouvez également basculer entre les fichiers CSS si vous en avez plusieurs.

Vous permet d'afficher les couleurs utilisées dans le code. Si dans d'autres applications, vous devez ouvrir un programme ou exécuter un plugin pour savoir quelle couleur est utilisée. Ici, passez simplement votre souris sur le code couleur souhaité et Brackets vous le montrera immédiatement.

Et dans le cours vidéo lui-même, nous installerons également quelques navigateurs intéressants qui élargiront et faciliteront considérablement le travail avec la couleur. En général, vous verrez tout par vous-même.

J'ai toujours aimé cette fonctionnalité de Dreamweaver. Je ne sais pas comment ça se passe maintenant, mais autrefois, elle y était présente.

Si vous souhaitez inclure des fichiers, des styles, des scripts, des images, cela n'a pas d'importance. Les parenthèses vous indiqueront automatiquement non seulement le chemin, mais également le nom du fichier. Très confortablement !

Plugins et extensions Brackets (le plus) :

Supports Emmet (22)

Ce plugin vous permet de taper rapidement du HTML et du CSS. En fait, si vous apprenez à l'utiliser correctement, l'écriture de votre code sera multipliée par 10. Il s'agit d'une extension de la catégorie "Doit avoir", qui devrait être dans chaque éditeur.

Extrait pour les supports (aperçu)

C'est l'extension que j'ai le plus appréciée dans l'éditeur. Permet mise en page directement à partir de la mise en page PSD. Autrement dit, vous n'avez plus besoin d'accéder à Photoshop.

Nous nous connectons au plugin, téléchargeons notre PSD sur le serveur Adobe Creative Cloud et notre éditeur commence à extraire tous les styles et graphiques de la mise en page PSD.

Cela ne peut pas être décrit avec des mots, vous pouvez seulement voir et comprendre toute l’ampleur de l’idée. Vraiment cool!

Réponse pour les parenthèses

Vous permet de créer une adaptabilité de site Web à partir de la fenêtre de l'éditeur Brackets. En d’autres termes, le design réactif est dans votre poche.

Tout est fait avec style et confort. Lorsqu'il est activé, il crée un fichier de styles distinct dans lequel toutes les modifications sont écrites. Une fois terminé, il vous suffit de le connecter aux fichiers du site.

Mais il y a un moment où serions-nous sans lui, ma chère. L’extension est encore en cours de développement et n’est, disons, pas entièrement stable. Cependant, il est en cours de finalisation, de mise à jour et bientôt tout sera TIP-TOP.

Erreurs de l’éditeur de parenthèses.

Je vais juste écrire mon avis pendant que je travaille. Puisque j’ai déjà creusé la question, je peux certainement dire quelque chose.

Premièrement— n'installez jamais plusieurs plugins à la fois. Cela est particulièrement vrai pour ceux qui ne seront pas décrits dans le cours vidéo. C'est juste que certains d'entre eux fonctionnent de manière tordue avec la nouvelle version de l'éditeur. Et cela pourrait commencer à échouer.

Il y en a peu, mais quand même. Suivez toujours ce modèle : Nous avons installé le plugin, l'avons essayé sur l'éditeur, et si tout fonctionne, installez le suivant.

Parce que parfois, une personne installe un tas de plugins et devine quoi, cela interrompt le travail de Brackets.

Deuxièmement— dès que vous installerez le programme, il y aura un problème avec la police russe. Il aura l’air « un peu effrayant ». Tout dépend de la police par défaut, qui est installée après l'installation. Changez simplement la police du texte et tout ira bien.

Troisième, Pour certains étudiants, l'éditeur, pour une raison quelconque, ne fonctionnait pas lorsqu'ils l'installaient sur le disque système. Je ne sais pas quel est le problème, peut-être que je n'avais pas suffisamment de droits d'administrateur ou de pilotes. C'est pourquoi je suis toujours là Je donne 3 conseils :

• Installer les supports pas sur le lecteur système
• Installer Nodejs
• Essayez d'exécuter en tant qu'administrateur

Aujourd'hui, nous examinerons l'un des programmes que nous utiliserons pour travailler avec la mise en page - Brackets. Vous pouvez télécharger et installer le programme depuis le site officiel à l'adresse supports.io. Il n'y a rien de compliqué dans l'installation elle-même, mais sa configuration pour un fonctionnement pratique vous prendra 5 minutes.

Installation de plugins dans Brackets

Installer des plugins est aussi simple que deux fois deux. Lancez Brackets, recherchez le panneau sur le côté gauche et sélectionnez le bouton « Extension Manager ».

Au premier lancement, le programme initialise les extensions, mettant à jour leur base de données. Le gestionnaire d'extensions Brackets comporte trois onglets : Disponible, Thèmes, Installé. En conséquence, nous sommes intéressés par l'onglet Disponible.

Dans le champ de recherche, saisissez le nom du plugin, sélectionnez le plugin et cliquez sur « Installer ». Après avoir installé tous les plugins, il est conseillé de redémarrer le programme.

Vous trouverez ci-dessous une liste des plugins dont nous aurons besoin :

• Emmet– un plugin qui permet d’accélérer considérablement l’écriture de code html et css à l’aide d’abréviations et d’abréviations. Donc, si vous souhaitez que le point d'exclamation (!) se transforme en une page HTML à part entière après avoir appuyé sur la touche de tabulation, alors vous avez besoin de ce plugin. Vous permet également d'envelopper le texte avec des balises HTML.
• Onglets - Travail personnalisé est un plugin qui ajoute de magnifiques onglets à Brackets. Marque les fichiers non enregistrés avec des cercles verts. L’objectif principal du plugin est de rendre le travail plus visuel.
• Défilement excessif– un plugin qui permet de faire défiler le code jusqu’à la fin de la page et même de faire défiler une zone vide.
• Police de code– dans les versions modernes de Brackets, vous permet de modifier la police du code. Dans les anciennes versions, c'est simplement nécessaire, car le programme affichait la police russe très moche.
• Menu contextuel supplémentaire entre crochets et crochets– ajoute de nombreux « goodies » pratiques au menu contextuel - par exemple, les éléments « Copier » et « Coller ».
• Sauvegarde automatique des fichiers en cas de flou de fenêtre– un plugin pour enregistrer automatiquement les fichiers ouverts au moment où la fenêtre du programme perd le focus (par exemple, si vous passez à un navigateur).

Je vous rappelle qu'après avoir installé les plugins, redémarrez Brackets.

Regardez également notre vidéo sur l'installation de plugins dans Brackets.

Les webmasters et les programmeurs utilisent assez souvent des éditeurs de texte pour créer des sites Web. Mais la fonctionnalité des programmes ordinaires de ce groupe, par exemple le Bloc-notes, est trop étroite pour les personnes travaillant dans ce sens. Des applications spéciales sont créées pour eux, conçues pour fonctionner avec des langages de balisage. L'un d'eux est l'éditeur de texte gratuit Brackets d'Adobe.

La principale caractéristique qui rend Brackets populaire auprès des concepteurs de mise en page est sa prise en charge d'un grand nombre de langages de balisage et de programmation Web, à savoir : HTML, Java, JavaScript, CSS, C++, C, C#, JSON, Perl, SQL, PHP, Python et bien d’autres (43 articles au total).

Dans la fenêtre de l'éditeur de code du programme, les éléments structurels des langages ci-dessus sont mis en évidence dans une couleur distincte, ce qui aide le maquettiste à naviguer rapidement dans le code et à trouver facilement le début et la fin d'une expression. La numérotation des lignes, la possibilité de réduire les blocs et la structuration automatique de la mise en page constituent également des facteurs de commodité supplémentaires pour l'utilisateur lorsqu'il travaille avec des supports.

Travailler avec du texte

Dans le même temps, pour utiliser Brackets, vous n'avez pas besoin d'être un programmeur ou un concepteur de pages Web, car le programme prend également en charge un travail simple avec du texte, comme un éditeur de texte classique.

Les supports peuvent fonctionner avec une très grande liste d'encodages de texte : UTF-8 (par défaut), Windows 1250 - 1258, KOI8-R, KOI8-Ru et autres (43 noms au total).

Aperçu des modifications dans le navigateur

Fonction de support des supports "Aperçu en direct", ce qui signifie que toutes les modifications apportées dans un éditeur de texte peuvent être immédiatement visualisées dans le navigateur Google Chrome. Par conséquent, pour pouvoir utiliser cette fonction, vous devez disposer de ce navigateur Web sur votre ordinateur. Le concepteur peut immédiatement voir comment ses actions affectent l'interface de la page Web visible par l'utilisateur, puisque toutes les modifications sont affichées de manière synchrone dans Google Chrome lors de l'enregistrement du fichier.

Gestion de fichiers

Dans l'éditeur Brackets, vous pouvez travailler avec plusieurs fichiers en même temps, en basculant entre eux à l'aide du menu. De plus, il est possible de trier les documents ouverts par nom, date d'ajout et type, ainsi que de trier automatiquement.

Intégration du menu contextuel

Grâce à l'intégration dans le menu contextuel "Windows Explorer", vous pouvez ouvrir n'importe quel fichier à l'aide de Brackets sans lancer au préalable le programme lui-même.

Mode débogage

Avec Brackets, vous pouvez afficher et modifier des pages Web en mode débogage.

Rechercher et remplacer

Le programme fournit une fonction pratique de recherche et de remplacement par texte ou code de balisage.

Travailler avec des extensions

Il est possible d'augmenter les fonctionnalités de Brackets en installant des extensions intégrées. Ils peuvent être contrôlés à l'aide d'un spécial "Extension Manager" dans une fenêtre séparée. À l'aide de ces éléments, vous pouvez ajouter la prise en charge de nouveaux langages de balisage et de programmation au programme, modifier les thèmes de l'interface, travailler avec un serveur FTP distant, gérer les versions d'application et également intégrer d'autres fonctionnalités non fournies dans la version originale du texte. éditeur.

Avantages

• Multiplateforme ;
• Multilingue (31 langues, dont le russe) ;
• Un grand nombre de langages de programmation et d'encodages de texte pris en charge ;
• Possibilité d'ajouter de nouvelles fonctionnalités à l'aide d'extensions.

Défauts

• Fonction " Aperçu en direct" disponible uniquement via le navigateur Google Chrome ;
• Certaines sections du programme ne sont pas russifiées.

Brackets est un puissant éditeur de texte permettant de travailler avec du code de programme et des langages de balisage, doté de fonctionnalités très larges. Mais même à un si large éventail de fonctionnalités du programme, vous pouvez en ajouter de nouvelles à l'aide d'extensions intégrées.

Comment rendre le processus de développement amusant ? À tel point qu’en écrivant mille lignes de code, vous ne remarquerez pas à quel point la journée de travail s’est écoulée et votre productivité a doublé. Il y a une réponse.

Il y a quelques années, pour remplacer les environnements de développement lourds, nous avons remarqué un éditeur open source sympa pour les développeurs Web - Brackets, et des dizaines de milliers de programmeurs l'utilisent déjà. Même les fans fidèles de Sublime Text et d'Aptana Studio ont essayé Brackets et approuvé ses fonctionnalités.

Brackets a rapidement gagné l'amour et l'attention des développeurs expérimentés. Sa force réside dans sa combinaison de simplicité, de multitâche et de possibilité de personnaliser l'application pour les développeurs les plus exigeants. Un plus indéniable de l'éditeur réside dans ses nombreuses extensions.

Nous allons vous présenter neuf plugins sympas qui faciliteront le travail avec Brackets.

Ce plugin vérifie si votre navigateur prend toujours en charge les propriétés CSS et les éléments HTML que vous avez utilisés.

Capture d'écran du plugin -CanIUse

Facilite le travail avec les balises

, , , formatant le contenu en éléments de liste.



Capture d'écran du plugin - HTML Wrapper

L'extension ajoute des icônes à l'arborescence des fichiers dans la barre latérale. Facilite la recherche des documents avec lesquels vous travaillez.



Capture d'écran du plugin - Icônes de supports

Emmet

Une extension très simple et utile vous permet d'écrire du code CSS et HTML plus rapidement en utilisant des abréviations qui se transforment en balises à part entière.



Capture d'écran du plugin - Emmet

Assurez-vous de ne pas oublier les tâches importantes du projet si vous utilisez l'extension Simple To-Do. Le plugin vous permet de créer et de gérer des listes de tâches pour chaque projet.



Capture d'écran du plugin - Simple To-Do

Si vous avez besoin de combler une lacune dans un paragraphe, alors ce plugin est fait pour vous. Il génère du texte - "poisson" pour de tels cas.



Capture d'écran du plugin - Lorem Ipsum

Supprime les caractères superflus du code JavaScript et des fichiers CSS. Le processus s'appelle minification et permet d'optimiser le code pour accélérer encore le chargement des pages sur le site.



Capture d'écran du plugin - JS CSS Minifier

Ajoute une fonction permettant de réduire les blocs de code entre parenthèses. Des triangles apparaîtront sur la gauche, à l'aide desquels les fragments inutilisés sont masqués.



Capture d'écran du plugin - Pliage du code de région personnalisé

Une simple combinaison de touches ou lors de l'enregistrement d'un fichier concevoira magnifiquement la structure de votre balisage, avec des indentations et, surtout, le rendra lisible.



Capture d'écran du plugin - Embellir

Peut-être l'une des extensions les plus utiles pour l'éditeur. Le plugin fournit une intégration avec le système de contrôle de version distribué - Git. Il est testé et fonctionne sur n'importe quelle plateforme (Windows, Mac OS X, GNU/Linux).



Capture d'écran du plugin - Brackets-Git

Une liste restreinte d’exemples d’extensions sera idéale pour tout développeur Web. Désormais, le processus de programmation et de mise en page deviendra beaucoup plus agréable.

ARTICLES LIÉS

• Retour
• Plan du site
• À propos du site