5 Erweiterungen und Designs für VS Code, die das Leben eines Front-End-Entwicklers verändern können

Der Autor des Artikels, dessen Übersetzung wir heute veröffentlichen, möchte über verschiedene Erweiterungen und Themen für den beliebten VS-Code-Editor sprechen, die das Leben des Entwicklers verbessern können.

SCSS IntelliSense

→ SCSS IntelliSense- Seite

Das Erstellen von Variablen in SCSS ist einfach und macht Spaß. Wie kann man sich an sie erinnern? Hier ergeben sich meist Schwierigkeiten.

Wenn Sie so sind wie ich, dann haben Sie die Datei _variables.scss , die Hunderte von _variables.scss und Variablennamen enthält, die Ihnen um drei Uhr morgens in den Sinn kamen. Die SCSS-Erweiterung IntelliSense bietet Hinweise für Variablennamen beim Arbeiten mit Projektcode. Und Sie müssen sich diese Namen nicht mehr im Detail merken. Sie müssen nicht in einer Datei mit Variablennamen stöbern, um sie abzurufen.

So sieht die SCSS IntelliSense-Erweiterung aus.


IntelliSense SCSS-Erweiterung in Aktion

Tag automatisch umbenennen

→ Tag-Seite automatisch umbenennen

Unabhängig davon, welches Front-End-Framework Sie verwenden, kann das Schreiben von HTML (oder JSX) eine mühsame Aufgabe sein. Besonders in einer Situation, in der sich zwischen dem öffnenden und dem schließenden Tag etwa 50 Zeilen Code befinden. Möglicherweise müssen Sie das H2 Tag während Ihrer Arbeit in H3 ändern. Möglicherweise muss der div durch einen span . Wenn Sie solche Probleme ohne die Verwendung von Hilfstools lösen, führen sie in großen Codefragmenten auf jeden Fall zu einer schwierigen Suche nach schließenden Tags.

Rufen Sie ein Auto an, um Tags automatisch zu bearbeiten. Verwenden Sie dazu einfach die Erweiterung Auto Rename Tag. Es ändert sich beim Bearbeiten des Eröffnungs-Tags automatisch und wird geschlossen. Das Gleiche, genau das Gegenteil, passiert, wenn das schließende Tag geändert wird.

So funktioniert das Auto Rename Tag.


Arbeiten mit der Auto Rename Tag Extension

Doppelte Aktion

→ Aktionsseite duplizieren

Die Möglichkeit, doppelte Dateien und Ordner über das Kontextmenü zu erstellen, ist so nützlich, dass sie in VS Code integriert werden sollten. Aber dieser Herausgeber, und ohne eine solche Gelegenheit, ist wunderbar, so dass er solch einen Fehler vergeben kann.

Um VS Code mit der oben beschriebenen Funktion auszustatten, ist es ausreichend, die Erweiterung "Aktion duplizieren" zu installieren. Wenn es aktiviert ist, verfügt der Entwickler über den Kontextmenübefehl Duplicate file or directory .


Doppelte Aktionserweiterung und Änderungen im Dateikontextmenü

Codestream

→ CodeStream- Seite

Wenn Sie CodeStream kurz beschreiben, können wir sagen, dass diese Erweiterung mit dem System zum Kommentieren von Code aus der Zukunft vergleichbar ist.

Viele Programmierer verlassen ihre IDE nicht gern. Aber um Kollegen etwas zu erklären und selbst Fragen zu stellen, müssen Sie die vertraute Umgebung verlassen und Trello, Slack, Asana, Bitbucket und Microsoft Teams verwenden. CodeStream unterstützt viele Tools und eine IDE, mit der Sie mit Problemen und Fragen arbeiten können, ohne die vertraute Umgebung des Code-Editors zu verlassen. Viele, die arbeiten, neigen dazu, in den sogenannten "Zustand des Flusses" zu gelangen. Wenn Sie den Editor beenden, wird die Person normalerweise aus diesem Status entfernt. Dank CodeStream können Fragen zum Code gelöst werden, ohne die gewohnte Umgebung zu verlassen.


Code-Diskussion in CodeStream

Nachteule

→ Night Owl Page

Night Owl ist eines der besten Themen, die jemals für die IDE erstellt wurden. Seit drei Jahren benutze ich es täglich. Unten ist ein Screenshot von meinem realen Arbeitsbildschirm. Der Titel dieses Themas weist darauf hin, dass es für diejenigen gedacht ist, die nachts am Computer sitzen. Richtig, es eignet sich gut für die Nachtarbeit und verhindert, dass Ihre Augen überarbeitet werden. Die darin verwendeten sanften Blautöne helfen dabei, komplexe Probleme ruhig zu lösen.


Nachteulen-Thema

Bonus: Synthwave '84 Theme

→ Synthwave '84 Seite

Dieses Thema stammt aus dem Cyberpunk-Universum. Dazu passt ein Ledermantel, ein Lamborghini Countach und ein Rauchgenerator. Wenn all dies in Ihrer Nähe ist, schalten Sie Ihre Lieblingsmusik von Vaporwave ein und schreiben Sie Ihren schönen Code, bis sich Ihr Bewusstsein in die Neuromancer-Datenbank eingetragen hat.

Um die Wirkung von leuchtendem Text zu erzielen, müssen Sie nach der Installation dieses Themas ein wenig daran basteln. Aber Sie sind sich sicher einig, dass diese Schönheit es wert ist, etwas Mühe in ihre Errungenschaft zu stecken.


Synthwave '84 Theme

Sehr geehrte Leser! Kennen Sie interessante Erweiterungen und Themes für VS Code?