Nützliche VS-Code-Erweiterungen für Front-End-Entwickler

Wir verbringen so viel Zeit in unseren Texteditoren und stoßen hin und wieder auf diese kleinen frustrierenden Probleme, die uns ausbremsen. Vielleicht dauert das Finden der richtigen Datei zu lange, oder das Finden einer passenden schließenden Klammer wird zu einem langatmigen Abenteuer.

Lassen Sie uns all diese Ärgernisse für immer beheben. In diesem Beitrag sehen wir uns nützliche VS Code-Erweiterungen für die Front-End-Entwicklung an, von feinen Produktivitätsboostern bis hin zu fortschrittlichen Debugging-Helfern.

Inhaltsverzeichnis

Unten finden Sie schnelle Sprünge zu bestimmten Erweiterungen, die Sie möglicherweise benötigen. Scrollen Sie nach unten für eine allgemeine Übersicht. Oder überspringen Sie das Inhaltsverzeichnis.

• Protokollmeldungen automatisieren
• Bündelgröße
• Codeformatierung
• Code-Screenshots
• Codeschnipsel (React, Vue, TypeScript)
• benutzerdefinierte Schnipsel
• Bemerkungen
• Debuggen
• DevTools
• Datei-Dienstprogramme
• Datei-Tags und Labels
• Ordnersymbole
• Schriftarten zum Codieren
• Git
• Git-Geschichte
• Anmerkungen hervorheben
• Klammern und Tags hervorheben
• Heben Sie schädliche Charaktere hervor
• Einzüge hervorheben
• Stapelkontexte hervorheben
• Arbeitsbereiche hervorheben
• IntelliCode
• Onboarding
• Öffnen Sie GitHub schnell
• Haustiere
• schnelles JS/TS-Prototyping
• Remote-SSH-Zugriff
• Sass-Zusammenstellung
• Tipps und Tricks

Protokollmeldungen automatisieren

Wenn es um Log-Meldungen geht, hält Ihnen die Turbo-Console-Log-Erweiterung den Rücken frei. Es automatisiert den Vorgang des Schreibens aussagekräftiger Protokollmeldungen und fügt sie automatisch ein.

Alles, was Sie tun müssen, ist die Variable auszuwählen, die Sie debuggen möchten, drücken Sie Strg + Alt + L , und die Protokollnachricht wird in die nächste Zeile eingefügt. Mit Tastaturkürzeln können Sie alle Protokollmeldungen aus dem aktuellen Dokument kommentieren, auskommentieren oder löschen.

Bündelgröße unter Kontrolle halten

Wir alle wissen, dass Leistung wichtig ist, aber in der Praxis kann es eine ziemliche Herausforderung sein, sie beim Schreiben von Code nicht aus den Augen zu verlieren. Um Ihre Bundle-Größe unter Kontrolle zu halten, lässt Sie die Import Cost-Erweiterung sofort wissen, ob Sie ein kräftiges Paket in Ihr Projekt importieren.

Import Cost ist kein Bundle-Analyse-Tool, sondern wurde mit der Idee entwickelt, Ihnen dabei zu helfen, mögliche Leistungsengpässe zu finden, bevor Sie sie an Ihre Benutzer senden. Dazu gibt es Ihnen sofortiges Feedback, indem es die Größe einer importierten Bibliothek eines Drittanbieters während des Imports direkt neben Ihrer Codezeile anzeigt. Ein praktischer kleiner Helfer.

Codeformatierung, automatisiert

Beim Schreiben von Code geht viel Zeit in die Formatierung. Prettier automatisiert die Aufgabe für Sie. Es entfernt alle ursprünglichen Stile und stellt sicher, dass der ausgegebene Code einem konsistenten Stil entspricht.

Prettier analysiert Ihren Code und formatiert ihn mit seinen eigenen Regeln neu , wobei die maximale Zeilenlänge berücksichtigt und der Code bei Bedarf umgebrochen wird. Sie entscheiden, ob Sie es auf alle Sprachen anwenden möchten, oder Sie können alternativ diejenigen, die Sie formatieren möchten, manuell definieren. Auch eine großartige Lösung für Teams, die Schwierigkeiten haben, einen gemeinsamen Styleguide zu finden.

Nützliche Codeschnipsel (React, Vue, TypeScript, jQuery)

Sind Sie es leid, die Snippets , die Sie häufig benötigen, immer und immer wieder neu zu tippen? Hier sind einige praktische kleine Helfer, die die Arbeit erleichtern. Sehen Sie sich für Vue unbedingt die Erweiterung Vue.js VS Code Snippets von Sarah Drasner an. Es wurde für den Einsatz in der realen Welt entwickelt und konzentriert sich auf Entwickler-Ergonomie, anstatt API-Definitionen zu katalogisieren.

Burke Holland stellt Ihnen eine Sammlung wesentlicher React-Schnipsel und -Befehle zur Verfügung, die er aus seiner täglichen React-Nutzung ausgewählt hat. Und wenn Sie nach Winkelschnipseln suchen, sind Sie bei John Papa genau richtig. Seine Erweiterung fügt Ihrem VS Code-Setup Snippets für Angular für TypeScript und HTML hinzu.

Diese beiden könnten sich auch als nützlich erweisen: Die JavaScript-Code-Snippets-Erweiterung von Charalampos Karypidis enthält Schnipsel in ES6-Syntax und unterstützt sowohl JavaScript als auch TypeScript. Und nicht zuletzt enthalten die jQuery-Code-Snippets von Don Jayamanne über 130 jQuery-Snippets. Geben Sie nach der Installation einfach jq ein, um eine Liste aller zu erhalten.

Apropos Snippets: Wenn Sie eine gute Snippets-Bibliothek bevorzugen, anstatt sie selbst von Grund auf neu zu definieren, stehen Ihnen diese Sammlungen zur Seite:

• Zugänglichkeitsausschnitte
• ES7 React/Redux/GraphQL/React-Native
• CSS
• CSS-Raster
• HTML
• Node.js
• JavaScript (ES6)
• Winkel 10
• Vue.js + TypeScript
• WordPress
• WordPress Gutenberg
• PHP
• PHP-Tools
• Schlank
• TensorFlow

Schreiben Sie Ihre eigenen Codeschnipsel

Es gibt viele Code-Snippet-Plugins für verschiedene Sprachen, aber haben Sie sich jemals gefragt, wie Sie Ihre eigenen Snippets in VS Code definieren können? Maurice Borgmeier hat alles zusammengefasst, was Sie für den Einstieg wissen müssen.

Ein weiterer großartiger Artikel zu diesem Thema stammt von Rob O'Leary. Er geht tiefer darauf ein, wann und warum man Snippets verwendet, geht genauer auf verschiedene Arten von Snippets ein, wie VS Code damit umgeht und nicht zuletzt natürlich, wie man eigene schreibt.

Code-Screenshots, The Fancy Way

Seien wir ehrlich, gut aussehende Code-Screenshots zu machen kann eine Herausforderung sein. Polacode ist hier, um das zu ändern.

Polacode wird als „Polaroid für Ihren Code“ bezeichnet und ermöglicht es Ihnen , Screenshots Ihres Codes direkt in VS Code zu erstellen und zu bearbeiten . Sie können die Größe des Containers des Codes ändern, indem Sie an der Ecke ziehen, und Befehle verwenden, um das Erscheinungsbild des Bilds zu steuern. Eine großartige Lösung, um den Code, mit dem Sie so viele Stunden verbracht haben, im besten Licht erstrahlen zu lassen – zum Beispiel in Blogbeiträgen oder Präsentationen.

Menschenfreundliche Kommentare

Wie gehen Sie mit Kommentaren um? Wenn Ihr Code viele Erklärungen erfordert, ist es möglicherweise eine gute Idee, diese normalerweise ausgegrauten Kommentare benutzerfreundlicher zu gestalten, damit Sie auf einen Blick leichter erkennen können, ob ein Kommentar Sie auf eine veraltete Methode hinweist, z. oder wenn es eine Aufgabe ist, die Ihr Teamkollege für Sie hinterlassen hat.

