Adobe Brackets est un environnement de développement intégré open source, simple et puissant pour HTML, CSS et JavaScript. Il prend en charge l'ajout de plug-ins pour fournir des extensions fonctionnelles supplémentaires. Les plug-ins actuellement disponibles, tels que l'ajout de détection d'erreurs, le préfixe CSS spécifique au navigateur, les annotations JSDOC, etc. L'éditeur suivant présente brièvement l'utilisation et les paramètres des supports:
1. Paramètres du projet
1. Ouvrez les supports, l'interface entière est très simple et la barre de menu supérieure fournit uniquement la fonction de fichier> Exit. À gauche se trouve l'arborescence de fichiers de la structure de l'organisation du projet. Utilisez Ctrl / Cmd + Shift + H pour appeler et fermer l'arborescence de fichiers. Le côté droit est la zone d'édition, la partie supérieure est la barre d'outils, la partie centrale est la zone de document et la partie inférieure est la zone rapide.
2. Ouvrez le projet. Utilisez la commande Fichier> Ouvrez le dossier pour ouvrir le dossier du projet. Le nom du projet de l'arborescence de fichiers à gauche est mis à jour au nom du dossier du projet et l'arborescence de fichiers est mise à jour dans l'arborescence de fichiers du projet actuel.
Cliquez sur le bouton gauche du nom du projet pour faire apparaître le menu d'édition du projet. Le menu d'édition affichera le projet historique et la commande d'édition du projet.
Commande de dossier ouvert: ouvrez un nouveau projet.
Commande des paramètres du projet: Définit l'adresse Web du projet actuel, qui sera utilisé lors du débogage et de l'aperçu des pages.
Exigences de réglage: Doit être une adresse Web à partir de http: //.
Comme le montre la figure ci-dessus, lorsqu'il est défini sur http://127.0.0.1/demo/slide, la page correspondante sera ouverte via l'adresse Web lorsque le navigateur est prévisué.
Si elle n'est pas définie, la page sera ouverte via l'adresse de la lettre de lecteur du fichier.
2. Édition de fichiers
Cliquez sur index.html dans l'arborescence de fichiers et ouvrez le document index.html dans la zone principale.
1. Brackest vérifiera si le document est conforme à la spécification HTML. Comme le montre la figure ci-dessous, il y a un bloc de style sur 20 lignes qui doit être placée dans le nœud de tête.
2. Placez le curseur sur le nom d'étiquette d'un attribut de classe ou d'ID, appuyez sur Ctrl / CMD + E (édition) ou édition de sortie. Les supports rechercheront tous les fichiers CSS dans le cadre du projet, puis ouvriront un éditeur intégré pour l'intégrer dans le fichier HTML, vous permettant de modifier rapidement le code CSS.
Lorsque la balise de classe / ID actuelle a plusieurs définitions de style, la fenêtre d'édition fournit un bouton bascule pour changer le style d'affichage, ou vous pouvez utiliser les touches de flèches Alt + Up / Down pour changer.
Il convient de noter que les supports détecteront le document HTML actuel et tous les fichiers CSS dans le projet pour trouver des styles de classe / ID, même si certains fichiers CSS ne sont pas référencés dans le document HTML actuel.
3. Les supports prennent également en charge l'aperçu rapide / édition des définitions d'objets JS. Mettez le curseur sur un nom de fonction JS, appuyez sur Ctrl / CMD + E (éditer) ou édition de sortie.
4. Les supports ont un sélecteur de couleurs intégré, fournissant des formes de codage couleur de RGBA, Hex et HSLA. Mettez le curseur sur un code couleur, appuyez sur CTRL / CMD + E (EDIT). Vous devez utiliser la touche ESC pour quitter la fenêtre du collecteur de couleurs.
3. Aperçu instantané
Les supports fournissent un aperçu instantané des pages Web. Lorsque vous utilisez cette fonction, les supports appelle Chrome Browser pour ouvrir la page actuelle. Après avoir modifié HTML, CSS, JavaScript et enregistrer, le contenu modifié répondra à la page du navigateur immédiatement sans rafraîchir manuellement la page. Il s'agit de l'un des plus grands moments forts des crochets. Béni avec deux codeurs de moniteur, vous pouvez afficher des supports et Chrome sur l'écran partagé, une modification instantanée des aperçus instantanés sans changer d'éditeur / navigateur et de pages rafraîchissantes.
Quelques limites de la fonction d'aperçu en direct actuelle:
Il ne fonctionne qu'avec le navigateur Chrome comme navigateur cible, vous devez installer Chrome.
Il repose sur le débogage à distance dans Chrome, qui est activé par un indicateur de ligne de commande. Sur un Mac, si vous utilisez déjà Chrome, puis lancez un aperçu instantané, les supports vous demanderont si vous souhaitez redémarrer Chrome pour activer le débogage à distance.
Un seul fichier HTML peut être prévisualisé en même temps - si vous changez un autre fichier HTML, les supports fermeront l'aperçu d'origine.
4. Quelques clés de raccourci
CTRL / CMD + Shift + H peut appeler et fermer l'arborescence de fichiers
CTRL / CMD + E APPREETTEMENT / EDIT CSS STYLE / FONCTION JavaScript
CTRL / CMD + +/- zoomer et sortir de la taille de la police de la zone d'édition
CTRL / CMD + 0 Réinitialisez la taille de la police de la zone d'édition
CTRL / CMD + ALT + P Activer la fonction d'aperçu instantanée
Commentaires Ctrl / CMD + / Line
Ctrl / CMD + Alt + / Block Commentaires
Remarque: lors de la façon de commenter le code CSS et le code HTML, vous ne pouvez utiliser que des touches de raccourci de commentaires en blocs.