Refactoring von Code mit GitHub Copilot

Einführung

Beim Refactoring wird vorhandener Code umgestaltet bzw. restrukturiert, ohne dessen Verhalten zu ändern. Zu den Vorteilen des Refactoring gehören die bessere Lesbarkeit des Codes, eine verringerte Komplexität, eine einfachere Verwaltung des Codes und das einfachere Hinzufügen neuer Features.

In diesem Artikel finden Sie einige Ideen dazu, wie Sie mit Copilot den Code in Ihrer IDE umgestalten können.

Verständnis des Codes

Vor der Änderung von vorhandenem Code müssen Sie sicherstellen, dass Sie dessen Zweck und aktuelle Funktionsweise verstehen. Dabei kann Ihnen Copilot helfen.

1. Wählen Sie den entsprechenden Code im Editor Ihrer IDE aus.

2. Öffnen des Inlinechats:

   • In VS Code: Drücken Sie COMMAND+i (Mac) oder STRG+i (Windows/Linux).
   • In Visual Studio: Drücken Sie ALT+/.
   • In JetBrains-IDEs: Drücken Sie CTRL+UMSCHALT+i (Mac) oder STRG+UMSCHALT+g (Windows/Linux).

3. Geben Sie im Eingabefeld für den Inlinechat einen Schrägstrich (/) ein.

4. Wählen Sie in der Dropdownliste /explain aus, und drücken Sie die EINGABETASTE.

5. Wenn die von Copilot zurückgegebene Erklärung mehr als ein paar Zeilen enthält, klicken Sie auf Im Chat anzeigen, damit Sie die Erklärung einfacher lesen können.

Optimieren von ineffizienten Code

Copilot kann Ihnen bei der Optimierung des Codes helfen, z. B. um den Code schneller auszuführen.

Beispielcode

In den beiden folgenden Abschnitten veranschaulichen wir anhand des folgenden beispielhaften Bash-Skripts, wie ineffizienter Code optimiert wird:

#!/bin/bash

# Find all .txt files and count lines in each
for file in $(find . -type f -name "*.txt"); do
    wc -l "$file"
done

Verwenden Sie das Copilot-Chat Panel

Copilot kann Ihnen mitteilen, ob Code wie das beispielhafte Bash-Skript optimiert werden kann.

1. Wählen Sie entweder die for-Schleife oder den gesamten Inhalt der Datei aus.

2. Öffne Copilot-Chat, indem du auf das Chatsymbol in der Aktivitätsleiste klickst oder die Tastenkombination verwendest:

   •      **VS Code und Visual Studio:**<kbd>Strg</kbd>+<kbd>Command</kbd>+<kbd>i</kbd> (Mac) / <kbd>Strg</kbd>+<kbd>Alt</kbd>+<kbd>i</kbd> (Windows/Linux)
     

   •      **JetBrains**: <kbd>STRG</kbd>+<kbd>UMSCHALT</kbd>+<kbd>c</kbd>
     

3. Geben Sie im Eingabefeld am Ende des Chatbereichs Folgendes ein: Can this script be improved?

   Copilot antwortet mit einem Vorschlag, der den Code effizienter gestaltet.

4. So wenden Sie die vorgeschlagene Änderung an:

   •      **In VS Code und JetBrains:** Zeigen Sie im Chatbereich auf den Vorschlag, und klicken Sie auf das Symbol **Beim Cursor einfügen**.
     

     

   •      **In Visual Studio:** Klicken Sie auf **Vorschau** und dann in der Vergleichsansicht auf **Akzeptieren**.
     

Verwenden Sie den Inline-Chat von Copilot

Wenn Sie bereits wissen, dass vorhandener Code wie das beispielhafte Bash-Skript ineffizient ist, können Sie alternativ wie folgt vorgehen:

1. Wählen Sie entweder die for-Schleife oder den gesamten Inhalt der Datei aus.

2. Öffnen des Inlinechats:

   • In VS Code: Drücken Sie COMMAND+i (Mac) oder STRG+i (Windows/Linux).
   • In Visual Studio: Drücken Sie ALT+/.
   • In JetBrains-IDEs: Drücken Sie CTRL+UMSCHALT+i (Mac) oder STRG+UMSCHALT+g (Windows/Linux).

3. Geben Sie optimize ein, und drücken Sie die EINGABETASTE.

   Copilot schlägt überarbeiteten Code vor. Zum Beispiel:

   find . -type f -name "*.txt" -exec wc -l {} +
   

   Dieser Code ist effizienter als der ursprüngliche Code weiter oben in diesem Artikel, da durch die Nutzung von -exec ... +``find mehrere Dateien gleichzeitig an wc übergeben kann, statt wc einmal für jede gefundene *.txt-Datei aufzurufen.