Die VS Code-Erweiterung Better Comments hilft Ihnen dabei, indem Sie Anmerkungen in Warnungen, Abfragen, Aufgaben, Highlights und mehr kategorisieren. Auskommentierter Code kann auch so gestaltet werden, dass deutlich wird, dass er nicht vorhanden sein sollte.

Chrome-Debugging im VS-Code

Verwenden Sie Chrome und wechseln beim Debuggen zwischen dem Browser und Ihrem Editor hin und her? Dann sollten Sie vielleicht den VS Code Chrome-Debugger ausprobieren. Es hilft Ihnen beim Debuggen von clientseitigem JavaScript-Code, der in Chrome direkt aus VS Code ausgeführt wird.

Der Debugger stellt über sein Chrome-Debugger-Protokoll eine Verbindung zu Chrome her, wo er im Browser geladene Dateien den Dateien zuordnet, die Sie in VS Code geöffnet haben. Ohne den Editor zu verlassen, können Sie also Breakpoints in Ihrem Quellcode setzen, zu überwachende Variablen einrichten und beim Debuggen den vollständigen Call-Stack sehen. Ein kleines Tool, um Ihre Debugging-Routine einfacher zu machen.

DevTools für die VSCode-Erweiterung

Wäre es nicht cool, DevTools in Ihren Code-Editor integriert zu haben, sodass Sie nicht zwischen den beiden hin und her wechseln müssen? Wenn Sie VSCode und Edge verwenden, macht eine kleine Erweiterung dies möglich.

Die Erweiterung zeigt das Element- und Netzwerk-Tool des Browsers in VSCode und gibt Ihnen die Möglichkeit, die Laufzeit-HTML-Struktur anzuzeigen, Stil und Layout zu ändern, Diagnosen durchzuführen und Ihr Projekt zu debuggen – ohne den Editor zu verlassen. Übrigens hat Rachel Weil vor einigen Wochen auf der SmashingConf San Francisco einige praktische DevTools-Tipps für die Arbeit mit Chromium-basierten Browsern wie Edge und Chrome geteilt. Schalten Sie unbedingt die Aufzeichnung ein, um Ihre DevTools-Fähigkeiten auf die nächste Stufe zu bringen.

Dateiverwaltungsprogramme für VS Code

In der Regel wird viel Zeit für das Organisieren und Verwalten von Dateien aufgewendet. File Utils macht die Aufgabe bequemer.

Mit der Erweiterung können Sie Dateien und Verzeichnisse mit nur wenigen Befehlen erstellen, duplizieren, verschieben, umbenennen und löschen. Es unterstützt auch die Klammererweiterung, die automatisch beliebige Zeichenfolgen generiert, um Ihre Dokumentstruktur einzurichten.

Hinzufügen von Tags zu Dateien in Ihrem Editor

Um in großen Projekten eine bestimmte Variante eines Bauteils oder einfach nur die richtige Datei zu finden, müssen Sie die Datei kennen, nach der Sie tatsächlich suchen. Aber was wäre, wenn Sie Lesezeichen oder Labels zu bestimmten Dateien hinzufügen könnten, damit Sie sie schneller finden könnten?

File Ops VS Code Extension ermöglicht es Ihnen, Dateien zu taggen und zu aliasieren und dann schnell zwischen ihnen zu wechseln. Sie können auch schnell alle Tags auflisten, falls Sie den Überblick verlieren, alle Dateien aus dem aktuellen Verzeichnis anzeigen und zwischen .css- und .js-Dateien im selben Ordner wechseln. Sie können sich auch das Video ansehen, in dem erklärt wird, wie alles funktioniert. Das wird sich jetzt als nützlich erweisen!

Ordnersymbole im VS-Code

Benutzerdefinierte Datei- und Ordnersymbole in VS Code? Ja bitte! Um Ihnen zu helfen, Ihren Arbeitsbereich einfacher zu manövrieren, selbst wenn viele Dateien und Ordner betroffen sind, hat das VS Code Icons Team eine Erweiterung veröffentlicht, die Symbole in Ihren Editor bringt. Von „access“ bis „zip“, von „Android“ bis „www“ enthält die Sammlung mit Sicherheit die Datei- und Ordnersymbole, die Sie benötigen.

