Atom Editor Code Snippet: Effiziente Code -Wiederverwendung -Tool
Code -Snippets sind wiederverwendbare Codeblöcke, die schnell Programmdateien einfügen und die Kernfunktion des Atom -Texteditors sind. Vordefinierte Fragmente werden normalerweise mit Atompaketen und Sprachsyntax versehen.
benutzerdefinierte Snippets können in der in Ihrem ~/.atom -Fordner befindlichen Datei snippets.cson erstellt und definiert werden. Sie benötigen Sprachkennungen, Namen, Triggertext und Fragment -Körpercode (optionale Registerkarten).
Snippets können in jeder Programmiersprache verwendet werden, die von Atom unterstützt wird. Geben Sie bei der Definition des Fragments einfach den richtigen Umfang der Sprache an. Sie können Variablen enthalten und verwendet werden, um gemeinsame Codeblöcke einzufügen, Zeit zu speichern und die Codekonsistenz sicherzustellen.
Code -Snippets sind gängige Codeblöcke, die Sie schnell Programmdateien einfügen können. Sie sind sehr nützlich und auch das Kernmerkmal des Atom -Texteditors. Das heißt, Sie können den Editor monatelang verwenden, ohne die Existenz von Code -Snippets zu realisieren oder ihre Macht zu erleben! Atompakete und Sprachsyntax sind normalerweise mit vordefinierten Code -Snippets ausgestattet. Starten oder öffnen Sie beispielsweise eine neue HTML -Datei, geben Sie IMG ein und drücken Sie die Registerkarte. Der folgende Code wird angezeigt:
<img src="" alt="" />
Cursor befindet sich zwischen den Zitaten src Attribut. Drücken Sie erneut die Registerkarte und der Cursor wechselt in die Eigenschaft alt. Drücken Sie die Registerkarte zum letzten Mal und der Cursor wird zum Ende des Etiketts verschoben. Bei der Eingabe wird der Code -Snippet -Triggertext mit einem grünen Pfeil angezeigt. Sie können alle definierten Code-Snippets des aktuellen Dateisprachentyps anzeigen, indem Sie den Cursor überall einsetzen und Alt-Shift-S drücken. Scrollen Sie oder durchsuchen Sie die Liste, um bestimmte Code -Snippets zu finden und zu verwenden. Öffnen Sie alternativ die Paketliste in Einstellungen und geben Sie eine Sprache ein, um eine Liste aller Syntaxtypen anzuzeigen. Wählen Sie eine aus und scrollen Sie zum Code -Snippet -Abschnitt, um vordefinierte Trigger und Code anzuzeigen.
So erstellen Sie Ihren eigenen Code -Snippet
Sie haben Ihre eigenen häufig verwendeten Codeblöcke, die als Code -Snippets definiert werden können. Der nützliche Befehl, den ich beim Debuggen einer node.js -Anwendung verwende, besteht darin, das Objekt als JSON -String an der Konsole zu protokollieren:
console.log('%j', Object); -Strigger für log. Benutzerdefinierte Code -Snippets sind in der in Ihrem console.log() -Fordner befindlichen ~/.atom -Datei definiert. Wählen Sie im Menü Datei im Menü "Code Snippet", um es zu bearbeiten. Der Code -Snippet benötigt die folgenden Informationen: snippets.cson
ein und drücken Sie die Registerkarte - ja, es gibt sogar ein Code -Snippet, mit dem Sie das Code -Snippet definieren können! … snippets.cson
<img src="" alt="" />
Beachten Sie, dass CSON eine Coffeescript -Objektnotation ist. Es ist eine kurze Syntax, die JSON direkt zugeordnet werden kann. Zunächst benötigen Sie eine Reichweite, die die Sprache identifiziert, in der der Code -Snippet angewendet werden kann. Der einfachste Weg, um den Umfang zu bestimmen, besteht darin, die Paketliste in Einstellungen zu öffnen und "Sprache" einzugeben. Öffnen Sie das erforderliche Syntaxpaket und suchen Sie nach der Definition "Scope" oben.
Der Code -Snippet -Bereich in snippets.cson muss ebenfalls zu Beginn der Zeichenfolge einen Zeitraum hinzufügen. Beliebte Websprachbereiche umfassen:
.text.html.basic .source.css .source.sass .source.js .source.json .text.html.php .source.java .text.html.erb .source.python .text.plain Daher können Sie einen JSON -Protokollierungscode -Snippet mithilfe der folgenden Methode definieren:
console.log('%j', Object); Sobald Ihre snippets.cson -Datei gespeichert ist, wird der Code -Snippet wirksam. In diesem Beispiel:
.source.js (für JavaScript) lj console.log('%j', Object); gesetzt (wir haben jedoch einen zusätzlichen Steuercode hinzugefügt, wie unten gezeigt). einzelne Zitate im Körper müssen mit einem Backslash () entkommen. Registerkartenstopps werden unter Verwendung eines Dollar -Schilds definiert, gefolgt von einer Zahl, d. H. $ 1, $ 2, $ 3 usw. $ 1 ist die erste Registerkartenposition, in der der Cursor erscheint. Wenn die Registerkarte gedrückt wird, wird der Cursor auf 2 US -Dollar und so weiter wechselt. Die oben genannte Registerkarte STOP $ 1 wurde mit dem Standardtext definiert, um den Benutzer zu erinnern oder aufzufordern: ${1:Object}. Bei Verwendung eines Code -Snippets wird Object in console.log('%j', Object); ausgewählt, sodass er in den entsprechenden Objektnamen geändert werden kann.
Andere Code -Snippets können am Ende der snippets.cson -Datei hinzugefügt werden. Wenn Sie zwei oder mehr Codeausschnitte derselben Sprache benötigen, fügen Sie sie dem entsprechenden Bereichsbereich hinzu. Zum Beispiel können Sie einen anderen JavaScript -Code -Snippet im Bereich von .source.js erstellen, um die Länge eines beliebigen Arrays aufzuzeichnen:
'.source.js':
'Snippet Name':
'prefix': 'Snippet Trigger'
'body': 'Hello World!' Bitte beachten Sie, dass es zwei ${1:array} Tags gibt. Wenn console.log('array length', array.length); angezeigt wird, sehen Sie zwei Cursoren und beide Instanzen von array werden hervorgehoben - Sie geben einfach einmal den Array -Namen ein und beide ändern sich!
Multi-Line-Code-Snippet
Wenn Sie sich abenteuerlustiger fühlen, können Sie drei Doppelzitate "" "zu Beginn und am Ende des Körperscode TABELLE:
<img src="" alt="" />
Code -Eindrückung im Körper des Codes -Snippets hat keinen Einfluss auf die CSON -Definition, aber ich empfehle, dass Sie ihn außerhalb der Körperdefinition für eine größere Lesbarkeit einlegen. Ich wünsche Ihnen ein glückliches Schreiben des Codes -Snippets! Wenn Sie neu bei Atom sind, sollten Sie sich auch auf 10 essentielle Atom-Add-Ons für empfohlene Pakete beziehen.
FAQ bei der Verwendung von Codeausschnitten in Atom
Erstellen neuer Code -Snippets im Atom ist ein einfacher Prozess. Zuerst müssen Sie die Code -Snippet -Datei öffnen, indem Sie zum Dateimenü und dann zum Code -Snippet gehen. Dadurch wird eine .cson -Datei geöffnet, in der Sie das Code -Snippet definieren können. Jeder Code -Snippet beginnt mit einer Zeile .source, die die Sprache angibt, für die sie gilt, gefolgt vom Code -Snippet -Namen in Zitaten. Anschließend definieren Sie das Präfix, das den Code -Snippet und den Körper des Code -Snippets selbst auslöst. Der Körper kann mehrere Zeilen sein und die ${1:default_text} -Syntax verwenden, um Registerkarten anzugeben.
Um Code -Snippets im Atom zu verwenden, geben Sie einfach das für das Code -Snippet definierte Präfix ein und drücken Sie die Taste "Tab". Dies fügt den Körper des Code -Snippets am Cursor ein. Wenn Ihr Code -Snippet Registerkarten hat, können Sie die Taste "Tab" verwenden, um zwischen ihnen zu verschieben und den gewünschten Text einzugeben.
Ja, Sie können Code -Snippets für jede von Atom unterstützte Programmiersprache verwenden. Sie müssen nur den richtigen Umfang der Sprache angeben, wenn Sie das Code -Snippet definieren. Beispielsweise verwenden Sie für JavaScript .source.js und für Python .source.python.
Wenn Sie Ihr Code -Snippet mit anderen freigeben möchten, können Sie einfach Ihre snippets.cson Datei freigeben. Diese Datei enthält alle Ihre Code -Snippet -Definitionen und finden Sie in Ihrem Atom -Konfigurationsverzeichnis. Alternativ können Sie ein Paket mit Code -Snippets erstellen und im Atom -Paket -Repository veröffentlichen.
absolut! Code -Snippets sind eine großartige Möglichkeit, gängige Codeblöcke einzufügen. Sie können einen Ausschnitt für jeden Snippet definieren, den Sie häufig eingeben, und dann mit nur wenigen Schlüssel einfügen. Auf diese Weise können Sie viel Zeit sparen und dazu beitragen, die Konsistenz in Ihrem Code zu gewährleisten.
Um einen vorhandenen Code -Snippet im Atom zu bearbeiten, müssen Sie die Datei snippets.cson öffnen und das Code -Snippet zum Bearbeiten finden. Sie können dann das Präfix, den Körper oder den Umfang nach Bedarf ändern. Denken Sie daran, die Datei zu speichern, um die Änderungen anzuwenden.
Ja, Sie können Variablen in Ihrem Code -Snippet verwenden. Die Variable wird durch ${1:default_text} dargestellt, wobei "1" die Registerkarte und "default_text" der Standardtext ist, der eingefügt wird. Sie können Variablen verwenden, um Platzhalter in Code -Snippets zu erstellen, damit Sie diese Platzhalter beim Einfügen von Code -Snippets schnell ausfüllen können.
Um einen Code -Snippet in Atom zu löschen, müssen Sie die Datei snippets.cson öffnen und das zu gelöschte Code -Snippet finden. Löschen Sie dann einfach die Codezeile, die den Code -Snippet definiert, und speichern Sie die Datei. Der Code -Snippet wird sofort gelöscht.
Obwohl Atom keine integrierten Funktionen zum Importieren von Code-Snippets von anderen Editoren hat, können Sie die Snippet-Definitionen von anderen Editoren manuell kopieren und in die snippets.cson -Datei in Atom einfügen. Möglicherweise müssen Sie die Syntax ein wenig an die Code -Snippet -Syntax von Atom anpassen.
Ja, Sie können Code -Snippets in den Fund- und Ersatzfunktionen von Atom verwenden. Wenn Sie das Fund- und Ersatzbereich öffnen, können Sie ein Code -Snippet in das Feld Ersetzen eingeben. Wenn Sie einen Ersatzvorgang ausführen, wird das Code -Snippet in die Position des gefundenen Textes eingefügt.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Code -Snippets im Atom. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
