Bisher gibt es eine ausreichende Anzahl von Entwicklungstools, die die JavaScript-Sprache und die darauf basierenden Frameworks unterstützen. Die Frage der Auswahl eines bestimmten Tools geht über den Rahmen dieses Artikels hinaus. Ich werde sofort versuchen, meine Benutzererfahrung mit Visual Studio Code und Tools zu beschreiben, die JS-Entwicklern, insbesondere denen, die Vue verwenden, das Leben erleichtern sollen.
Es gibt viele Plugins im VSCode-Erweiterungsspeicher. Die bequemsten für die Webentwicklung werden unten aufgeführt.
HTML & CSS
Layout- und Schreibstile sind oft eine monotone Aufgabe, daher können die folgenden Erweiterungen Ihre Arbeit erleichtern und beschleunigen:
- Tag zum automatischen Schließen und Tag zum automatischen Umbenennen - einfache und bequeme Erweiterungen zur Vereinfachung der Arbeit mit dem Layout unterstützen Einzeldateikomponenten Vue.
- CSS Peek ist eine einfache Erweiterung, mit der Sie eine Regel schnell anzeigen oder navigieren können.
- Farbinfo - Ermöglicht das Anzeigen detaillierter Informationen zur Farbe und hat einen guten Einstellungsspielraum.
- Farbmarkierung - Fügt eine Anzeige von Farben in Form eines Rahmens hinzu, wenn im Code eine Farbcodierung erkannt wird.
- IntelliSense für CSS-Klassennamen in HTML - analysiert die Arbeitsumgebung, um die Möglichkeit zum automatischen Vervollständigen von CSS-Klassen hinzuzufügen.
Javascript
- Debbugger für Chrome - eine Erweiterung zur Vereinfachung des Debuggens direkt über den Code-Editor - funktioniert mit allem, was Chrome DevTools bietet.
- JavaScript (ES6) -Code-Snippets - eine Reihe von Snippets für JS - beschleunigen die Entwicklung erheblich.
- JSHint - Erweiterung für Tipps zum Design und zur Organisation von JS-Code mit flexiblen Einstellungen.
- ESLint ist ein Linter für JS mit flexiblen Einstellungen.
Vue
Es gibt nicht viele geeignete Erweiterungen für die Arbeit mit Vue. Im Folgenden sind einige der nützlichsten aufgeführt:
- Vetur ist ein vollständiger Satz der wichtigsten Add-Ons für die Arbeit mit Vue, wie z. B. Snippets und Syntaxhervorhebungen.
- Vue Peek - Fügt einen bequemen Übergang zu Vue- Komponenten hinzu.
Git
VSCode unterstützt die sofortige Arbeit mit Git, aber die integrierten Funktionen reichen nicht immer aus. Die folgenden Erweiterungen erleichtern die Arbeit mit Git ein wenig:
- GitLens ist wahrscheinlich die bekannteste Erweiterung für die Arbeit mit Git, die viele Funktionen zum Anzeigen von Git-Informationen hinzufügt.
- Git-Verlauf - Fügt die Möglichkeit hinzu, den Verlauf von Änderungen in Git bequem anzuzeigen, und verfügt über eine recht praktische Oberfläche.
- Git-Indikatoren - Ein einfacher Indikator für die Git-Aktivität in der unteren VSCode-Taskleiste.
Arbeitsumgebung und Entwicklungsprozess
Für eine produktive Arbeit wäre es schön, Helfer in Form von Add-Ons zu haben, die einfache Fehler hervorheben, einen Schreibstil und andere praktische Hinweise / Aktionen vorschlagen. Probieren Sie die folgenden Erweiterungen aus:
- Bracket Pair Colorizer - Fügt den Klammern, die die Codeblöcke umgeben, ein halbes Licht hinzu, erleichtert die Wahrnehmung von Code durch tiefes Verschachteln und trennt den Code visuell.
- Beautify ist meiner Meinung nach die bequemste Erweiterung für das automatische Code-Styling. Weitere Details finden Sie unter dem Link.
- Live Server ist eine sehr nützliche Erweiterung, mit der Sie Ihren Live Server beispielsweise für das Layout schnell starten können.
- Import Cost ist eine großartige Erweiterung, die die Größe des importierten Moduls anzeigt und es Ihnen ermöglicht, importierte Teile des Moduls detaillierter auszuwählen, ohne auf Bündelanalysatoren zurückgreifen zu müssen.
- NPM Intellisense - Autocomplete für npm-Module.
- Im Browser öffnen ist eine einfache Erweiterung, die einen Öffnungspunkt im Browser hinzufügt.
- Path Intellisense - Autocomplete für Dateinamen und deren Speicherort.
- Synchronisierung der Einstellungen - Nachdem Sie die Installation der erforderlichen Tools abgeschlossen und die Umgebung eingerichtet haben, können Sie die Konfiguration bequem speichern. Diese Erweiterung synchronisiert alles in git gist.
- Zeilen sortieren - eine einfache Möglichkeit, die Sortierung von Zeilen im Code unter bestimmten Bedingungen zu organisieren.
- TODO Highlight ist eine einfache Erweiterung zum Hervorheben von Schlüsselwörtern wie TODO, FIXME.
- Nachgestellte Leerzeichen - hebt zusätzliche Leerzeichen hervor.
- VS Live Share - Viele hatten ein Problem, als sie einem Remote-Entwickler sehr lange erklären mussten, wo und was falsch war. Diese Erweiterung vereinfacht das Leben in solchen Situationen, ermöglicht Ihnen eine Live-Demonstration, unterstützt die Arbeit mehrerer Benutzer und wirft die laufende Umgebung auf den Computer des Clients.
- Visual Studio IntelliCode - automatisiert Routineaufgaben für Entwickler in Sprachen wie Python, TypeScript / JavaScript und Java.
Es kann auch interessant sein.
- GraphQL für VSCode - eine Art Intellisense für GraphQL, die bequemste Erweiterung, unter dem Ruß viele nützliche, mehr auf dem Link.
- Instant Markdown - Live-Vorschau für Markdown-Markup.
- JSON als Code einfügen ist eine praktische Erweiterung, die ein Typmodell aus JSON-Daten generiert. Unterstützt TypeScript, Python, Go, Ruby, C #, Java, Swift, Rust, Kotlin, C ++, Flow, Objective-C, JavaScript, Elm und JSON-Schema.
- Rainbow CSV - Hintergrundbeleuchtung für CSV-Dateien.
- Regex Previewer ist eine sehr nützliche Erweiterung für regelmäßige Vorschauen.
- SVG Viewer - SVG Viewer.
Ich hoffe, dass diese Liste für Sie nützlich sein wird, ich freue mich über Ergänzungen.