Die 10 besten VS Code-Erweiterungen von 2018 für Front-End-Entwickler

Visual Studio Code kann wahrscheinlich als der beste moderne Code-Editor bezeichnet werden. Wenn Sie noch nicht mit ihm arbeiten, sollten Sie ihn zumindest ansehen. Für VS Code wurden sehr viele Erweiterungen geschrieben, die im Marketplace- Verzeichnis abgelegt sind und auf die der Editor selbst bequem zugreifen kann.

Es gibt Erweiterungen zum Debuggen und Formatieren von Code, Erweiterungen, die die Arbeit mit verschiedenen Plattformen (wie Heroku, GitHub, Docker, Azure) und Technologien erleichtern. Auf dem Marktplatz finden Sie Themen für den Editor, Linter, Tools zur Erleichterung der Eingabe sich wiederholender Codefragmente und vieles mehr.



Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, hat die 10 besten VS-Code-Erweiterungen ausgewählt, die in erster Linie für diejenigen gedacht sind, die sich mit Front-End-Entwicklung beschäftigen, dh mit HTML, CSS, JavaScript und verschiedenen Web-Frameworks arbeiten.

Vorläufige Informationen

Wenn Sie noch nicht mit VS Code gearbeitet haben, diesen Editor jedoch ausprobieren möchten, können Sie ihn hier herunterladen. Aber bei Interesse ein Material, in dem seine Fähigkeiten demonstriert werden.

Öffnen Sie nach dem Herunterladen und Installieren von VS Code das Erweiterungsfenster.


Verlängerungsplatte

Suchen Sie als Nächstes im Suchfeld die gewünschte Erweiterung, lesen Sie die Informationen dazu und installieren Sie sie, wenn Sie entscheiden, dass Sie sie benötigen. Erweiterungssuchwerkzeuge sehen wie im Bild unten aus.


Suchen Sie im Marketplace nach Erweiterungen für VS-Code

Lassen Sie uns nun über Erweiterungen sprechen.

Live Server

Live Server-Erweiterung

Diese wunderbare Erweiterung wurde entwickelt, um einen lokalen Server zu erstellen, der während der Entwicklung zum Hosten statischer und dynamischer Seiten verwendet wird. Nach der Installation dieser Erweiterung wird in der Taskleiste die Schaltfläche Go Live angezeigt, mit der Sie den Server starten können. Durch Drücken dieser Schaltfläche beim Bearbeiten einer HTML-Seite wird diese Seite in einem Browser geöffnet. Der Server unterstützt das interaktive Neuladen von Seiten, das ausgeführt wird, nachdem Änderungen am Code vorgenommen und die entsprechenden Dateien gespeichert wurden.

Live Sass Compiler

Live Sass Compiler Erweiterung

Diese Erweiterung kompiliert interaktiv SCSS-Dateien in CSS-Dateien. Dies ist sehr schnell erledigt. Sie können eine Vorschau der Ergebnisse der Anwendung kompilierter Stile in einem Browser über die Schaltfläche "Mein Sass beobachten" in der Taskleiste starten. Diese Erweiterung unterstützt, wie bereits erwähnt, das interaktive Nachladen von Materialien.

Javascript (ES6) Code Snippets

Javascript Extension (ES6) Code Snippets

Diese Erweiterung ist insofern bemerkenswert, als sie mehr als 2 Millionen Downloads hat und anscheinend ihre Popularität nur mit der Zeit zunimmt. Es stellt dem Entwickler Software-Konstrukte (Snippets) zur Verfügung, die für die Verwendung in den folgenden Dateitypen geeignet sind:

• TypeScript (.ts)
• JavaScript-Reaktion (.jsx)
• TypeScript React (.tsx)
• HTML (.html)
• Vue (.vue)

NPM

NPM-Erweiterung

