Holen Sie mehr aus dem Atom-Texteditor

Von allen Texteditoren verfügbar, Atom ist ein Favorit unter Designern und Entwicklern. Atom wurde von GitHub entwickelt und war Open Source Anfang 2014. Seitdem ist dies Webdesign-Tool ist 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 die besten ausgewählt Webseitenersteller , Mehr oben Web-Hosting Anbieter. Nicht ganz richtig? Hier sind die besten Cloud-Speicher Optionen.

wie man Fotos auf Facebook-Profil versteckt

Atom Landing Page



Atom basiert auf JavaScript, HTML und CSS

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 fügen beispielsweise die Unterstützung für die Markdown-Vorschau hinzu, 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

Pakete in Atom

Verwenden Sie Pakete, um Atom zu erweitern und anzupassen

Bei geöffneter Ansicht 'Einstellungen' finden Sie 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, aber Sie können auch die Suchleiste verwenden, um das gesuchte zu finden.

wird Sega eine neue Konsole machen

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 unter Atoms 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:

$ apm links

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.

Wie erstelle ich 3D-Buchstaben in Photoshop?

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 mit den Konfigurationseinstellungen, in dem 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 { background: seashell; }

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.

wie man Skalen in Photoshop malt

Mit dem Paketmanager und den Konfigurationsdateien von Atom können Sie Ihre Atom-Umgebung direkt in Atom anpassen. Diese Einführung sollte Sie auf Ihrem Weg gut machen, und 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 .

Zum Thema passende Artikel: