So fügen Sie benutzerdefinierte Code-Snippets zu Atom hinzu

Es ist kein Zufall, dass Atom, der von Github entwickelte Quellcode-Editor, in der Webentwicklungs-Community beliebt ist. Es ist nicht nur einfach erweiterbar mit Tausenden von Atom-Paketen, und hat eine breite Sprachunterstützung, aber fast jeder Teil kann vom Benutzer angepasst werden.

Durch die Nutzung der Funktion " Snippets" von Atom können Sie Ihren Codierungsworkflow produktiver gestalten, da wiederkehrende Code-Snippets wiederverwendet werden können, um den sich wiederholenden Teil Ihrer Arbeit zu reduzieren. In diesem Beitrag zeige ich Ihnen, wie Sie die integrierten Code-Snippets von Atom verwenden und eigene Snippets erstellen können .

Verwenden Sie integrierte Code-Snippets

Atom enthält standardmäßig integrierte Code-Snippets, die jeweils an einen Bereich gebunden sind, der zu einem bestimmten Dateityp gehört. Wenn Sie beispielsweise an einer Datei mit der Erweiterung .js, sind nur die Snippets des JavaScript-Bereichs für diese Datei verfügbar.

Um alle verfügbaren Snippets für Ihren aktuellen Dateityp anzuzeigen, drücken Sie Alt + Umschalt + S. Wenn Sie ein Snippet aus der Dropdown-Liste auswählen und darauf klicken, fügt Atom das vollständige Snippet ohne weitere Probleme in Ihren Editor ein.

Wenn Sie die Optionen bereits kennen, müssen Sie nicht unbedingt die gesamte Liste laden. Wenn Sie mit dem Schreiben beginnen, öffnet Atom eine Ergebnisliste für die automatische Vervollständigung, die die verfügbaren Code-Snippets enthält, die zu dem bestimmten Bereich und der Zeichenfolge gehören, die Sie bisher eingegeben haben.

Wenn Sie beispielsweise das Zeichen h in eine .html Datei eingeben, wird eine Dropdown-Liste mit allen integrierten HTML-Snippets angezeigt, die mit h .

Wenn Sie auf eine Option klicken, fügt Atom das vollständige HTML-Tag ein (z. B.

), und positionieren Sie den Cursor innerhalb des Start- und Abschluss-Tags .

Wenn Sie sich nicht mit der Dropdown-Liste beschäftigen möchten, können Sie das gleiche Ergebnis erzielen, indem Sie h1 eingeben und Tab oder Enter drücken - beide Schlüssel fügen das vollständige Code-Snippet ein, das zum Präfix des Snippets gehört.

Hinzufügen von benutzerdefinierten Code-Snippets

1. Suchen Sie die Konfigurationsdatei

Um Ihre eigenen benutzerdefinierten Code-Snippets zu Atom hinzuzufügen, müssen Sie zuerst die Konfigurationsdatei namens snippets.cson, die eine CoffeeScript-Objektnotationsdatei ist.

Klicken Sie auf das Menü File > Snippets... in der oberen Leiste und Atom öffnet die Datei snippets.cson, der Sie Ihre eigenen Snippets hinzufügen können.

2. Finden Sie den richtigen Umfang

Sie benötigen vier Dinge, um Ihr benutzerdefiniertes Snippet hinzuzufügen:

1. Der Name des Bereichs
2. Der Name des Snippets
3. Das Präfix, das als Handle des Snippets fungiert
4. Der Körper des Snippets

Der Name, das Präfix und der Text des Snippets (2-4) hängen ausschließlich von Ihnen ab. Sie müssen jedoch den Namen des Scopes (1) finden, bevor Sie Ihre eigenen Snippets hinzufügen.

Um den gewünschten Bereich zu finden, klicken Sie auf das Menü File > Settings in der oberen Menüleiste und suchen Sie dann unter den Einstellungen die Registerkarte Packages . Führen Sie hier eine Suche nach dem gewünschten Bereich aus. Wenn Sie beispielsweise Codeausschnitte zur HTML-Sprache hinzufügen möchten, geben Sie HTML in die Suchleiste ein.

Klicken Sie auf das Sprachunterstützungspaket der gewählten Sprache und öffnen Sie seine eigenen Einstellungen. Unter den Grammatikeinstellungen finden Sie schnell den Namen des Oszilloskops, wie Sie auf dem Screenshot unten sehen können.

Hier sind einige Bereiche, die Sie in Ihren Atom-Projekten verwenden können:

• .text.plain Text: .text.plain
• HTML: .text.html.basic
• CSS: .source.css
• Sass: .source.sass
• WENIGER: .source.css.less
• JavaScript: .source.js
• PHP: .text.html.php
• Python: .source.python
• Java: .source.java

Vergessen Sie nicht, dass Sie vor dem Namen des Bereichs einen Punkt ( . ) Einfügen müssen, um ihn in der Datei snippets.cson verwenden.

3. Erstellen Sie einzeilige Code-Snippets

Um ein einzeiliges Code-Snippet zu erstellen, müssen Sie der Datei snippets.cson den Bereich, den Namen, das Präfix und den Hauptteil des Snippets hinzufügen, indem Sie die folgende Syntax verwenden:

 '.text.html.basic': 'Widget-Titel': 'Präfix': 'wti' 'body': ' 
 " 

Dieses Beispiel-Snippet fügt a hinzu

Markieren Sie mit der widget-title den HTML-Bereich. Sie können diesem Atom-Editor jedes andere einzeilige Code-Snippet hinzufügen.

Nach dem Speichern der Konfigurationsdatei fügt Atom bei jeder Eingabe des Präfixes und Drücken der Tab-Taste den zugehörigen Code-Editor in den Code-Editor ein. Der Name des Snippets (im Beispiel Widget Title ) wird in der Ergebnisliste der automatischen Vervollständigung angezeigt.

4. Erstellen Sie mehrzeilige Code-Snippets

Mehrzeilige Code-Snippets verwenden eine etwas andere Syntax. Sie müssen die gleichen Daten wie für einzeilige Snippets hinzufügen: den Bereich, den Namen, das Präfix und den Hauptteil des Snippets.

Was hier anders ist, ist, dass Sie den Schnipselkörper in ein Paar """ (drei doppelte Anführungszeichen) setzen müssen .

 '.text.html.basic': 'Bildlink': 'Präfix': 'iml' 'body': "" " 
 
 "" " 

Wenn Sie dem gleichen Bereich mehr als ein benutzerdefiniertes Snippet hinzufügen möchten, fügen Sie den Namen des Bereichs nur einmal hinzu, und führen Sie dann die einzelnen Snippets einzeln auf:

 '.text.html.basic': 'Widget-Titel': 'Präfix': 'wti' 'body': ' 
 '' Image Link ':' Präfix ':' iml '' body ': "" " 
 
 "" " 

5. Hinzufügen von Tabstopps

Sie können die Verwendung Ihrer benutzerdefinierten Code-Snippets weiter vereinfachen, indem Sie dem Snippet-Text Tabstopps hinzufügen. Tabstopps geben die Stellen an, an denen der Benutzer mit der Tabulatortaste navigieren kann. Mit Tabulatoren können Sie die Zeit speichern, die die In-Text-Navigation benötigt.

Sie können Tabstopps mit der Syntax $1, $2, $3, ... hinzufügen. Atom positioniert den Cursor an die Stelle, an der er $1, dann können Sie mit der Tab-Taste zu $2 springen, dann zu $3 und so weiter.

 '.text.html.basic': 'Bildlink': 'Präfix': 'iml' 'body': "" " 
 
 "" " 

6. Fügen Sie optionale Parameter hinzu

Mit Atom können Sie zusätzliche Informationen zu Ihren Snippets hinzufügen, indem Sie optionale Parameter verwenden . Diese Funktion kann nützlich sein, wenn ein anderer Benutzer auch Ihren Editor verwendet und Sie den Zweck des Snippets wissen lassen möchten oder wenn Sie so komplizierte benutzerdefinierte Snippets haben, denen Sie Notizen hinzufügen müssen.

Die Werte der optionalen Parameter werden in der Ergebnisliste für die automatische Vervollständigung angezeigt, wenn Sie mit der Eingabe eines Präfix beginnen. Im folgenden Beispiel habe ich eine Beschreibung und eine More... Verknüpfung zum vorherigen Widget Title Snippet hinzugefügt:

 '.text.html.basic': 'Widget-Titel': 'Präfix': 'wti' 'body': ' 
 '' description ':' Sie können einen Widget-Titel mit diesem Snippet zu Ihrem Sidebar-Widget hinzufügen. ' 'descriptionMoreURL': 'http://hongkiat.com' 

Wenn der Benutzer beginnt, das Präfix wti, werden die zusätzlichen Informationen (Beschreibung + Link) unten im Feld für die Ergebnisse der automatischen Vervollständigung angezeigt. Sehen Sie sich die anderen optionalen Parameter an, mit denen Sie zusätzliche Informationen zu Ihren benutzerdefinierten Snippets hinzufügen können.