Dies ist die offizielle Node Package Manager-Erweiterung (npm) für VS Code. Es macht es einfach, mit der Datei package.json zu arbeiten. Insbesondere werden Warnungen zu Abhängigkeiten angezeigt, die in der Datei wiedergegeben, aber nicht installiert sind, sowie zu solchen, die installiert, aber nicht in package.json registriert sind. Es hilft, Pakete zu identifizieren, deren Versionen nicht den in package.json angegebenen Regeln entsprechen, und bietet dem Entwickler praktische Tools zum Ausführen von npm-Befehlen.

ESLint

ESLint-Erweiterung

Diese Erweiterung bietet Flusenfunktionen für .js- und .jsx-Dateien. Es ist konfigurierbar und ermöglicht eine einheitliche Code-Formatierung. ESLint kann mit seinen fast 12 Millionen Downloads als eine der beliebtesten Erweiterungen für VS Code bezeichnet werden.

Schöner

Schönere Erweiterung

Diese sehr beliebte Erweiterung bietet fast vier Millionen Downloads. Es hilft beim Formatieren von JavaScript-Code, wodurch eine einheitliche Codebasis beibehalten und die Lesbarkeit von Programmen verbessert werden kann. Es gibt eine ähnliche Erweiterung auf dem Marktplatz, Beautify, die ebenfalls sehr beliebt ist.

CSS Peek

CSS Peek Extension

Diese nützliche Erweiterung ist nützlich, wenn Sie mit dem Seitenlayout arbeiten, anhand von Klassennamen und Elementkennungen Stile identifizieren und ableiten, die auf sie angewendet werden. Dies spart Zeit, da der Entwickler nicht mehr ständig zwischen HTML- und CSS-Dateien wechseln muss. Natürlich können solche Aufgaben gelöst werden, indem die entsprechenden Dateien im Split-Screen-Modus angezeigt werden, aber nicht jeder arbeitet gerne in diesem Stil.

Winkel 6 Schnipsel

Angular 6 Snippets Erweiterung

Dies ist die offizielle Erweiterung, die Entwicklern Snippets für Angular 6 bietet. Der entsprechende Code folgt dem Angular-Styleguide. Die Verwendung dieser Erweiterung beschleunigt den Entwicklungsprozess von Angular-Projekten, insbesondere aufgrund der Code-Vervollständigung. Es unterstützt TypeScript, Service Worker-Syntax, RxJS, ngRx und sogar Angular Material. Wenn Sie Angular-Anwendungen in VS Code entwickeln und diese Erweiterung noch nicht verwenden, sollten Sie sie sich unbedingt ansehen.

Vetur

Vetur-Erweiterung

Dies ist die offizielle Vue.js-Erweiterung für VS Code mit einer beeindruckenden Anzahl von Downloads, von denen es mehr als 5 Millionen gibt. Es soll die Entwicklung von Vue.js-Anwendungen erleichtern. Vetur kann den Code auf Fehler überprüfen, unterstützt die automatische Vervollständigung und Snippets.

Debugger für Chrome

Debugger für Chrome Extension

Dies ist die offizielle Erweiterung für VS Code, die zum Debuggen von JS-Code mit Google Chrome entwickelt wurde. Es ist derzeit eine der am häufigsten verwendeten VS-Code-Erweiterungen.

Zusammenfassung

Wir haben nur ein Dutzend Erweiterungen auf VS Code untersucht, aber tatsächlich gibt es viele davon. Es ist durchaus möglich, dass Sie beim Durchsuchen des Marketplace-Katalogs dort etwas finden, das Ihnen viel nützlicher erscheint als die besprochenen Erweiterungen. Die meisten davon können jedoch für jeden Front-End-Entwickler eine große Hilfe sein. Wir hoffen, dass sie auch für Sie nützlich sind.

Wenn Sie sich für das Thema Erweiterungen für VS Code interessieren, finden Sie hier ein weiteres Material zu diesen Themen, das sich an JS-Entwickler richtet. Durch die Veröffentlichung dieses Materials haben wir den Lesern eine Frage gestellt, welche Erweiterungen sie verwenden. Dann stellte sich heraus, dass dies Code Outline, Todo Tree und GitHub sind. Heute, liebe Leser, möchten wir Ihnen dieselbe Frage stellen. Welche Erweiterungen für VS Code mögen Sie?