Steigern Sie Ihren Workflow mit Angular 5 Snippets und VS Code

Angular 5 -Code -Snippets im Visual Studio -Code verbessern die Produktivität erheblich und verringern die Notwendigkeit, doppelten Code zu schreiben. Der VS -Code -Markt bietet eine Vielzahl von Code -Snippets für verschiedene Programmiersprachen, einschließlich Angular 5. Diese Code -Ausschnitte können in jedem Angular 5 -Projekt installiert und verwendet werden. Benutzer können ihre eigenen Code -Snippets im VS -Code erstellen, indem sie dieselbe in Textmate definierte Syntax definieren. Diese benutzerdefinierten Code -Ausschnitte können durch Einfügen von Registerkartenstopps, Platzhaltern und Auswahllisten interaktiv sein. Sie können Code -Snippets mit den Teammitgliedern freigeben, indem Sie einen .VSCODE -Ordner im Projektroot -Verzeichnis erstellen und an das Repository senden. Für die breite Freigabe können Snippets auf öffentliche Server hochgeladen oder als Erweiterungen auf den VS -Code -Marktplatz veröffentlicht werden.

Dieser Artikel konzentriert sich darauf, wie Angular 5 -Code -Snippets im Visual Studio -Code verwendet werden, um den Workflow zu verbessern. Wir werden zunächst die Grundlagen der Verwendung und des Erstellens von Codeausschnitten abdecken. Wir lernen, wie man den Winkelcode -Snippet von VS Code in einem Winkelprojekt verwendet. Wir werden dann lernen, wie man unsere eigenen Codeausschnitte erstellt und sie mit anderen weitergibt.

Wie langweilig es für jeden ist, der eine Programmiersprache beherrscht, immer wieder denselben Code einzugeben. Schließlich werden Sie mit dem Kopieren und Einfügen von Code -Snippets beginnen, um den Schmerz zu vermeiden, die für die Schleife wieder mit Ihren Fingern zu schreiben.

Es wäre großartig, wenn Ihr Editor Ihnen beim Eingeben automatisch diesen gemeinsamen Code einfügen könnte, oder?

Ok, Sie wissen wahrscheinlich, dass sie Code -Snippets genannt werden. Dies ist ein Merkmal, das in allen modernen IDES üblich ist. Auch Notepad unterstützt sie (obwohl standardmäßig nicht aktiviert).

Voraussetzungen

Bevor Sie beginnen, müssen Sie die neueste Version von Visual Studio Code auf Ihrem Computer installieren. Wir werden auch Angular 5 Code -Snippets einführen. Zumindest die Grundlagen des Winkels hilft, aber nicht unbedingt.

Sie müssen ein vorhandenes oder neues Angular 5 -Projekt verwenden, um mit Code -Snippets zu experimentieren. Ich gehe davon aus, dass Sie die neueste Version von Node.js oder zumindest Node.js 6 oder höher haben. Wenn Sie es noch nicht getan haben, finden Sie hier die Befehle, um das Angular CLI -Werkzeug zu installieren:

<code>npm install -g @angular/cli

# 或
yarn global add @angular/cli
</code>

detaillierte Erläuterung von Code -Snippets

Code -Snippets sind Vorlagen, die problemlos einen doppelten Code einfügen können. Wenn VS -Code zum ersten Mal installiert wird, wird JavaScript -Code -Snippets voreinstalliert. Öffnen Sie einfach eine vorhandene JavaScript -Datei oder erstellen Sie eine neue Datei im Arbeitsbereich und geben Sie das folgende Präfix ein:

• log
• wenn
• ifelse
• für
• setTimeout

Wenn Sie eingeben, wird eine Popup-Liste angezeigt, die Ihnen die Möglichkeit gibt, Ihren Code automatisch zu vervollständigen. Sobald das richtige Snippet hervorgehoben ist, drücken Sie einfach die Taste Eingabetaste, um den Ausschnitt einzuführen. In einigen Fällen müssen Sie möglicherweise die Down -Pfeil -Taste drücken, um den richtigen Code -Snippet auszuwählen.

• Windows - C: Programm Filesmicrosoft vs CodiererSourcesAppextensionsjavaScriptsNippetsjavaScript.json
• Linux -/usr/share/code/ressourcen/app/extensions/javaScript/snippets/javascript.json

Wir werden uns ansehen, wie Sie unsere eigenen Code-Snippets erstellen, aber zuerst einige Code-Snippets von Drittanbietern untersuchen.

So verwenden Sie Code -Snippets

Zum Zeitpunkt des Schreibens listet der Visual Studio Marketplace 934 Erweiterungen in der Kategorie Code -Snippet auf. Sie finden einen Code -Ausschnitt, der für jede erstellte Programmiersprache geschrieben wurde (einschließlich Pascal!)! Dies bedeutet, dass Sie wahrscheinlich den Markt überprüfen sollten, bevor Sie Ihr eigenes Code -Snippet erstellen. Wie bereits erwähnt, werden wir Angular 5 Code -Snippets einführen. Finden Sie ein vorhandenes Angular 5 -Projekt in Ihrem Arbeitsbereich oder erstellen Sie ein neues:

