Startseite » Codierung » Hinzufügen von benutzerdefinierten Code-Snippets zu Atom
Hinzufügen von benutzerdefinierten Code-Snippets zu Atom
Das ist kein Zufall Atom, Der von Github erstellte Quellcode-Editor ist in der Webentwicklungs-Community sehr beliebt. Es ist nicht nur leicht erweiterbar mit Tausenden von Atompaketen und hat eine breite sprachunterstützung, aber fast ist jeder Teil anpassbar vom Benutzer.
Durch die Nutzung von Atom Snippets-Funktion, Sie können Ihren Codierungs-Workflow produktiver gestalten, als wiederkehrende Codeausschnitte wiederverwenden Sie können den sich wiederholenden Teil Ihrer Arbeit reduzieren. In diesem Beitrag zeige ich Ihnen, wie Sie können Verwenden Sie die integrierten Codeausschnitte von Atom, und Erstellen Sie Ihre eigenen benutzerdefinierten Snippets.
Verwenden Sie integrierte Code-Snippets
Standardmäßig wird Atom mitgeliefert integrierte Code-Snippets, Jeder davon ist an einen Umfang gebunden zu einem bestimmten Dateityp gehören. Zum Beispiel, wenn Sie an einer Datei mit arbeiten .js Erweiterung sind für diese Datei nur Ausschnitte verfügbar, die zum JavaScript-Bereich gehören.
Sehen alle verfügbaren schnipsel Für den aktuellen Dateityp drücken Sie Alt + Umschalttaste + S. Wenn Sie ein Snippet aus der Dropdown-Liste auswählen und darauf klicken, fügt Atom das vollständige Snippet ohne weiteren Aufwand in Ihren Editor ein.
Wenn Sie die Optionen bereits kennen, müssen Sie nicht unbedingt die gesamte Liste laden. Wenn Sie mit der Eingabe beginnen, erscheint ein Atom Ergebnisfeld für die automatische Vervollständigung up, enthält die verfügbaren Codeausschnitte, die zu dem bestimmten Gültigkeitsbereich gehören, und die Zeichenfolge, die Sie bisher eingegeben haben.
Wenn Sie beispielsweise eingeben h Zeichen in eine .html Datei, eine Dropdown-Liste mit allen integrierten HTML-Ausschnitten, die mit beginnen h wird auftauchen.
Durch Klicken auf eine Option wird Atom angezeigt Fügen Sie das vollständige HTML-Tag ein (z.B. ), und Positionieren Sie den Cursor innerhalb des Start- und Endetags.
Wenn Sie sich nicht mit der Dropdown-Liste beschäftigen möchten, können Sie dasselbe Ergebnis erzielen, indem Sie eingeben h1, und drücken Sie Tab oder Enter - beide Tasten Fügen Sie das vollständige Code-Snippet ein zum Präfix des Ausschnitts gehören.
Hinzufügen benutzerdefinierter Code-Snippets
1. Suchen Sie die Konfigurationsdatei
Um eigene benutzerdefinierte Code-Snippets zu Atom hinzuzufügen, müssen Sie zunächst das Konfigurationsdatei aufgerufen snippets.cson das ist ein CoffeeScript-Objektnotation Datei.
Klicke auf das Datei> Ausschnitte… Menü in der oberen Leiste, und Atom öffnet die snippets.cson Datei, zu der Sie Ihre eigenen benutzerdefinierten Snippets hinzufügen können.
2. Finden Sie den richtigen Bereich
Du wirst brauchen vier Dinge So fügen Sie Ihr benutzerdefiniertes Snippet hinzu:
Das Name des Bereichs
Das Name des Ausschnitts
Das Präfix das wird als Griff des Snippets dienen
Das Körper des Snippets
Der Name, das Präfix und der Körper des Snippets (2-4) hängen nur von Ihnen ab, wie auch immer Sie müssen Finden Sie den Namen des Bereichs (1) bevor Sie Ihre benutzerdefinierten Snippets hinzufügen.
Um den gewünschten Umfang zu finden, klicken Sie auf Datei> Einstellungen Menü in der oberen Menüleiste, dann finden Sie die Pakete Registerkarte unter den Einstellungen. Führen Sie hier eine Suche nach dem gewünschten Bereich aus. Wenn Sie beispielsweise der HTML-Sprache Codeausschnitte hinzufügen möchten, geben Sie Folgendes ein HTML in die Suchleiste.
Klicke auf das Sprachunterstützungspaket der gewählten Sprache und öffnen Sie die eigenen Einstellungen. Unter den Grammatikeinstellungen, Sie können den Namen des Bereichs schnell finden, wie auf dem Screenshot unten zu sehen ist.
Hier sind einige Bereiche, die Sie möglicherweise in Ihren Atom-Projekten verwenden möchten:
Einfacher Text: .text.plain
HTML: .text.html.basic
CSS: .source.css
Sass: .source.sass
WENIGER: .quelle.css.less
JavaScript: .source.js
PHP: .text.html.php
Python: .source.python
Java: .source.java
Vergiss nicht, dass du es tun musst füge einen Punkt hinzu (.) vor dem Namen des Bereichs um es in der snippets.cson Datei.
3. Erstellen Sie einzeilige Code-Snippets
So erstellen Sie eine einzeiliges Code-Snippet, Sie müssen den Gültigkeitsbereich, den Namen, das Präfix und den Hauptteil des Snippets zum hinzufügen snippets.cson Datei mit der folgenden Syntax:
Dieser Beispielausschnitt fügt a tag mit dem Widget-Titel Klasse in den HTML-Bereich. Sie können Ihrem Atom-Editor nach dieser Syntax jedes andere einzeilige Code-Snippet hinzufügen.
Nach dem Speichern der Konfigurationsdatei, wann immer Sie Geben Sie das Präfix ein und drücken Sie die Tabulatortaste, Atom fügt den zugehörigen Ausschnittskörper in Ihren Code-Editor ein. Der Name des Snippets (im Beispiel Widget-Titel) wird im Ergebnisfeld der automatischen Vervollständigung angezeigt.
4. Erstellen Sie mehrzeilige Code-Snippets
Mehrzeilige Code-Snippets Verwenden Sie eine etwas andere Syntax. Sie müssen die gleichen Daten wie für einzeilige Snippets hinzufügen - den Geltungsbereich, den Namen, das Präfix und den Rumpf des Snippets.
Was hier anders ist, ist, dass Sie den Schnipselkörper platzieren müssen innerhalb eines Paares von "" " (drei Anführungszeichen).
Wenn Sie hinzufügen möchten mehr als ein benutzerdefiniertes Snippets Fügen Sie in demselben Bereich den Namen des Bereichs hinzu nur einmal, Dann listen Sie die Ausschnitte nacheinander auf:
Sie können die Verwendung Ihrer benutzerdefinierten Code-Snippets durch Hinzufügen weiter erleichtern Tabstopps zum Schnipselkörper. Tabstopps geben die Stellen an, an denen der Benutzer mithilfe der Tabulatortaste navigieren kann. Mit Tabulatoren können Sie die Zeit sparen, die die Textnavigation benötigt.
Sie können Tabstopps hinzufügen Verwendung der $ 1, $ 2, $ 3,… Syntax. Atom positioniert den Cursor an die Stelle, die er findet 1 US-Dollar, dann kannst du zu springen 2 $ mit der Tabulatortaste, dann zu 3 $, und so weiter.
Atom erlaubt es dir fügen Sie zusätzliche Informationen hinzu zu Ihren Ausschnitten mit optionale Parameter. Diese Funktion kann nützlich sein, wenn eine andere Person auch Ihren Editor verwendet und Sie den Zweck des Snippets wissen lassen möchten oder wenn Sie über so komplexe benutzerdefinierte Snippets verfügen, dass Sie Notizen hinzufügen müssen.
Die Werte der optionalen Parameter sind wird im Ergebnisfeld der automatischen Vervollständigung angezeigt Das erscheint, wenn Sie ein Präfix eingeben. Im folgenden Beispiel habe ich eine Beschreibung & a hinzugefügt Mehr… Link zum vorigen Widget-Titel benutzerdefinierte schnipsel:
'.text.html.basic': 'Widget-Titel': 'Präfix': 'wti "body': '"description": 'Sie können Ihrem Sidebar-Widget einen Widget-Titel mit diesem Snippet hinzufügen. "descriptionMoreURL': 'http://hongkiat.com'
Wenn der Benutzer beginnt, das Präfix einzugeben wti, Die zusätzlichen Informationen (Beschreibung + Link) werden am unteren Rand des Ergebnisfelds für die automatische Vervollständigung angezeigt. Schauen Sie sich das an andere optionale Parameter Sie können zusätzliche Informationen zu Ihren benutzerdefinierten Snippets hinzufügen.
