Hin und her

• Fügt der Symbolleiste in VSCode Schaltflächen zum Vorwärts- und Rückwärtsfahren hinzu
• https://marketplace.visualstudio.com/items?itemName=nick-rudenko.back-n-forth

• Farben, die mit Klammern übereinstimmen, damit Sie leichter erkennen können, welche Klammern übereinstimmen.
• https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

• Ein besserer Syntax-Textmarker für JavaScript-Code
• https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel

• Fügt eine Schaltfläche "Abspielen" in Ihre Symbolleiste ein und Sie können Codedateien ausführen, indem Sie darauf drücken.
• https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

Führen Sie ein Code-Snippet oder eine Codedatei für mehrere Sprachen aus: C, C ++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT / CMD, BASH / SH, F # -Skript, F # ( .NET Core), C # -Skript, C # (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml-Skript, R, AppleScript, Elixier, Visual Basic .NET, Clojure, Haxe, Objective-C , Rost, Schläger, Schema, AutoHotkey, AutoIt, Kotlin, Dart, Freier Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Weniger, Fortran und benutzerdefinierter Befehl

Eigenschaften

Führen Sie die Codedatei des aktuell aktiven Texteditors aus

Führen Sie die Codedatei über das Kontextmenü des Datei-Explorers aus

Führen Sie das ausgewählte Code-Snippet im Texteditor aus

Führen Sie den Code per Shebang aus

Führen Sie den Code pro Dateiname glob aus

Führen Sie einen benutzerdefinierten Befehl aus

Stoppen Sie den Code

Ausgabe im Ausgabefenster anzeigen

Legen Sie die Standardsprache für die Ausführung fest

Wählen Sie die auszuführende Sprache aus

Unterstützen Sie REPL, indem Sie Code in Integrated Terminal ausführen

Verwendungen

So führen Sie Code aus:

• Verwenden Sie die Verknüpfung Ctrl+Alt+N
• oder drücken F1und dann auswählen / eingeben Run Code,
• oder klicken Sie mit der rechten Maustaste auf den Run CodeTexteditor und dann auf das Kontextmenü des Editors
• oder klicken Sie auf die Run CodeSchaltfläche im Titelmenü des Editors
• oder klicken Sie auf die Run CodeSchaltfläche im Kontextmenü des Datei-Explorers
• So stoppen Sie den laufenden Code:
• Verwenden Sie die Verknüpfung Ctrl+Alt+M
• oder drücken Sie F1und wählen Sie / tippen SieStop Code Run
• oder klicken Sie mit der rechten Maustaste auf den Ausgabekanal und klicken Sie dann Stop Code Runim Kontextmenü

• Um die auszuführende Sprache auszuwählen, verwenden Sie die Tastenkombination Ctrl+Alt+Joder drücken Sie F1und wählen Sie / geben Sie ein Run By Language, geben Sie dann die auszuführende Sprache ein oder wählen Sie sie aus: zphp, javascript, bat, shellscript...

• Um einen benutzerdefinierten Befehl auszuführen, verwenden Sie die Verknüpfung Ctrl+Alt+Koder drücken Sie F1und wählen Sie / geben Sie einRun Custom Command

• Ändert die Hintergrundfarbe von Hex-Farben in Ihrem Code, um anzuzeigen, welche Farbe tatsächlich vorliegt
• https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

• Zeigt Ihnen eine grafische Darstellung Ihrer Git-Zweige und Commits
• https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

• Fügt vscode unzählige coole Funktionen hinzu, z. B. das Inline-Anzeigen von Commits im Editor
• https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