Die projektspezifische Symbolumschaltfunktion und die automatische Projekterkennung erkennen automatisch den Projekttyp, den Sie in Ihrem Arbeitsbereich geöffnet haben, und fordern Sie auf, die Symbole entsprechend umzuschalten. Es ist auch möglich, benutzerdefinierte Symbole zu verwenden, wenn Sie dies bevorzugen.

Monospaced Schriftarten für die Codierung

Programmierschriften sind sicherlich die Arbeitspferde in der Typografie. Sie müssen eine hervorragende Lesbarkeit bieten, schnelles Scannen von Text ermöglichen und eine Belastung der Augen verhindern, selbst wenn ein Entwickler stundenlang auf den Code schaut. Um Ihnen bei der Suche nach einer Programmierschriftart zu helfen, die Ihren Anforderungen entspricht, stellt Chris Coyier Coding Fonts zusammen, eine Auswahl von mehr als 30 (meist kostenlosen) monospaced Schriftarten, die alle diese Kriterien erfüllen.

Um die Entscheidung zu erleichtern, enthält jede Schriftart eine kurze Beschreibung, eine Übersicht aller Zeichen sowie HTML-, CSS- und JavaScript-Codebeispiele im Tag- und Nachtmodus. Mostafa Gaafar unterhält eine ähnliche Liste von Schriftarten für Entwickler mit der Option, die Codebeispiele auch in anderen Farbschemata anzuzeigen. Um benutzerdefinierte Schriftarten zu VS Code hinzuzufügen, müssen Sie die Schriftart in „Einstellungen“ definieren.

Git Supercharged

Eine nützliche Erweiterung, um die in VS Code integrierten Git-Funktionen aufzuladen, ist GitLens. Um den Code, an dem Sie arbeiten, besser zu verstehen, gibt Ihnen GitLens einen Einblick, wer, warum und wann eine Zeile oder ein Codeblock geändert wurde.

Die Erweiterung visualisiert die Code-Autorenschaften auf einen Blick, hilft Ihnen beim nahtlosen Navigieren und Erkunden von Git-Repositories, gewinnt wertvolle Einblicke über Vergleichsbefehle und vieles mehr. Alles, was Sie über Ihre Codebasis wissen müssen, haben Sie direkt zur Hand, ohne den Editor verlassen zu müssen.

Git-Verlauf im VS-Code

Anzeigen und Durchsuchen des Git-Protokolls zusammen mit dem Diagramm und den Details, Anzeigen einer früheren Kopie der Datei, an der Sie gerade arbeiten, Durchsuchen des Verlaufs , Vergleichen von Branches und Commits – dies sind nur einige der Funktionen, die die Git-Verlaufserweiterung zur Optimierung bietet Ihr Arbeitsablauf.

Apropos Git: Eine weitere VS-Code-Erweiterung, die es wert ist, bei der Arbeit mit Git näher betrachtet zu werden, ist Git Graph: Damit können Sie ein Git-Diagramm Ihres Repositorys anzeigen und Git-Aktionen einfach aus dem Diagramm heraus ausführen.

Markieren Sie Anmerkungen in Ihrem Code

Vergessen Sie manchmal, die Aufgaben zu überprüfen, die Sie beim Programmieren hinzugefügt haben? Die TODO-Highlight-Erweiterung erinnert Sie daran, dass es Notizen oder Dinge gibt, die Ihre Aufmerksamkeit erfordern, bevor Sie sie für die Produktion veröffentlichen.

Die Schlüsselwörter TODO und FIXME sind vorkonfiguriert, aber Sie können die Konfiguration nach Ihren Wünschen anpassen , wenn Sie dies bevorzugen. Ein Befehl hebt die offenen Kommentare für Sie direkt in Ihrem Code oder als Liste aller Anmerkungen hervor. Eine tolle kleine Erinnerung.

Hervorhebung passender Klammern und Tags

