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-Linkhttps://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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Welche Computerkonfiguration ist für VSCODE erforderlich?
Apr 15, 2025 pm 09:48 PM
VS Code system requirements: Operating system: Windows 10 and above, macOS 10.12 and above, Linux distribution processor: minimum 1.6 GHz, recommended 2.0 GHz and above memory: minimum 512 MB, recommended 4 GB and above storage space: minimum 250 MB, recommended 1 GB and above other requirements: stable network connection, Xorg/Wayland (Linux)
So lösen Sie das Problem der VSCODE -chinesischen Annotationen, die Fragen zu Fragen werden
Apr 15, 2025 pm 11:36 PM
So lösen Sie das Problem, dass chinesische Kommentare im Visual Studio-Code zu Fragenzeichen werden: Überprüfen Sie die Dateikodierung und stellen Sie sicher, dass es sich um "UTF-8 ohne Bom" handelt. Ändern Sie die Schriftart in eine Schriftart, die chinesische Charaktere wie "Song Style" oder "Microsoft Yahei" unterstützt. Installieren Sie die Schriftart neu. Aktivieren Sie die Unterstützung von Unicode. Aktualisieren Sie VSCODE, starten Sie den Computer neu und erstellen Sie die Quelldatei neu.
Die Zukunft von HTML, CSS und JavaScript: Webentwicklungstrends
Apr 19, 2025 am 12:02 AM
Die zukünftigen Trends von HTML sind Semantik und Webkomponenten, die zukünftigen Trends von CSS sind CSS-in-JS und CssShudini, und die zukünftigen Trends von JavaScript sind WebAssembly und serverlos. 1. HTML -Semantik verbessern die Zugänglichkeits- und SEO -Effekte sowie Webkomponenten die Entwicklungseffizienz, aber der Browserkompatibilität sollte die Aufmerksamkeit geschenkt werden. 2. CSS-in-JS verbessert die Flexibilität des Stilmanagements, kann jedoch die Dateigröße erhöhen. CssShudini ermöglicht den direkten Betrieb des CSS -Renderings. 3.Webassembly optimiert die Browser -Anwendungsleistung, verfügt jedoch über eine steile Lernkurve, und serverloses vereinfacht die Entwicklung, erfordert jedoch eine Optimierung von Kaltstartproblemen.
So verwenden Sie VSCODE
Apr 15, 2025 pm 11:21 PM
Visual Studio Code (VSCODE) ist ein plattformübergreifender, Open-Source-Editor und kostenloser Code-Editor, der von Microsoft entwickelt wurde. Es ist bekannt für seine leichte, Skalierbarkeit und Unterstützung für eine Vielzahl von Programmiersprachen. Um VSCODE zu installieren, besuchen Sie bitte die offizielle Website, um das Installateur herunterzuladen und auszuführen. Bei der Verwendung von VSCODE können Sie neue Projekte erstellen, Code bearbeiten, Code bearbeiten, Projekte navigieren, VSCODE erweitern und Einstellungen verwalten. VSCODE ist für Windows, MacOS und Linux verfügbar, unterstützt mehrere Programmiersprachen und bietet verschiedene Erweiterungen über den Marktplatz. Zu den Vorteilen zählen leicht, Skalierbarkeit, umfangreiche Sprachunterstützung, umfangreiche Funktionen und Versionen
JavaScript und das Web: Kernfunktionalität und Anwendungsfälle
Apr 18, 2025 am 12:19 AM
Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.
VSCODE -Tutorial zur Verwendung
Apr 15, 2025 pm 10:09 PM
Das integrierte VSCODE-integrierte Terminal ist ein Entwicklungstool, mit dem das Ausführen von Befehlen und Skripten innerhalb des Editors den Entwicklungsprozess vereinfachen kann. Verwenden Sie VSCODE -Anschluss: Öffnen Sie das Terminal mit der T -T -T -Taste (Strg/CMD). Geben Sie einen Befehl ein oder führen Sie das Skript aus. Verwenden Sie Hotkeys (z. B. Strg l, um das Terminal zu löschen). Ändern Sie das Arbeitsverzeichnis (z. B. den CD -Befehl). Zu den erweiterten Funktionen gehören Debug -Modus, automatischer Code -Snippet -Abschluss und interaktiver Befehlsverlauf.
Die Kraft des Reagierens in HTML: Moderne Webentwicklung
Apr 18, 2025 am 12:22 AM
Die Anwendung von React in HTML verbessert die Effizienz und Flexibilität der Webentwicklung durch Komponentierungen und virtuelles DOM. 1) Die Reaktion der Komponentierung Die Idee unterteilt die Benutzeroberfläche in wiederverwendbare Einheiten, um das Management zu vereinfachen. 2) Virtuelle DOM -Optimierungsleistung, minimieren Sie DOM -Operationen durch Differungsalgorithmus. 3) Die JSX -Syntax ermöglicht das Schreiben von HTML in JavaScript, um die Entwicklungseffizienz zu verbessern. 4) Verwenden Sie den Usestate -Hook, um den Status zu verwalten und dynamische Inhaltsaktualisierungen zu realisieren. 5) Optimierungsstrategien umfassen die Verwendung von React.Memo und Usecallback, um unnötiges Rendern zu verringern.
Gemeinsame Befehle für VSCODE Terminal
Apr 15, 2025 pm 10:06 PM
Common commands for VS Code terminals include: Clear the terminal screen (clear), list the current directory file (ls), change the current working directory (cd), print the current working directory path (pwd), create a new directory (mkdir), delete empty directory (rmdir), create a new file (touch) delete a file or directory (rm), copy a file or directory (cp), move or rename a file or directory (MV) Dateiinhalt anzeigen (CAT) Dateiinhalt anzeigen und scrollen (weniger) Dateiinhalt anzeigen Inhalt nur Scrollen Sie nach unten (mehr) Zeigen Sie die ersten Zeilen der Datei an (Kopf).
