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:554167Durchsuche
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](https://img.php.cn/upload/article/000/000/024/63414cc20180a461.jpg)
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](https://img.php.cn/upload/image/470/748/537/166522511638937%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522511638937[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](https://img.php.cn/upload/image/351/957/353/166522512359597%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522512359597[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](https://img.php.cn/upload/image/802/971/182/16652251306382%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "16652251306382[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](https://img.php.cn/upload/image/636/505/273/166522513675013%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522513675013[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](https://img.php.cn/upload/image/496/372/797/166522514237509%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522514237509[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt")
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 passt](https://img.php.cn/upload/article/000/000/024/166522530993067.jpg)
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 passt](https://img.php.cn/upload/image/713/238/545/166522515087554%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522515087554[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt")
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](https://img.php.cn/upload/image/264/129/820/166522515764724%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522515764724[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt")
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](https://img.php.cn/upload/image/838/732/414/166522516359280%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522516359280[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](https://img.php.cn/upload/image/152/242/226/166522516914949%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522516914949[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](https://img.php.cn/upload/image/348/772/591/166522517736771%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522517736771[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](https://img.php.cn/upload/image/873/477/595/166522518423326%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522518423326[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](https://img.php.cn/upload/image/528/544/736/166522519059838%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522519059838[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt")
Ein unverzichtbares Plugin für die Vue-Entwicklung, das nützliche Tools für Vue.js wie Debugging, Fehlerprüfung, Syntaxhervorhebung und Snippets bereitstellt.
IntelliCode![1[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt](https://img.php.cn/upload/image/667/629/786/166522519657064%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522519657064[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt")
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 passt](https://img.php.cn/upload/image/608/291/586/166522520287083%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522520287083[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt")
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 passt](https://img.php.cn/upload/image/481/246/284/166522520831382%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522520831382[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt")
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 passt](https://img.php.cn/upload/image/755/673/321/166522521416277%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522521416277[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt")
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 passt](https://img.php.cn/upload/image/134/278/824/166522522099005%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522522099005[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt")
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 passt](https://img.php.cn/upload/image/820/860/491/166522522725808%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522522725808[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](https://img.php.cn/upload/image/301/762/817/166522523485465%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522523485465[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 passt](https://img.php.cn/upload/image/257/979/317/166522524425733%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522524425733[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt")
**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 passt](https://img.php.cn/upload/image/158/315/811/166522525347188%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522525347188[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt")
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 passt](https://img.php.cn/upload/image/933/230/432/166522525967992%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522525967992[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt")
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](https://img.php.cn/upload/image/441/643/735/166522526616724%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522526616724[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt")
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 passt](https://img.php.cn/upload/image/786/874/450/166522527250094%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522527250094[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt")
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 passt](https://img.php.cn/upload/image/566/359/805/166522527875061%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522527875061[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt")
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.
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 passt](https://img.php.cn/upload/image/363/591/186/1665225291412196.gif "1665225291412196.gif")
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.
Bildvorschau![2[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt](https://img.php.cn/upload/image/896/354/370/166522529846149%5BOrganisation%20und%20Freigabe%5D%2030%20VSCode-Plug-Ins,%20es%20gibt%20immer%20eines,%20das%20zu%20Ihnen%20passt "166522529846149[Organisation und Freigabe] 30 VSCode-Plug-Ins, es gibt immer eines, das zu Ihnen passt")
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!
In Verbindung stehende Artikel
Mehr sehen- [Kompilieren und Teilen] Häufig verwendete und effiziente Tipps in VSCode (wunderbare Fähigkeiten und Tricks)
- Zeichnen Sie eine Lösung für den verstümmelten Code der Konsolenausgabe in vscode auf
- [Organisieren und teilen] Über 50 praktische VSCode-Plug-Ins, kommen Sie und sammeln Sie sie zur Verwendung!
- [Kompilierung und Freigabe] VSCode muss Plug-Ins für die Entwicklung von Vue-Projekten installieren
- Einfache praktische Weitergabe: Lassen Sie uns über die Entwicklung von VScode-Plug-Ins sprechen
- Lassen Sie uns darüber sprechen, wie Sie Emmet-Tastenkombinationen in VSCode hinzufügen