VSCode Tipps und Tricks für Power-User

Warum sollte ich ein Visual Studio Power User werden?

Ein Power-User zu werden, ist eine weitere Möglichkeit, an der Spitze zu bleiben. Entwickler sprechen oft darüber, wie sie an der Spitze ihres Spiels bleiben und wie sie ständig neue Dinge lernen und ihre Fähigkeiten weiter verbessern. Dies ist eine häufig gestellte Frage in Vorstellungsgesprächen, da Arbeitgeber in der Regel Talente bevorzugen, die sich der Erweiterung ihrer Fähigkeiten widmen. Die Beherrschung Ihrer IDE und Ihres Computers könnte eine der besten Investitionen in Ihre berufliche Entwicklung sein.

Entwickler sind immer auf der Suche nach einem neuen Blog, der sie in ihrer Arbeit besser macht. Welche IDE Sie auch verwenden, sie hat wahrscheinlich einen Blog: Abonnieren!

Ein weiterer Grund ist, dass es einfach Zeit spart. Die Investition von Zeit in die Verbesserung Ihres Arbeitsablaufs kann sich als höhere Produktivität oder mehr Zeit zum Spaß haben auszahlen. Heute werfen wir einen genaueren Blick auf Visual Studio und VSCode und besprechen Möglichkeiten, wie Sie Ihre Fähigkeiten bis zum Power-User verbessern können.

Wie werde ich VSCode Power User?

Hier ist, was einen normalen Benutzer von einem Power-User unterscheidet:

• Intime Kenntnisse Ihrer IDE: VSCode verfügt über eine hervorragende Dokumentation, lesen Sie sie!
• Anpassung: Power-User passen ihren Workflow an ihre spezifischen Bedürfnisse an.
• Automatisieren Sie all die langweiligen und sich wiederholenden Aufgaben.
• Verbessern Sie kontinuierlich Ihren Workflow und verfolgen Sie die Entwicklung Ihrer IDE.

In diesem Artikel möchte ich erklären, wie ich jeden dieser Punkte selbst angegangen bin, und Sie mit dem Wissen ausstatten, es selbst zu tun. Was ich tue, wird nicht unbedingt für Sie funktionieren, zumindest nicht ganz. Die Leute arbeiten in verschiedenen Umgebungen und Projekten (für mich ist es hauptsächlich die Arbeit mit React.js und TypeScript unter Windows), aber der Gesamtansatz ist für alle gültig.

Testen mit Jest

Ich schreibe einen Test nach dem anderen, was bedeutet, dass ich eine Möglichkeit brauche, einen Test nach dem anderen auszuführen. Die native Regex-Lösung ist jedoch ziemlich klobig. Deshalb verwende ich Jest Runner. Mit dieser nützlichen Erweiterung können Sie einzelne Suiten oder Tests ausführen oder debuggen.

Das folgende Video zeigt, dass Sie lediglich mit der rechten Maustaste auf den Testnamen klicken und das Kontextmenü verwenden müssen, um ihn auszuführen.

Testen mit Pakt

Der zeitaufwändigste Teil beim Schreiben eines Vertragstests ist wohl das Matching. Ich habe dies gelöst, indem ich hilfreiche Snippets erstellt habe, um sich wiederholende Aktionen zu automatisieren. Dies sind einige, die ich erstellt habe, Sie können sie gerne verwenden (dh kopieren Sie sie einfach und fügen Sie sie in /snippets/typescript.json von /snippets/typescript.json ein).

Das folgende Video zeigt, wie Sie diese Snippets verwenden:

1. Alle Vorkommen desselben Typs auswählen, dh alle Zeichenketten-, Zeit- und anderen Werte auswählen.
2. Verwenden Sie vordefinierte Tastenkombinationen oder rufen Sie Snippet einfügen auf und wählen Sie das relevante Snippet aus oder beginnen Sie einfach mit der Eingabe des Präfixes des Snippets, das Sie verwenden möchten.

Git

Die meisten Entwickler verwenden täglich Git und GitHub, und ich auch. Ich versuche jedoch, das Terminal oder github.com zu vermeiden.

GitHub Pull Requests and Issues ermöglicht es mir, PRs bequem in VSCode zu öffnen, zu bearbeiten und zu überprüfen. Ich finde, dass meine IDE ein besserer Ort ist, um Code zu überprüfen, als die Web- oder Desktop-Apps von GitHub. Einige Entwickler mögen anderer Meinung sein, aber ich schätze die Konsistenz und den Komfort, dies in meiner IDE zu tun.

Git kann so viel, aber ich habe so wenige seiner Befehle auswendig gelernt. Aber warum überhaupt etwas auswendig lernen? Das Auswendiglernen zu vieler granularer Aspekte Ihrer Routine ist nicht übermäßig produktiv.

GitLens stellt Ihnen eine Fülle erstaunlicher Funktionen zur Verfügung. Dank dessen muss ich selten zum Terminal greifen, um Git zu verwenden.

Terminalanpassung

Unabhängig vom verwendeten Betriebssystem können Sie es besser machen als das Standardterminal. Ich verwende Windows Terminal + cmder. Wenn Sie ein Unix-Benutzer sind, suchen Sie nach iTerm (macOS) oder Oh My Zsh (Linux und macOS). Ich habe sie in VSCode integriert und viele Aliase (Shortcuts) hinzugefügt, die mir Zeit beim Schreiben von Befehlen ersparen.

Zum Beispiel:

• ys = yarn start - hilft mir, eine App mit nur zwei Zeichen zu starten
• del=RMDIR /S/Q $* && echo "Deleted Successfully!!!" - löscht das bereitgestellte Verzeichnis und zeigt eine Erfolgsmeldung, wenn es fertig ist
• gdab = git branch | grep -v "master" | xargs git branch -D gdab = git branch | grep -v "master" | xargs git branch -D - löscht alle lokalen Branches außer master

Hier und da ein paar Zeichen zu sparen, mag albern erscheinen, aber diese zeitsparenden Funktionen summieren sich auf lange Sicht. Ich finde einen sekundären Vorteil bei der Verwendung von Aliassen – weniger Zeit mit dem Eintippen zu verbringen hilft mir, konzentriert zu bleiben und nicht den Gedankengang zu verlieren, weil ich nicht versuche, mich daran zu erinnern, wie der Befehl aufgerufen wird.

Codegenerierung

Das Erstellen einer neuen Komponente, Seite usw. ist etwas, das ich häufig mache, und es ist ziemlich einfach, wie die meisten Leser wissen werden. Das Erstellen eines neuen Ordners und das Initialisieren von Dateien darin kann jedoch mühsam sein. Also habe ich diesen Prozess automatisiert.

Das folgende Video zeigt Supercharge React im Einsatz. Mit New Component kann ich den Namen und Speicherort der neuen Komponente angeben. Die Erweiterung führt dann ein Skript aus, das einen Ordner erstellt und diese neue Komponente initialisiert.

IntelliSense

VSCode verfügt über leistungsstarkes IntelliSense, und meistens müssen Sie nicht daran denken, es zu verwenden. Wenn Sie jedoch Vorschläge durchsuchen, können Sie Strg+Leertaste drücken, um die Dokumentation zu jeder verfügbaren Option anzuzeigen.

IntelliSense kann zusätzlich an Ihren Arbeitsablauf und Ihre persönlichen Vorlieben angepasst werden.

Tastatürkürzel

Ich bin sicher, Sie verwenden Tastenkombinationen wie Strg+S und Strg+F . Sie sind alle gut dokumentiert, und wenn Sie mit der großen Auswahl an Verknüpfungen von VSCode nicht allzu vertraut sind, fordere ich Sie auf, dies zu ändern und die Extrameile zu gehen, um sie zu meistern. Eine bestimmte Bindung ist zu klobig? Die Eingabe eines Befehls, den Sie beschwören, dauert oft zu lange? Öffnen Sie den Tastatur-Editor von VSCode, um Verknüpfungen zu erstellen.

Wenn Sie sich fragen, ob ein Befehl einer bestimmten Tastenkombination zugewiesen wurde, klicken Sie auf die Tastaturschaltfläche in der Suchleiste, wo Sie Tastenanschläge aufzeichnen können. Sie sehen dann, welche/wenn-Befehle ihnen zugeordnet wurden.

Maus-Shortcuts

Entwicklern wird oft gesagt, dass sie lernen müssen, ihre Maus zu hassen und ihre Tastatur zu lieben , um produktiv zu sein. Dies kann gültig sein, wenn Sie an kleinen, dichten Dateien arbeiten. Aber im Zeitalter der automatischen Codeformatierung und Dateien, die Hunderte von Codezeilen enthalten, würde ich sagen, dass dies eher eine Ausnahme als die Regel ist.

Ich verwende meine Maus nicht nur aktiv, sondern habe sie mithilfe von Logitech Options an meinen Arbeitsablauf angepasst. Ich habe die Sondertasten meiner Maus so programmiert, dass sie bestimmte Befehle in VSCode ausführen.

So können Sie Ihrer Maus „beibringen“, etwas mehr zu tun, als nur den Cursor zu bewegen und zu klicken:

