vscode (Visual Studio Code) ist ein kostenloser und moderner Open-Source-Code-Editor, der Syntaxhervorhebung, intelligente Codevervollständigung, benutzerdefinierte Hotkeys, Klammerabgleich und Codeausschnitte für fast alle gängigen Entwicklungssprachen, Codevergleich Diff, GIT unterstützt und andere Funktionen, unterstützt Plug-in-Erweiterungen und ist für die Webentwicklung und Cloud-Anwendungsentwicklung optimiert.
Um das vscode-Plug-in zu installieren, müssen Sie nur auf die im Bild gezeigte Schaltfläche klicken, um die Erweiterung einzugeben, und den Plug-in-Namen in das Feld eingeben Klicken Sie im Suchfeld auf „Installieren“ und warten Sie, bis die Installation abgeschlossen ist. Klicken Sie auf „Neu laden“, um vscode neu zu starten, damit das Plug-in wirksam wird.
Wenn Sie ein bestimmtes Plug-in nicht benötigen, müssen Sie nur die Erweiterung eingeben und auf die Zahnradschaltfläche in der unteren rechten Ecke des entsprechenden Plug-ins klicken, um das Plug-in zu deaktivieren oder zu deinstallieren. In.
Welche sind die am häufigsten verwendeten Plug-Ins für vscode?
Plugin |
Anleitung |
Bemerkungen |
Auto Close Tag |
HTML/XML-Endtag automatisch hinzufügen |
|
Tag automatisch umbenennen |
Gepaarte HTML/XML-Tags automatisch umbenennen |
|
Verschönern |
Formatcode |
|
Klammer Pair Colorizer |
Farbidentifizierung passender Klammern |
|
Code Runner |
Ein sehr leistungsstarkes Plug-in, das dazu in der Lage ist Führen Sie Codefragmente oder Codedateien in mehreren Sprachen aus: C, C++, Java, JavaScript, PHP, Python, Perl, Ruby, Go usw. Nach Abschluss der Installation erscheint die obere rechte Ecke: ▶ | |
Groß-/Kleinschreibung ändern |
Obwohl VSCode standardmäßig über integrierte Textkonvertierungsoptionen verfügt, kann Text nur in Groß- und Kleinschreibung konvertiert werden Fall. . Dieses Plug-in fügt weitere Benennungsformate zum Ändern von Text hinzu, einschließlich Benennung in Kamel-Schreibweise, durch Unterstrich getrennte Benennung, Benennung in Schlangenbuchstaben und CONST_CAS-Benennung usw. |
|
Chinesisch (vereinfacht) Sprachpaket für Visual Studio Code |
Chinesisch vereinfachtes Sprachpaket |
|
Farbinfo |
Dies Das praktische Plugin liefert Ihnen Informationen über die Farben, die Sie in CSS verwenden. Sie müssen nur den Mauszeiger über die Farbe bewegen, um eine Vorschau der relevanten Informationen des Farbmodells (HEX, RGB, HSL und CMYK) im Farbblock |
|
anzuzeigen CSS Peek |
Mit diesem Plugin können Sie nachverfolgen, wo CSS-Klassen und IDs im Stylesheet definiert sind. Wenn Sie mit der rechten Maustaste auf den Selektor in der HTML-Datei klicken und die Option „Gehe zu Definition und Peek-Definition“ auswählen, wird Ihnen der CSS-Code für das Styling |
|
Debugger für Chrome | Front-End-Debugging, Anleitung zur Verwendung anzeigen
|
|
ESLint | EsLint kann uns helfen, Syntaxfehler in der Javascript-Programmierung zu überprüfen. Beispiel: In Javascript-Anwendungen ist es schwierig, Variablen oder Methoden zu finden, die Sie verlieren. EsLint kann uns helfen, JS-Code zu analysieren, Fehler zu finden und ein gewisses Maß an Korrektheit beim Schreiben der JS-Syntax sicherzustellen |
|
Dateigröße |
Die aktuelle Dateigröße wird in der Statusleiste unten angezeigt. Nach dem Klicken können Sie auch die detaillierte Erstellungs- und Änderungszeit sehen |
|
Git-Verlauf |
Git-Protokolle als Diagramme anzeigen |
|
GitLens – Git supercharged |
Zeigt den neuesten Commit und Autor der Datei an und zeigt die Commit-Informationen der aktuellen Zeile an |
|
HTML Boilerplate |
Durch die Verwendung des HTML-Vorlagen-Plug-ins müssen Sie sich keine Gedanken über das Umschreiben von Header- und Body-Tags für neue HTML-Dateien machen. Sie müssen nur HTML in die leere Datei eingeben und die Tab-Taste drücken, um eine saubere Dokumentstruktur |
|
HTMLHint |
HTML zu erstellen Codeformaterkennung |
|
HTML-Snippets |
Code automatisch ausfüllen |
|
htmltagwrap |
Eine Tag-Ebene außerhalb des ausgewählten HTML-Tags umschließen „Alt + W“ („Wahl + W“ für Mac) |
|
Bildvorschau |
Bewegen Sie die Maus in den Pfad, um die Bildvorschau anzuzeigen |
|
Indikator |
Heben Sie die aktuelle Einzugstiefe hervor |
|
intelliSense für CSS-Klassennamen in HTML |
Geben Sie die ein Projekt in CSS Der Name Smart Prompt in der Datei ist in HTML |
|
JavaScript (ES6) Code-Snippets |
ES6-Code-Snippets |
|
Live-Server |
Browser wird in Echtzeit aktualisiert |
|
Node .js Modules Intellisense |
kann JavaScript/TypeScript-Module in Importanweisungen automatisch vervollständigen |
|
npm Intellisense | Paketaufforderung bei Bedarf |
|
Pfad-Intellisense |
Pfad-Autovervollständigung |
|
Quokka.js |
Quokka ist ein Debugging-Tool-Plug-in, das Echtzeit-Feedback basierend auf dem von Ihnen geschriebenen Code liefert Verwendung: Strg+Umschalt+p Quokka eingeben und neues Javascript auswählen |
|
Regex Previewer |
Dies ist ein Tool für Ein nützliches Tool zum Testen regulärer Ausdrücke in Echtzeit. Es kann reguläre Ausdrucksmuster auf jede geöffnete Datei anwenden und alle Übereinstimmungen hervorheben |
|
SVG Viewer |
Dieses Plug-in fügt viele nützliche Funktionen hinzu SVG-Programme in Visual Studio Code umwandeln, sodass Sie SVG-Dateien öffnen und anzeigen können, ohne den Editor zu verlassen. Gleichzeitig enthält es auch Optionen zum Konvertieren in das PNG-Format und zum Generieren von Daten-URI-Mustern |
|
Vetur |
Vue Syntax High Hervorhebungsanzeige, Syntaxfehlerprüfung, automatische Codevervollständigung (Bessere Wirkung mit ESLint-Plug-in) |
|
vscode-fileheader | Die Top-Kommentarvorlage kann Autor, Zeit und andere Informationen definieren und aktualisiert automatisch den Zeitpunkt der letzten Änderung Tastenkombination: Strg+Alt+i (Die Standardinformationen können unter Datei → Einstellungen → geändert werden Einstellungen) |
|
Verwandte Empfehlungen: Vscode-Einführungs-Tutorial
Das obige ist der detaillierte Inhalt vonWas sind die am häufigsten verwendeten Plug-Ins für vscode?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!