Adobe Brackets ist eine einfache und leistungsstarke integrierte Entwicklungsumgebung für HTML, CSS und JavaScript. Es unterstützt das Hinzufügen von Plug-Ins, um zusätzliche funktionale Erweiterungen bereitzustellen. Derzeit verfügbare Plug-Ins, z. B. Hinzufügen von Fehlererkennung, Browser-spezifischem CSS-Präfix, JSDOC-Anmerkungen usw. Der folgende Editor führt kurz die Verwendung und Einstellungen von Klammern vor:
1. Projekteinstellungen
1. Öffnen Sie die Klammern, die gesamte Schnittstelle ist sehr einfach und die obere Menüleiste bietet nur eine Datei> Funktion zum Beenden von Editor. Links befindet sich der Dateibaum der Projektorganisationsstruktur. Verwenden Sie Strg/CMD+Shift+H, um den Dateibaum zu rufen und zu schließen. Die rechte Seite ist der Bearbeitungsbereich, der obere Teil ist die Symbolleiste, der mittlere Teil ist der Dokumentbereich und der untere Teil ist der schnelle Bereich.
2. Öffnen Sie das Projekt. Verwenden Sie den Befehl Datei> Ordner Öffnen, um den Projektordner zu öffnen. Der Projektname des Dateibaums links wird auf den Namen des Projektordners aktualisiert und der Dateibaum wird auf der Dateistruktur des aktuellen Projekts aktualisiert.
Klicken Sie auf die Schaltfläche links im Projektnamen, um das Projekt zur Bearbeitung des Projekts zu überholen. Das Bearbeitungsmenü zeigt das historische Projekt und den Projekt zur Bearbeitung von Projekten an.
Befehl Ordner Öffnen: Öffnen Sie ein neues Projekt.
Befehl Projekteinstellungen: Legt die Webadresse des aktuellen Projekts fest, das während des Debuggens und der Vorschau von Seiten verwendet wird.
Einstellungsanforderungen: Muss eine Webadresse sein, beginnend mit http: //.
Wie in der obigen Abbildung gezeigt, wird die entsprechende Seite über die Webadresse geöffnet, wenn der Browser eine Vorschau auf http://127.0.0.1/demo/slide festgelegt wird.
Wenn nicht festgelegt, wird die Seite über die Antriebsbuchstabenadresse der Datei geöffnet.
2. Dateibearbeitung
Klicken Sie in der Dateistruktur index.html und öffnen Sie das Dokument index.html im Hauptbereich.
1. Brackest prüft, ob das Dokument der HTML -Spezifikation entspricht. Wie in der Abbildung unten gezeigt, gibt es einen Stilblock in 20 Zeilen, der im Kopfknoten platziert werden muss.
2. Platzieren Sie den Cursor auf den Bezeichnungsnamen eines Klassen- oder ID -Attributs, drücken Sie Strg/CMD + E (Bearbeiten) oder beenden Sie die Bearbeitung. Brackets durchsuchen alle CSS -Dateien unter dem Projekt und öffnen dann einen eingebetteten Editor, um ihn in die HTML -Datei einzubetten, sodass Sie den CSS -Code schnell ändern können.
Wenn das aktuelle Klasse/ID -Tag Definitionen mit mehreren Stilen enthält, bietet das Bearbeitungsfenster eine Schaltfläche zum Umschalten, um den Anzeigstil zu wechseln, oder Sie können die Alt + Up/Down -Pfeiltasten zum Schalten verwenden.
Es ist zu beachten, dass Klammern das aktuelle HTML -Dokument und alle CSS -Dateien unter dem Projekt erkennen, um Klassen-/ID -Stile zu finden, auch wenn im aktuellen HTML -Dokument nicht auf einige CSS -Dateien verwiesen werden.
3. Brackets unterstützt auch die schnelle Vorschau/Bearbeitung von JS -Objektdefinitionen. Setzen Sie den Cursor auf einen JS -Funktionsnamen, drücken Sie Strg/CMD + E (Bearbeiten) oder beenden Sie die Bearbeitung.
4. Brackets hat eine eingebaute Farbwählernin und bietet Farbcodierungsformen von RGBA, Hex und HSLA. Legen Sie den Cursor auf einen Farbcode und drücken Sie Strg/CMD + E (Bearbeiten). Sie müssen die ESC -Taste verwenden, um das Fenster des Farbsammlers zu verlassen.
1. Sofortige Vorschau
Brackets bietet eine sofortige Vorschau der Webseiten. Bei der Verwendung dieser Funktion rufen Klammern Chrome Browser auf, um die aktuelle Seite zu öffnen. Nach der Änderung von HTML, CSS, JavaScript und Speichern reagiert der geänderte Inhalt sofort auf die Seite im Browser, ohne die Seite manuell zu aktualisieren. Dies ist eine der größten Highlights der Klammern. Mit zwei Monitor -Codierern gesegnet, können Sie Klammern und Chrom auf dem Split -Bildschirm, die sofortige Änderung der sofortigen Vorschau an, ohne den Editor/Browser und das Aktualisieren von Seiten zu wechseln.
Einige Einschränkungen der aktuellen Live -Vorschau -Funktion:
Es funktioniert nur mit Chrome Browser als Zielbrowser, Sie müssen Chrome installieren.
Es stützt sich auf Remote -Debugging in Chrome, das durch ein Befehlszeilenflag aktiviert wird. Wenn Sie auf einem Mac bereits Chrome verwenden, starten Sie die Instant -Vorschau, und in den Klammern werden Sie gefragt, ob Sie Chrome neu starten möchten, um das Remote -Debugging zu ermöglichen.
Nur eine HTML -Datei kann gleichzeitig vorsichtigt werden. Wenn Sie eine andere HTML -Datei wechseln, schließen die Klammern die ursprüngliche Vorschau.
4. Einige Abkürzungsschlüssel
Strg/CMD+Shift+H kann den Dateibaum aufrufen und schließen
Strg/CMD + E Schnelle Vorschau/Bearbeiten von CSS -Stil/JavaScript -Funktion
Strg/CMD + +/- Zoom in und aus der Schriftgröße des Bearbeitungsbereichs
STRG/CMD + 0 Die Schriftgröße des Bearbeitungsbereichs zurücksetzen
Strg/CMD + Alt + P einschalten
Strg / CMD + / Zeilenkommentare
Strg / CMD + Alt + / Block -Kommentare
Hinweis: Wenn Sie den CSS -Code und den HTML -Code kommentieren, können Sie nur Block -Kommentar -Verknüpfungsschlüssel verwenden.