Visual Studio-Code Mein neuer Favorit-Code-Editor

In diesem Video möchte ich Ihnen meinen neuen bevorzugten Code-Editor vorstellen: Visual Studio Code. Visual Studio ist ein Microsoft-Produkt, das für viele von Ihnen eine Überraschung sein kann, aber Sie sollten Ihre Vorurteile für einen Moment beiseite legen, und kommen Sie zu mir, wenn ich Sie herum zeige.

Visual Studio-Code

 

Im Laufe der Jahre habe ich verschiedene Code-Editoren verwendet. TextMate, Coda, Sublime Text, Atom und jeder hat seine Vor- und Nachteile. Visual Studio Code ist jedoch bislang mein absoluter Favorit. Schauen wir uns also einige Features an.

Laden Sie zunächst die Version für Ihr System (Windows, Mac OS, Linux) unter code.visualstudio.com herunter (auch kostenlos)..

UI

Einer der Gründe, warum ich Visual Studio Code so mag, ist die Benutzeroberfläche. es ist wirklich einfach.

Es verfügt über ein paar Seitenleisten, die je nach Wunsch links oder rechts positioniert werden können. Die erste enthält einige Symbole zum Wechseln zwischen den Bedienfeldern. Wählen Sie zwischen Explorer, Suche, Git, Debug und Erweiterungen. Gehen Sie zu Ansicht, um die Art der Anzeige zu ändern (Vollbild, Zen-Modus usw.).

Wenn Sie sich im Explorer über Ordner bewegen, haben wir einige Optionen: Neue Datei, Neuer Ordner, Aktualisieren und Alles reduzieren. Wenn Sie mit der rechten Maustaste klicken, wird ein Kontextmenü angezeigt.

Befehlsleiste

Schlagen Umschalt-Befehl-P um die Befehlspalette aufzurufen.

In diesem Fenster können Sie nach beliebigen Elementen suchen, um schnell und einfach handeln zu können. Git-Befehle, Themes ändern, Erweiterungen installieren - dies kann alles über die Befehlspalette erfolgen.

Ähnlich, Befehl-P wird die bringen Gehe zur Datei… Palette.

Terminal

Halten Befehl-' öffnet das eingebaute Terminal, welches ich Liebe.

Dadurch wird das Terminal direkt im Stammverzeichnis Ihres Projekts geöffnet, sodass Sie nicht mehr navigieren müssen. Klicken Sie auf die + Das Symbol öffnet weitere Terminalfenster, zwischen denen über das Dropdown-Menü umgeschaltet werden kann. Dies alles ergibt eine wirklich nützliche Funktion, insbesondere wenn Sie beim Codieren Compiler verwenden.

Git

Ein weiteres Feature, von dem ich ein großer Fan bin, ist die Git-Integration. Änderungen, die Sie in Ihren Dateien vornehmen, werden an verschiedenen Stellen hervorgehoben, sodass Sie genau wissen, was passiert:

In der Abbildung oben sehen Sie die Benachrichtigung in der Seitenleiste, die Sie über eine nicht festgeschriebene Änderung informiert, die im Git-Bedienfeld aufgeführte Änderung und eine Zeile, die anzeigt, wo sich die Änderung in der Datei selbst befindet.

VSC zeigt auch Versionsvergleiche nebeneinander an, nur zur besseren Übersicht.

Andere standardmäßige Git-Befehle wie z. B. sync, pull usw. sind im Git-Bedienfeld verfügbar.

Emmet (Zen-Codierung)

Tolle Neuigkeiten: Emmet ist bereits in VSC integriert. Es ist keine Einrichtung oder Konfiguration erforderlich, Sie können es einfach mit (mit Tab der vordefinierte Hotkey zum Auslösen Ihrer Snippets ist), sobald Sie den Editor zum ersten Mal öffnen.

Mehrere Cursor

Wenn Sie einen Code in Ihrer Datei markieren, markiert VSC automatisch alle anderen Vorkommen dieser Zeichenfolge. Sie können dann schlagen Befehl-D um einen weiteren Cursor zur nächsten Instanz hinzuzufügen, oder Umschalt-Befehl-L um einen Cursor zu allen Instanzen hinzuzufügen. Massenbearbeitung, leicht.

die Einstellungen

Die Einstellungsseite in VSC ist sehr intuitiv. Wie Sublime Text werden die Einstellungen in einer Datei gespeichert (in diesem Fall JSON), in der Sie alle Standardeinstellungen durchsuchen können. Durch das Schlagen der bearbeiten Symbol neben jeder Einstellung, kopieren Sie es in eine benutzerdefinierte Datei, in der Sie Änderungen vornehmen können:

Schlagen sparen und sehen Sie, wie Ihre Änderungen sofort wirksam werden.

IntelliSense

IntelliSense ist eine Funktion in VSC, die ich unbedingt ausprobieren wollte, sobald ich den Editor geöffnet habe. Es handelt sich um einen supergeladenen Assistenten für die automatische Vervollständigung und Syntaxhervorhebung, der etwas weiter geht, als Sie diese Funktion erwarten würden.

Wenn Sie den Mauszeiger über CSS-Selektoren bewegen, erhalten Sie ein Beispiel, wie Sie den entsprechenden HTML-Code verwenden können (sehr nützlich für Anfänger):

Wenn Sie den Mauszeiger über die Eigenschaften bewegen, wird die Dokumentation der jeweiligen Tätigkeit angezeigt. Farbwerte sind mit kleinen Farbfeldern versehen, um Ihnen zu zeigen, wie sie auf dem Bildschirm erscheinen. Codiervorschläge beim Tippen sind ebenfalls äußerst gründlich.

Erweiterungen

Code> Einstellungen> Farbdesign öffnet die Farbpalette (Sie haben es erraten). Blättern Sie durch die Beispiele, und die Benutzeroberfläche ändert sich entsprechend. Schlagen Eingeben diese Änderungen dauerhaft zu machen.

Neben den Standardthemen gibt es auch einen großen Marktplatz mit anderen (derzeit kostenlosen) Beispielen sowie Erweiterungen aller Art, mit denen gespielt werden kann.

Fazit

Damit werden einige meiner Lieblingsfunktionen in Visual Studio Code kurz zusammengefasst. Es genügt zu sagen, dass viele, viele weitere Funktionen zur Diskussion zur Verfügung stehen. In Bezug auf meine Erfahrung mit VSC bisher kann ich nur sagen, dass es positiv ist. Früher habe ich Atom verwendet, und ich bereue es nicht, den Schalter ein bisschen gemacht zu haben. Natürlich können Sie mit mir nicht einverstanden sein, aber meiner Meinung nach werden Sie nicht viel falsch machen, wenn Sie diesen Code-Editor herunterladen und für eine Dreherei nutzen.

Nützliche Links

  • Wesentliche Erweiterungen für Visual Studio Code von Craig Campbell
  • Laden Sie Visual Studio Code herunter
  • Webdesign-Grundlagen: Auswählen eines Texteditors
  • Code-Marktplatz für Visual Studio