Visual Studio Code für Angular einrichten

Lesezeit: 3 Minuten (683 Wörter)

Visual Studio Code herunterladen und installieren

Falls ihr noch nicht Visual Studio Code nutzen solltet: die benötigten Installationsdateien für euer Betriebssystem findet ihr hier zum Download: Visual Studio Code herunerladen*. *Unterstützt werden Window, Mac und Linux — sollte also für jeden was dabei sein. Da ich persönlich am Mac entwickle beziehen sich die weiteren Anleitungen auch auf Mac. Unter Windows/Linux sind dann nur die Tastenkombinationen anders…

Installation: Unter Mac OS X einfach das Archiv entpacken und die .app-Datei per Drag&Drop in das Programmverzeichnis verschieben — das war’s schon.

Mit diesen Plugins richtet ihr Visual Studio Code für Angular ein:

1) Linting mit TS-Lint nutzen

Das Problem kennen wohl 99% aller Entwickler: hier eine vergessene Klammer, da ein Vertipper und schon verbringt man kostbare Zeit damit die Nadel im Heuhaufen zu suchen, weil einem der Code um die Ohren fliegt – oder noch viel schlimmer: weil dem Kunden der Code um die Ohren fliegt.

Um solche Probleme zu vermeiden nutzt man Linting, d.h. die Überprüfung des Codes auf Validität schon beim tippen:

Linting TypeScript mit TS-Lint

TS-Lint für Visual Studio Code installieren

Unter Visual Studio Code mit ⌘+P (Apfel + P) VS Quick Open öffnen und die TS-Lint-Erweiterung suchen:

ext install tslint

Installieren und kurz Visual Studio Code neustarten und ab sofort nutzt ihr Linting für TypeScript 🔍

2) Module automatisch importieren

Dank ECMAScript6 lassen sich in JavaScript Module verwenden, wovon auch Angular Gebrauch macht. Auto Import stellt euch eine komfortable Funktion zur Verfügung, womit die Import-Befehle automatisch ergänzt werden:

Auto Import für Visual Studio Code

Auto Import für Visual Studio Code installieren

Unter Visual Studio Code mit ⌘+P (Apfel + P) VS Quick Open öffnen und die "Auto Import"-Erweiterung suchen:

ext install autoimport

Installieren und kurz Visual Studio Code neustarten und ab sofort nutzt ihr Auto Import 💁

3) Snippets für Angular2 und Angular4

Für die automatische Erzeugung von Angular-Code gibt es eine Erweiterung von @john_papa: Angular v4 TypeScript Snippets. Damit werden euch lästige Schreib-Arbeiten abgenommen:

Angular-Snippets Erweiterung

Snippets für Angular2 und Angular4 unter Visual Studio Code installieren

Unter Visual Studio Code mit ⌘+P (Apfel + P) VS Quick Open öffnen und die "Angular2"-Erweiterung suchen (nicht wundern, diese heißt inzwischen "Angular v4 TypeScript Snippets"):

ext install angular2

Installieren und kurz Visual Studio Code neustarten und ab sofort nutzt ihr die Angular-Code-Snippets 🚀

4) Import Cost

Diese Erweiterung ist wirklich genial! Ihr bekommt bei jedem Import automatisch angezeigt, wie groß die entsprechende Bibliothek ist und um welche Größe euer Projekt anwächst.

Import-Costs Erweiterung

Import Cost unter Visual Studio Code installieren

Unter Visual Studio Code mit ⌘+P (Apfel + P) VS Quick Open öffnen und die "Import Cost"-Erweiterung suchen:

ext install vscode-import-cost

Installieren und kurz Visual Studio Code neustarten und ab sofort nutzt ihr Import Cost 💰

5) Prettier - JavaScript formatter

Prettier tut genau das, was der Name vermuten lässt: es macht euren JavaScript-Code schön.

Dazu nutzt ihr den Shortcut ⌘+Shift+P (Apfel + Umschalttaste + P) und wählt entweder Format Document oder Format Selection um das ganze Dokument oder nur die Auswahl mit Prettier formatieren zu lassen.

Prettier Erweiterung

Prettier unter Visual Studio Code installieren

Unter Visual Studio Code mit ⌘+P (Apfel + P) VS Quick Open öffnen und die "Prettier"-Erweiterung suchen:

ext install prettier-vscode

Installieren und kurz Visual Studio Code neustarten und ab sofort nutzt ihr Prettier 💅


Theme-Empfehlung

Ich persönlich nutze für Visual Studio Code das Theme "Bimbo" von @pawelgrzybek

Bimbo Theme für Visual Studio Code

Bimbo Theme installieren

Die Installation ist kinderleicht: Unter Visual Studio Code mit ⌘+P (Apfel + P) VS Quick Open öffnen. In das Eingabefeld nun nach den Installationsdateien vom Theme suchen:

ext install bimbo-theme

An der linken Seite sollte sich nun eine Liste mit Erweiterungen öffnen. Hier beim Eintrag Bimbo Theme mit einem Klick auf Installieren die Installation starten. Danach kurz das Programm neu starten und schon ist das neue Theme installiert. 👏


Noch viel mehr Informationen zu Visual Studio Code

Wer sich noch etwas mehr mit Visual Studio Code beschäftigen möchte, findet bei Microsoft direkt sehr detaillierte Informationen.