• Mühelose Revisionsnavigation (vorwärts und rückwärts) durch den Verlauf einer Datei
• Eine unauffällige aktuelle Schuldzuweisung am Ende der Zeile mit dem Commit und dem Autor, der die Zeile zuletzt geändert hat, mit detaillierteren Schuldinformationen, die beim Hover verfügbar sind
• Autoren- Code-Objektiv , das das letzte Commit und die Anzahl der Autoren oben in Dateien und / oder in Codeblöcken anzeigt
• Eine Schuldanzeige in der Statusleiste mit dem Commit und dem Autor, der die aktuelle Zeile zuletzt geändert hat
• On-Demand- Dateianmerkungen in der Editor-Rinne, einschließlich
• Schuld - Zeigt das Commit und den Autor an, die zuletzt jede Zeile einer Datei geändert haben
• Änderungen - Markiert alle lokalen (unveröffentlichten) Änderungen oder Zeilen, die durch das letzte Festschreiben geändert wurden
• Heatmap - Zeigt an, wie kürzlich Zeilen geändert wurden, relativ zu allen anderen Änderungen in der Datei und bis jetzt (heiß gegen kalt).
• viele reichhaltige Seitenleistenansichten
• Eine Commits- Ansicht zum Visualisieren, Erkunden und Verwalten von Git-Commits
• Eine Repositorys- Ansicht zum Visualisieren, Erkunden und Verwalten von Git-Repositorys
• eine Datei - History - Ansicht zu visualisieren, zu navigieren und die Versionsgeschichte der aktuellen Datei erkunden oder einfach nur die ausgewählten Zeilen der aktuellen Datei
• eine Linie History Ansicht , zu navigieren, und erkunden Sie die Revisionsgeschichte der ausgewählten Linien der aktuellen Datei zu visualisieren
• ein Zweig anzuzeigen sichtbar zu machen, zu erforschen und verwalten Git Zweige
• ein Remotes anzuzeigen sichtbar zu machen, zu erforschen, und Git - Fernbedienungen und Fern Zweige verwalten
• Eine Stashes- Ansicht zum Visualisieren, Erkunden und Verwalten von Git-Stashes
• Eine Tags- Ansicht zum Visualisieren, Erkunden und Verwalten von Git-Tags
• Eine Ansicht der Mitwirkenden zum Visualisieren, Navigieren und Erkunden von Mitwirkenden
• ein Suchen & Vergleichen Ansicht zu suchen und durch Mitteilung begehen Geschichten zu erforschen, Autor, Dateien, ID, usw., oder visualisieren Vergleiche zwischen den Zweigen, Tags, Commits und vieles mehr
• Eine Git-Befehlspalette für den geführten (schrittweisen) Zugriff auf viele gängige Git-Befehle sowie für den schnellen Zugriff auf
• Commits - Geschichte und Suche
• Verstecke
• Status - aktueller Zweig- und Arbeitsbaumstatus
• Ein benutzerfreundlicher interaktiver Rebase-Editor zum einfachen Konfigurieren einer interaktiven Rebase-Sitzung
• Terminal-Links -ctrl+clickÜber Autolinks im integrierten Terminal können Sie schnell zu weiteren Details für Commits, Zweige, Tags und mehr springen
• Umfangreiche Remote-Provider-Integrationen - GitHub, GitLab, Bitbucket, Azure DevOps
• Automatische Verknüpfung von Issue- und Pull-Anforderungen
• Reichhaltige Hover-Informationen für verknüpfte Probleme und Pull-Anfragen (nur GitHub)
• assoziiert Pull-Anfragen mit Zweigen und Commits (nur GitHub)
• Viele leistungsstarke Befehle zum Navigieren und Vergleichen von Revisionen und mehr
• Benutzerdefinierte Modi zum schnellen Umschalten zwischen Einstellungen
• und so viel mehr 😁

Revisionsnavigation

Markdown All in One

• Alles, was Sie zum Schreiben von Markdown-Dateien in VSCode benötigen
• https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

Tastatürkürzel

(Tippfehler: mehrere Wörter)

Die vollständige Liste der Tastenbindungen finden Sie im Abschnitt Tastaturkürzel

Inhaltsverzeichnis

• Führen Sie den Befehl " Inhaltsverzeichnis erstellen " aus, um ein neues Inhaltsverzeichnis einzufügen.
• Das Inhaltsverzeichnis wird beim Speichern von Dateien standardmäßig automatisch aktualisiert . Zum Deaktivieren ändern Sie bitte die toc.updateOnSaveOption.
• Der Einzugstyp (Tabulator oder Leerzeichen) des Inhaltsverzeichnisses kann pro Datei konfiguriert werden. Suchen Sie die Einstellung in der rechten unteren Ecke der Statusleiste von VS Code.
• Hinweis : Aktivieren Sie auch dielist.indentationSizeOption.
• Um TOC mit GitHub oder GitLab kompatibel zu machen , setzen Sie die Option slugifyModeentsprechend
• Drei Möglichkeiten, um zu steuern, welche Überschriften im Inhaltsverzeichnis enthalten sind:
• Zum erweitern klicken
• Einfache Hinzufügen / Aktualisieren / Entfernen von Abschnittsnummern