<code>npm install -g @angular/cli

# 或
yarn global add @angular/cli
</code>

Wenn das Projekt eingerichtet ist, öffnen Sie es in VS -Code. Klicken Sie anschließend auf das Erweiterungssymbol in der Aktivitätsleiste, um das Erweiterungsfeld zu öffnen. Suche Angular 5. Die Suchergebnisse sollten mehrere Winkelverlängerungen auflisten. Installieren Sie die von "John Papa" verfasste Erweiterung. Klicken Sie nach Abschluss der Installation auf die Schaltfläche REGOAD, um vs Code neu zu starten. Diese Angular 5 -Snippet -Erweiterung enthält mehr als 50 Code -Snippets. Etwa 70% der Snippets werden für Typenkript geschrieben, und der größte Teil der anderen werden für HTML geschrieben. Es gibt auch einige Docker -Code -Snippets.

Versuchen wir einige Angular 5 -Code -Snippets. Erstellen Sie eine neue Datei namens app.service.ts im App -Ordner. Öffnen Sie die Datei und tippen Sie "A-Service" ein. Wenn Sie eingeben, wird eine Popup-Liste angezeigt. Sie sollten die richtigen Optionen bereits vor dem Tippen hervorgehoben haben. Drücken Sie die Taste Eingabetaste, um die Vorlage einzulegen. Beachten Sie nach Eingabe des Code -Snippets, dass der generierte Klassenname hervorgehoben wird, damit Sie ihn ändern können.

<code>ng new snippets-demo</code>

<code>a-service-httpclient</code>

Eingabetaste und die beobachtbare Klasse wird automatisch importiert.

Verwenden wir als nächstes einen anderen Code -Snippet, um die Funktion zu vervollständigen. Geben Sie das folgende Präfix ein: "a-httpclient-get". Durch Drücken der Taste Eingabetaste wird dieses Code -Snippet für Sie eingefügt:

<code>npm install -g @angular/cli

# 或
yarn global add @angular/cli
</code>

nach dem Get hinzufügen. Die vollständige Methode ist jetzt unten angezeigt.

<code>ng new snippets-demo</code>

Strg Shift p ) Wählen Sie es aus und wählen Sie die Sprache, für die Sie die Syntax erstellen möchten. Erstellen wir jetzt eine für TypenScript. Platzieren Sie nach dem Öffnen von TypeScript.json diese Code -Snippet -Vorlage am Anfang und am Ende der Klammern:

<code>a-service-httpclient</code>

"Hello World Print" - Der Titel der Code -Snippet -Vorlage. Sie können jeden Titel hinzufügen, wie Sie möchten.
Präfix - Das Trigger -Schlüsselwort für das Code -Snippet.
Körper - der Code, den der Code -Snippet einfügt.
Beschreibung - keine Erläuterung erforderlich.

eingeben. Sie sollten den folgenden Code eingefügt haben:

<code>getPosts(): Observable<any> {
}
</any></code>

<code>return this.httpClient.get('url');
</code>

<code>getPosts(): Observable<any> {
  return this.httpClient.get<any>('/posts');
}
</any></any></code>

Um die Auswahlliste zu implementieren, ersetzen Sie einfach die Konsole.log -Linie wie folgt:

<code>npm install -g @angular/cli

# 或
yarn global add @angular/cli
</code>

Diese Beispiele sind derzeit ausreichend. Ich habe keine variablen Namen und Konvertierungen eingeführt. Um mehr zu erfahren, sehen Sie sich John Papas Winkelcode -Snippet auf GitHub an. Hier ist eine Vorschau:

<code>ng new snippets-demo</code>

Dies ist die Vorlage, mit der wir den HTTPClient -Dienst erstellt haben. Ich empfehle Ihnen, das Projekt zu durchsuchen, da es viele sehr nützliche Vorlagen enthält, die Sie lernen können.

Zusammenfassung

Jetzt, da Sie gelernt haben, wie man Code -Snippets erstellt, möchten Sie sie vielleicht mit Teammitgliedern, Freunden oder der Öffentlichkeit teilen. Der einfachste Weg, um Code -Snippets mit Ihren Teamkollegen auszutauschen, besteht darin, einen .vscode -Ordner im Stammvermögen Ihres Projekts zu erstellen. Erstellen Sie einen Unterordner namens Snippets und platzieren Sie alle Vorlagen wie folgt darin:

Stellen Sie sicher, dass Sie diesen Ordner einreichen, damit jeder ihn im Repository finden kann. Um mit Ihren Freunden und der Öffentlichkeit zu teilen, können Sie eine Vielzahl von Optionen verwenden:

• Sie können Code -Snippets auf öffentliche Server wie Google Drive, Dropbox und sogar Pastebin hochladen.
• Sie können Code -Snippets als Erweiterungen auf dem VS -Code -Markt veröffentlichen.

