Refactoring

Quellcode-Refactoring kann die Qualität und Wartbarkeit Ihres Projekts verbessern, indem Ihr Code neu strukturiert wird, ohne das Laufzeitverhalten zu ändern. Visual Studio Code unterstützt Refactoring-Operationen (Refactorings) wie Methode extrahieren und Variable extrahieren, um Ihre Codebasis direkt im Editor zu verbessern.

Ein gängiges Refactoring zur Vermeidung von Code-Duplizierung (ein Wartungsaufwand) ist beispielsweise das Methode extrahieren-Refactoring. Dabei wählen Sie Quellcode aus und extrahieren ihn in eine eigene, gemeinsame Methode, damit Sie den Code woanders wiederverwenden können.

Refactorings werden von einem Sprachdienst bereitgestellt. VS Code hat integrierte Unterstützung für TypeScript- und JavaScript-Refactorings durch den TypeScript-Sprachdienst. Refactoring-Unterstützung für andere Programmiersprachen wird durch VS Code Erweiterungen aktiviert, die Sprachdienste bereitstellen.

Die Benutzeroberflächenelemente und VS Code-Befehle für Refactoring sind für verschiedene Sprachen gleich. Dieser Artikel demonstriert die Refactoring-Unterstützung in VS Code mit dem TypeScript-Sprachdienst.

Code Actions = Schnelle Korrekturen und Refactorings

In VS Code können Code Actions sowohl Refactorings als auch Schnelle Korrekturen für erkannte Probleme (hervorgehoben durch rote Wellenlinien) bereitstellen. Wenn der Cursor auf einer Wellenlinie oder einem ausgewählten Textbereich steht, zeigt VS Code ein Glühbirnen-Symbol im Editor an, um anzuzeigen, dass eine Code Action verfügbar ist. Wenn Sie die Glühbirne der Code Action auswählen oder den Befehl Schnelle Korrektur verwenden ⌘. (Windows, Linux Ctrl+.), wird die Steuerung für Schnelle Korrekturen und Refactorings angezeigt.

Wenn Sie nur Refactorings ohne Schnelle Korrekturen sehen möchten, können Sie den Befehl Refactor verwenden (⌃⇧R (Windows, Linux Ctrl+Shift+R)).

Hinweis: Sie können Code Action Glühbirnen im Editor vollständig mit der Einstellung editor.lightbulb.enable deaktivieren. Sie können Schnelle Korrekturen weiterhin über den Befehl Schnelle Korrektur und die Tastenkombination ⌘. (Windows, Linux Ctrl+.) öffnen.

Code Actions beim Speichern

Mit der Einstellung editor.codeActionsOnSave können Sie eine Reihe von Code Actions konfigurieren, die automatisch angewendet werden, wenn Sie eine Datei speichern, z. B. zum Organisieren von Importen. Basierend auf Ihren Arbeitsbereichsdateien und aktiven Erweiterungen bietet IntelliSense eine Liste verfügbarer Code Actions.

Sie können eine oder mehrere Code Actions für editor.codeActionsOnSave konfigurieren. Die Code Actions werden dann in der Reihenfolge ausgeführt, in der sie aufgelistet sind.

Das folgende Beispiel zeigt, wie mehrere Code Actions beim Speichern konfiguriert werden

// On explicit save, run sortImports source action. On auto save (window or focus change), run organizeImports source action.
"editor.codeActionsOnSave": {
    "source.organizeImports": "always",
    "source.sortImports": "explicit",
},

Die folgenden Werte werden für jede Code Action unterstützt

• explicit (Standard): Löst Code Actions beim expliziten Speichern aus.
• always: Löst Code Actions beim expliziten Speichern und bei Auto-Saves aufgrund von Fenster- oder Fokusänderungen aus.
• never: Löst niemals Code Actions beim Speichern aus.

Refactoring-Aktionen

Methode extrahieren

Wählen Sie den Quellcode aus, den Sie extrahieren möchten, und wählen Sie dann die Glühbirne in der Spalte oder drücken Sie (⌘. (Windows, Linux Ctrl+.)), um verfügbare Refactorings anzuzeigen. Quellcodefragmente können in eine neue Methode oder in eine neue Funktion mit verschiedenen Geltungsbereichen extrahiert werden. Während des Extraktions-Refactorings werden Sie aufgefordert, einen aussagekräftigen Namen anzugeben.

Variable extrahieren

Der TypeScript-Sprachdienst bietet das Refactoring In Konstante extrahieren, um eine neue lokale Variable für den aktuell ausgewählten Ausdruck zu erstellen.

Bei der Arbeit mit Klassen können Sie auch einen Wert in eine neue Eigenschaft extrahieren.

Symbol umbenennen

Das Umbenennen ist ein gängiger Vorgang im Zusammenhang mit dem Refactoring von Quellcode, und VS Code verfügt über einen separaten Befehl Symbol umbenennen (F2). Einige Sprachen unterstützen das Umbenennen eines Symbols über mehrere Dateien hinweg. Drücken Sie F2, geben Sie den gewünschten neuen Namen ein und drücken Sie Enter. Alle Vorkommen des Symbols in allen Dateien werden umbenannt.

