[Organisation und Freigabe] VSCode-Plug-Ins, die für das Frontend im Jahr 2023 unerlässlich sind

Visual Studio Code ist ein kostenloser, plattformübergreifender Quellcode-Editor, der von Microsoft zum Schreiben moderner Web- und Cloud-Anwendungen entwickelt wurde. Es enthält einen umfangreichen Plug-In-Markt mit vielen praktischen Plug-Ins. Teilen wir die wesentlichen VS Code-Plug-ins für das Frontend im Jahr 2023!

Front-End Framework

---

es7+ React/Redux/React-native Snippets

Dis-Plugin bietet viele Kurzpräfixe, um die Entwicklung zu beschleunigen und Entwicklern für React, Redux, zu helfen GraphQ L Erstellen Sie Codefragmente und Syntax mit React Native. Erstellen Sie beispielsweise eine neue Datei, geben Sie rfce ein und drücken Sie dann die Eingabetaste. Dadurch wird eine React-Funktionskomponente generiert, React importiert und die Komponente exportiert.

VSCode React Refactor

Dies ist eine VS Code-Erweiterung, die speziell für React-Entwickler entwickelt wurde. Refactoring kann bei der Arbeit an großen Projekten eine Herausforderung sein. Mit dem VSCode React Refactor, der JSX-Codefragmente in neue Klassen und Komponenten extrahiert, kann Code schnell umgestaltet werden. Darüber hinaus werden TypeScript, TSX, reguläre Funktionen, Klassen und Pfeilfunktionen unterstützt.

Einfache React-Snippets

Dieses Plugin bietet einen sorgfältig ausgewählten Satz von React-Snippets, die durch die Eingabe einiger Buchstaben einfach zu Ihrem Code hinzugefügt werden können. Wenn Sie beispielsweise imr eingeben, wird React in die Komponente importiert.

Typescript React Code Snippets

Dieses Plugin enthält React Code Snippets mit Typescript. Es unterstützt Sprachen wie Typescript (.ts) oder TypeScript React (.tsx). Unten finden Sie zwei Ausschnitte zum Erstellen von React-Komponenten mit TypeScript.

• React standardmäßig exportieren:

• React-Komponente exportieren:

Vue-Sprachfunktionen (Volar)

Standardmäßig sieht unsere Vue-Komponente so aus:

Verwenden Sie dieses Plugin, um eine schöne Syntaxhervorhebung, Fehlerprüfung und Codeformatierung zu erhalten. Außerdem werden viele Vue-Anweisungen und Event-Handler hinzugefügt, um beim Tippen tolle Vorschläge zu liefern.

volar ist ein Sprachunterstützungs-Plugin, das speziell für Vue 3 entwickelt wurde. Es basiert auf @vue/reactivity, das alles nach Bedarf berechnet und so eine Leistung auf Service-Level der nativen TypeScript-Sprache ermöglicht.

Da Vue 3 + TypeScript immer beliebter wird, treten bei Vetur (der offiziellen VS-Code-Erweiterung für Vue) Probleme auf, z. B. eine hohe CPU-Auslastung bei der Verwendung von Vue mit TypeScript oder die fehlende Unterstützung des neuen -Syntax. Volar löst die Probleme von Vetur und bietet das beste Entwicklungserlebnis für Vue 3 + TypeScript-Benutzer. Es bietet vollständige Sprachunterstützung für Vue 3, einschließlich der standardmäßigen Single File Group <script setup></script> 语法。而 Volar 就解决了 Vetur 的问题，并为 Vue 3 + TypeScript 用户提供了最佳的开发体验。它为 Vue 3 提供完整的语言支持，包括标准的单文件组件 (SFC) 语法及其最新添加的 <script setup></script>ware

(SFC)-Syntax und ihrer neuesten Ergänzung, <script setup></script>.

Vue 3-Snippets

Dieses Plug-in enthält alle Code-Snippets, die den APIs Vue.js 2 und Vue.js 3 entsprechen.

Vue VSCode-Snippets

Dieses Plugin fügt Vue 2-Snippets und Vue 3-Snippets zu Visual Studio Code hinzu.

🎜

React Native Tools

Die React Native Tools-Erweiterung wurde vom Microsoft-Team erstellt und bietet eine Entwicklungsumgebung für React Native-Projekte. Das Plugin ermöglicht das einfache Ausführen und Debuggen von Code auf verschiedenen Simulatoren oder Emulatoren, das schnelle Ausführen von React-Native-Befehlen über die Befehlspalette, ohne Befehle manuell im Terminal ausführen zu müssen, und die Verwendung von IntelliSense zum Durchsuchen von React Native-Funktionen, -Objekten, -Parametern und mehr .

JavaScript (ES6)-Code-Snippets

Mit diesem Plug-in können Sie vordefinierte ES6-Syntax-Snippet-Kurzfassungen verwenden und so die Entwicklungseffizienz verbessern. Dieses VS-Code-Plugin ist anpassbar, da es nicht spezifisch für ein Framework ist.

Git-Integration

---

GitLens

Dieses Plugin erweitert Git in VS Code und gibt versteckte Daten aus jedem Repository frei. Sie können schnell erkennen, wer den Code geschrieben hat, problemlos in Git-Repositorys navigieren und diese erkunden, Einblicke mit umfangreichen Visualisierungen und leistungsstarken Vergleichsbefehlen erhalten und mehr tun, um Ihren Code besser zu verstehen.

Git-Verlauf

Dieses Plugin wird verwendet, um Git-Protokolle und den Dateiverlauf anzuzeigen und Zweige oder Commits zu vergleichen.

Git Graph

Das Git Graph-Plugin wird verwendet, um Git-Vorgänge eines Repositorys visuell anzuzeigen und Git-Vorgänge einfach aus dem Diagramm heraus auszuführen.

Datenanalyse

---

Importkosten

Beim Importieren mehrerer Pakete in ein Projekt können Leistungsprobleme auftreten. Importkosten werden verwendet, um die Kosten für den Import bestimmter Bibliotheken in das Projekt anzuzeigen . . Das Plugin zeigt die Größe der importierten Bibliothek an. Wenn die Größe grün ist, bedeutet dies, dass die Bibliothek klein ist, während rot bedeutet, dass die Bibliothek groß ist.

Time Master

Automatisch generierte Metriken, Erkenntnisse und Zeiterfassung aus Programmieraktivitäten. Es ist ein Open-Source-Projekt, unabhängig von der Netzwerkumgebung, sicher und leichtgewichtig.

VS-Codezähler-Plug-in wird verwendet, um die Anzahl der Projektcodezeilen zu zählen. Klicken Sie nach der Installation des Plug-ins mit der rechten Maustaste auf den Ordner, in dem der Code gezählt werden muss Wählen Sie „Zeilen im Verzeichnis zählen“. Im Projektstammverzeichnis wird ein Ordner mit dem Namen „.VSCodeCounter“ angezeigt, der Ergebnisse in verschiedenen Formaten enthält. Die Ergebnisse zeigen die Gesamtzahl der Codezeilen, die Anzahl der Dateizeilen in verschiedenen Formaten, Dateifunktionen mit unterschiedlichen Pfaden usw. an. Die Anzahl der Codezeilen umfasst die Anzahl der reinen Codezeilen, die Anzahl der Leerzeilen und die Anzahl der Kommentarzeilen.

Funktionsverbesserung

Doppelte Aktion

---

Bei der Entwicklung kann es vorkommen, dass wir eine Datei (Komponente) kopieren müssen. Standardmäßig müssen Sie mit der rechten Maustaste darauf klicken Datei und klicken Sie dann auf Kopieren. Klicken Sie mit der rechten Maustaste auf den Ordner, in den Sie die Dateien kopieren möchten, und klicken Sie auf Einfügen. Klicken Sie erneut mit der rechten Maustaste auf die Datei und benennen Sie sie um.

