22 gute VSCode-Plug-Ins für die Webentwicklung (Teilen)

In diesem Artikel stellen wir Ihnen 22 gute VSCodePlugins für die Webentwicklung vor, die Entwicklern helfen sollen, die Entwicklungseffizienz zu verbessern.

【Empfohlene Studie: „vscode-Tutorial“】

1. Debugger für Chrome

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Vertrauen Sie mir, das Debuggen von JavaScript ist mehr als nur das Schreiben von console.log() (obwohl diese Methode am häufigsten verwendet wird). Chrome verfügt über einige integrierte Funktionen für ein besseres Debugging-Erlebnis. Mit diesem Plugin können Sie alle (oder fast alle) dieser Debugging-Funktionen in VS Code nutzen.

Wenn Sie mehr wissen möchten, können Sie lesen:

JavaScript in Chrome und Visual Studio Code debuggen.

https://scotch.io/tutorials/debugging-javascript-in-google-chrome-and-visual -studio-code

2. Javascript (ES6) Code-Snippets

https://scotch.io/tutorials/debugging-javascript-in-google-chrome-and-visual-studio-code

Ich liebe das Snippets-Plugin. Ich habe nicht das Bedürfnis, immer wieder denselben Code einzugeben. Dieses Plugin stellt Ihnen beliebte (ES6) JavaScript-Codefragmente zur Verfügung.

Hinweis: Wenn Sie keine es6javascript-Funktionen verwenden, nutzen Sie sie jetzt!

3. ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Möchten Sie besseren Code schreiben? Muss das gesamte Team ein einheitliches Format verwenden? Installieren Sie ESLint. Dieses Plugin kann so konfiguriert werden, dass es Code automatisch formatiert und Fehler oder Warnungen meldet. VS Code kann Ihnen mit der entsprechenden Konfiguration diese Tipps zeigen.

4. Live-Server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Nehmen Sie Änderungen im Code-Editor vor, wechseln Sie zum Browser und aktualisieren Sie ihn, um Änderungen anzuzeigen . Für Entwickler ist das eine Endlosschleife, aber was ist, wenn der Browser automatisch aktualisiert wird, wenn Sie Änderungen vornehmen? Hier kommt Live Server ins Spiel!

Es führt Ihre Anwendung auch auf einem lokalen Server aus. Manche Dinge können nur getestet werden, wenn die Anwendung auf dem Server läuft, das ist also ein Pluspunkt. 5. Bracket Pair Colorizor Bei viel verschachteltem Code ist es fast unmöglich festzustellen, welche Klammern zueinander passen. Bracket Pair Colorizor passt (wie zu erwarten) die Klammerfarben an, um den Code besser lesbar zu machen. Vertrau mir, du willst es! 6. Tag automatisch umbenennen Nun, mit „Tag automatisch umbenennen“ müssen Sie nur das Start- oder End-Tag umbenennen, und die anderen Tags werden automatisch umbenannt. Einfach, aber effektiv! 7. Quokka

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Brauchen Sie schnell etwas JavaScript? Früher habe ich die Konsole in Chrome geöffnet und Code eingegeben, aber es gibt viele Nachteile. Quokka stellt Ihnen ein JavaScript- (und TypeScript-) Scratchpad in VS Code zur Verfügung. Das bedeutet, dass Sie einen Code in Ihrem Lieblingseditor testen können! 8. Path Intellisense in dem es sich befindet, kann problematisch sein. Dieses Plugin liefert Ihnen clevere Tipps. Wenn Sie mit der Eingabe eines Pfads in Anführungszeichen beginnen, werden intelligente Eingabeaufforderungen für Verzeichnis- und Dateinamen angezeigt. Dadurch ersparen Sie sich viel Zeit mit dem Durchsuchen von Dateien :)

9. Projektmanager

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

Eine Sache, die ich hasse, ist der Wechsel zwischen Projekten im VS-Code. Jedes Mal muss ich den Datei-Explorer öffnen und das Element auf meinem Computer finden. Dies ändert sich jedoch mit der Anwendung des Projektmanagers. Mit diesem Plugin können Sie im Seitenmenü Ihres Projekts ein zusätzliches Menü öffnen. Sie können schnell zwischen Projekten wechseln, Favoriten speichern oder Git-Projekte automatisch aus dem Dateisystem erkennen.

Wenn Sie mehrere verschiedene Projekte entwickeln, ist dies eine großartige Möglichkeit, organisiert zu bleiben und die Effizienz zu steigern.

10. Editor Config

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

Editor Config ist ein Standard unter den wenigen Codierungsstilen, die in großen Texteditoren verfügbar sind. werden in der IDE unterstützt. Die Funktionsweise ist wie folgt. Sie speichern die Konfigurationsdatei in einem von Ihrem Editor unterstützten Repository. In diesem Fall müssen Sie VS Code Erweiterungen hinzufügen, damit diese Profile berücksichtigt werden. Es ist super einfach einzurichten und perfekt für Teamprojekte.

11. Sublime Text Keymap

https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings

Sie sind ein begeisterter Sublime-Benutzer und möchten nicht zu VS Code wechseln? Diese Erweiterung sorgt für einen nahtlosen Wechsel, indem alle Verknüpfungen so geändert werden, dass sie mit den Verknüpfungen von Sublime übereinstimmen. Welche Gründe hätten Sie nun, den Wechsel nicht vorzunehmen? 12. Browser-Vorschau aber diese Erweiterung geht in puncto Komfort noch einen Schritt weiter. Sie erhalten eine Live-Reload-Vorschau in VS Code. Sie müssen nicht mehr in Ihren Browser schauen, um kleine Änderungen zu sehen!

13. Git Lens

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Es gibt viele Git-Plugins, aber eines davon ist das leistungsstärkste und hat die meisten Funktionen. Sie erhalten Informationen zu Warnungen, Zeilen- und Dateiverlauf, Commit-Suchen und mehr. Wenn Sie Hilfe bei Ihrem Git-Workflow benötigen, beginnen Sie mit diesem Plugin!

14. Polacode

https://marketplace.visualstudio.com/items?itemName=pnp.polacode

Sie kennen die hübschen Code-Screenshots, die Sie auf Blogs und Twitter sehen? Nun, höchstwahrscheinlich stammen sie von Polacode. Es ist super einfach zu bedienen. Kopieren Sie einen Codeabschnitt in Ihre Zwischenablage, öffnen Sie die Erweiterung, fügen Sie den Code ein und klicken Sie auf Bild speichern! 15. Prettier Zuvor habe ich ESLint erwähnt, das Formatierung und Überprüfung ermöglicht. Wenn Sie keine Flusenkontrolle benötigen, entscheiden Sie sich für Prettier. Es ist sehr einfach einzurichten und kann so konfiguriert werden, dass der Code beim Speichern automatisch formatiert wird.

16. Bessere Kommentare

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

Dieses Plugin markiert verschiedene Arten von Kommentaren mit unterschiedlichen Farben Geben Sie ihnen eine andere Bedeutung und heben Sie sich vom Rest des Codes ab. Ich habe dies für Tipps verwendet. Es ist schwer, eine große orangefarbene Aufforderung zu ignorieren, die mir mitteilt, dass ich noch einige unvollendete Arbeiten zu erledigen habe.

Auch Farbcodes für Fragen, Warnungen und Hervorhebungen. Sie können auch Ihre eigenen benutzerdefinierten hinzufügen!

17. Git-Link

https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink

Wenn Sie die Dateien, an denen Sie arbeiten, in Github anzeigen möchten, ist dieses Plugin hilfreich passt zu dir. Klicken Sie nach der Installation einfach mit der rechten Maustaste auf die Datei und Sie sehen die Option zum Öffnen der Datei in Github. Wenn Sie das Git Lens-Plugin nicht verwenden, eignet sich dieses Plugin hervorragend zum Überprüfen des Verlaufs, der Zweigversionen usw.

18. VS-Code-Symbole

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

Wussten Sie, dass Sie die Symbole in VS-Code anpassen können? Wenn Sie sich die Einstellungen ansehen, sehen Sie eine Option für „Dateisymbol-Design“. Von dort aus können Sie aus vorinstallierten Symbolen auswählen oder ein Symbolpaket installieren. Dieses Plugin bietet Ihnen ein wirklich süßes Icon-Paket und wird von 11 Millionen Menschen verwendet!

19. Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Sind Sie ein Fan von Google Material Design? Schauen Sie sich dieses „Material Theme“-Icon-Paket an. Es gibt Hunderte verschiedener Symbole und sie sehen großartig aus!

20. Synchronisierung der Einstellungen

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Entwickler (ich selbst eingeschlossen) verbringen viel Zeit damit, die Entwicklung anzupassen Umgebung, insbesondere Texteditor. Mit dem Plugin „Settings Sync“ können Sie Einstellungen in Github speichern. Sie können dann mit einem einzigen Befehl in jede neue Version von VS Code geladen werden. 21. Better Align , dann brauchen Sie Better Align. Sie können mehrere Variablendeklarationen, nachgestellte Kommentare, Codeausschnitte usw. ausrichten. Es gibt keinen besseren Weg, um zu sehen, wie großartig dieses Plugin ist, als es zu installieren und auszuprobieren!

22. VIM

https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

Sind Sie ein erfahrener Benutzer von VIM? Wenn ja, herzlichen Glückwunsch, Sie können alle VIM-Tricks direkt in VS Code anwenden. Ich persönlich bin nicht besonders gut darin, aber ich weiß, wie wahnsinnig produktiv es sein kann, VIM voll auszuschöpfen und Ihnen so viel mehr Funktionalität zu bieten.

Originaladresse: https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-developmentOriginalautor: James Quick

Mehr Programmierkenntnisse, Bitte besuchen Sie:

Programmiervideos

! !

Das obige ist der detaillierte Inhalt von22 gute VSCode-Plug-Ins für die Webentwicklung (Teilen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!