Eine intensive Coding-Session strapaziert die Augen, daher ist alles, was für mehr visuelle Klarheit sorgt, ein willkommener Helfer. Um Ihre Syntaxhervorhebung bei der Arbeit mit VS Code auf die nächste Stufe zu heben, sollten Sie sich den Bracket Pair Colorizer ansehen. Die Erweiterung identifiziert passende Klammern – in von Ihnen definierten Farben.

Jetzt, da Sie die volle Kontrolle über Ihre Klammern haben, ist ein weiteres kleines Detail, auf das Sie achten sollten, die übereinstimmenden öffnenden und schließenden Tags. VS Code verfügt bereits über eine Tag-Matching-Funktion, die jedoch eher einfach ist. Die Highlight Matching Tag-Erweiterung erledigt die Arbeit gründlicher, indem sie Tags überall abgleicht – von Tag-Attributen bis hin zu inneren Zeichenfolgen – und sogar den Pfad von Tag zu Tag in der Statusleiste hervorhebt. Mit umfangreichen Gestaltungsoptionen können Sie anpassen, wie Tags hervorgehoben werden. HTML und JSX werden offiziell unterstützt.

Schädliche Zeichen aufdecken

Leerzeichen ohne Breite und Nicht-Joiner, geschützte Leerzeichen, doppelte Anführungszeichen links und rechts – beim Codieren können einige Zeichen schädlich sein, weil sie unsichtbar sind oder wie legitim aussehen. Gremlins Tracker findet sie für Sie.

Gremlins Tracker verwendet ein Farbschema, um Sie auf schädliche, potenziell schädliche und weniger schädliche Zeichen aufmerksam zu machen . Zeilen, die ein solches Zeichen enthalten, sind mit einem Gremlins-Symbol gekennzeichnet, und wenn Sie den Cursor über das Zeichen bewegen, erhalten Sie einen Hinweis auf das potenzielle Problem. Wenn Sie möchten, können Sie neue Gremlins-Zeichen hinzufügen oder sie für eine bestimmte Sprache überschreiben.

Einzug hervorheben

Die Einrückung ist der Schlüssel, um sicherzustellen, dass Ihr Code schnell gescannt werden kann. Ein praktisches kleines Plugin, das Einzüge noch besser lesbar macht, ist Indent-Rainbow. Es färbt den Einzug vor Ihrem Text abwechselnd in vier verschiedenen Farben ein und markiert die Zeilen, in denen der Einzug kein Vielfaches der Tabulatorgröße ist.

Das Hervorheben von Fehlern ist zwar nützlich, es gibt jedoch Fälle, in denen es Ihnen im Weg stehen könnte. Zum Beispiel beim Umgang mit RegEx-Mustern. Glücklicherweise können Sie mit Indent-Rainbow die Fehlerhervorhebung auf diesen deaktivieren, genau wie auf Kommentarzeilen, und wenn Sie möchten, können Sie sie sogar für ganze Sprachen überspringen.

Visualisierung von Stapelkontexten

Haben Sie Schwierigkeiten, Stapelkontexte zu erkennen, wenn Sie z-index verwenden? Du bist nicht allein! Wenn Sie manchmal feststellen, dass Sie einen z-index für ein Element auf eine Milliarde setzen und es sich in Ihrer Stapelreihenfolge nicht vorwärts bewegt, ist CSS Stacking Contexts genau das Richtige für Sie.

Die Erweiterung macht Stapelkontexte in CSS und SCSS sichtbar, sodass Sie beim Schreiben von z-index Deklarationen getrost kleine Werte verwenden können. Darüber hinaus wird es Ihnen auch mitteilen, wenn eine z-index Deklaration keine Wirkung hat, und schnelle Lösungen anbieten.

Benutzerdefinierte Farben, um Arbeitsbereiche voneinander zu unterscheiden

Wenn Sie häufig mehrere VS Code-Instanzen geöffnet haben und Schwierigkeiten haben, sie voneinander zu unterscheiden, lohnt es sich möglicherweise, Peacock genauer zu betrachten: Die Erweiterung ändert auf subtile Weise das Farbthema Ihres Arbeitsbereichs .