Mit diesem Plugin sehen Sie die neue Option „Datei oder Verzeichnis duplizieren“, wenn Sie mit der rechten Maustaste auf eine Datei klicken. Klicken Sie einfach darauf, geben Sie den neuen Namen für die Datei ein und drücken Sie die Eingabetaste.

npm Intellisense

Dieses Plugin bietet Autovervollständigungsfunktionen für npm-Module in Importanweisungen. Alle Importe von npm-Modulen werden automatisch über diese Erweiterung abgewickelt.

Path Intellisense

Dieses Plug-in wird verwendet, um Dateinamen automatisch zu vervollständigen. Beim Importieren anderer Dateien können Sie die Datei auffordern und den zu importierenden Dateinamen schnell vervollständigen.

Tag automatisch umbenennen

Verwenden Sie dieses Plug-in, um die öffnenden und schließenden Tags eines HTML-Tags beim Umbenennen automatisch umzubenennen. Vermeiden Sie es, nur das öffnende Tag zu ändern und zu vergessen, das schließende Tag zu ändern. Die Erweiterung funktioniert mit HTML, XML, PHP und JavaScript.

Tag zum automatischen Schließen

Wenn Sie ein bestimmtes HTML-Element verwenden möchten, müssen Sie normalerweise das Start-Tag und das End-Tag eingeben. Nachdem Sie dieses Plugin verwendet haben, müssen Sie nur noch das öffnende Tag eingeben und das schließende Tag wird automatisch hinzugefügt. Für Vue-Entwickler werden auch benutzerdefinierte Typnamen unterstützt. Wenn Sie das öffnende Tag einer benutzerdefinierten Komponente eingeben, wird automatisch das schließende Tag hinzugefügt.

CSS Peek

Verwenden Sie dieses Plugin, um schnell in externen Stylesheets definierte CSS-Stile direkt aus HTML- und JavaScript-Dateien zu navigieren und zu bearbeiten. Es bietet eine „Peek“-Funktion. Wählen Sie einen Klassen- oder ID-Namen in HTML aus und halten Sie die Strg-Taste + linke Maustaste gedrückt, um die CSS-Position des Namens direkt zu finden.

Dieses Plugin eignet sich hervorragend für die Arbeit mit großen oder komplexen CSS-Stylesheets, da es Ihnen ermöglicht, auf bestimmte Elemente angewendete Stile schnell zu finden und zu bearbeiten, ohne mehrere Dateien durchsuchen oder große Codemengen durchsuchen zu müssen.

Regex Previewer

Regex Previewer wird zum Testen regulärer Ausdrücke verwendet. Beim Schreiben regulärer Ausdrücke können Sie direkt die Tastenkombination Strg+Alt+M (Windows) oder ⌥+⌘+M (Mac) verwenden, um eine Registerkarte auf der rechten Seite des Editors zu öffnen, in der Sie einige Tests für reguläre Ausdrücke schreiben können. Anwendungsfall: Klicken Sie nach dem Schreiben auf Regex testen ... über dem regulären Ausdruck. Anschließend werden die übereinstimmenden Zeichen auf der rechten Registerkarte hervorgehoben:

Code-Rechtschreibprüfung

Das Code-Rechtschreibprüfungs-Plug-in kann prüfen ob Rechtschreibfehler in Wörtern vorliegen. Die Prüfregeln folgen CamelCase (Kamel-Schreibweise).

Verschönerung programmieren

---

Matching-Tag hervorheben

Bei vielen HTML-Tags ist es manchmal schwierig, das End-Tag am entsprechenden Start-Tag zu positionieren und umgekehrt. Wenn Sie bei diesem Plugin auf das öffnende Tag klicken, wird das schließende Tag unterstrichen angezeigt. Darüber hinaus werden die öffnenden und schließenden Tags im Codebaum hervorgehoben. Bei Bedarf können Sie den Stil anpassen, um die Unterstreichung stärker hervorzuheben.