Ich hoffe, diese kurze Einführung in die Verwendung von Code -Snippets hilft Ihnen dabei, Ihre Programmierung zu vereinfachen!

FAQs zur Verbesserung der Produktivität mit Angular 5 -Code -Snippets in vs Code

Was sind Angular 5 -Code -Snippets und wie verbessern sie die Produktivität im VS -Code?

Angular 5 Snippets sind vordefinierte Snippets, die einfach in die Codebasis im Visual Studio -Code (VS -Code) eingefügt werden können. Sie sind so konzipiert, dass sie Zeit sparen und die Produktivität steigern, indem sie die Notwendigkeit reduzieren, doppelten Code zu schreiben. Wenn Sie beispielsweise häufig eine bestimmte Winkelkomponentenstruktur verwenden, können Sie einen Ausschnitt davon erstellen und bei Bedarf verwenden. Auf diese Weise können Sie sich mehr auf die Logik Ihrer Anwendung konzentrieren als das Schreiben von Boilerplate -Code.

Wie installiere ich Angular 5 -Code -Snippets in VS -Code?

Um Angular 5 -Code -Snippets in VS -Code zu installieren, müssen Sie zur Erweiterungsansicht (Strg Shift X) gehen, nach "Angular Snippets" suchen und dann die Erweiterung installieren. Sobald die Installation abgeschlossen ist, können Sie mit Code -Snippets beginnen, indem Sie das Präfix der Code -Snippets in Ihren Code eingeben und die Code -Snippets in der Vorschlagliste auswählen.

Kann ich mein eigenes Code -Snippet in vs Code erstellen?

Ja, Sie können Ihre eigenen Code -Snippets in vs Code erstellen. Gehen Sie dazu in die Datei & GT; Sie können das Präfix, den Körper und die Beschreibung des Code -Snippets angeben.

Wie verwendet ich Angular 5 -Code -Snippets in VS -Code?

Um Angular 5 -Code -Snippets im VS -Code zu verwenden, müssen Sie nur das Präfix des Code -Snippets im Code eingeben und den Code -Snippet in der Vorschlagliste auswählen. Der Code -Snippet wird dann in die Cursorposition eingefügt. Sie können auch die Registerkartenschlüssel verwenden, um zwischen Platzhaltern in einem Code -Snippet zu navigieren.

Was sind einige nützliche Angular 5 -Code -Snippets?

Es gibt viele nützliche Angular 5 -Code -Snippets, wie "ngfor" zum Erstellen von Schleifen, "NGIF" zum Hinzufügen von bedingten Aussagen, "Ngmodel" zur bidirektionalen Datenbindung und "ngcomponent". Diese Code -Ausschnitte können Ihren Codierungsprozess erheblich beschleunigen.

Angular 5 Wie vergleichen Code -Snippet mit anderen Code -Snippets?

Winkel 5 -Code -Snippets wurden speziell für die Winkelentwicklung im VS -Code entwickelt. Sie liefern eine Reihe vordefinierter Codestrukturen, die üblicherweise in Winkelanwendungen verwendet werden, sodass sie effizienter und bequemer sind als gemeinsame Code -Snippets.

Kann ich Angular 5 Code -Snippets für andere Versionen von Angular verwenden?

Während Angular 5 -Code -Snippets für Angular 5 ausgelegt sind, können viele dieser Code -Snippets auch in anderen Drehversionen verwendet werden. Es kann jedoch einige Unterschiede in der Syntax und Funktionalität geben. Daher wird empfohlen, Code -Snippets zu verwenden, die speziell für Ihre Winkelversion entwickelt wurden.

Gibt es eine Begrenzung für die Verwendung von Angular 5 -Code -Snippets in VS -Code?

Während Angular 5 Code -Snippets Ihre Produktivität erheblich verbessern können, sind sie kein Ersatz für das Verständnis des zugrunde liegenden Codes. Es ist wichtig zu wissen, was jedes Code -Snippet tut und wie es funktioniert, um sie effektiv zu verwenden.

Wie kann man Angular 5 -Code -Snippets im VS -Code verwenden, um meinen Workflow zu verbessern?

Zusätzlich zur Verwendung von Angular 5 -Code -Snippets können Sie Ihren Workflow verbessern, indem Sie andere Funktionen von VS -Code verwenden, z. B. IntelliSense für den Abschluss von Code, Debugging -Tools für die Fehlerbehebung und Git für integrierte Versionskontrolle.

Wo finde ich mehr Ressourcen für Angular 5 -Code -Snippets in vs Code?

Sie können mehr Ressourcen für Angular 5 -Code -Snippets in VS Code in der offiziellen VS -Code -Dokumentation, der Winkeldokumentation und verschiedenen Online -Tutorials und -Foren finden. Diese Ressourcen können Ihnen detailliertere Informationen und praktische Beispiele zur effektiven Verwendung von Angular 5 -Code -Snippets zur Verfügung stellen.

Das obige ist der detaillierte Inhalt vonSteigern Sie Ihren Workflow mit Angular 5 Snippets und VS Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!