Aber nicht nur bei der Arbeit an mehreren Projekten gleichzeitig glänzt Peacock. Es ist auch praktisch, wenn Sie die Remote-Funktionen von VS Live Share oder VS Code verwenden und Ihren Editor schnell identifizieren möchten.

IntelliSense: KI-unterstützte Entwicklungsfunktionen

Die IntelliCode-Erweiterung bietet KI-unterstützte Entwicklungsfunktionen für Python-, TypeScript/JavaScript- und Java-Entwickler in Visual Studio Code mit Erkenntnissen, die auf dem Verständnis Ihres Codekontexts in Kombination mit maschinellem Lernen basieren.

Die Erweiterung bietet KI-unterstütztes IntelliSense und zeigt Ihnen empfohlene Elemente für die automatische Vervollständigung für Ihren Codekontext oben in der Vervollständigungsliste an. Wenn es um Überladungen geht, geht es nicht durch die alphabetische Liste der Mitglieder, sondern präsentiert Ihnen das relevanteste zuerst. Sie müssen nicht mehr selbst durch die Liste suchen.

Geführtes Onboarding für Ihre Codebasis aufzeichnen

Eine große Codebasis kann einschüchternd wirken. CodeTour versucht das zu ändern. Mit der Erweiterung können Sie geführte Walkthroughs Ihrer Codebasen direkt im Editor aufzeichnen und wiedergeben . Stellen Sie es sich als Inhaltsverzeichnis vor, das es einfacher macht, in ein neues Projekt oder einen neuen Funktionsbereich einzusteigen oder wieder einzusteigen, Fehlerberichte zu visualisieren oder den Kontext einer Codeüberprüfung zu verstehen.

Um eine Codetour zu erstellen, können Sie Codezeilen kommentieren (Markdown wird unterstützt) und durch so viele Dateien navigieren, wie Sie benötigen, und der Rekorder erfasst die Sequenz. Die Touren können in ein Repo eingecheckt oder in eine „Tour“-Datei exportiert werden, sodass jeder sie abspielen kann, ohne Code klonen zu müssen. Praktisch!

Von GitHub zu VS Code in einer Sekunde

Wenn Sie ein Code-Snippet auf GitHub entdeckt haben, was ist, wenn Sie sofort damit in Ihrem Projekt arbeiten möchten? Anstatt das Repo zu klonen und die benötigte Datei zu finden, können Sie Github1s verwenden. Fügen Sie einfach 1s nach github in die URL ein, drücken Sie die Eingabetaste, und das Repo oder eine einzelne Datei wird direkt in VS Code geöffnet .

Sie können auch ein Bookmarklet verwenden, um schnell zwischen github.com und github1s.com zu wechseln, auf private Repositories zuzugreifen und es gibt viele Browsererweiterungen, die auch auf der Projektseite aufgelistet sind. Wenn Sie eine Alternative benötigen, ist Gitpod eine etwas fortgeschrittenere Option, mit der Sie auch eine Online-Entwicklungsumgebung starten, parallele Arbeitsbereiche ausführen und gemeinsam an der Codebasis arbeiten können.

Haustiere für Ihren VS-Code

Wollten Sie schon immer Ihren VS-Code-Editor aufpeppen? Nun, wie wäre es mit einer Katze, einem Hund, einer Schlange, einer Gummiente oder sogar dem guten alten Clippy? Sie müssen lediglich vscode-pets installieren und den Befehl vscode-pets.start ausführen, um das Panel anzuzeigen. Sobald Sie ein Haustier, seine Fellfarbe und -größe ausgewählt haben, lehnen Sie sich zurück und beobachten Sie, wie es mit Ihnen interagiert!

Vom Werfen eines Balls und Fangen-Spielen mit Ihrem Haustier (run vscode-pets.throw-ball ) bis hin zum Hinzufügen zusätzlicher Haustiere (run vscode-pets.spawn-pet ) wird Ihr Programmier-Workflow bestimmt alles andere als langweilig! Der Schöpfer, Anthony Shaw, ist offen für Ideen und Diskussionen und freut sich jederzeit über Feedback.

