Brackets.io a publié la version 1.2 récemment, avec quelques nouvelles fonctionnalités intéressantes que vous pouvez lire sur leur blog. Nous avons compilé une liste des 10 meilleures et des plus utiles extensions Brackets (sans ordre particulier), ainsi que des instructions complètes pour chaque extension.
Extensions de supports
1. pliage de code
Contrairement à beaucoup d'autres IDE et éditeurs de code, Brackets n'a pas d'option de repliement du code disponible par défaut. Avec le pliage de code, vous pouvez facilement réduire de grandes parties de votre code en une seule ligne. L'extension Code Folding est disponible sur Github et à partir du gestionnaire d'extensions Brackets.
Comment utiliser
Pour replier une balise imbriquée, cliquez simplement sur la flèche vers le bas située à gauche de la balise parent, comme indiqué ci-dessus. Même principe pour Javascript ou tout autre format. Cliquez simplement sur la flèche vers le bas située à gauche de l'élément parent pour plier toutes les instructions imbriquées en une seule ligne. Pour développer, cliquez simplement sur le signe plus.
Les numéros de ligne des lignes pliées sont masqués, il est donc facile de repérer les lignes pliées lorsque vous vous concentrez sur le code.
2. Lorem Pixel
Il existe de nombreuses façons de générer un texte d’espace réservé, mais les développeurs front-web ont souvent besoin d’images génériques. Au lieu d'essayer de créer une image d'espace réservé vierge, utilisez l'extension Lorem Pixel. Il vous permet d’insérer de superbes images de substitution de la taille de votre choix. La partie intéressante de Lorem Pixel est qu’elle vous permet de choisir la catégorie à partir de laquelle vous voulez une image.
Si cela ne suffit pas, les images d'espace réservé ne cessent de changer chaque fois que vous rechargez la page! Les images peuvent souvent perturber les schémas de couleurs. Lorem Pixel vous propose également une option «niveaux de gris» pour utiliser uniquement des images de substitution en noir et blanc. Cette extension est alimentée par lorempixel.com et est disponible à partir du gestionnaire d’extensions Brackets.
Comment utiliser
Une fois que vous avez installé l’extension Lorem Pixel, le logo Lorem Pixel - un carré coché - apparaît dans le volet d’extension (le volet de droite comportant le bouton Aperçu en direct). Cliquez sur le logo pour faire apparaître une boîte de paramètres. Définissez la taille d’image et la catégorie d’image de votre choix. Si vous voulez des images en niveaux de gris, cochez l’option Niveaux de gris. Copiez le lien dans le presse-papiers et utilisez-le selon vos besoins ou insérez-le à la position actuelle du curseur.
3. Autoprefixer
Ajouter des préfixes de vendeurs à votre code est une tâche fastidieuse. L'extension Autoprefixer peut vous faire gagner beaucoup de temps (et de travail!) Car elle ajoute automatiquement les préfixes de fournisseur requis à votre code. Il ne nécessite aucune configuration et met à jour vos préfixes chaque fois que vous enregistrez votre code. Vous pouvez également sélectionner le code et le préfixer automatiquement si vous le souhaitez.
Comment utiliser
Pour utiliser Autoprefixer, commencez à écrire du code sans préfixe. L'extension ajoutera automatiquement le code préfixé dès que vous enregistrez. Pour préfixer automatiquement le code sélectionné, sélectionnez-le d'abord, puis sélectionnez l'onglet ⇒ Sélection du préfixe automatique.
Autoprefixer vous permet également d'ajouter des préfixes personnalisés dans ses paramètres. Pour accéder aux paramètres du poste: Édition ⇒ Paramètres du préfixe automatique.
Pour obtenir un code magnifique, préfixé en cascade, activez l'option Visualiser en cascade dans les paramètres de l'extension.
4. Aperçu du démarquage
Markdown est un joli langage de balisage qui peut facilement être converti en HTML. Markdown Preview donne le Markdown rendu juste en dessous de la version du texte. Il vous permet de choisir entre deux styles différents, Github Flavored Markdown et Standard Markdown.
Vous pouvez choisir trois thèmes pour la fenêtre d’aperçu: clair, foncé et classique. Markdown Preview a également une option de synchronisation de défilement (activée par défaut). L'extension peut être téléchargée depuis Github ou depuis le gestionnaire d'extensions Brackets.
Comment utiliser
Ouvrez un fichier .md ou un fichier .markdown . Si vous avez installé Markdown Preview, le bouton M devrait apparaître à droite. Cliquez dessus et vous verrez rendu Markdown. Pour changer de thème ou désactiver la synchronisation de défilement, il vous suffit de cliquer sur l'icône représentant une roue dentée dans le coin supérieur droit de la section Aperçu de Markdown.
5. Icônes de supports
Il est toujours amusant de pimenter votre éditeur de code avec des icônes de fichiers. Brackets Icons ajoute des icônes colorées, en fonction du type de fichier, à tous les fichiers répertoriés dans la barre latérale. Il contient des icônes pour la plupart des types de fichiers et vous pouvez poster des demandes d’icône sur la page Github.
Astuce Bonus:
Brackets Icons utilise les icônes du projet Ionicons. Vous pouvez également consulter l'extension File Icons (une branche du projet Brackets Icons) qui utilise les icônes du projet Font Awesome. Cela se résume à la préférence personnelle à la fin.
Comment utiliser
Il suffit d’installer l’extension et de recharger les supports (F5).
6. Barre d'outils Documents
Les crochets manquent d'onglets. Fait clair et simple. L'extension Documents Toolbar ajoute cette fonctionnalité. Tous les fichiers qui se trouvent dans la section "active" de la barre latérale s'affichent sous forme d'onglets dans cette extension. Vous pouvez également masquer la barre latérale et utiliser uniquement la barre d’outils Documents pour une interface agréable.
Comment utiliser
Installez l’extension et rechargez les supports (F5).
7. crochets Git
Tout tente de s'intégrer à Git ces jours-ci; c'est de loin le système de contrôle de version (VCS) le plus populaire. Supports Git est facilement le meilleur parmi les extensions de supports similaires. Il a toutes les fonctionnalités de git dont vous aurez besoin. Vous pouvez facilement valider les modifications entre parenthèses, pousser et extraire les modifications en un seul clic, afficher l'historique des fichiers et l'historique des validations totales. Si vous êtes bon avec Git, vous ne rencontrerez aucun problème avec cette extension.
Remarque: Pour utiliser Brackets Git, vous devez avoir installé Git sur votre ordinateur. Après avoir installé l'extension, vous devrez peut-être entrer le chemin d'accès à votre fichier exécutable Git (s'il ne se trouve pas dans le chemin par défaut).
Comment utiliser
Utiliser des crochets Git est assez simple. Faites de votre dossier de dépôt Github local le dossier de projet entre crochets. Puis ouvrez un fichier, apportez des modifications et enregistrez-le. Ensuite, vous pouvez aller de l'avant et cliquer sur l'icône Git sur la droite pour ouvrir la sous-fenêtre Brackets Git en bas. Il listera toutes les modifications que vous avez apportées à vos fichiers.
Cochez les fichiers que vous souhaitez valider, puis cliquez sur le bouton Valider. Cela ouvrira une fenêtre contextuelle répertoriant les modifications apportées. Entrez votre message d'engagement et cliquez sur OK. Et vous avez validé avec succès un fichier directement dans Brackets dans Git!
Après validation, cliquez simplement sur le bouton (le nombre de validations non synchronisées apparaît également, comme vous pouvez le constater dans le GIF ci-dessus).
Configuration des paramètres
Ouvrez le panneau Brackets Git et cliquez sur le bouton Paramètres (deuxième à partir de la droite). N'hésitez pas à configurer Brackets Git quand vous le souhaitez.
Pour afficher l'historique des fichiers et des validations
Il vous suffit de cliquer sur les boutons correspondants pour afficher l'historique de vos fichiers et l'historique des validations répertoriés. Avons-nous mentionné que vous pouvez changer l'avatar en un avatar en noir et blanc, en un avatar coloré ou en votre Gravatar?
8. Lint TOUTES les choses
Lint TOUTES les choses. Tout. Cette extension permet de lier tous vos fichiers en une fois. Très utile lorsque vous avez un grand projet avec beaucoup de fichiers connectés. Toutes les erreurs de peluche apparaissent bien dans un volet.
Comment utiliser
Pour utiliser Lint ALL Things, allez simplement dans l’onglet View et cliquez sur Lint whole Project .
9. Supports à Todo
Brackets Todo est une petite extension soignée qui affiche tous les commentaires TODO dans un format de liste soigné. Par défaut, il prend en charge 5 balises: TODO, NOTE, FIXME, CHANGES et FUTURE. Vous pouvez également marquer les commentaires comme Terminé. Dans les options d'affichage, vous pouvez filtrer les commentaires par balises. Supports Todo vous permet de définir des couleurs personnalisées pour les balises, ainsi que vos propres balises, au cas où vous souhaiteriez faire preuve de créativité dans vos commentaires.
Si vous travaillez sur un projet volumineux et que vous devez suivre les commentaires de plusieurs fichiers, vous pouvez modifier l'étendue de la recherche de Brackets Todo. Vous souhaitez exclure certains fichiers et dossiers tels que les dossiers de fournisseurs? Pas de soucis. Ajoutez simplement le chemin dans la liste d'exclusion. Vous pouvez personnaliser les paramètres de chaque projet en ajoutant un fichier .todo dans le répertoire du projet racine.
Vous pouvez parcourir toutes les options de configuration dans la documentation de github.
Comment utiliser
Pour utiliser Brackets Todo, ajoutez simplement un commentaire à votre code avec une balise à l'intérieur. Le nom de la balise doit être en majuscule, suivi de deux points (:). Pour voir tous les Todo, cliquez simplement sur l'icône Todo dans le volet d'extension de droite.
Configuration:
- Pour autoriser les commentaires HTML de Todo: Ouvrez simplement les paramètres - Cliquez sur l'icône Todo → Paramètres (icône engrenage) - et cliquez pour ouvrir le fichier .todo. A ce fichier, ajoutez ce code:
{"regex": {"prefix": "(? :)"}}
- Pour modifier l'étendue de la recherche: Ajoutez ce code au fichier .todo:
{"search": {"scope": "mon projet"}} - Pour exclure un fichier / dossier / extension de fichier du champ de recherche: Ajoutez ce code au fichier .todo:
{"search": {"scope": "mon projet","ExcludeFolders": ["votre dossier"]
"excludeFiles": ["votrefichier"] "excludeFiles": [".votre extension"]}}
10. embellir
Beautify rend votre code bien paraître. Il corrige les espaces, l'indentation et les lignes.
Comment utiliser
C'est très facile d'utiliser Beautify. Tout ce que vous avez à faire est de sélectionner un code> Clic droit > Beautify .
Alternativement, vous pouvez vous rendre sur l'onglet Edition et cliquer sur ' Beautify '.