4. Bewerten Sie den Vorschlag von Copilot, und gehen Sie wie folgt vor, wenn Sie mit der Änderung einverstanden sind:

   • In VS Code und Visual Studio: Klicken Sie auf Akzeptieren.
   • In JetBrains: Klicken Sie auf das Vorschausymbol (Doppelpfeile) und anschließend auf das Symbol "Alle Unterschiede anwenden" (doppelte spitze Klammern).

Wie bei allen Vorschlägen von Copilot sollten Sie stets überprüfen, ob der überarbeitete Code ohne Fehler ausgeführt wird und das richtige Ergebnis erzeugt.

Bereinigen von wiederholtem Code

Die Vermeidung von Wiederholungen erleichtert das Überarbeiten und Debuggen des Codes. Wenn beispielsweise dieselbe Berechnung an verschiedenen Stellen in einer Datei mehrmals ausgeführt wird, können Sie die Berechnung in eine Funktion verschieben.

Im folgenden sehr einfachen JavaScript-Beispiel wird die gleiche Berechnung (Artikelpreis multipliziert mit der Anzahl der verkauften Artikel) an zwei Stellen ausgeführt.

let totalSales = 0;

let applePrice = 3;
let applesSold = 100;
totalSales += applePrice * applesSold;

let orangePrice = 5;
let orangesSold = 50;
totalSales += orangePrice * orangesSold;

console.log(`Total: ${totalSales}`);

Sie können Copilot bitten, die wiederholte Berechnung in eine Funktion zu verschieben.

1. Wählen Sie den gesamten Inhalt der Datei aus.

2. Öffnen des Inlinechats:

   • In VS Code: Drücken Sie COMMAND+i (Mac) oder STRG+i (Windows/Linux).
   • In Visual Studio: Drücken Sie ALT+/.
   • In JetBrains-IDEs: Drücken Sie CTRL+UMSCHALT+i (Mac) oder STRG+UMSCHALT+g (Windows/Linux).

3. Geben Sie move repeated calculations into functions ein, und drücken Sie die EINGABETASTE.

   Copilot schlägt überarbeiteten Code vor. Zum Beispiel:

   function calculateSales(price, quantity) {
     return price * quantity;
   }
   
   let totalSales = 0;
   
   let applePrice = 3;
   let applesSold = 100;
   totalSales += calculateSales(applePrice, applesSold);
   
   let orangePrice = 5;
   let orangesSold = 50;
   totalSales += calculateSales(orangePrice, orangesSold);
   
   console.log(`Total: ${totalSales}`);
   

4. Bewerten Sie den Vorschlag von Copilot, und gehen Sie wie folgt vor, wenn Sie mit der Änderung einverstanden sind:

   • In VS Code und Visual Studio: Klicken Sie auf Akzeptieren.
   • In JetBrains: Klicken Sie auf das Vorschausymbol (Doppelpfeile) und anschließend auf das Symbol "Alle Unterschiede anwenden" (doppelte spitze Klammern).

Wie bei allen Vorschlägen von Copilot sollten Sie stets überprüfen, ob der überarbeitete Code ohne Fehler ausgeführt wird und das richtige Ergebnis erzeugt.

Prägnantere Gestaltung des Codes

Wenn der Code unnötig ausführlich ist, kann er unter Umständen schwer zu lesen und zu pflegen sein. Copilot kann eine prägnantere Version des ausgewählten Codes vorschlagen.

Im folgenden Beispiel gibt der Python-Code den Bereich eines Rechtecks und eines Kreises aus, er könnte jedoch prägnanter geschrieben werden:

def calculate_area_of_rectangle(length, width):
    area = length * width
    return area

def calculate_area_of_circle(radius):
    import math
    area = math.pi * (radius ** 2)
    return area

length_of_rectangle = 10
width_of_rectangle = 5
area_of_rectangle = calculate_area_of_rectangle(length_of_rectangle, width_of_rectangle)
print(f"Area of rectangle: {area_of_rectangle}")

radius_of_circle = 7
area_of_circle = calculate_area_of_circle(radius_of_circle)
print(f"Area of circle: {area_of_circle}")

1. Wählen Sie den gesamten Inhalt der Datei aus.

2. Öffnen des Inlinechats:

   • In VS Code: Drücken Sie COMMAND+i (Mac) oder STRG+i (Windows/Linux).
   • In Visual Studio: Drücken Sie ALT+/.
   • In JetBrains-IDEs: Drücken Sie CTRL+UMSCHALT+i (Mac) oder STRG+UMSCHALT+g (Windows/Linux).

3. Geben Sie make this more concise ein, und drücken Sie die EINGABETASTE.

   Copilot schlägt überarbeiteten Code vor. Zum Beispiel:

   import math
   
   def calculate_area_of_rectangle(length, width):
     return length * width
   
   def calculate_area_of_circle(radius):
     return math.pi * (radius ** 2)
   
   print(f"Area of rectangle: {calculate_area_of_rectangle(10, 5)}")
   print(f"Area of circle: {calculate_area_of_circle(7)}")
   

4. Bewerten Sie den Vorschlag von Copilot, und gehen Sie wie folgt vor, wenn Sie mit der Änderung einverstanden sind:

   • In VS Code und Visual Studio: Klicken Sie auf Akzeptieren.
   • In JetBrains: Klicken Sie auf das Vorschausymbol (Doppelpfeile) und anschließend auf das Symbol "Alle Unterschiede anwenden" (doppelte spitze Klammern).

Wie bei allen Vorschlägen von Copilot sollten Sie stets überprüfen, ob der überarbeitete Code ohne Fehler ausgeführt wird und das richtige Ergebnis erzeugt.

Aufteilen komplexer Codeeinheiten

Große Methoden oder Funktionen, die mehrere Vorgänge ausführen, bieten wahrscheinlich weniger Möglichkeiten zur Wiederverwendung als kleinere, einfachere Funktionen, die auf die Ausführung eines bestimmten Vorgangs ausgelegt sind. Unter Umständen sind sie auch schwieriger zu verstehen und zu debuggen.

Copilot kann Ihnen helfen, komplexe Codeblöcke in kleinere Einheiten aufzuteilen, die für die Wiederverwendung besser geeignet sind.

Der folgende Python-Code ist ein sehr einfaches Beispiel, zeigt aber das Prinzip der Aufteilung einer einzelnen Funktion in zwei Funktionen, die bestimmte Vorgänge ausführen.

import pandas as pd
from pandas.io.formats.style import Styler

def process_data(item, price):
    # Cleanse data
    item = item.strip()  # Strip whitespace from item
    price = price.strip()  # Strip whitespace from price
    price = float(price) # Convert price to a float
    # More cleansing operations here

    # Create and print a DataFrame
    data = {'Item': [item], 'Price': [price]}
    df = pd.DataFrame(data)
    print(df.to_string(index=False))

# Example usage
item = "   Apple "
price = " 1.25"
process_data(item, price)

So teilen Sie die Funktion process_data auf:

1. Setzen Sie den Cursor in den Namen der Funktion.

2. Öffnen des Inlinechats:

   • In VS Code: Drücken Sie COMMAND+i (Mac) oder STRG+i (Windows/Linux).
   • In Visual Studio: Drücken Sie ALT+/.
   • In JetBrains-IDEs: Drücken Sie CTRL+UMSCHALT+i (Mac) oder STRG+UMSCHALT+g (Windows/Linux).

3. Geben Sie split into 2 separate functions: one for cleansing data, the other for printing ein, und drücken Sie die EINGABETASTE.

   Copilot schlägt überarbeiteten Code vor. Zum Beispiel:

   def cleanse_data(item, price):
     # Cleanse data
     item = item.strip()  # Strip whitespace from item
     price = price.strip()  # Strip whitespace from price
     price = float(price)  # Convert price to a float
     return item, price
   
   def print_data(item, price):
     # Create and print a DataFrame
     data = {'Item': [item], 'Price': [price]}
     df = pd.DataFrame(data)
     print(df.to_string(index=False))
   
   def process_data(item, price):
     item, price = cleanse_data(item, price)
     print_data(item, price)
   

   Hinweis

   Beim oben gezeigten Beispielvorschlag wird die vorhandene Funktion durch drei Funktionen ersetzt. Die dritte Funktion ruft einfach die anderen beiden Funktionen auf und ermöglicht die Nutzung von vorhandenem Code, der die Funktion process_data aufruft.

4. Bewerten Sie den Vorschlag von Copilot, und gehen Sie wie folgt vor, wenn Sie mit der Änderung einverstanden sind:

   • In VS Code und Visual Studio: Klicken Sie auf Akzeptieren.
   • In JetBrains: Klicken Sie auf das Vorschausymbol (Doppelpfeile) und anschließend auf das Symbol "Alle Unterschiede anwenden" (doppelte spitze Klammern).

Wie bei allen Vorschlägen von Copilot sollten Sie stets überprüfen, ob der überarbeitete Code ohne Fehler ausgeführt wird und das richtige Ergebnis erzeugt.

Umschreiben von Bedingungscode zur besseren Lesbarkeit

Häufig gibt es mehrere Möglichkeiten zum Schreiben von Code, der abhängig von verschiedenen Bedingungen ausgeführt wird oder nicht. Einige bedingte Strukturen sind besser geeignet als andere für bestimmte Anwendungsfälle, und die Auswahl einer alternativen bedingten Struktur kann manchmal das Lesen des Codes vereinfachen.