• Falls Sie eine unerwartete TOC-Erkennung sehen , können Sie <!-- no toc -->über der Liste einen Kommentar hinzufügen .

Hinweis : Standardmäßig versucht diese Erweiterung, die Einrückungsgröße für verschiedene Listen gemäß CommonMark Spec zu bestimmen. Wenn Sie eine feste Tabulatorgröße bevorzugen, ändern Sie bitte dielist.indentationSizeEinstellung.

Markdown in HTML drucken

• Befehle Markdown: Print current document to HTMLund Markdown: Print documents to HTML(Batch-Modus)
• Kompatibel mit anderen installierten Markdown-Plugins (z. B. Markdown-Fußnoten ) Der exportierte HTML-Code sollte genauso aussehen wie in VSCode.
• Verwenden Sie einen Kommentar <!-- title: Your Title -->, um einen Titel des exportierten HTML- Codes anzugeben.
• Einfache Links zu .mdDateien werden in konvertiert .html.
• Es wird empfohlen, den exportierten HTML-Code mit einem Browser (z. B. Chrome) in PDF zu drucken, wenn Sie Ihre Dokumente für andere freigeben möchten.

• Tabellenformatierer

• Hinweis : Die Tastenkombination lautet unter Linux Strg + Umschalt + I. Siehe Visual Studio-Codeschlüsselbindungen .
• Aufgabenlisten

Bitte verwenden Sie Markdown + Math für dedizierte mathematische Unterstützung. Deaktivieren Sie unbedingt die math.enabledOption dieser Erweiterung.

Automatische Vervollständigungen

Tipp: Unterstützen Sie auch die Option completion.root

• Bilder / Dateien (respektiert Option search.exclude)

• Mathematische Funktionen (einschließlich Option katex.macros)

• Hiermit können Sie Mokka-Tests in der VSCode-Seitenleiste ausführen
• https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-mocha-test-adapter

Befehl importieren

{
	"npm-intellisense.importES6": true,
	"npm-intellisense.importQuotes": "'",
	"npm-intellisense.importLinebreak": ";\r\n",
	"npm-intellisense.importDeclarationType": "const",
}

{
	"npm-intellisense.importES6": false,
	"npm-intellisense.importQuotes": "'",
	"npm-intellisense.importLinebreak": ";\r\n",
	"npm-intellisense.importDeclarationType": "const",
}

• Autocomlpetes npm Modulnamen, wenn Sie erfordern oder importieren.
• https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

Befehl importieren

{
	"npm-intellisense.importES6": true,
	"npm-intellisense.importQuotes": "'",
	"npm-intellisense.importLinebreak": ";\r\n",
	"npm-intellisense.importDeclarationType": "const",
}

{
	"npm-intellisense.importES6": false,
	"npm-intellisense.importQuotes": "'",
	"npm-intellisense.importLinebreak": ";\r\n",
	"npm-intellisense.importDeclarationType": "const",
}

Npm Intellisense scannt standardmäßig nur Abhängigkeiten. Setzen Sie scanDevDependencies auf true, um es auch für devDependencies zu aktivieren.

{
	"npm-intellisense.scanDevDependencies": true,
}

• Auto vervollständigt Dateisystempfade, wenn Sie sie eingeben
• https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Kommerzielle Erweiterungen

Quokka.js

• Eine kostenpflichtige Erweiterung, die erstaunliche Dinge bewirkt, indem sie die Ergebnisse Ihres Javascript inline im Editorfenster anzeigt
• https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Quokka.js ist ein Entwicklerproduktivitätstool für schnelles JavaScript / TypeScript-Prototyping. Laufzeitwerte werden aktualisiert und während der Eingabe in Ihrer IDE neben Ihrem Code angezeigt.

Wenn Sie diesen Leitfaden hilfreich fanden, können Sie meine anderen Artikel lesen:

Eine Liste aller meiner Artikel, die auf zukünftige Beiträge verlinken sollen

ODER GitHub / Gists, wo ich ähnliche Inhalte hoste:

Oder checken Sie meine persönliche Ressourcenseite aus: