Heim > Artikel > Entwicklungswerkzeuge > [Organisation und Freigabe] 30 praktische VSCode-Plug-Ins, die die Entwicklungseffizienz verdoppeln
Dieser Artikel fasst 30 praktische VSCode-Plug-Ins zusammen, die Ihre Entwicklungseffizienz verdoppeln und Ihre tägliche Entwicklungsarbeitseffizienz verdoppeln können. Ich hoffe, dass er für alle hilfreich ist!
Wenn Sie mit der Maus über den Link des Bildes fahren, können Sie außerdem eine Vorschau des Bildes in Echtzeit anzeigen Auflösung des Bildes.
Verwenden Sie dieses Plug-in, 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.
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. [Empfohlenes Lernen: vscode-Tutorial, Programmierunterricht]
Diese Erweiterung kann zum Festlegen von CSS-Farbstilen 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.
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.
Ein unverzichtbares Plug-in für die Vue-Entwicklung. Es bietet praktische Tools für Vue.js, wie Debugging, Fehlerprüfung, Syntaxhervorhebung, Snippets usw.
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.
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.
Beautify kann uns helfen, den Code schöner zu formatieren. Es unterstützt beliebte Sprachen wie JavaScript, JSON, CSS, Sass und HTML.
Code Time kann die Zeit berechnen, die wir mit Visual Studio Code verbringen, und bietet eine Vielzahl von Datenindikatoren.
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.
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 LensError 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-SnippetsReact/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-ClientDer 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 BoosterJavaScript 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 CompilerDie Live SASS Compiler-Erweiterung kann SASS- oder SCSS-Dateien in Echtzeit kompilieren oder in CSS-Dateien übersetzen.
27. Remote-SSHRemote-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.
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.
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.
Es geht darum, einen lokalen Entwicklungsserver mit Live-Reload-Funktion für statische und dynamische Seiten zu starten und den Server mit einem einzigen Klick in der Statusleiste zu starten oder zu stoppen.
Weitere Informationen zu VSCode finden Sie unter:
vscode Basic TutorialDas obige ist der detaillierte Inhalt von[Organisation und Freigabe] 30 praktische VSCode-Plug-Ins, die die Entwicklungseffizienz verdoppeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!