Die folgende Java-Methode bestimmt anhand mehrerer if- und else if-Anweisungen, welcher Vorgang ausgeführt werden soll:

public String getSound(String animal) {
  if (animal == null) {
      System.out.println("Oops! A null animal?");
  } else if (animal.equalsIgnoreCase("Dog")) {
      return "Bark";
  } else if ( animal.equalsIgnoreCase("Cat")) {
      return "Meow";
  } else if ( animal.equalsIgnoreCase("Bird")) {
      return "Tweet";
  }
  return "Unknown";
}

Eine switch-Anweisung bietet unter Umständen eine bessere Möglichkeit zum Anwenden derselben Logik.

1. Setzen Sie den Cursor in den Namen der Methode.

2. Öffnen des Inlinechats:

   • In VS Code: Drücken Sie COMMAND+i (Mac) oder STRG+i (Windows/Linux).
   • In Visual Studio: Drücken Sie ALT+/.
   • In JetBrains-IDEs: Drücken Sie CTRL+UMSCHALT+i (Mac) oder STRG+UMSCHALT+g (Windows/Linux).

3. Geben Sie Folgendes ein: rewrite the condition to use a switch and use Java 21 syntax with null case, but also add documentation and provide a better function name.

   Das veranschaulicht, wie Sie Copilot mit einem einzelnen Prompt auffordern können, mehrere Änderungen vorzunehmen.

4. Drücken Sie die EINGABETASTE.

   Copilot schlägt überarbeiteten Code vor. Zum Beispiel:

   /**
    * Retrieves the sound made by a given animal.
    *
    * @param animal The name of the animal.
    * @return The sound made by the animal, or "Unknown" if the animal is not recognized.
    */
   public String getAnimalSound(String animal) {
       return switch (animal) {
           case null -> {
               System.out.println("Oops! A null animal?");
               yield "Unknown";
           }
           case String a when a.equalsIgnoreCase("Dog") -> "Bark";
           case String a when a.equalsIgnoreCase("Cat") -> "Meow";
           case String a when a.equalsIgnoreCase("Bird") -> "Tweet";
           default -> "Unknown";
       };
   }
   

5. Bewerten Sie den Vorschlag von Copilot, und gehen Sie wie folgt vor, wenn Sie mit der Änderung einverstanden sind:

   • In VS Code und Visual Studio: Klicken Sie auf Akzeptieren.
   • In JetBrains: Klicken Sie auf das Vorschausymbol (Doppelpfeile) und anschließend auf das Symbol "Alle Unterschiede anwenden" (doppelte spitze Klammern).

Wie bei allen Vorschlägen von Copilot sollten Sie stets überprüfen, ob der überarbeitete Code ohne Fehler ausgeführt wird und das richtige Ergebnis erzeugt.

Neuformatieren von Code zur Nutzung einer anderen Struktur

Angenommen, Sie haben folgende Funktion in JavaScript:

function listRepos(o, p) {
 return fetch(`https://api.github.com/orgs/${o}/repos?per_page=${parseInt(p)}`)
   .then((response) => response.json())
   .then( (data) => data);
}

Wenn Ihre Codierungsstandards es erfordern, dass Sie die Pfeilnotation für Funktionen und beschreibende Namen für Parameter verwenden, können Sie diese Änderungen mit Copilot umsetzen.

1. Setzen Sie den Cursor in den Namen der Funktion.

2. Öffnen des Inlinechats:

   • In VS Code: Drücken Sie COMMAND+i (Mac) oder STRG+i (Windows/Linux).
   • In Visual Studio: Drücken Sie ALT+/.
   • In JetBrains-IDEs: Drücken Sie CTRL+UMSCHALT+i (Mac) oder STRG+UMSCHALT+g (Windows/Linux).

3. Geben Sie use arrow notation and better parameter names ein, und drücken Sie die EINGABETASTE.

   Copilot schlägt überarbeiteten Code vor. Zum Beispiel:

   const listRepos = (org, perPage) => {
     return fetch(`https://api.github.com/orgs/${org}/repos?per_page=${parseInt(perPage)}`)
       .then(response => response.json())
       .then(data => data);
   };
   

Verbessern des Namens eines Symbols

Sorgsam ausgewählte Namen können helfen, den Code einfacher zu pflegen. Copilot in VS Code und Visual Studio können alternative Namen für Symbole wie etwa Variablen oder Funktionen vorschlagen.

1. Setzen Sie den Cursor in den Namen des Symbols.

2. Drücken Sie F2.

3.        **Nur für Visual Studio:** Drücken Sie <kbd>STRG</kbd>+<kbd>LEERTASTE</kbd>.
   

   Copilot schlägt alternative Namen vor.

   

4. Wählen Sie in der Dropdownliste einen der vorgeschlagenen Namen aus.

   Der Name wird im gesamten Projekt geändert.