30 praktische VSCode-Plug-Ins zur Verdoppelung Ihrer Entwicklungseffizienz!

Dieser Artikel fasst 30 praktische VSCode-Plugins zusammen und teilt sie mit Ihnen, um die Effizienz Ihrer täglichen Entwicklungsarbeit zu verdoppeln. Ich hoffe, dass er für alle hilfreich sein wird!

1. Bildvorschau

Wenn Sie mit der Maus über den Link des Bildes fahren, können Sie außerdem die Größe und Auflösung des Bildes anzeigen das Bild. [Empfohlenes Lernen: „Vscode-Einführungs-Tutorial“]

2. Mit diesem Plug-in können Sie die öffnenden und schließenden Tags des HTML-Tags automatisch umbenennen, wenn Sie ein HTML-Tag 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.

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.

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.

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.

6. GitLens

GitLens erweitert die in Visual Studio Code integrierte Git-Funktionalität. Es hilft uns, den Code besser zu verstehen und schnell zu wissen, wer eine Codezeile oder einen Codeblock warum und wann geändert hat.

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

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

9. Projekt-Dashboard

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

10. CodeSnap

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

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

12. Path Autocomplete bietet eine automatische Pfadvervollständigung, sodass Sie sich diese langen Dateipfade nicht merken müssen.

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

14. Vetur

Ein unverzichtbares Plug-in für die Vue-Entwicklung. Es bietet praktische Tools für Vue.js, wie Debugging, Fehlerprüfung, Syntaxhervorhebung, Snippets usw.

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

16. Import Cast

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

17. Beautify

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

18. Code Time

Code Time kann die Zeit berechnen, die wir mit Visual Studio Code verbringen, und bietet eine Vielzahl von Datenindikatoren.

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

20. 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 und Sprachanrufen , usw.

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

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

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

24. REST-Client

Der REST-Client ermöglicht das Senden von HTTP-Anfragen und das Anzeigen der Antworten direkt im VS-Code. 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.

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 von Refactoring-Bedingungen, Deklarationen, Funktionen, TypeScript, Versprechen, JSX und mehr.

26. Live SASS Compiler

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

27. Remote-SSH

Remote-SSH kann jede Remote-Maschine mit einem SSH-Server als Entwicklungsumgebung verwenden. 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.

28. Debugger für Chrome

Debugger für Chrome ist ein von Microsoft entwickeltes Plug-in, mit dem wir JS-Code in VS Code debuggen können. 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.

29. npm Intellisense

Nachdem npm das Paket installiert hat, können Sie bei Bedarf intelligente Eingabeaufforderungen erhalten, und das npm-Modul wird automatisch in die Importanweisung eingefügt.

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

Damit können Sie einen lokalen Entwicklungsserver mit Live-Reload-Funktion für statische und dynamische Seiten starten und den Server mit einem einzigen Klick in der Statusleiste starten oder stoppen.

Originaladresse: https://juejin.cn/post/7090022862114783245

Autor: CUGGZ

Weitere Informationen zu VSCode finden Sie unter:

vscode-Tutorial

! !

Das obige ist der detaillierte Inhalt von30 praktische VSCode-Plug-Ins zur Verdoppelung Ihrer Entwicklungseffizienz!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!