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

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

青灯夜游
青灯夜游nach vorne
2023-03-21 19:05:032480Durchsuche

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!

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

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. [Organisation und Freigabe] VSCode-Plug-Ins, die für das Frontend im Jahr 2023 unerlässlich sindErstellen 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. [Organisation und Freigabe] VSCode-Plug-Ins, die für das Frontend im Jahr 2023 unerlässlich sind

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. [Organisation und Freigabe] VSCode-Plug-Ins, die für das Frontend im Jahr 2023 unerlässlich sind

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.

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

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:

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

  • React-Komponente exportieren:

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

Vue-Sprachfunktionen (Volar)

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

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

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.

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

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.

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

Vue VSCode-Snippets

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

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

🎜

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 .

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

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.

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

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.

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

Git-Verlauf

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

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

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.

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

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.

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

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.

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

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.

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

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.

[Organisation und Freigabe] VSCode-Plug-Ins, die für das Frontend im Jahr 2023 unerlässlich sindnpm 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.

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

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.

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

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.

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

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.

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

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:

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

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).

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

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”**,会看到两个可以在项目中使用的命令。

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

TODO Highlight

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

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

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

[Organisation und Freigabe] VSCode-Plug-Ins, die für das Frontend im Jahr 2023 unerlässlich sindTODO 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.

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

🎜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.

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

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.

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

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.

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

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.

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

Themensymbole


One Dark Pro

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

Dracula Official

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

GitHub Theme

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

Winter Is Coming Theme

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

Night Owl

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

Monokai Pro

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

One Monokai

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

Shades of Purple

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

Ayu

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

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.

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

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!

Stellungnahme:
Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen