Heim  >  Artikel  >  [Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

青灯夜游
青灯夜游nach vorne
2022-08-31 11:51:145171Durchsuche

Obwohl es viele Front-End-IDEs wie vim, notepad++, sublime text3, atom ... gibt, weiß jeder, wer die stärkste IDE der Welt ist, daher muss ich natürlich nicht mehr sagen.

Ich bin ein Benutzer, der VSCode seit mehr als 7 Jahren verwendet, seit es offiziell veröffentlicht wurde. Bis jetzt bin ich ein absoluter Senior-Benutzer und Produktivitätswahnsinniger.

In diesem Artikel werden hauptsächlich einige gute Plug-Ins vorgestellt, die ich im Laufe der Jahre bei der Verwendung von VSCode verwendet habe. [Empfohlene Studie: „Vscode-Einführungs-Tutorial“]

Viele Leute beschweren sich darüber, dass nackter VSCode nicht einfach zu verwenden ist, genau wie nackter Obsidian. Ihre Essenz liegt in Erweiterungen (Chinesen nennen sie gerne Plug-Ins, und im Folgenden nennen sie es werden alle Plug-Ins genannt) ). Ein gut eingerichteter VSCode ist nichts weniger als ein Schweizer Taschenmesser, ein Produktivitätsartefakt.

Okay, fangen wir an!

Berühre den Fisch


Nuggets

Der erste ist es natürlich.

Wenn Sie als erfahrener Nugget-Spieler nicht einmal wissen, wie man Nuggets in VSCode spielt, wie können Sie dann den Mut haben zu sagen, dass Sie zum Front-End-Kreis gehören?

Dies ist das dunkle Thema:

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Dies ist das helle Thema:

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Dies ist die Artikelseite:

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!
Es gibt auch Chat-Modus, Zen-Modus und andere Funktionen, kommen Sie und erleben Sie es !

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

LiKou

Sie können sich bei Ihrem LiKou-Konto anmelden und die Fragen lesen und Lösungen direkt in VSCode schreiben!

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Little Overlord

Möchten Sie Spiele in VSCode spielen? Es ist machbar!

Aber ich spiele keine Spiele und ich empfehle nicht, während der Arbeitszeit Spiele zu spielen. Es ist in Ordnung, die Nuggets zu bürsten oder kräftig einzutauchen.

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Code Experience-Kurs


Copilot

Code-Eingabeaufforderungsartefakt, das ich verwendet habe Seitdem benutze ich meine Hände beim Schreiben von Code grundsätzlich nicht mehr.

Sehen Sie, ich habe ein f eingegeben und es hat alles durchdacht, was ich tun möchte, einschließlich des Funktionsnamens, der Parameter und der Parametertypen.

Der Nachteil ist, dass es manchmal umständlich ist und eine Gebühr verlangt.

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Tabnine

Die Funktionen von Tabnine und Copilot sind sehr ähnlich und basieren ebenfalls auf KI, um uns automatisch zu helfen Vervollständigen Sie den Code.

Allerdings ist Tabnine etwas teurer als Copilot, verfügt aber auch verhältnismäßig über mehr Funktionen. Man kann zwischen

und Copilot wählen, ich habe aber beides gekauft.

Download-Adresse: marketplace.visualstudio.com/items?itemN…

turbo-console-log

Ich möchte Studenten, die JS schreiben, fragen: Welchen Code haben wir am häufigsten geschrieben? Dann ist console.log definitiv auf der Liste!
Mit diesem Plug-in müssen Sie nur den Cursor über die zu druckende Variable bewegen, Strg+Option+L drücken, console.log wird automatisch in die nächste Zeile eingegeben und der Dateiname, die Zeilennummer und der Variablenname werden automatisch eingegeben usw. Ich habe alle Informationen mitgebracht, ist das nicht praktisch?

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

indent-rainbow

Rainbow-Einrückung: Wenn unsere Code-Verschachtelungsstruktur komplexer ist, kann sie uns helfen, die Sperre zu überprüfen . Jeder Einzug hat eine andere abwechselnde Regenbogenfarbe.

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

indent-rainbow-palettes

rainbow indent Farbverlaufspalette. Wenn Sie Regenbogeneinzüge verwenden, aber andere Verlaufsfarben verwenden möchten, dann benötigen Sie dieses Plugin! Derzeit werden 16 Verlaufsfarben unterstützt.

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

