Share
Visual Studio Code ist eines der neuesten Kinder im IDE-Block und macht viel Lärm. Es hat etwas gedauert, bis die Traktion an Bedeutung gewonnen hat, vielleicht, weil es eines der wenigen Open-Source-Produkte von Microsoft ist, aber die Open-Source-Community im Sturm erobert hat. Entwickler, die einst Sublime Text 3 und Atom ihre Treue geschworen haben, werden langsam von der Macht und Einfachheit von VS Code konvertiert - ganz zu schweigen von der unglaublichen Erweiterungsbibliothek.
Ich begann mein eigenes Codier-Leben mit Sublime Text 3, wechselte zu Atom und dann zu PHPStorm. Nachdem mein Abonnement bei JetBrains abgelaufen war, dachte ich, ich würde VS Code ausprobieren. Es macht mein Leben immer einfacher und macht mich dadurch zu einem besseren Entwickler.
Diese Einführung führt Sie von Null bis zum Helden, um Sie mit VS Code vertraut zu machen, und konzentrieren Sie sich speziell auf meine bevorzugten Frontend-Entwicklungserweiterungen, um sicherzustellen, dass alle Aspekte Ihres Workflows abgedeckt werden.
Ich werde für diesen Artikel einige Punkte annehmen:
Wenn Sie VS Code noch nicht installiert haben, besuchen Sie die Website von Visual Studio Code. VS Code ist plattformübergreifend, so dass unsere Konfigurationen unter Windows, Mac und Linux funktionieren.
VS Code ist auch als Homebrew Cask-Paket für Mac verfügbar: Brühkanne installieren Sie Visual Studio-Code
Ein Schritt, den ich bei vielen Tutorials oft übersehen habe, ist die Möglichkeit, VS-Code vom Terminal aus auszuführen. Dafür gibt es mehrere Möglichkeiten. Wenn Sie bereits über ein .bash_profile-Setup verfügen, können Sie Folgendes hinzufügen:
export PATH = "$ PATH: / Applications / Visual Studio Code.app/Contents/Resources/app/bin"
Wenn Sie mehr plattformübergreifend arbeiten möchten, klicken Sie auf die Verknüpfung Befehlszeile: Umschalt + Befehl + P und geben Sie das Wort ein Schale - Dies gibt Ihnen eine Option namens: Installieren Sie den Codebefehl in PATH - Drücken Sie die Eingabetaste und Sie sind fertig. Jetzt können Sie Dateien und Ordner vom Terminal aus starten, indem Sie Folgendes eingeben: Codepfad / zu / Datei / oder / dir
Lint Ihren Code - es ist der beste Weg, um Fehler zu stoppen, bevor sie unnötigen Stress verursachen!
Wenn Sie die neueste Version von ECMA Script ausführen, ist ESLint genau das Richtige für Sie. Diese Erweiterung integriert das ESLint-Mustererkennungsprogramm direkt in VS Code und hilft Ihnen mit häufigen Fehlern, die Entwickler mit der neuen Syntax machen. Voraussetzung ist, dass Sie das NPM ESLint-Paket entweder lokal in Ihrem Projekt oder global installiert haben.
Für alle, die gerne programmatischeres Sass schreiben, bietet Sass Lint einen einfach zu verwendenden Konfigurationssatz zum Schreiben von standardkonformem Sass.
JS Hint ist ein weiterer großartiger JavaScript-Linter, der Sie je nach Konfiguration mit Logik, Syntax und mehr unterstützt.
Wenn Sie ein TypeScript-Fan sind, ist die TSLint-Erweiterung Ihr bester Freund. Da TypeScript eine vorkompilierte Sprache ist, haben Sie die vollständige Kontrolle darüber, was der Compiler für Sie bestimmt, sowie die Optionen für die automatische Formatierung.
Alle diese Erweiterungen bieten Git-freundliche Möglichkeiten zum Verwalten benutzerdefinierter / freigegebener Konfigurationen zwischen Entwicklern in Ihrem Team, nämlich in .eslintrc und .sass-lint.yml oder .jshintrc
Ich habe absichtlich unsere HTML-Linters hier gelassen. Während ich eine Erweiterung wie Verschönern benutze, um mein HTML nach einem HTML-Format zu formatieren und zu tabgen .editorconfig Ich finde, dass HTML-Linters ziemlich schlecht funktionieren. Sie berücksichtigen keine Semantik und neigen dazu, Sie bei Problemen mit der Zugänglichkeit zu unterstützen. Da die Bedeutung von HTML relativ unklar sein kann, ist es besser, eine Reihe von Tools zu verwenden, die kleinere Jobs erledigen.
Um die HTML-Funktionalität in VS Code zu erweitern, verwende ich Folgendes:
Es könnte ein bisschen Verbesserung sein, aber ich mochte die automatische Schließtagfunktion von Sublime Text 3 immer. Die oben erwähnte Erweiterung hilft Ihnen dabei in VS Code.
Dies ist eine weitere nützliche HTML-Erweiterung, mit der Benutzer in ein HTML-Element klicken und dieses umbenennen können, während das schließende Tag gleichzeitig umbenannt wird.
Ich bin vor einiger Zeit von Grunt weggezogen, aber zufällig scheint es keine Grunt-Erweiterungen auf dem Markt zu geben, zumindest nicht mit genügend Traktion, um große Wirkung zu erzielen. Die folgenden Erweiterungen konzentrieren sich hauptsächlich auf Gulp und Webpack, da sie derzeit das Rennen in der Welt der Aufgabenverwaltung anführen.
Mit dieser Erweiterung können Sie die Befehlspalette in VS Code verwenden, um nützliche Gulp-Konfigurationen in Ihre Gulpfile.js einzufügen. Ein Muss, wenn Sie sich noch ein bisschen wackeln, wenn Sie Gulp einrichten.
Das Einrichten von Webpack kann eine der schwierigsten Aufgaben sein, die ein Entwickler ausführen muss. Die Webpack-Erweiterung für VS Code behebt die Angst und bietet Ihnen eine minimale webpack.config.js, um Ihr Projekt zu starten. Wenn Sie ein Fortschrittsbeamter sind und nicht gerne im Dunkeln gelassen werden, während Ihr Terminal über Dinge nachdenkt, dann ist die Webpack-Fortschrittserweiterung genau das Richtige für Sie. Es bietet einen schönen Fortschrittsbalken für die Arbeit von Webpack.
Eine der leistungsfähigsten Erweiterungen für die Versionskontrolle in VS Code ist:
Für Neueinsteiger und Fortgeschrittene ist Git Lens ein Kraftpaket. Es macht es leicht, Git und seine vielen Feinheiten einfacher und übersichtlicher zu machen. Ich habe es so gerne benutzt, dass ich, abgesehen von der Verwendung des Terminals zum Hinzufügen, Festschreiben, Verzweigen und Pushen, Git-GUIs komplett verworfen habe.
Nahezu jede Einstellung ist anpassbar. Git Lens bietet Echtzeit-Feedback von Git-Daten während der Programmierung. Möchten Sie wissen, wer diese Funktion geschrieben hat, die nicht funktioniert? Möchten Sie sehen, wie sehr sich der Code während der letzten Commits geändert hat? Sie sind sich nicht sicher, wie Sie mit einem Zusammenführungskonflikt in einer Datei umgehen sollen, die Sie nie geschrieben haben oder die wenig Kontext hat? Git Lens erledigt das alles für Sie.
Während andere IDEs die Mehrheit der Sprachen vollständig unterstützen, überlassen VS Code es Ihnen weitgehend. Wenn und wann Sie es benötigen, können Sie für jede Technologie, die Sie verwenden, Sprachunterstützung hinzufügen. Standardmäßig werden HTML und CSS sowie JavaScript bereitgestellt. Wenn Sie jedoch Python benötigen, ist dies nur ein Klick Weg. In meinem Workflow verwende ich Python immer wieder, aber Node war eine große Sache für mich.
Intellisense kümmert sich im Wesentlichen um die Fertigstellung. Sie können zum Beispiel die Tabulatortaste oder den Mauszeiger über einen Dateipfad drücken, und VS Code erledigt die harte Arbeit für Sie.
Wenn Sie zu den Leuten gehören, die gerne neue Technologien in Ihrem Workflow einsetzen und die neue Edition von JavaScript lieben, dann ist der Babel ES6 / ES7 Linter genau das Richtige für Sie.
Dies ist eine brillante Erweiterung, die Dateipfade während des Schreibens automatisch ausfüllt / vorschlägt. Wenn Sie aus einem PHPStorm-Hintergrund kommen, kennen Sie das Gefühl!
Eine großartige Erweiterung bei der Verwendung benötigen() oder einführen In Node.js erstellt diese Erweiterung Dateipfade für Knotenmodule automatisch.
Dies ist eine sehr nützliche Erweiterung für das automatische Ausfüllen von CSS-Klassennamen, die in den verknüpften CSS-Dateien definiert sind. Wenn Sie im Allgemeinen Bootstrap, Foundation oder nur ein Framework-Fan sind, sparen Sie viel Zeit!
Für die vorkompilierten CSS-Fans ermöglicht diese Erweiterung Intellisense für Importe, Mixins, Include-Funktionen und Funktionen in SCSS.
Wenn Sie PostCSS noch nicht kennengelernt haben, fehlen Sie. Es ist ein fortschrittlicher und extrem vorausschauender Satz von Plugins für CSS, der CSS um ein Vielfaches leistungsfähiger macht. Ich verwende zwei PostCSS-Erweiterungen: Syntax und Sortierung; Die eine ermöglicht die Syntaxunterstützung für neue CSS Level 4-Module wie das Verschachteln, und die andere ermöglicht mir, die CSS-Eigenschaften alphabetisch zu sortieren.
Obwohl dies nicht wirklich nur Intellisense ist, ist dies eine großartige Erweiterung für die Entwicklung von Vue.js. Es ist eine All-in-One-Lösung für das Hinzufügen von Fusseln, Intellisense und Formatierungen zur Entwicklung von Vue.js und enthält bereits einige der oben genannten Erweiterungen.
Dies ist eine vollständige Lösung für die Entwicklung von React Native-Anwendungen. In VSCode ist standardmäßig eine Menge Unterstützung für React integriert.
Sie verbringen viel Zeit vor Ihrer IDE, daher ist es genauso wichtig wie alle anderen Aspekte, die ich erwähnt habe.
Besorgen Sie sich zunächst einige Ordner- / Dateisymbole, damit Sie die verwendeten Dateien leicht unterscheiden können.
Cobalt 2 ist nicht zu dunkel, nicht zu hell und bietet einen guten Kontrast für ein Editor-Thema. Es hat auch eine entsprechende Farbeinstellung für ZSH-Terminals.
Wenn Sie noch nichts von Dash gehört haben, sollte es Ihr neuer bester Freund sein. Dash ist eine API-Dokumentations-App für Mac, aber diese Erweiterung lässt sich direkt in VS Code integrieren. Durch Klicken auf eine beliebige Methode wird Dash auf die entsprechende Seite geöffnet. Das gleiche Plugin unterstützt Zeal, eine Alternative für Windows und Linux.
Wie bereits erwähnt, ist die Erweiterung "Beautify" ein hervorragendes Werkzeug, wenn Sie die Code-Formatierung und die Standardisierung von Editoren unbedingt beherrschen. Hier können Sie auch ein einstellen .Jsbeautifyrc Datei, die Sie zur Zusammenarbeit an Git-Repos übergeben können. Verschönerung kann auch als Ersatz für verwendet werden .editorconfig wenn Sie es nicht unterstützen Verschönern Sie die Formate JS, CSS, Sass, JSON und HTML.
Immer mehr IDEs unterstützen EditorConfig, mit dem Sie eine .editorconfig in Ihrem Projekt Repos. Auf diese Weise können Entwickler und Entwickler IDEs und Linters aus einer Datei lesen, um Tabs und Abstände sowie das Zeilenende für Projekte zu standardisieren.
Testen Sie Prettier für eine robustere Lösung. Prettier folgt dem gleichen Konfigurationsparadigma wie ESLint und bietet Ihnen eine .Prettierrc Datei, die an Repositorys übergeben werden kann. Es wird auch aus dem lesen .editorconfig Datei, falls vorhanden Tatsächlich können Sie ESLint und Sass Lint loswerden und Prettier als One-Stop-Lösung verwenden. Es hat eigene Erweiterungen für EsLint, StyleLint und mehr.
Ich bin vor kurzem zu ZSH gewechselt, was meine Terminalerfahrung komplett verändert hat. Obwohl es keine direkte Erweiterung von VS Code ist, kann es über das Terminalfenster integriert werden. Ich musste einige Einstellungen vornehmen, damit es auf dem Mac funktioniert, insbesondere mit Farben und Designs.
ZSH bietet Funktionen wie das Ausfüllen von Registerkarten für Verzeichnisse, Dateien, Git-Zweige und mehr. Sie können mehr über die Einrichtung von ZSH im Github-Repo lesen oder eine Nachricht in den Kommentaren hinterlassen, wenn Sie mehr erfahren möchten.
Im Lieferumfang von Visual Studio Code ist das Debuggen von JavaScript bereits enthalten. Sie können mit den folgenden Erweiterungen noch einen Schritt weiter gehen:
Diese Erweiterung ermöglicht eine direkte Synchronisierung zwischen dem VS Code Debugger und den Chrome Developer Tools, mit der Sie Haltepunkte setzen und direkt in den Code springen können.
Das ist der Abschluss meiner Erweiterungen für Visual Studio Code. Welches sind Ihre persönlichen Favoriten? Vergessen Sie nicht, dass das Codieren Spaß machen sollte. Möglicherweise benötigen Sie einige Melodien, um Sie dabei zu unterstützen. Die Spotify-Erweiterung fügt der VS-Code-Benutzeroberfläche einen winzigen Inline-Mediaplayer hinzu.
Accentsconagua