22 praktische VSCode-Plug-Ins für die Webentwicklung

Verwandte Empfehlungen: „Vscode Basic 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 vscode nutzen.

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

„Debuggen von JavaScript in Chrome und Visual Studio Code“:

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

2. Javascript (ES6) Code-Snippets

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

Ich mag 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 die Ä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

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Brackets sind die Geißel, die Entwickler daran hindert, am Leben zu bleiben. Bei viel verschachteltem Code ist es fast unmöglich festzustellen, welche Klammern zueinander passen. Bracket Pair Colorizor gleicht (wie zu erwarten) die Klammerfarben an, um den Code besser lesbar zu machen. Vertrau mir, du willst es!

6. Tag automatisch umbenennen

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Müssen Sie Elemente in HTML 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

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Merken Sie sich bei großen Projekten bestimmte Dateinamen und den Speicherort der Dateien Verzeichnisse können umständlich 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. Das erspart Ihnen viel Zeit beim Durchsuchen von Dateien :)

9. Projektmanager

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

Eine Sache, die ich hasse, ist das Wechseln zwischen Projekten in 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. Editor-Konfiguration Beide werden 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 wechseln zu VS-Code? 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 Aus Bequemlichkeitsgründen geht diese Erweiterung 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

Kennen Sie die schönen Code-Screenshots, die Sie auf Blogs und auf 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. Hübscher

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Verschwenden Sie keine Zeit damit, Code zu formatieren ... es ist fertig. 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, um sie zu markieren haben eine andere Bedeutung und heben sie 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 sehen möchten, ist dieses Plugin genau das Richtige für Sie. Nach der Installation klicken Sie einfach mit der rechten Maustaste auf die Datei und Sie sehen die Option, die Datei in Github zu öffnen. 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, Entwicklungsumgebungen anzupassen. insbesondere Texteditoren. 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. Besser ausrichten

https://marketplace.visualstudio.com/items?itemName=wwm.better-align

Wenn Sie die Art von Person sind, die eine perfekte Ausrichtung in Ihrem Code mag, dann Sie benötigen 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 beherrschen alle VIM-Tricks und können sie direkt in VS Code verwenden. 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-development

Originalautor: James Quick

Übersetzungsadresse: https:/ /segmentfault.com/a/1190000038478784

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmierunterricht! !

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