highlight-matching-tag

Tag-Hervorhebung. Wenn wir eine komplexe DOM-Struktur haben, können wir dieses Plug-in verwenden, um das schließende Tag hervorzuheben und so zu verhindern, dass wir einige Fehler auf niedriger Ebene machen.

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

vscode-colorize

Farbhervorhebung.

Heben Sie Farbvariablen hervor, indem Sie sie mit Hintergrundfarbe füllen.

Unterstützt CSS:

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Unterstützt auch JavaScript:

6-[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Es unterstützt auch alle Dateitypen, Sie müssen es nur konfigurieren.

Download-Adresse: marketplace.visualstudio.com/items?itemN…

vscode-todo-highlight

To-do-Highlight.

Beim Schreiben von Code stoßen wir häufig auf einige Dinge, die erledigt werden müssen, und auf Fehler, die behoben werden müssen, aber wir haben jetzt keine Zeit, sie fertigzustellen, also werden wir Kommentare schreiben. Um zu verhindern, dass diese Kommentare ignoriert werden, können wir dieses Plugin verwenden.

Standardmäßig werden die Schlüsselwörter TODO und FIXME hervorgehoben.

Wir können auch andere Schlüsselwörter konfigurieren und Hervorhebungsfarben festlegen.

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

better-comments

Kommentarhervorhebung.

Dieses Plugin hilft uns, benutzerfreundlichere Kommentare in den Code einzufügen.

Zusätzlich zu TODO und FIXME können auch einige Typen für Kommentare definiert werden.

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Wir können auch andere Arten von Kommentaren anpassen.

Download-Adresse: marketplace.visualstudio.com/items?itemN…

vscode-import-cost

Zeigen Sie das Volumen des importierten Pakets an.

Wenn wir JavaScript-Projekte schreiben, importieren wir viele Bibliotheken.

Dieses Plug-in kann uns helfen, das Volumen importierter Pakete zu überprüfen.

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

auto-close-tag

Tags automatisch schließen.

Wenn wir <div> eingeben, werden automatisch die folgenden Klammern hinzugefügt. <code><div> 时,它会自动把后面的括号补充好。<p>虽然很简单的功能,但却是刚需!</p> <p><img src="https://img.php.cn/upload/image/191/846/797/166191622632230%5BOrganisieren%20und%20teilen%5D%20%C3%9Cber%2050%20praktische%20VSCode-Plug-Ins,%20kommen%20Sie%20und%20sammeln%20Sie%20sie%20zur%20Verwendung!" title="166191622632230[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!" alt="[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!"></p> <p>下载地址:<a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p> <p><strong><span style="font-size: 16px;">code-spell-checker</span></strong></p> <p>拼写错误检查。</p> <p>当我们编写代码时,偶尔会出现单词拼错的情况,这个插件可以检查到可能拼写错误的单词,并有波浪线提醒。</p> <p>它支持驼峰命名法。</p> <p><img src="https://img.php.cn/upload/image/744/455/624/166191670658301%5BOrganisieren%20und%20teilen%5D%20%C3%9Cber%2050%20praktische%20VSCode-Plug-Ins,%20kommen%20Sie%20und%20sammeln%20Sie%20sie%20zur%20Verwendung!" title="166191670658301[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!" alt="1[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!"></p> <p>下载地址:<a href="https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p> <p><strong><span style="font-size: 16px;">path-intellisense</span></strong></p> <p>智能路径感知,可以帮我们自动补充文件名。</p> <p><img src="https://img.php.cn/upload/image/345/662/845/166191673873924%5BOrganisieren%20und%20teilen%5D%20%C3%9Cber%2050%20praktische%20VSCode-Plug-Ins,%20kommen%20Sie%20und%20sammeln%20Sie%20sie%20zur%20Verwendung!" title="166191673873924[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!" alt="1[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!"></p> <p>下载地址:<a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p> <p><strong><span style="font-size: 16px;">Toggle Quotes</span></strong></p> <p>JavaScript 的字符串可以支持三种形式,单引号、双引号、尖角号,有时候我们想要拼接字符串时,需要将原来的单引号或双引号改为尖角号。使用这个插件,只需要按下快捷键 <code>cmd+'

Obwohl es eine sehr einfache Funktion ist, ist sie eine Notwendigkeit!

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung![Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Herunterladen Adresse: Marktplatz .visualstudio.com/items?itemN…

code-spell-checker

Rechtschreibfehlerprüfung.

Wenn wir Code schreiben, werden gelegentlich Wörter falsch geschrieben. Dieses Plug-in kann auf mögliche falsch geschriebene Wörter prüfen und eine Wellenlinien-Erinnerung anzeigen.

Es unterstützt die Kamelfall-Nomenklatur.

14 (1).gif1[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Herunterladen Adresse: Marktplatz .visualstudio.com/items?itemN…

path-intellisense

Intelligente Pfaderkennung kann uns dabei helfen, Dateinamen automatisch zu ergänzen.


1[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!Herunterladen Adresse: Marktplatz .visualstudio.com/items?itemN…

Anführungszeichen umschalten


JavaScript-Zeichenfolgen können drei Formen unterstützen: einfache Anführungszeichen, doppelte Anführungszeichen und Winkel. Wenn wir Zeichenfolgen verbinden möchten, müssen Sie manchmal das Original ändern einfache Anführungszeichen oder doppelte Anführungszeichen bis hin zu spitzen Winkeln. Um dieses Plug-in zu verwenden, drücken Sie einfach die Tastenkombination cmd+'.

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Template String Converter

Er kann JavaScript-Vorlagenzeichenfolgen automatisch konvertieren.

Der Unterschied zu ToggleQuotes besteht darin, dass dies automatisch erfolgt.

Download-Adresse: 🎜marketplace.visualstudio.com/items?itemN…🎜🎜🎜🎜🎜IntelliSense für CSS-Klassennamen in HTML🎜🎜🎜🎜Smart-Tipps zur automatischen Vervollständigung von Klassen. 🎜Download-Adresse: 🎜marketplace.visualstudio.com/items?itemN…🎜🎜🎜🎜🎜Tailwind CSS IntelliSense🎜🎜🎜🎜Die intelligenten Tipps zur automatischen Vervollständigung von Tailwind CSS. 🎜Wenn Sie Rückenwind-CSS verwenden, können Sie IntelliSense für CSS-Klassennamen in HTML deaktivieren. 🎜Download-Adresse: 🎜marketplace.visualstudio.com/items?itemN…🎜🎜🎜🎜🎜npm Intellisense🎜🎜🎜🎜Dieses Plug-in kann uns dabei helfen, die zu importierenden Module intelligent zu erkennen. 🎜Es wird automatisch abgeschlossen, wenn wir „Importieren“ eingeben. 🎜Download-Adresse: 🎜marketplace.visualstudio.com/items?itemN…🎜🎜🎜🎜🎜change-case🎜🎜🎜

Manchmal möchten wir die Benennungsregeln von Variablen ändern, z. B. Bindestriche, Unterstreichungen, Großbuchstaben usw.
Dieses Plug-in kann uns dabei helfen, Variablennamen zu ändern.
Es scheint sinnlos, wenn Sie nur einen Variablennamen ändern. Der Vorteil besteht jedoch darin, dass viele Variablennamen gleichzeitig geändert werden können.

1[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Verschachtelte Kommentare

Verschachtelte Kommentare waren schon immer ein Problem.
Denn die verschachtelten Kommentare werden mit dem Anfang des ersten Kommentars zu einem gültigen Kommentar zusammengefasst und die folgenden Teile werden ignoriert.

1[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Dieses Plug-in kann uns dabei helfen, die Zeichen verschachtelter Kommentare umzuwandeln und die verschachtelten Kommentare dann wiederherzustellen, wenn wir die Blockierung der äußeren Kommentare aufheben.

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Tag automatisch umbenennen

Sie können es vorne oder hinten ändern, und es wird gleichzeitig geändert .

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

ES7+ React/Redux/React-Native-Snippets

Dieses Plugin bietet ES7/React/Redux/React-Native usw . Codeausschnitte.
Sie können schnell Vorlagencodes erstellen und unsere Entwicklungseffizienz verbessern.
Verwenden Sie beispielsweise den useState Hook von React, der die Camel-Case-Benennungsmethode von setXXX automatisch konvertieren und automatisch zur Cursorposition springen kann.

18 (1).gif

Download-Adresse: marketplace.visualstudio.com/items?itemN…

ESLint

Dieses Plug-in integriert ESLint in VSCode, wir können dieses Plug-in verwenden, um den Code von zu überprüfen der Arbeitsbereich.
Download-Adresse: marketplace.visualstudio.com/items?itemN…

Prettier

Dieses Plug-in ist ein sehr klassisches Plug-in und kann eine Vielzahl von Dateiinhalten formatieren.

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Glean

Es kann komplexes JSX in separate Komponenten oder Dateien extrahieren, die beim Refactoring verwendet werden können. Sehr nützlich.

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

htmltagwrap

Wenn wir ein bestimmtes DOM-Tag umschließen müssen, ist dieses Plug-in sehr nützlich.
Wir können ein DOM-Tag auswählen und dann Optionen+w gedrückt halten, um ein Tag in der äußeren Ebene zu erstellen.

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Version Lens

Sie können die neueste Version des npm-Pakets anzeigen, von der das Projekt abhängt, und auf die aktualisieren neueste Version.

2[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Hungry Delete

Dieses Plug-in hilft uns, mehrere leere Zeilen mit einem Klick zu löschen.

Halten Sie Wahl+Entf gedrückt, um mehrere leere Zeilen zu löschen.

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

JSON als Code einfügen

Wenn wir einen Teil von JSON kopieren, möchten wir die entsprechende JSON-Struktur basierend darauf generieren diesen Teil von JSON. Dann können Sie dieses Plug-in verwenden.
Es unterstützt viele Programmiersprachen wie TypeScript, Python, Go, Java usw.

2[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Dot Env

Ob es sich um ein Front-End-Projekt oder ein Back-End-Projekt handelt, die meisten werden es verwenden .env-Dateien zum Speichern von Umgebungsvariablen.
Dieses Plug-in kann .env-Dateien hervorheben.

2[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Themenkategorie


Dracula Official
.

Draculas offizielles Thema, das Eins davon die klassischen Themen und mein Favorit.

2[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Material Theme

Material Theme bietet Themen im Materialstil, um den Code cooler aussehen zu lassen.

2[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

One Dark Pro

Wenn Sie ein Atom-Benutzer oder ein Entwickler sind, der Atom-Themen mag, können Sie dieses Thema ausprobieren Plugin.

2[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

vscode-icons

Wenn wir Ordner durchsuchen, ist es sehr praktisch, wenn sich davor ein Symbol befindet Datei, um sie zu unterscheiden.
Das VSCode Icons-Plug-in ist genau dafür da!
Die Standardverzeichnisstruktur von VSCode sieht folgendermaßen aus:

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Nach der Verwendung von VSCode-Symbolen sieht das Symbol wie folgt aus:

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Datei-Icons

Ein weiteres Icon-Theme-Plugin.

3[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Material Icon Theme

ist fast das umfassendste Icon-Theme-Plug-in.
Unterstützt so viele Arten von Dateien:

3[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Unterstützt so viele Arten von Ordnern:

3[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Tools


todo-tree

todo Tree kann Projekte über TODO- und FIXME-Kommentare verwalten.

Wir können die mit Anmerkungen versehenen Dateien schnell anzeigen.

3[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

vscode-peacock

Wenn wir mehrere VSCode-Fenster gleichzeitig ausführen, können wir für jedes Fenster unterschiedliche Einstellungen festlegen Farbe zur Unterscheidung verschiedener Artikel.
Zu den standardmäßig unterstützten Farben gehören Angular Red, Microsoft Blue, JS Yellow, Mandalorian Blue, Node Green, React Blue usw.

3[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

3[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Quokka.js

Wenn wir einen Teil des JS- oder TS-Codes schnell überprüfen möchten, können wir das tun Benutze dieses Plugin.
Es bietet einen Spielplatz, um die Logik des Codes besser zu überprüfen.

3[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Link: marketplace.visualstudio.com/items?itemN…

rest-client

Es gibt viele Möglichkeiten, APIs zu testen, z. B. Heavyweight PostMan und Lightweight Curl. Aber keine davon ist in VSCode so bequem zu verwenden.
REST Client ist ein gutes Plug-in, mit dem wir APIs in VSCode einfach testen können.

3[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

EditorConfig für VS Code

Wenn unser Projekt mit mehreren Editor-Tools entwickelt wird, möchten wir den Codestil vereinheitlichen. Sie müssen die Konfigurationsdateien verschiedener Tools konfigurieren.
Mit diesem Tool können wir diese Regeln in allen Editoren gemeinsam machen, indem wir nur eine .editorconfig schreiben.
Download-Adresse: marketplace.visualstudio.com/items?itemN…

Git Lens

Obwohl VSCode über integrierte Git-Funktionalität verfügt, ist es nicht leistungsstark genug.
Git Lens fügt die Funktionalität von Git hinzu, wir können Commit-Informationen in jeder Codezeile anzeigen, es kann auch Unterschiede zwischen verschiedenen Commits vergleichen und einige andere nützliche Git-Funktionen bieten.

3[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

In GitHub öffnen

Sie können Projekte, Dateien, Aktionen, PR usw. schnell in Github öffnen.

[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Im Browser öffnen

Unterstützt das schnelle Öffnen von HTML-Dateien im Browser.
Klicken Sie mit der rechten Maustaste auf die HTML-Datei. Im Menü werden zwei Optionen angezeigt, oder Sie verwenden die entsprechenden Tastenkombinationen.

4[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Live Server

Wenn wir den Inhalt von HTML ändern und möchten, dass der Browser mit dem Code übereinstimmt, benötigen wir dieses Plug-In.
Es startet einen Server lokal, überwacht Dateiänderungen und aktualisiert den Browser.
Klicken Sie mit der rechten Maustaste auf die HTML-Datei. Im Menü werden zwei Optionen angezeigt, oder Sie verwenden die entsprechenden Tastenkombinationen.

4[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Live-Vorschau

Es kann HTML in VSCode in Echtzeit in der Vorschau angezeigt werden.
Es werden jedoch keine Anwendungen unterstützt, die mit Frameworks wie React und Angular entwickelt wurden.

4[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Projektmanager

Wenn wir mehrere Projekte haben, können wir Projekte über dieses Plug-in verwalten und schnell zwischen Projekten wechseln Tags und andere Funktionen.

4[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Live Share

Möchten Sie Ihren Code für die gemeinsame Bearbeitung und Fehlerbehebung in Echtzeit mit anderen teilen? Dieses Plugin kann Projekte, die in jeder Programmiersprache oder jeder Art von Projekt entwickelt wurden, mit anderen teilen. Die andere Partei kann Code direkt in Ihrer Umgebung schreiben, ohne eine zusätzliche Umgebung oder ein SDK zu installieren.
Sie können sogar direkt im Web zusammenarbeiten und bearbeiten!

4[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Markdown-PDF

Obwohl der Name Markdown-PDF lautet, kann Markdown tatsächlich in Dateien in verschiedenen Formaten exportiert werden.
Unterstützt so viele Exportformate.

4[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Markdown-Vorschau Github-Styling

Vorschau-Markdown-Dateien im Github-Stil.

4[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!

Download-Adresse: marketplace.visualstudio.com/items?itemN…

Zusammenfassung


So viel wurde eingeführt, gehen Sie und bauen Sie die schnellste, stabilste und am besten geeignete IDE für Sie!
Wenn dieser Artikel für Sie hilfreich ist, liken Sie ihn bitte.
Wenn Sie praktischere und wertvollere VSCode-Plug-Ins haben, hinterlassen Sie bitte eine Nachricht im Kommentarbereich.

Weitere Informationen zu VSCode finden Sie unter: vscode-Tutorial!

Python Java JavaScript typescript json css postman html npm angular String for cURL auto 字符串 class delete JS console dom github git ide vim vscode visualstudio 重构 bug copilot atom
Stellungnahme:
Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel:[Zusammenfassungsfreigabe] 10 häufig verwendete Front-End- und Back-End-Authentifizierungsmethoden, damit Sie nicht länger verwirrt sindNächster Artikel:[Zusammenfassungsfreigabe] 10 häufig verwendete Front-End- und Back-End-Authentifizierungsmethoden, damit Sie nicht länger verwirrt sind

In Verbindung stehende Artikel

Mehr sehen