22 VSCode-Plug-Ins, die die Geschwindigkeit der Webentwicklung verbessern (sammelnswert)

Dieser Artikel stellt 22 der besten VSCodePlugins für die Webentwicklung vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein. U22 Visual Studio Code-Plug-in-Freigabe

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.

Adresse: 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 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 es 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.

Empfohlenes Lernen: „vscode-Tutorial

“

4

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

Klammern blockieren die Entwicklung Die Geißel des Lebens der Menschen. 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! Tag automatisch umbenennen

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 erforderlich Ein schneller Ort, um einige zu testen 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 Intelligence Bei großen Projekten kann es schwierig sein, sich bestimmte Dateinamen und die Verzeichnisse zu merken, in denen sich die Dateien befinden. 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.

10. Editor Config

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

Editor Config ist einer der wenigen Codierung Stile-Standard, unterstützt in allen gängigen Texteditoren/IDEs. 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

Du bist erhaben Sind Sie ein begeisterter Benutzer und nicht bereit, auf VS Code umzusteigen? 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 Ich mag Live Server Erweiterung Eine Erweiterung (oben erwähnt), aber diese 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

Protokollierung und Twitter Siehe diese wunderschönen Code-Screenshots? 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! Nein, nehmen Sie sich die Zeit, Ihren Code zu formatieren. 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: Plug-in ist für alle nützlich. Jeder Kommentartyp ist mit unterschiedlichen Farben markiert, um ihm unterschiedliche Bedeutungen zu verleihen und sich vom Rest des Codes abzuheben. 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 Hub-Verarbeitung Dateien, dann ist dieses Plugin genau das Richtige für Sie. 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

Sie wissen, dass Sie Anpassungen vornehmen können it-Symbol im VS-Code? 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 sind Google Fan von Materialdesign? 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 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. Better Align Art wie Leute, die eine perfekte Ausrichtung in ihrem Code haben, 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 ? 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.

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

Mehr programmbezogene Kenntnisse, Bitte besuchen Sie:

Programmierunterricht

! !

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