1. Wählen Sie VSCode aus dem Menü oben rechts.
2. Klicken Sie auf die Schaltfläche, die Sie anpassen möchten.
3. Wählen Sie aus der Liste der Aktionen auf der linken Seite Tastenanschlagzuweisung aus.
4. Geben Sie eine vordefinierte Verknüpfung in VSCode ein.

Backup- und Sync-Einstellungen

Es hat wenig Sinn, irgendetwas anzupassen, wenn Sie es nicht sichern und wiederverwenden können, wenn Sie es wieder brauchen.

Die native Lösung steht derzeit nur Insidern zur Verfügung. Die Einstellungssynchronisierung hilft Ihnen jedoch, Ihre Codeeinstellungen als Gist zu speichern, und ermöglicht Ihnen, Ihren Workflow zwischen mehreren Computern zu synchronisieren. Sie benötigen ein GitHub-Token, um es zu konfigurieren, aber danach müssen Sie nur einen einzigen Befehl ausführen, um Ihre Einstellungen hoch- und herunterzuladen.

Empfohlene VSCode-Erweiterungen

Ich habe bereits einige Erweiterungen erwähnt und erklärt, wie ich sie verwende. Hier sind einige bemerkenswerte Erwähnungen:

• Surround: Müssen Sie einen ausgewählten Code in eine Pfeilfunktion oder vielleicht einen Try-Catch-Block einschließen? Diese Erweiterung erledigt das für Sie!
• Durchsuchen Sie node_modules: Auch wenn Sie node_modules nicht aus dem VSCode-Explorer für eine Leistungssteigerung ausgeschlossen haben, ist dieser Ordner so groß, dass er unmöglich zu navigieren ist. Mit dieser Erweiterung können Sie nach allem suchen, wonach Sie suchen, anstatt endlos herumzuscrollen.
• Glean und React Refactor bieten einige nützliche Refactoring-Tools für Ihre JSX-Dateien.
• Auto Close Tag fügt automatisch das schließende Tag für HTML/JSX/TSX-Dateien hinzu.
• File Utils: Eine praktische Methode zum Erstellen, Duplizieren, Verschieben, Umbenennen und Löschen von Dateien und Verzeichnissen. Es ist auch anpassbar.
• JavaScript Booster automatisiert einige gängige Refactoring-Aktionen.

Zusammenfassung

Seien Sie kein normaler Benutzer. Seien Sie stattdessen ein Power-User. Gehen Sie immer einen Schritt weiter als die anderen und sehen Sie, wohin es Sie führt. Achten Sie immer auf Ineffizienzen und versuchen Sie, sie zu mindern.

Meine Lösung dafür dürfte den meisten Entwicklern bekannt sein: ein Kanban-Board . Jedes Mal, wenn ich etwas bemerke, das mich ausbremst, schreibe ich es als To-Do auf. Wann immer ich etwas Zeit übrig habe, versuche ich, eine Lösung dafür zu finden.

Wenn Sie diesen Beitrag überwältigend fanden und nicht wissen, wo Sie anfangen sollen, lesen Sie die Dokumentation, es wird Ihnen den besten ROI geben ! Ich weiß, dass das Lesen der offiziellen Dokumentation langweilig klingt, aber ich verspreche, dass es sich auf lange Sicht auszahlen wird. Es wird Ihnen nicht nur beibringen, wie Sie produktiver sein können, sondern Sie werden auch lernen, wie Dokumentation geschrieben werden sollte.

Um es einfacher zu machen, habe ich diese Liste der unbedingt zu lesenden Teile der Dokumentation zusammengestellt:

• Tipps und Tricks: Einige sind offensichtlich und Sie kennen sie wahrscheinlich bereits, obwohl ich garantieren kann, dass Sie etwas finden werden, von dem Sie nichts wussten.
• Bearbeitungs-Hacks: Diese Bearbeitungs-Hacks sind unglaublich leistungsfähig, und wenn Sie sie lernen, werden Sie täglich davon profitieren.
• Code verkleinern/erweitern: Probieren Sie diese Abkürzung aus, wenn Sie sich mit einem anderen Entwickler koppeln, um ihn zu beeindrucken!
• Tastenkombinationen: Erfahren Sie, wie Tastenkombinationen funktionieren und wie Sie sie anpassen können. Dies ist einer der Eckpfeiler für die Beherrschung Ihrer IDE.
• Hunderte von Programmiersprachen werden unterstützt: Erfahren Sie, welche spezifischen Funktionen VSCode für die von Ihnen gewählte Sprache hat.