Darüber hinaus verfügt das Plugin über einige praktische Befehle. Wenn Sie also auf ein Tag klicken, können Sie mit Strg + Umschalt + P das Befehlsfeld öffnen und nach **"ctrl + shift + P打开命令面板并搜索**“Highlight Matching Tag”**，会看到两个可以在项目中使用的命令。

TODO Highlight

如果想在将代码发布到生产环境之前提醒自己注意事项或代码中未完成的事情，TODO Highlight VS Code 插件会非常有用。该插件会在代码注释中突出显示某些关键字，如 FIXME: 和 TODO:Übereinstimmendes Tag hervorheben" suchen

”**, Sie sehen zwei Befehle, die im Projekt verwendet werden können.

TODO Highlight

Das TODO Highlight VS Code-Plugin ist sehr nützlich, wenn Sie sich an Notizen oder Dinge erinnern möchten, die im Code nicht erledigt sind, bevor Sie ihn für die Produktion freigeben. Das Plugin hebt bestimmte Schlüsselwörter wie FIXME: und TODO: in Codekommentaren hervor, um Sie an Dinge zu erinnern, die Sie beachten sollten oder die noch nicht erledigt wurden.

Verwenden Sie außerdem die Tastenkombination Strg + Umschalt + P, um die Befehlspalette zu öffnen und nach Todo Highlight zu suchen. Wählen Sie „Hervorgehobene Anmerkungen auflisten“ aus und wählen Sie dann „Alle“ aus, um alle in allen Dateien verbliebenen hervorgehobenen Anmerkungen aufzulisten.

🎜Bessere Kommentare🎜🎜🎜Dieses Plug-in fügt verschiedenen Arten von Kommentaren unterschiedliche Farben hinzu, was die Unterscheidung erleichtert und uns dabei hilft, benutzerfreundlichere Kommentare im Code zu erstellen. 🎜🎜🎜🎜

Colorize

Colorize fügt dem Farbcode einen Hintergrund hinzu, der aktuell mit der Farbe des Codes übereinstimmt. Es visualisiert CSS-Farben durch CSS-Variablen, Präprozessorvariablen, HSL/HSLA-Farben, browserübergreifende Farben, EXA-, RGB-, RGBA- und ARGB-Farbhintergründe, um Entwicklern eine schnelle Unterscheidung von Farben zu erleichtern.

Bildvorschau

Wenn Sie mit diesem Plug-in mit der Maus über den Link des Bildes fahren, können Sie eine Vorschau des Bildes in Echtzeit anzeigen das Bild.

CodeSnap

CodeSnap wird zum Screenshoten und Teilen von Code verwendet. Screenshots können mit Text oder Formen versehen und über Links geteilt oder in Websites oder Dokumente eingebunden werden. Verwenden Sie einfach Strg + Umschalt + P und geben Sie CodeSnap ein. Drücken Sie dann die Eingabetaste und das CodeSnap-Fenster wird geöffnet.

Error Lens

Error Lens ist ein Plug-in, das Codeinspektionen (Fehler, Warnungen, Syntaxprobleme) hervorhebt. Error Lens verbessert die Diagnosefähigkeiten einer Sprache, indem es die Diagnose stärker hervorhebt, die gesamte Zeile hervorhebt, in der eine von der Sprache generierte Diagnose auftritt, und Diagnosemeldungen online an der Stelle der Codezeile druckt.

Themensymbole

---

One Dark Pro

Dracula Official

GitHub Theme

Winter Is Coming Theme

Night Owl

Monokai Pro

One Monokai

Shades of Purple

Ayu

vscode-icons

VSCode offizielle Symbolbibliothek.

Material Icon Theme

Dieses Plugin bietet Symbole für Dateien und Ordner basierend auf dem neuesten Material Design-Theme. Es hilft uns, Dateien zu identifizieren und dem Editor ein individuelles Aussehen zu verleihen.

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

Das obige ist der detaillierte Inhalt von[Organisation und Freigabe] VSCode-Plug-Ins, die für das Frontend im Jahr 2023 unerlässlich sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!