Mit mehr als 70% der VSCode Programmierer ist es bei weitem die beliebteste Entwicklungsumgebung, von der Web-Entwicklung bis zur Datenwissenschaft.
Und obwohl VSCode eine solide Reihe von grundlegenden Funktionen hat, glaube ich, seine versteckte Macht liegt im Ökosystem von herunterladbaren und installierbaren Erweiterungen vom Markt.
Stellen Sie sich das als App Store für VSCode-Erweiterungen vor!
Von künstlicher Intelligenz-basierter Kodierungsassistentin zur Git-Integration und Code-Formatierung decken diese VSCode-Erweiterungen eine breite Palette von nützlichen Funktionen ab, um Ihre Entwicklungserfahrung zu verbessern.
GitHub Copilot
Hauptmerkmal: Codevorschläge von künstlicher Intelligenz.
Wenn es eine Erweiterung von VSCode gibt, müssen Sie in 2023 versuchen, es muss GitHub Copilot sein. Es ist ein künstlicher Intelligenz-powered-Coding-Assistent, der Online-Code-Tipps beim Tippen bietet. Es ist einfach zu lernen, wie man Copilot verwendet, und ich glaube, dass immer mehr Entwickler KI-Assistenten wie diese in ihren Workflow integrieren werden. Der Hauptvorteil ist, Zeit zu sparen und die Produktivität zu erhöhen, indem automatische Fertigstellung und Code-Tipps.
Tabin
Hauptmerkmal: Codevorschläge von künstlicher Intelligenz.
Nach unserer ersten Wahl ist Tabnine ein weiterer KI-Kodierungsassistent, der äußerst nützlich ist, um Smart-Code-Vervollständigungs-Tipps beim Tippen zu erhalten. Wie jede gute KI, lernen Sie von Ihrem Code und kann Vervollständigungen auf der Grundlage der aktuellen Kontext und Kodierung Modelle vorschlagen.
Chat
Hauptmerkmal: Textbasiertes KI-Tool, um Ihre Kodierungsfragen zu beantworten.
Es ist richtig zu sagen, dass 2023 das Jahr der KI war, so mussten wir die ChatGPT Erweiterung an der Spitze unserer Liste enthalten! ChatGPT ist eine AI powered LLM, die auf Anfragen in der natürlichen Sprache reagiert. Dazu gehört auch immer Hilfe bei der Codierung, weshalb ChatGPT zu einem der beliebtesten KI-Tools unter Entwicklern geworden ist, die schneller arbeiten wollen. Durch das Hinzufügen dieser Erweiterung zu VSCode können Sie ChatGPT direkt in Ihre Entwicklungsumgebung integrieren, so dass es super schnell, mit ChatGPT zu interagieren, ohne den Editor zu verlassen.
Live Server
Hauptmerkmal: Starten Sie einen lokalen Server, um Änderungen in Echtzeit anzuzeigen.
Wenn Sie in irgendeiner Form von Web-Entwicklung beteiligt sind, ist dies definitiv eine Erweiterung, die Sie haben! Mit diesem Visual Studio Code Plugin können Sie einen lokalen Entwicklungsserver starten, um Änderungen an Ihrem Code in Echtzeit in Ihrem Browser zu sehen. Dies ist äußerst nützlich, wenn Sie sofortiges Feedback zu Änderungen an Ihrem Code wünschen. Sie können auch einen zweiten Monitor hinzufügen und die Vorteile dieser Erweiterung bei der Entwicklung von Websites und Web-Apps wirklich zu schätzen wissen.
Docker.
Hauptmerkmal: verwaltet Docker-Container im VS-Code.
Wenn Sie Zeit damit verbringen, mit Docker-Containern zu arbeiten, brauchen Sie diese Docker-Erweiterung unbedingt! Der Hauptvorteil ist, dass es viel einfacher ist, Ihre containerizzate Anwendungen direkt aus Ihrer Entwicklungsumgebung zu erstellen, zu verwalten und zu verteilen. Dies ist ein wiederkehrendes Thema, aber es ist wichtig zu betonen, dass jedes Mal, wenn Sie in der gleichen Umgebung bleiben können, sparen Sie wirklich viel Zeit während der Entwicklung. Ich schätze auch die Debug-Funktion mit einem Klick für den Container Node.js, Python und .NET.
Excel Viewer
Hauptmerkmal: Excel-Dateien in VS-Code anzeigen.
Ich denke, es ist fair zu sagen, dass wir wahrscheinlich einige Zeit mit Excel-Bögen gearbeitet haben. Obwohl Sie ein Fan von Python mit der Pandas-Bibliothek sind, haben Sie wahrscheinlich gefunden, dass Sie mit Excel zu verschiedenen Zeiten arbeiten. Deshalb denke ich, dass diese VSCode-Erweiterung eine tolle Idee ist, da Sie Excel-Dateien Vorschauen direkt in Ihrem Code-Editor anzeigen können. Damit Sie mit Excel- oder CSV-Bögen arbeiten müssen, ist dies eine große Lösung, um Daten schnell anzuzeigen, ohne eine andere App öffnen zu müssen.
Vorzüglich
Hauptmerkmal: automatische Codeformatierung und Stilregeln Anwendung.
Wenn es eine Sache, die ich wirklich zu schätzen weiß, ist es der formatierte Code schön! Deshalb habe ich Prettier eingeschlossen. Zusammenfassend ist es ein Code-Formater und ein Style-Regeln-Applikator. Dies bedeutet, dass Sie Ihren Code automatisch nach einer Reihe von Regeln und Konventionen formatieren, wenn Sie speichern drücken. Dies ist eine enorme Zeitersparnis, wenn Sie eine konsequente und saubere Code-Formatierung sicherstellen möchten, ohne es manuell zu tun. Es ist auch sehr nützlich für Teams, da es sicherstellt, dass jeder einen Stil verwendet, der mit sehr wenig Aufwand vereinbar ist. Ja, es gibt keine Notwendigkeit, über Leerzeichen vs tabulations zu kämpfen!
Git History
Hauptmerkmal: Zeigt die Git-Geschichte an und vergleicht Dateiversionen.
Egal, ob Sie Web-Entwickler, Data-Wissenschaftler, Spiele-Entwickler oder andere Art von Programmierer sind, es ist sehr wahrscheinlich, dass Sie Git-Befehle jeden Tag verwenden! In der Tat würde ich sagen, dass es in der modernen Entwicklung fast unvorstellbar ist, keine Versionskontrolle zu verwenden. Wenn Sie jedoch ein Git-Benutzer sind, benötigen Sie diese Erweiterung von VSCode in Ihrem täglichen Leben. Seine Hauptstärke ist, dass es Ihnen ermöglicht, das Git-Log mit einem interaktiven Blick auf die Geschichte Ihres Git-Repository direkt in Ihrem Code-Editor anzuzeigen. Ich mag auch die saubere Schnittstelle, um Zweige und Commits zu vergleichen.
Einstellungen synchron
Hauptmerkmal: Synchronisieren von VSCode-Einstellungen auf verschiedenen Geräten.
Wenn Sie jemals selbst die Planung auf einer anderen Maschine gefunden haben, sind die Chancen hoch genug, dass Sie sich mit Shortcuts, Schnelltasten und Erweiterungen gefunden haben, die nicht verfügbar sind. Sie können diese Einstellungen sogar auf Ihr GitHub-Konto synchronisieren, so dass es wirklich einfach ist, sie auf jedem Gerät zugreifen.
GitLens
Hauptmerkmal: Zeigt Online-Git-Annotationen, Edit-Charts und mehr an.
Zurück zur Versionskontrolle mit Git, ist dies eine weitere große Erweiterung, um Ihren Git Workflow innerhalb von VSCode zu verbessern. Mit GitLens kann ich auf Online-Annotationen, Dateiannotationen, Commit-Charts und eine visuelle Dateigeschichte direkt im Editor zugreifen. Es ist auch nützlich, Codeänderungen im Laufe der Zeit innerhalb Ihres Teams zu überwachen, einschließlich der Gründe für solche Änderungen.
Remote – SSH
Hauptmerkmal: Funktioniert mit Remoteservern über SSH.
Wenn Sie mit einer Remote-Maschine arbeiten müssen, verwenden Sie wahrscheinlich SSH. Ja, ich kann diese sehr nützliche Erweiterung von VSCode installieren, um mit einem Remote-Server oder einem Container über SSH in meinem Editor zu verbinden. Wenn Sie einen AWS-Kurs verfolgen oder in der Cloud arbeiten, stellen Sie sicher, dass Sie diese Erweiterung erhalten.
Code Runner
Hauptmerkmal: Run code snippet.
Wenn Sie jemals selbst an einem großen Quellcode arbeiten gefunden haben, ist es sehr wahrscheinlich, dass Sie das Szenario getroffen haben, wo Sie eine kleine Änderung machen möchten, aber Sie wollen nicht den gesamten Quellcode ausführen, um es zu testen. Kein Problem, denn diese Erweiterung von VSCode ermöglicht es Ihnen, Code-Snippets in über 30 Programmiersprachen direkt im Editor von VS Code auszuführen.
Voransicht von Regex
Hauptmerkmal: Regelmäßige Ausdrücke vorlesen, während sie eingeben.
Wenn es einen Programmierbereich gibt, der ein Puzzle für Anfänger sein kann, muss es das der regelmäßigen Ausdrücke sein! Ob Sie neu sind, um zu regex oder ein Profi, Sie haben wahrscheinlich gefunden, sich ein Referenzblatt zu konsultieren, um Ihren Code zu überprüfen. Aber es geht darum, die Produktivität zu erhöhen. Dies ist sehr nützlich, vor allem für Anfänger, die möglicherweise Schwierigkeiten haben, zu sehen, was ihr Regex tut. Sie können es sogar verwenden, um Regex zu lernen. Egal wie erfahren Sie sind, diese Erweiterung kann eine enorme Zeitersparnis sein, um zu bestätigen, ob Ihr Regex wie erwartet funktioniert.
TODO Highlights
Hauptmerkmal: Hervorheben TODO Kommentare in Ihrem Code.
Wie die meisten Entwickler finde ich mich oft TODO Kommentare in meinem Code schreiben. Ich werde auch die ersten zugeben, dass manchmal ich vergesse! Dank dieser Erweiterung von VSCode kann ich sicherstellen, dass alle meine TODO Kommentare zurückkommen. Dies ist ideal, um sie leicht erkennbar und zugänglich zu machen. Natürlich muss ich mich daran erinnern, den Job zu erledigen, aber ich mag es, wie Sie helfen, Aufgaben und Kommentare in Ihrem Code zu verfolgen.
VSCode-icons
Hauptmerkmal: Fügen Sie Icons und Farben in Ihre Dateien und Ordner in VSCode.
Dies ist eine ziemlich grundlegende Erweiterung oberflächlich; schließlich ist es nur, Icons hinzuzufügen, richtig? Ja, das ist es. Aber wenn Sie jemals gefunden haben, sich an großen Projekten mit vielen Ordnern und Dateien zu arbeiten, kann Surfen ziemlich ermüdend werden. Außerdem sehen alle Ordner gleich aus! Hier kommt diese Erweiterung ins Spiel, da Sie Stil und Farbe zu Ihren Ordnern hinzufügen können und Icons zu den Dateien hinzufügen.
Peacock
Hauptmerkmal: Farbcodierung für VS-Code-Workspaces für verschiedene Projekte.
Dies ist ideal für die Anpassung der Farben Ihres Arbeitsraums. Die Farben bieten einen sehr schönen visuellen Vorschlag, um mir zu helfen, zu verfolgen, an welchem Projekt ich arbeite. Wieder einmal ist es super einfach, Sie werden die Fähigkeit schätzen, leicht zu identifizieren und zu bewegen zwischen Projekten durch farbige Arbeitsräume.
Polacode
Hauptmerkmal: Erstellen Sie schöne Bildschirme Ihres Codes.
Manchmal müssen wir Präsentationen unseres Codes machen. Und wenn die Zeit kommt, müssen wir möglicherweise Codefragmente innerhalb von Dokumentationen oder Präsentationen teilen. Hier kommt diese VSCode-Erweiterung ins Spiel, da Polacode Ihnen erlaubt, schöne Bildschirme Ihres Codes mit Syntax-Highlighting zu erstellen. Sie müssen nur den Code hervorheben, den Sie fangen möchten, und Polacode wird den Rest tun.
Besser.
Hauptmerkmal: Verbessere Codekommentare mit Farben und Formatierung.
Die Kommentare im Code sind eines der häufigsten Elemente in jedem Projekt, aber sie sind wahrscheinlich diejenigen, denen wir weniger Aufmerksamkeit widmen. Entwickelt, um die Lesbarkeit Ihrer Kommentare im Code mit Farben und Formatierung zu verbessern. Es stellt auch die Möglichkeit dar, meine Kommentare in Warnungen, Abfragen, Todo, Highlighting und mehr zu kategorisieren.
Code Spell Checker
Hauptmerkmal: erkennt und korrigiert Schreibfehler in Ihrem Code.
Überprüfen Sie Schreibfehler in Ihren Kommentaren, Strings und Markdown-Dateien. Ich denke, es ist immer ein Zeichen eines echten Profis, wenn ihr Code nicht nur gut gestaltet ist, aber es ist auch einfach zu lesen und ohne offensichtliche oder häufige Schreibfehler.
Turbo Console Log
Hauptmerkmal: Geben Sie JS-Konsol.log-Anweisungen mit einem Klick ein.
Als eine der beliebtesten Sprachen bei Entwicklern, ist es sinnvoll, einige VSCode Erweiterungen für JavaScript einschließen. Vielleicht eine der häufigsten Praktiken, wenn das Schreiben von JS die demütige Konsole.log Anleitung für Test und Debug ad hoc verwendet. Hier ist, wo diese Erweiterung leuchtet, da es Ihnen ermöglicht, schnell Konsolenanleitungen hinzuzufügen. aussagekräftige Protokolle zu Ihrem Code mit Tastenkombinationen.
Indent-Regenbogen
Hauptmerkmal: Farbe der Rückgabewerte in Ihrem Code.
Wenn Sie regelmäßig in einer Sprache wie Python programmieren, die von der Rückkehr abhängig ist, haben Sie wahrscheinlich versucht, die Rückgabewerte auf dem Bildschirm zu verfolgen. Ich weiß, ich war da. Selbst wenn ich versuche, meinen Flat-Code zu behalten, ist es manchmal unmöglich, meine Python-Projekte zurückzugeben. Hier ist, wo diese Erweiterung von VSCode ins Spiel kommt, da es Farbe zu den verschiedenen Ebenen der Rückkehr in Ihrem Code hinzufügt. Vertrauen Sie mir, verwenden Sie es und sofort zu schätzen, wie einfach es ist, den eingerückten Code zu lesen. Ich schätze auch die Tatsache, dass es automatisch die aktuelle Tab-Größe verwendet, die Sie für Ihren Editor gesetzt.
Lesezeichen
Hauptmerkmal: Fügen und navigieren Sie schnell zwischen Lesezeichen in Ihrem Code.
Unabhängig von dem Browser oder der bevorzugten Wahl, ist es ziemlich wahrscheinlich, dass Sie Lesezeichen verwendet, um Websites zu speichern. Weil wir nicht dasselbe mit den Code-Zeilen tun können, die wir später überprüfen wollen. Fügen Sie Lesezeichen zu Codezeilen in Ihren Dateien für super schnelle Navigation. Besonders nützlich bei der Arbeit mit einem großen Code.
Auto Umbenennen Tag
Hauptmerkmal: Automatische Umbenennen von HTML/XML-Tagspaaren.
Dies ist eine sehr einfache VSCode-Erweiterung, aber es ist auch sehr nützlich, da es Sie speichert, dass wenig zusätzliche Zeit, wenn Sie HTML- oder XML-Tags umbenennen müssen. Umbenennen Sie einfach den öffnenden oder schließenden Tag und der andere wird automatisch umbenannt.
JavaScript Code Snipps
Hauptmerkmal: Sammlung von häufig verwendeten JavaScript-Codefragmenten.
Wenn Sie regelmäßig in JavaScript planen, finden Sie sich wahrscheinlich mit den gleichen Codefragmenten die ganze Zeit mit kleinen Änderungen. Dies ist in der Web-Entwicklung ziemlich üblich: schließlich, wenn etwas gut ist, warum beginnen? Obwohl Sie gerade einen JavaScript-Kurs abgeschlossen haben, haben Sie bemerkt, dass viele Web-Entwicklungsprojekte ähnliche Code-Vorlagen verwenden. Es kann eine enorme Zeitersparnis sein, wenn Sie eine Schnellkochplatte benötigen, um den Ball zu starten.
ES7+ React/Redux/React-Native Snippets
Hauptmerkmal: Sammlung von React- und Redux-Codefragmenten.
Ob Sie ein Profi sind oder einem Kurs auf React folgen, Sie finden sich mit der gleichen Logik und den gleichen Ansätzen mehrmals. Um Ihnen zu helfen, Zeit zu sparen, diese VSCode-Erweiterung, da es eine Sammlung von gemeinsamen Codefragmenten bietet, um mit React und Redux zu arbeiten. Es bietet sogar Fragmente von TypeScript, wenn Sie sich entschieden haben, auf JS stark typifiziert zu wechseln.
CSS Peek
Hauptmerkmal: navigieren / überprüfen CSS-Definitionen in Ihrem Code.
Wenn Sie ein Web-Entwickler sind, verbringen Sie wahrscheinlich viel Zeit in HTML und CSS arbeiten. Sie möchten einen schnellen Blick auf Ihre CSS-Stil Blätter direkt aus Ihren HTML-Dateien. Es ermöglicht Ihnen, schnell von HTML-Code auf CSS-Code und umgekehrt zu wechseln, indem Sie auf einen CSS-Selektor in Ihrem HTML klicken. Diese Art von Multitasking ist super effizient, je mehr Sie die Vorteile bei der Zeitersparnis beim Bau Ihrer HTML-Projekte schätzen werden.
Farbe
Hauptmerkmal: Farbe der Text und hexadezimale Farbcodes in Ihrem Code.
Wenn Sie ein Frontend-Entwickler sind, verbringen Sie wahrscheinlich viel Zeit zu denken und Farbwahlen für die Elemente Ihrer Webseite. Aber mit dieser praktischen VSCode-Erweiterung können Sie ein schnelles Farbdisplay direkt im Editor sehen, da es die gewählte Farbe zu Ihrem Code hinzufügt. Ja, dieser hexadezimale Code wird in der tatsächlichen Farbe, die Sie verwenden wollen, magisch gefärbt!
Markdown Alles in einem
Hauptmerkmal: Integrierter Markdown-Support im VS-Code.
Wenn Sie jemand sind, der mit dem Markdown begonnen hat, um Ihre Dokumentation zu erstellen, werden Sie die zusätzliche Funktionalität, die diese VSCode Erweiterung bietet wirklich zu schätzen wissen! Und ja, VSCode bietet grundlegende Unterstützung für den Markdown, aber wenn Sie ein erfahrener Benutzer sind, werden Sie die Shortcuts, Befehle und automatische Fertigstellung zu schätzen wissen.
Icon Fonts
Hauptmerkmal: Vorschau und Einfügen von Icons in VS Code.
Wenn Sie jemals nach Icons gesucht haben, um in Ihre Entwicklungsprojekte einzubeziehen, werden Sie verstehen, wie langweilig es sein kann! Es bietet eine Sammlung von Icons, die Sie direkt in Ihre Projekte integrieren können. Verwenden Sie Schnipsel, um Glyphicons Bootstrap Icons, Android Icons und vieles mehr zu integrieren.
Debugger für Chrome
Hauptmerkmal: Debug der JS-Code direkt aus VS-Code in Chrome.
Ideal für JavaScript-Entwickler, die innerhalb eines Chrome-Browsers direkt im VSCode-Editor debuggen möchten. Wenn Sie Zeit für die Erstellung von JavaScript-Projekten verbracht haben, werden Sie sehr vertraut mit der Tatsache, dass Sie auf Ihren Browser wechseln müssen, um zu testen und zu debug. Aber mit dieser Erweiterung können Sie diesen zusätzlichen Schritt entfernen und alles in der Entwicklungsumgebung tun.