Refactoring-Vorschau

Wenn Sie ein Refactoring anwenden, werden die Änderungen direkt in Ihrem Code implementiert. Im Bereich Refactoring-Vorschau können Sie die Änderungen anzeigen, die durch eine Refactoring-Operation angewendet werden.

Um den Bereich Refactoring-Vorschau zu öffnen, öffnen Sie die Steuerung für Code Actions, fahren Sie mit der Maus über ein Refactoring und drücken Sie dann ⌘Enter (Windows, Linux Ctrl+Enter).

Sie können jede der Änderungen im Bereich Refactoring-Vorschau auswählen, um eine Diff-Ansicht der Änderungen zu erhalten, die sich aus der Refactoring-Operation ergeben.

Verwenden Sie die Steuerelemente Akzeptieren oder Verwerfen, um die vorgeschlagenen Refactoring-Änderungen anzuwenden oder abzubrechen.

Optional können Sie die Refactoring-Änderungen teilweise anwenden, indem Sie einige der vorgeschlagenen Änderungen im Bereich Refactoring-Vorschau abwählen.

Tastenkombinationen für Code Actions

Der Befehl editor.action.codeAction ermöglicht es Ihnen, Tastenkombinationen für bestimmte Code Actions zu konfigurieren. Diese Tastenkombination löst beispielsweise das Refactoring-Code Action Funktion extrahieren aus

{
  "key": "ctrl+shift+r ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.function"
  }
}

Code Action-Arten werden von Erweiterungen mithilfe der erweiterten API CodeActionProvider angegeben. Arten sind hierarchisch, sodass "kind": "refactor" alle Refactoring-Code Actions anzeigt, während "kind": "refactor.extract.function" nur Funktion extrahieren-Refactorings anzeigt.

Mit der obigen Tastenkombination wird, wenn nur eine einzige "refactor.extract.function" Code Action verfügbar ist, diese automatisch angewendet. Wenn mehrere Funktion extrahieren Code Actions verfügbar sind, öffnet VS Code ein Kontextmenü zur Auswahl.

Sie können auch steuern, wie und wann Code Actions automatisch angewendet werden, indem Sie das Argument apply verwenden

{
  "key": "ctrl+shift+r ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.function",
    "apply": "first"
  }
}

Gültige Werte für apply

• first: Wendet immer die erste verfügbare Code Action automatisch an.
• ifSingle: (Standard) Wendet die Code Action automatisch an, wenn nur eine verfügbar ist. Andernfalls wird das Kontextmenü angezeigt.
• never: Zeigt immer das Kontextmenü der Code Action an, auch wenn nur eine einzige Code Action verfügbar ist.

Wenn eine Tastenkombination für Code Actions mit "preferred": true konfiguriert ist, werden nur bevorzugte Schnelle Korrekturen und Refactorings angezeigt. Eine bevorzugte schnelle Korrektur behebt den zugrunde liegenden Fehler, während ein bevorzugtes Refactoring die gängigste Refactoring-Wahl ist. Beispielsweise können zwar mehrere refactor.extract.constant Refactorings existieren, die jeweils in einen anderen Gültigkeitsbereich in der Datei extrahieren, das bevorzugte refactor.extract.constant Refactoring ist jedoch das, das in eine lokale Variable extrahiert.

Diese Tastenkombination verwendet "preferred": true, um ein Refactoring zu erstellen, das immer versucht, den ausgewählten Quellcode in eine Konstante im lokalen Gültigkeitsbereich zu extrahieren.

{
  "key": "shift+ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.constant",
    "preferred": true,
    "apply": "ifSingle"
  }
}

Erweiterungen mit Refactorings

Sie können Erweiterungen, die Refactoring unterstützen, im VS Code Marketplace finden. Sie können zur Erweiterungsansicht wechseln (⇧⌘X (Windows, Linux Ctrl+Shift+X)) und 'refactor' in das Suchfeld eingeben. Sie können dann nach Installationsanzahl oder Bewertungen sortieren, um zu sehen, welche Erweiterungen beliebt sind.

Tipp: Die oben gezeigten Erweiterungen werden dynamisch abgefragt. Wählen Sie eine Erweiterungskachel oben aus, um die Beschreibung und Bewertungen zu lesen und zu entscheiden, welche Erweiterung für Sie am besten geeignet ist.

Nächste Schritte

• Einführungsvideo – Code-Bearbeitung – Sehen Sie sich ein Einführungsvideo zu Code-Bearbeitungsfunktionen an.
• Code-Navigation – VS Code ermöglicht es Ihnen, schnell durch Ihren Quellcode zu navigieren.
• Debugging – Erfahren Sie mehr über das Debugging mit VS Code.

Häufig gestellte Fragen

Warum sehe ich keine Glühbirnen, wenn es Fehler in meinem Code gibt?

Glühbirnen (Code Actions) werden nur angezeigt, wenn der Cursor über dem Text steht, der den Fehler anzeigt. Das Darüberfahren mit der Maus zeigt die Fehlerbeschreibung an, aber Sie müssen den Cursor bewegen oder Text auswählen, um Glühbirnen für Schnelle Korrekturen und Refactorings zu sehen.