Brackets

Ein moderner Open Source HTML & CSS Editor von Adobe.

Nachdem man Brackets installiert hat öffnet sich eine Startseite mit Erklärungen.

Live-Vorschau

Oben Rechts befindet sich ein Icon, um die Seite in Chrome Live anzuzeigen.

Dateien / Ordner öffnen

Beim Start ist eine Hilfeseite geöffnet. Diese wird namentlich am linken Rand aufgeführt. Klicke mit rechter Maustaste auf die Seite und wähle, Ordner öffnen. Alle Dateien dieses Ordners sind ein Projekt in Brackets.

Im Kontextmenü der Ordneransicht, kann man die Ansicht aktualisieren.

Emmet

Emmet ist in Brackets integriert
Emmet wird mit Tabulator Taste ausgeführt

HTML Grundgerüst

Neues HTML Document erstellen und abspeichern
Mittels integriertem Emmet Plugin kann man das Grundgerüst einer Seite erstellen.
Schreibe ein ! Ausrufezeichen und drücke dann die Tabulatortaste

Emmet HTML-Grundgerüst verändern

Wenn man sich das HTML Grundgerüst welches durch Aufruf von ! + Tab durch Emmet ausgeführt wird, verändern möchte, kann man die Datei snippets.json abändern. Sie liegt im Ordner.

C:\Users\username\AppData\Roaming\Brackets\extensions\user\brackets-emmet\node_modules\emmet\lib

Hier eine veränderte Datei snippets.json zum download

Shortcuts

siehe Brackets Cheat Sheat

Code Formatieren

Strg Alt B

Beautify muss installiert sein

Kommentar HTML und CSS

Strg Shift # Stelle markieren um sie auszukommentieren

Multiple Cursor über mehrere Reihen

Alt Shift Up oder Alt Shift Down Cursor über mehrere Reihen hinzufügen.

Um in mehreren Zeilen das gleiche zu schreiben.

Alternative: Klicke mit dem Cursor an eine bestimmte Stelle. Halte die Alt Taste gedrückt klicke nochmal an die Stelle und ziehe die Maus nach unten. Lasse die Alt Taste los. Schreibe etwas. Es müsste in allen markierten Zeilen eingefügt werden.

Multiple Cursor mehrere Stellen

Strg Umschalt an mehrere Stellen klicken, in die man gleichzeitig schreiben will. Beachte, dass durch die Umschalt Taste auch Großschreibung aktiviert ist.

Nächsten Treffer zur Auswahl hinzufügen

Strg B Markiere eine Stelle, z.B.: den Namen eines HTML- Elements. Mit Strg B wird die nächste gleiche Stelle markiert, so dass man anschließend alles umbenennen oder löschen kann.

HTML Element um Text legen

Strg Shift A Elementnamen eingeben

Schrift vergrößern / verkleinern

Strg + vergrößern
Strg - verkleinern

CSS Regel verändern oder setzen

Strg-E gedrückt halten, HTML Element anklicken
Es öffnet sich ein Inline Editor, dort erstellt man eine Regel oder ändert eine vorhandene Regel.
Esc oder Strg E schließt das Fenster

Nächstes Element & voriges Element

Alt Shift Up & Alt Shift Down

Zeile auswählen

Strg L

Zeile darunter / darüber auswählen

Shift down / Shift up

Zeile verschieben

Strg Shift down / Strg Shift up

Plugins, die man haben muss (must have)

Oben rechts befindet sich ein Icon, um Erweiterungen / Plugins zu installieren.

Colors++

Nach der Installation Taste F11 . Es öffnet sich ein Fenster, in dem man einstellen, kann ob und wo Farbcodes in Brackets mit der Farbe hinterlegt werden sollen.

CSS Farbeigenschaft notieren, Doppelpunkt,
Farbnamen wählen
Kontextmenü Schnell bearbeiten
oder Strg E

Beautify

Automatische Codeeinrückung
Klicke auf den Zauberstab am rechten Ran
Strg Alt B

Evereyscrub

Zahlenwerte verändern mit den Pfeiltasten rauf und runter. Zahlenwert anklicken Strg Alt Pfeiltaste vertikal

Brackets Color Palette

Liefert Farben aus einem Bild. Klicke im Dateimenü von Brackets auf ein Bild mit rechter Maustaste und wähle Color Palette. Erzeuge eine Farbeigenschaft in CSS und wähle die Farbe aus dem Bild, welches unten angezeigt wird.

Brackets Tree Icons

Stellt die Dateien und Ordner in einer hierachischen Baumstruktur mit Icons dar.