Heim  >  Artikel  >  Entwicklungswerkzeuge  >  [Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt

[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt

青灯夜游
青灯夜游nach vorne
2022-10-08 18:12:554146Durchsuche

In diesem Artikel werden hauptsächlich einige gute Plug-Ins vorgestellt, die ich im Laufe der Jahre bei der Verwendung von VSCode verwendet habe. Unter diesen 30 VSCode-Plugins gibt es immer eines, das zu Ihnen passt!

[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt

1. Live-Server

Live-Server ist ein kleiner Server mit Echtzeit-Ladefunktion. Sie können Live-Server als Echtzeit-Server im Projekt verwenden, um die entwickelte Webseite oder den Projekteffekt in Echtzeit anzuzeigen Zeit. [Empfohlenes Lernen: „Vscode-Einführungs-Tutorial“]

Es startet einen lokalen Entwicklungsserver mit Echtzeit-Neuladefunktion für statische und dynamische Seiten. Sie können den Server mit einem Klick in der Statusleiste starten oder stoppen.

[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt

2. Tag automatisch umbenennen

Verwenden Sie diese Erweiterung, um die öffnenden und schließenden Tags eines HTML-Tags automatisch umzubenennen, wenn Sie es umbenennen. 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] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt

3. Bracket Pair Colorizer

Verwenden Sie dieses Plug-in, um die Klammern im Code mit verschiedenen Farben zu unterscheiden, was für Codes mit vielen Klammern sehr praktisch ist. Das Plugin unterstützt auch benutzerdefinierte Klammerfarben.

[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt

4. Farbhervorhebung

Diese Erweiterung kann zum Stylen von CSS-Farben verwendet werden. Zusätzlich zu CSS werden auch JavaScript-, HTML-, JSON- usw. Dateien eingefärbt, die keine Standardfarben anzeigen. Das Plugin färbt Farbnamen, RGB-, RGBA- und HEX-Farben.

[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt

5. Die Erweiterung „Better Comments“ kann uns dabei helfen, benutzerfreundlichere Kommentare im Code zu erstellen, wobei uns verschiedene Formen und Farben von Kommentaren zur Auswahl stehen.

[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt 6. GitLens

GitLens erweitert die in Visual Studio Code integrierte Git-Funktionalität. GitLens hilft uns, unseren Code besser zu verstehen. Sehen Sie schnell, wer eine Codezeile oder einen Codeblock geändert hat, warum und wann. Darüber hinaus ermöglicht es uns, die Geschichte und Entwicklung der Codebasis einfach zu erkunden.


[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt7. VSCode-Icons

VSCode-Icons ist ein Dateibild-Plug-in, das verschiedenen Dateitypen im Projekt unterschiedliche Symbole hinzufügen kann. Erleichtert uns die Unterscheidung zwischen verschiedenen Dateitypen.

Nach Abschluss der Installation führen Sie die folgenden Schritte aus, um sie zu verwenden: Datei → Einstellungen → Dateisymbol-Design → VSCode-Symbole.

[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt8. Tabnine

tabnine ist ein mehrsprachiges Plug-in, das uns automatisch bei der Vervollständigung der Codeeingabe helfen kann. Ziel von Tabnine ist es, die Entwicklerproduktivität durch KI-basierte Systeme zu steigern.

[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt 9. Projekt-Dashboard

Projekt-Dashboard ist ein Projekt-Dashboard-Plug-in, das häufig aufgerufene Ordner, Dateien usw. an das Dashboard anheften kann, um schnell darauf zuzugreifen.

[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt

10. CodeSnap

CodeSnap ist ein vscode-Code-Screenshot-Erfassungs-Plug-in. Wählen Sie einfach das entsprechende Codesegment im Projekt aus, um schnell einen Screenshot des Codes zu erstellen.

[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt

11. CSS Peek

Mit dem CSS Peek-Plugin können wir einen Klassen- oder ID-Namen in HTML auswählen und die Strg-Taste + linke Maustaste gedrückt halten, um die CSS-Position des Namens direkt zu lokalisieren. Verbesserung der Entwicklungseffizienz.

1[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt

12. Pfad-Autovervollständigung

Pfad-Autovervollständigung bietet Pfad-Autovervollständigung für VS-Code, sodass Sie sich diese langen Dateipfade nicht merken müssen.

1[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt

13. Auto-Close-Tag-Plugin wird verwendet, um HTML-Schließ-Tags automatisch zu vervollständigen.

1[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt 14. Vetur

Ein unverzichtbares Plugin für die Vue-Entwicklung, das nützliche Tools für Vue.js wie Debugging, Fehlerprüfung, Syntaxhervorhebung und Snippets bereitstellt.

1[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt15.

IntelliCode

IntelliCode soll Entwicklern dabei helfen, intelligente Codevorschläge bereitzustellen. Es unterstützt standardmäßig Python, TypeScript/JavaScript, React und Java. IntelliCode spart Zeit, indem es die Inhalte, die Sie am wahrscheinlichsten verwenden, ganz oben auf die Liste setzt. IntelliCode-Empfehlungen basieren auf Tausenden von Open-Source-Projekten auf GitHub.

1[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt16. Das Plugin Import Cast

wird verwendet, um die Größe importierter Pakete inline im Editor anzuzeigen. Diese Erweiterung verwendet Webpack, um die Größe importierter Pakete zu erkennen.

[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt17. Beautify

Beautify kann uns helfen, die Anzeige von Code schöner zu formatieren. Es unterstützt beliebte Sprachen wie JavaScript, JSON, CSS, Sass und HTML.

1[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt18. Code Time

Code Time kann die Zeit berechnen, die wir mit Visual Studio Code verbringen. Es werden verschiedene Datenindikatoren bereitgestellt.

1[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt19. Settings Sync

Settings Sync wird verwendet, um Einstellungen für Visual Studio Code auf GitHub zu speichern und sie einfach anderen Computern zur Verfügung zu stellen, beispielsweise Informationen zu Erweiterungen oder Systemeinstellungen. Dieses Plugin erleichtert die Einrichtung für viele verschiedene Computer, ohne zuvor installierte Erweiterungen und zugehörige Einstellungen öffnen zu müssen.

1[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt20. Live Share hilft Entwicklern im Team, den Code im Programm in Echtzeit zu teilen, um das Programm einfach zu bearbeiten und zu debuggen, z. B. durch das Teilen von Debugging-Sitzungen, Terminalinstanzen, Localhost-Webanwendungen usw. Sprachanrufe warten.

[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt

21. Code-Rechtschreibprüfung: Die Code-Rechtschreibprüfung kann uns helfen, zu überprüfen, ob es Fehler in der Wortschreibung gibt. Die Prüfregeln folgen CamelCase (Camel Case Nomenklatur).

2[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt22.

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.

2[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt23. ES7 React/Redux/GraphQL/React-Native-Snippets

React/Redux/Reatc Native/React-Router-Syntax, ein Muss für React-Entwickler. Mit Hilfe dieses Codeausschnitts können Sie ganz einfach klassenbasierte Komponenten und Funktionskomponenten erstellen.

2[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt24. REST-Client

REST-Client ist eine VS-Code-Erweiterung, die es ermöglicht, HTTP-Anfragen zu stellen und die Antworten direkt in VS-Code anzuzeigen. Es ist Postman für VS Code und kann problemlos in den Code-Editor integriert werden. Der REST-Client unterstützt sowohl REST- als auch GraphQL-APIs.

2[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt 25. JavaScript Booster

JavaScript Booster schlägt automatisch schnelle Aktionen zur Umgestaltung oder Verbesserung Ihres Codes vor, indem er den Code und seinen Kontext analysiert. Es unterstützt mehrere Codeoperationen vom Refactoring von Bedingungen, Deklarationen, Funktionen, TypeScript, Versprechen, JSX und mehr.

2[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt26. Live SASS Compiler

Die Live SASS Compiler-Erweiterung kann SASS- oder SCSS-Dateien in Echtzeit kompilieren oder übersetzen.

[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt27. Remote-SSH

Mit Remote-SSH kann jeder Remote-Rechner mit einem SSH-Server als Entwicklungsumgebung verwendet werden. Da die Erweiterung Befehle direkt auf dem Remote-Computer ausführt, können Sie den Remote-Server schnell bedienen, ohne dass sich der Quellcode auf Ihrem lokalen Computer befindet.

ssh (1).gif28. Debugger für Chrome

Debugger für Chrome ist eine von Microsoft entwickelte VS-Code-Erweiterung, die es uns ermöglicht, JS-Code in VS-Code zu debuggen. Sie können Haltepunkte festlegen, den Code schrittweise durchlaufen, dynamisch hinzugefügte Skripte debuggen und vieles mehr. Es hilft, Fehler frühzeitig im Entwicklungsprozess zu erkennen.

2[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt29. npm Intellisense

Nach der Installation des npm-Pakets können Sie bei Bedarf intelligente Eingabeaufforderungen erhalten, und das npm-Modul wird automatisch in die Importanweisung eingefügt.

2[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt30.

Bildvorschau

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

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

Das obige ist der detaillierte Inhalt von[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt. 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