16 Top-VS-Code-Erweiterungen für Webentwickler

Microsoft Visual Studio Code (VS Code) ist einer der besten Code-Editoren für Softwareentwickler. Seit seiner Veröffentlichung ist seine Popularität nicht nur wegen der stabilen Plattform, die es bietet, gestiegen, sondern auch wegen der erweiterbaren Natur, die Microsoft darin integriert hat. Der Marktplatz für Erweiterungen ist ein Füllhorn von Add-Ons und Funktionen, die es Entwicklern ermöglichen, VS Code an die Entwicklungsumgebung ihrer Träume anzupassen. Wir möchten einige der besten heute verfügbaren VS Code-Erweiterungen aufschlüsseln, damit Sie keine verpassen.

1. Sublime Text Keymap und Einstellungen Importer

Ganz oben auf unserer Liste steht der treffend betitelte Sublime Text Keymap and Settings Importer. Für den Fall, dass der Titel nicht beschreibend genug war, können Sie mit dieser Erweiterung Ihre vorhandenen Sublime Text-Keymaps und -Einstellungen abrufen, sodass Sie nahtlos in die Verwendung von VS Code als Standard wechseln können. Da so viele Leute Sublime lieben und Jahre damit verbracht haben, ist es sehr sinnvoll, VS Code dazu zu bringen, das verdiente Muskelgedächtnis von diesem Editor zu behalten.

2. JavaScript (ES6)-Code-Snippets

Die Eingabe von JavaScript (oder anderem Code) kann umständlich werden, wenn Sie dieselben Ausschnitte immer wieder wiederholen. Diese Erweiterung hilft, dies zu erleichtern, indem Sie im Grunde genommen Abkürzungen für häufig verwendete Codeschnipsel schreiben können. Beim Auslösen ersetzt das Snippet einfach den Text und fügt sich direkt in das Dokument ein.

3. Bracket-Paar Colorizer 2

Unabhängig von der Sprache, die Sie codieren, werden Klammern wahrscheinlich ein wichtiger Teil davon sein. Und sie gerade zu halten, kann Kopfschmerzen bereiten. Aber mit dieser VS Code-Erweiterung können Sie die passenden Paare farblich codieren, um diesen Schwachpunkt zu lindern und daran zu arbeiten, dass der Code selbst funktioniert – nicht der Editor.

4. ESLint

ESLint ist in vielerlei Hinsicht der Linter für JavaScript. Fehler zu erkennen und Ihnen sofortiges Feedback und Warnungen zu geben, ist unerlässlich, um den Code Ihres Teams sauber zu halten, und es gibt wirklich keine bessere Möglichkeit, dies in JS zu tun, als ESLint. Wir empfehlen dringend, diesen so schnell wie möglich zu installieren.

5. Projektmanager

Ein ziemlich häufig auftretendes Problem bei VS Code ist der Wechsel zwischen verschiedenen Projekten. Standardmäßig ist der Ablauf nicht gerade der intuitivste. Der Projektmanager arbeitet also daran, dieses Problem zu beheben, indem er Ihnen ein Menü in der Seitenleiste zur Verfügung stellt, mit dem Sie verschiedene Ordner und Git-Projekte speichern können, zwischen denen Sie einfach wechseln können. Dies ist weniger eine Verbesserung des Editors als vielmehr eine Verbesserung der Lebensqualität.

6. Browservorschau

Eines der anstößigeren Elemente der Webentwicklung ist das Laden und Aktualisieren Ihrer Inhalte in verschiedenen Browsern zum Testen. Die Browservorschau hilft Ihnen dabei, den dafür erforderlichen Umfang zu begrenzen, indem Sie eine solide Vorschau Ihrer Arbeit in VS Code selbst in einem neuen Chrome-Prozess erhalten.

7. Hübscher

Wir alle wollen schöneren Code. Also sollten wir wahrscheinlich alle Prettier installieren, um das für uns zu erledigen. Die Beschreibung beschreibt Prettier als „einen stimmigen Codeformatierer, er erzwingt einen konsistenten Stil, indem er Ihren Code analysiert und ihn mit seinen eigenen Regeln erneut druckt, die die maximale Zeilenlänge berücksichtigen und den Code bei Bedarf umschließen“. Möglicherweise möchten Sie es nicht für jede Sprache oder jedes Projekt verwenden, daher gibt es viele Konfigurationseinstellungen, damit Sie es nach Ihren Wünschen anpassen können.

8. gitlink

Wir mögen gitlink wegen seiner Einfachheit. Obwohl es viele Git-Erweiterungen gibt, ist eines der Dinge bei gitlink, dass es einfach ist und nur eine Sache macht. Und es tut gut. Markieren Sie einfach ein Code-Snippet, und gitlink führt Sie dann zum Online-Repository für dieses bestimmte Snippet. Es ist unglaublich nützlich, schnell zu Ihrem Repository zu wechseln, egal wo es remote gehostet wird.

9. Bessere Kommentare

Das Kommentieren Ihres Codes ist eine der wichtigsten Gewohnheiten, die ein Entwickler haben kann. Darüber hinaus ist das gute Kommentieren Ihres Codes eine Fähigkeit, die in jedem Informatikunterricht und jedem Programmier-Bootcamp gelehrt werden sollte. Das heißt, Better Comments ist eine dieser VS-Code-Erweiterungen, die jeder braucht, da Sie damit, wenn Sie dem Namen glauben, bessere Kommentare in Ihrem Code hinterlassen können. Mit Shortcuts, mit denen Sie zwischen Fragen, Ausrufen, auskommentiertem Code, Abfragen, Warnungen, Hervorhebungen und TODOs unterscheiden können, wird diese Erweiterung nicht nur Ihr Leben erleichtern, sondern auch das Leben Ihres Teams. Und jeder Entwickler, der im Projekt nach Ihnen kommt. Wir können dies nicht genug empfehlen.

10. VS-Code-Symbole

Ein Großteil der Anpassung von VS Code mit Erweiterungen ist die eigentliche Anpassung. Nicht nur die Funktionalität ändert sich. Mit VS Code Icons wird der Editor etwas bunter und einfacher zu navigieren. Das Dateisystem ist mit Symbolen versehen, die verschiedene Dateitypen darstellen, und diese werden sowohl im Explorer als auch in den Dokumentregisterkarten selbst angezeigt. Es macht das Arbeiten durch komplizierte Dateisysteme viel einfacher und weniger lästig. Buchstäblich manchmal. Die gut lesbare Icons beugt Überanstrengung der Augen und damit Kopfschmerzen vor. Installieren Sie also für Ihre Gesundheit VS Code Icons.

11. Auto-Close-Tag

Vielleicht sind wir es, aber das Eintippen der schließenden Tags für jede Sprache wird zu einer solchen lästigen Pflicht. Es gibt nur etwas beim Hinzufügen von / am Ende, das dazu führt, dass sich die Tastenanschläge ein wenig falsch anfühlen. Hab niemals Angst. Auto Close Tag hat unser Leben einfacher gemacht. Deshalb möchten wir es Ihnen leichter machen. Es ist einfach und leicht, und Sie können zwischen ihnen tippen und einfach die Tastenkombination zur nächsten Zeile oder zum Ende dieser Zeile drücken. Installieren Sie dies und gönnen Sie Ihren Fingern eine Pause von der Gymnastik des manuellen Schließens von Tags.

12. kolorieren

CSS ist super. Das Auswählen von Farben in CSS ist es nicht. Wenn Sie mit Hex-Codes und RGBA-Werten arbeiten, ist es manchmal schwierig, sich ein Bild davon zu machen, welche Palette Sie für eine Site eingestellt haben. Diese Erweiterung hilft, dies zu lindern, indem sie eine visuelle Notiz für alle Farbcodes bereitstellt, die Sie in Ihren Dateien verwenden. Sie können die Farben, die Sie im Text selbst verwenden, als Hervorhebung sehen, damit Sie nicht ständig zwischen Farbfeldern und Farbauswahlen usw. wechseln müssen.

13. Polacode

Polacode ist wie eine Polaroid-Kamera für Ihren Code-Editor. Entwickelt, um das Snapshoting Ihres Codes sauberer und einfacher zu machen, ist dies ein Muss für alle Tutorial-Autoren, die möchten, dass ihr Code genau richtig ist.

14. GitLens

Es ist schwer zu erklären, was GitLens so großartig macht. Es funktioniert, als ob Git und VS Code aufeinander abgestimmt wurden, und anstatt sich durch Befehlszeilenhierarchien zu arbeiten, erhalten Sie Visualisierungen und Einblicke, die viel Verwirrung aus der Git-Arbeit im Team nehmen. Sie können Dinge per Mauszeiger anzeigen, aktuelle Änderungen und Anmerkungen, Vergleichsansichten innerhalb von VS Code selbst, Heatmaps, Linienverlauf und vieles mehr anzeigen. Es ist im Grunde die perfekte Git-Erweiterung, und wir denken, dass Sie sie sofort installieren sollten.

15. Live-Server

Wollten Sie schon immer einen lokalen Entwicklungsserver aus Ihrer IDE heraus starten und in Echtzeit daran arbeiten? Egal, wie Sie diese Frage beantwortet haben, Sie werden Live Server eine Chance geben wollen. Denn genau das kannst du damit machen. Während es die Notwendigkeit von Produkten wie Local by Flywheel und MAMP möglicherweise nicht vollständig beseitigt, reduziert es in vielen Situationen ihre Notwendigkeit.

16. Verschönern

Beautify verwendet das beliebte js-beautify , damit Ihr JavaScript schön und ordentlich aussieht . Machen Sie sich keine Sorgen über unterbrochene Linien und seltsame Abstände und Einzüge. Klicken Sie einfach auf eine Schaltfläche, und Ihr gesamter Code ist bereit für die Nahaufnahme (vielleicht mit Polacode von oben).

Abschluss

Diese Liste kann Tausende von Elementen lang sein. Tatsächlich gibt es wahrscheinlich einige von Ihnen, die Hunderte von verschiedenen Erweiterungen installiert haben, die Sie zu verschiedenen Zeiten aktivieren und deaktivieren. Aber wir glauben, dass dies die VS Code-Erweiterungen sind, die Sie installieren und dann lernen können, was Sie sonst noch wollen, während Sie tiefer in den Markt eintauchen.

Was sind Ihre bevorzugten VS Code-Erweiterungen? Lass es uns in den Kommentaren wissen!

Beitragsbild des Artikels von SVIATLANA SHEINA / shutterstock.com