Beschleunigen Sie das JavaScript-/TypeScript-Prototyping

Wenn Sie nach einer Möglichkeit suchen, Ihren JavaScript-Prototyping-Prozess zu beschleunigen, ist Quokka genau das Richtige für Sie. Der Rapid-Prototyping-Spielplatz befindet sich in Ihrem Editor und verleiht dem Prototyping, dem Lernen und Testen von JavaScript und TypeScript einen Geschwindigkeitsschub.

Laufzeitwerte werden während der Eingabe in Ihrer IDE neben Ihrem Code aktualisiert und angezeigt. Damit Sie sofort loslegen können, ist keine Konfiguration erforderlich . Sie müssen lediglich eine neue Quokka-Datei öffnen, um mit dem Experimentieren zu beginnen. Viel Spaß beim Prototyping!

Verwenden Sie einen Remote-Computer als Ihre Entwicklungsumgebung

Es gibt eine Vielzahl von Gründen, warum Sie einen Remote-Computer mit einem SSH-Server als Entwicklungsumgebung verwenden möchten. Weil Sie beispielsweise eine schnellere oder spezialisiertere Hardware als Ihr lokaler Computer benötigen oder um eine Anwendung zu debuggen, die woanders ausgeführt wird, z. B. an einem Kundenstandort oder einer Anwendung in der Cloud. Um die Entwicklung und Fehlerbehebung zu vereinfachen, hilft Ihnen die Remote - SSH-Erweiterung dabei.

Die Erweiterung führt Befehle und andere Erweiterungen direkt auf dem Remote-Computer aus, sodass Sie keinen Quellcode auf Ihrem Computer benötigen. Stattdessen können Sie jeden Ordner auf dem Remote-Computer öffnen und wie gewohnt damit arbeiten, wobei Sie den vollen Funktionsumfang von VS Code nutzen. Praktisch!

Kompilieren Sie Sass in Echtzeit

Ein Echtzeit-Sass-Compiler mit Live-Browser-Neuladen? Die Live Sass-Erweiterung ist für Sie da. Es hilft Ihnen, Ihre SASS/SCSS-Dateien in Echtzeit in CSS-Dateien zu kompilieren/transpilieren.

Zu den Funktionen gehören das Anpassen des Dateispeicherorts des exportierten CSS sowie seines Stils und Erweiterungsnamens, es gibt eine schnelle Statusleistensteuerung, Sie können bestimmte Ordner in den Einstellungen ausschließen, und Autoprefix wird ebenfalls unterstützt.

Tipps und Tricks, die Ihnen niemand sagen wollte

Nutzen Sie wirklich die leistungsstarken Funktionen, die VS Code zu bieten hat? Burke Holland und Sarah Drasner behaupten, dass Sie das nicht tun, und um das zu ändern, teilen sie die besten Dinge über VS Code, die Ihnen noch nie jemand erzählt hat.

Von der automatischen Aktualisierung von HTML- img -Tags mit der richtigen Größe des Bildes bis hin zur Verwendung von Schriftligaturen für eine bessere Lesbarkeit beim Codieren oder Protokollieren von Punkten zum Ausloggen von Informationen aus Ihrer Anwendung: „VS Code kann das?!“ enthält 36 wertvolle Tipps , die Ihren Workflow noch effizienter machen.

Einpacken

Es gibt buchstäblich Hunderte von VS Code-Erweiterungen, und wir hoffen, dass sich einige der hier aufgelisteten bei Ihrer täglichen Arbeit als nützlich erweisen werden – und Ihnen vor allem dabei helfen, einige zeitaufwändige Routineaufgaben zu vermeiden. Allen viel Spaß beim Programmieren!

Weiterführende Lektüre

• CSS-Audit-Tools
• CSS-Generatoren
• SVG-Generatoren
• HTML-E-Mail-Tools und -Vorlagen
• Vanille-JavaScript-Code-Snippets
• Zugängliche Front-End-Komponenten
• Abonnieren Sie auch unseren Newsletter, um die nächsten nicht zu verpassen.