Heim >Schlagzeilen >[Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!
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.
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:
Dies ist das helle Thema:
Dies ist die Artikelseite:
Es gibt auch Chat-Modus, Zen-Modus und andere Funktionen, kommen Sie und erleben Sie es !
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!
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.
Download-Adresse: marketplace.visualstudio.com/items?itemN…
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.
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?
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.
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.
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.
Download-Adresse: marketplace.visualstudio.com/items?itemN…
vscode-colorize
Farbhervorhebung.
Heben Sie Farbvariablen hervor, indem Sie sie mit Hintergrundfarbe füllen.
Unterstützt CSS:
Unterstützt auch JavaScript:
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.
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.
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.
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+'
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.Herunterladen Adresse: Marktplatz .visualstudio.com/items?itemN…
path-intellisense
Intelligente Pfaderkennung kann uns dabei helfen, Dateinamen automatisch zu ergänzen.
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.
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.
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 .
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.
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.
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.
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.
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.
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.
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.
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.
Download-Adresse: marketplace.visualstudio.com/items?itemN…
Dracula Official
.
Draculas offizielles Thema, das Eins davon die klassischen Themen und mein Favorit.
Download-Adresse: marketplace.visualstudio.com/items?itemN…
Material Theme
Material Theme bietet Themen im Materialstil, um den Code cooler aussehen zu lassen.
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.
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:
Nach der Verwendung von VSCode-Symbolen sieht das Symbol wie folgt aus:
Download-Adresse: marketplace.visualstudio.com/items?itemN…
Datei-Icons
Ein weiteres Icon-Theme-Plugin.
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:
Unterstützt so viele Arten von Ordnern:
Download-Adresse: marketplace.visualstudio.com/items?itemN…
todo-tree
todo Tree kann Projekte über TODO- und FIXME-Kommentare verwalten.
Wir können die mit Anmerkungen versehenen Dateien schnell anzeigen.
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.
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.
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.
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.
Download-Adresse: marketplace.visualstudio.com/items?itemN…
In GitHub öffnen
Sie können Projekte, Dateien, Aktionen, PR usw. schnell in Github öffnen.
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.
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.
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.
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.
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!
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.
Download-Adresse: marketplace.visualstudio.com/items?itemN…
Markdown-Vorschau Github-Styling
Vorschau-Markdown-Dateien im Github-Stil.
Download-Adresse: marketplace.visualstudio.com/items?itemN…
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!