Inhalt
- Paket Ökosystem
- Pakete
- Installieren Sie Pakete
- Entwicklungspakete
- Themen in Atom
- UI- und Syntaxthemen
- Alternative Anpassung in Atom
- Init.coffee Datei
- Styles.css
Von allen verfügbaren Texteditoren ist Atom ein Favorit unter Designern und Entwicklern. Atom wurde von GitHub entwickelt und war Anfang 2014 Open Source. Seitdem ist dieses Webdesign-Tool auf mehr als 500.000 monatliche Benutzer angewachsen. Standardmäßig ist Atom Git-fähig und enthält Markdown-Vorschauen, automatische Vervollständigung und mehr. Es ist so konzipiert, dass es bis ins Mark gehackt werden kann.
Atom ist nicht nur Open Source, sondern basiert auch auf Webtechnologie: JavaScript, HTML und CSS. Dies macht die Kern- und Erweiterungsoptionen von Atom für eine Vielzahl von Entwicklern zugänglich.
In diesem Artikel werde ich Möglichkeiten erläutern, wie Sie Atom erweitern und anpassen können, von der Verwaltung von Paketen bis zum Hinzufügen benutzerdefinierter Verhaltensweisen.
Für andere praktische Web-Tools haben wir den besten Website-Builder sowie die besten Webhosting-Anbieter ausgewählt. Nicht ganz richtig? Hier sind die besten Cloud-Speicheroptionen.
Paket Ökosystem
Zum Zeitpunkt des Schreibens waren über 7.000 Pakete und mehr als 2.000 Themen für Atom veröffentlicht worden. Atom selbst wird erstellt, indem die Kern-App mit Dutzenden von Paketen für jede Standardfunktion gebündelt wird.
Diese Pakete bieten beispielsweise Unterstützung für die Markdown-Vorschau, zeigen den Git-Status Ihres Verzeichnisses an und steuern das Suchen und Ersetzen. Sie können über die Ansicht Einstellungen verwaltet werden. Die Ansicht "Einstellungen" von Atom zeichnet sich dadurch aus, dass sie standardmäßig einen Paketmanager enthält, mit dem Sie auf die von Ihnen installierten Pakete sowie auf die von der Community erstellten Tausenden zugreifen können. Sie können diese in Atom durchsuchen und installieren.
Sie können die Ansicht Einstellungen öffnen, indem Sie in Ihrer Menüleiste auf Pakete> Ansicht Einstellungen> Öffnen klicken oder die Option verwenden cmd +, Tastaturkürzel.
Pakete
Bei geöffneter Ansicht "Einstellungen" befindet sich links die Registerkarte "Pakete". Daraufhin werden alle von Ihnen installierten Pakete und deren Typ angezeigt:
- Community-Pakete: Pakete, die von Personen außerhalb des Atom-Teams von GitHub geschrieben wurden
- Kernpakete: Vom Atom-Team entwickelt und mit Atom gebündelt
- Entwicklungspakete: Pakete, die Sie auf Ihrem Computer haben und in Atom aus lokaler Quelle verwenden
In der Ansicht "Pakete" können Sie Ihre installierten Pakete verwalten, indem Sie auswählen, ob sie installiert / deinstalliert oder deaktiviert / aktiviert werden sollen. Wenn Sie in dieser Ansicht auf ein Paket klicken, gelangen Sie zu den verfügbaren Einstellungen des Pakets (falls vorhanden) sowie zur README-Datei, die das Paket beschreibt. Wenn Sie mehr wissen möchten, können Sie auf den Link klicken und zum Repository oder Issue-Tracker des Pakets weitergeleitet werden.
Installieren Sie Pakete
Die Registerkarte Installieren in der Ansicht Einstellungen verbindet Sie mit den Tausenden von Paketen, die für Atom verfügbar sind. Oben finden Sie vorgestellte Pakete. Sie können jedoch auch die Suchleiste verwenden, um das gesuchte zu finden.
Pakete werden mit Atom Package Manager (APM), der in Atom enthalten ist, in Atom veröffentlicht. Sie finden veröffentlichte Atom-Pakete in der Installationsansicht. Sie finden sie auch auf der Atom-Website.
Genau wie in der Paketansicht wird beim Klicken auf ein einzelnes Paket die README-Datei angezeigt, sodass Sie sehen können, was es tut, bevor Sie es installieren. Es enthält auch Links zum Code-Repository des Pakets.
Sie können in dieser Ansicht neue Pakete aus der Community installieren, indem Sie in einem aufgelisteten Paket auf die Schaltfläche Installieren klicken. Sie können dann Pakete in der Paketansicht verwalten.
Entwicklungspakete
Um ein Paket zu verwenden, das Sie lokal in Atom entwickeln, bevor Sie es mit APM veröffentlichen, können Sie es über die APM-CLI mit Atom verknüpfen. Verwenden Sie beispielsweise im Verzeichnis des Pakets in Terminal oder Bash den folgenden Befehl:
$ apm Link
Verknüpfte Pakete werden im Abschnitt "Entwicklungspakete" in der Ansicht "Pakete" angezeigt. Mit diesem Befehl können Sie verknüpfte Pakete anzeigen:
Themen in Atom
Schalten Sie in der Installationsansicht die Suchleiste auf Themen, um die verfügbaren Atom-Themen zu durchsuchen. Sobald Sie Themen installiert haben, können Sie diese in der Themenansicht verwalten und als aktuelles Thema festlegen.
UI- und Syntaxthemen
Atom hat Themen sowohl für die Benutzeroberfläche als auch für die Codesyntax. Die Syntaxthemen legen fest, wie der Code im Editor selbst aussieht, und die UI-Themen legen fest, wie der Rest von Atom aussieht (z. B. die Registerkarten und der Dateibaum). Sie können sogar kleine Änderungen an Atom vornehmen, ohne ein vollständiges Thema oder Paket zu erstellen.
Alternative Anpassung in Atom
Die Registerkarte "Einstellungen" in der Ansicht "Einstellungen" enthält Ihre Optionen zum Anpassen von Atom. Sie können jedoch über die Standardoptionen hinausgehen, indem Sie JavaScript oder CSS in Ihre Konfiguration einfügen. Jede Instanz von Atom hat eine .Atom Verzeichnis, das die Konfigurationseinstellungen enthält, in denen Sie benutzerdefinierte Verhaltensweisen oder Stile erstellen können.
Um deine zu öffnen .Atom Klicken Sie im Konfigurationsverzeichnis auf die Schaltfläche "Konfigurationsordner öffnen" auf der linken Seite der Ansicht "Einstellungen".
Init.coffee Datei
Das init.coffee Mit file können Sie Atom bei jedem Start eines neuen Fensters ein benutzerdefiniertes Verhalten hinzufügen. Es wird ausgeführt, nachdem Pakete geladen wurden und der vorherige Editorstatus wiederhergestellt wurde.
Sie können CoffeeScript in dieser Standarddatei verwenden oder eine neue Datei, init.js, erstellen, um JavaScript zu verwenden. In init können Sie die vollständige Node.js-API verwenden. Wenn Sie beispielsweise jedes Mal, wenn Sie ein Fenster öffnen, möchten, dass Atom Sie mit der verwendeten Version von Node.js begrüßt, können Sie dies Ihrer Init-Datei hinzufügen:
alert (process.versions.node)
Um mehr mit Atom zu interagieren, können Sie die Atom-API verwenden. Die Dokumentation zur API ist auf der Atom-Site verfügbar.
Styles.css
Genau wie die init.coffee Datei, styles.css ist eine Datei, die nach dem Start von Atom geladen wird. Die hier hinzugefügten Stile überschreiben oder ergänzen die vorhandenen Stile von Atom und werden sofort nach dem Speichern wirksam.
Sie können beispielsweise die Hintergrundfarbe des Editors ändern, indem Sie dieses CSS hinzufügen:
Atom-Text-Editor {Hintergrund: Muschel; }}
Eine schnelle Möglichkeit, die Eigenschaftsnamen in Atom zu finden, besteht darin, die Tatsache zu nutzen, dass sich unter Atom Chrom befindet, sodass Sie Zugriff auf DevTools haben. Sie können DevTools durch Drücken von ein- und ausschalten alt + cmd + I..
Bei geöffneten DevTools können Sie mithilfe der Lupe Elemente in Atom auswählen und deren Klassen- oder Elementnamen anzeigen. Zielen Sie sie in Ihrem styles.css Datei, um ihre Eigenschaften zu ändern.
Mit dem Paketmanager und den Konfigurationsdateien von Atom können Sie Ihre Atom-Umgebung direkt in Atom anpassen. Diese Einführung soll Sie auf Ihrem Weg gut machen. Wenn Sie Fragen haben, öffnen Sie ein Problem mit dem Projekt.
Dieser Artikel erschien ursprünglich in Ausgabe 277 von Netz, das weltweit führende Webdesign-Magazin. Abonnieren Sie hier.
Um Ihre Webdesign-Fähigkeiten weiter zu verbessern, besuchen Sie unsere Konferenz. Erstellen und erleben Sie einen vollen Zeitplan mit branchenführenden Rednern, Workshops und wertvollen Networking-Möglichkeiten. Verpassen Sie es nicht! Holen Sie sich jetzt Ihr Generate-Ticket.
