fbpx
Brackets Icon

Web Coding mit Brackets

Brackets Projekt Wasserzeichen - Quelle brackets.io

Im laufe meiner Tätigkeit habe ich bereits mit einigen Tools aus dem Bereich „Web- Coding & Development“ arbeiten können.
Das hier vorgestellte Tool Brackets gehört, aufgrund der Tatsache das es sich Brackets um einen quelloffenen Code Editor handelt welcher sowohl auf Linux und Windows Systemen arbeitet, zu meiner ersten Wahl.

Erste Schritte mit Brackets – Anleitung

Anleitung vom Anbieter

Willkommen zu Brackets, einem modernen, quelloffenen Code-Editor, der Webdesign versteht. Es ist ein einfacher, aber dennoch leistungsfähiger Editor, der Ihnen immer die richtigen Tools einblendet, sodass Sie die genau richtige Menge an Hilfestellung haben, wann immer Sie diese brauchen.

Brackets ist eine andere Art Editor. Brackets hat ein paar einzigartige Features wie Schnelles Bearbeiten, Live-Vorschau und zahlreiche weitere, die Sie in anderen Editoren vergeblich suchen werden. Zudem ist Brackets in JavaScript, HTML und CSS geschrieben. Das heißt, dass die meisten Brackets-Nutzer dazu in der Lage sind, den Editor selbst zu verändern und zu erweitern. Tatsächlich nutzen wir Brackets täglich, um Brackets zu verbessern. Lesen Sie weiter, um mehr über die Nutzung der Hauptfeatures zu erfahren.

Projekte in Brackets
Um Ihren eigenen Code in Brackets zu bearbeiten, können Sie einfach den Ordner öffnen, der Ihre Dateien enthält. Brackets sieht den geöffneten Ordner als „Projekt“; Features wie Code-Vervollständigung, Live-Vorschau und Schnelles Bearbeiten nutzen nur Dateien im aktuell geöffneten Ordner.

Schnelles Bearbeiten von CSS und JavaScript
Kein Wechsel zwischen Dokumenten mehr – so verlieren Sie nie den Überblick. Wenn Sie HTML editieren, können Sie die Tastenkombination Cmd/Strg + E verwenden, um einen Inline-Editor anzuzeigen, der Ihnen alle relevanten CSS-Regeln zum Schnellen Bearbeiten anzeigt. Ändern Sie etwas im CSS, drücken Sie ESC und schon sind Sie zurück im HTML-Code. Oder lassen Sie die CSS-Regeln einfach offen und sie werden Teil ihres HTML-Editors. Sobald Sie ESC außerhalb eines solchen Editors drücken, schließen sich alle zusammen. Ein Inline-Editor zeigt Ihnen auch Regeln in LESS- und SCSS-Dateien, inklusive geschachtelter Regeln.

Ein Screenshot, der Schnelles Bearbeiten von CSS zeigt
Sie können die selbe Tastenkombination nutzen, um andere Dinge auf die selbe Weise zu bearbeiten – wie JavaScript-Funktionen, Farben und Animations-Timing-Funktionen – und wir fügen ständig mehr hinzu.

Im Augenblick können solche Editoren allerdings nicht verschachtelt werden. Sie können das Schnelle Bearbeiten also nur nutzen, während der Cursor sich im Haupteditor befindet.

Vorschau auf HTML- und CSS-Änderungen live im Browser anzeigen
Sie kennen den „Speichern/Neu laden-Tanz“, den wir seit Jahren aufführen? Der, in dem Sie Änderungen in Ihrem Editor machen, Speichern drücken, zum Browser schalten und dann neu laden, um schließlich das Ergebnis zu sehen? Mit Brackets müssen Sie diesen Tanz nicht aufführen.

Brackets öffnet eine Live-Verbindung zu Ihrem lokalen Browser und sendet HTML- und CSS-Updates, während Sie tippen! Eventuell tun Sie etwas Ähnliches bereits heute mit browserbasierten Tools, doch mit Brackets ist kein Kopieren und Einfügen des endgültigen Codes im Editor mehr nötig. Ihr Code läuft im Browser, aber lebt in Ihrem Editor!

Hervorheben von HTML-Elementen und CSS-Regeln – live!
Brackets macht es Ihnen leicht, zu sehen, welche Auswirkungen Ihre Änderungen in HTML und CSS auf die Seite haben werden. Wenn Ihr Cursor auf einer CSS-Regel platziert ist, hebt Brackets alle zugehörigen Elemente im Browser hervor. Genauso wird Brackets beim Editieren einer HTML-Datei die entsprechenden HTML-Elemente im Browser markieren.

Derzeit unterstützt Brackets die Live-Vorschau nur für HTML und CSS. Allerdings werden in der aktuellen Version Änderungen an JavaScript-Dateien automatisch neu geladen, wenn Sie diese speichern. Wir arbeiten momentan an der Unterstützung der Live-Vorschau für JavaScript. Die Live-Vorschau ist außerdem nur mit Google Chrome möglich, doch wir hoffen, diese Funktionalität zukünftig zu allen wichtigen Browsern hinzuzufügen.

Schnelle Farbansicht
Für die unter uns, die immer noch nicht die Farb-Äquivalente von HEX- und RGB-Werten kennen, macht es Brackets einfach und schnell, exakt zu sehen, welche Farbe genutzt wird. Fahren Sie in HTML oder CSS einfach über einen Farbwert oder -verlauf und Brackets wird Ihnen automatisch eine Vorschau davon anzeigen. Das selbe gilt für Bilder: Platzieren Sie den Cursor im Brackets-Editor über einem Link zu einem Bild und er wird ein Miniaturansicht von diesem Bild zeigen.

Sie benötigen etwas anderes? Probieren Sie es mit einer Erweiterung!
Zusätzlich zu all dem, was in Brackets eingebaut ist, hat unsere große und wachsende Community der Erweiterungs-Entwickler hunderte Erweiterungen erstellt, die nützliche Funktionen bringen. Wenn Sie etwas brauchen, was es nicht in Brackets gibt, ist es sehr wahrscheinlich, dass bereits jemand eine Erweiterung dafür geschrieben hat. Um die Liste der verfügbaren Erweiterungen zu durchstöbern oder zu durchsuchen nutzen Sie Datei > Erweiterungs-Verwaltung und klicken auf den Tab „Verfügbar“. Wenn Sie eine Erweiterung finden, die Sie nutzen wollen, klicken Sie einfach auf den „Installieren“-Button daneben.

Machen Sie mit
Brackets ist ein Open-Source-Projekt. Web-Entwickler rund um die Welt helfen mit, einen besseren Code-Editor zu bauen. Noch mehr erstellen Erweiterungen, die die Möglichkeiten von Brackets erweitern. Lassen Sie uns wissen, was Sie denken, teilen Sie Ihre Ideen oder tragen Sie direkt zu dem Projekt bei.

Quelle: Anleitung des Herstellers / Anbieters „Brackets“

Links – Brackets

Erstellt am 04.01.2020 durch A.D.