# Umgestalten von Code mit GitHub Copilot
Mit der künstlichen Intelligenz von Copilot können Sie Code schnell und effektiv umgestalten.
## 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.
> \[!NOTE] Beispielantworten sind in diesem Artikel enthalten. Die Antworten von GitHub Copilot Gespräch können von den hier gezeigten abweichen.
## 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:
```bash
#!/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 den `for` loop 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 and Visual Studio:**Strg+Befehl+i (Mac)/Strg+Alt+i (Windows/Linux)
* **JetBrains:**Strg+Umschalt+c
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 **An der Cursorposition 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 den `for` loop 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:
```bash
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.
```javascript
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:
```javascript
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:
```python
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:
```python
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.
```python
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:
```python
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)
```
> \[!NOTE] 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:
```java
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:
```java
/**
* 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:
```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:
```javascript
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
> \[!NOTE]
>
> * Nur VS Code und Visual Studio.
> * Die Unterstützung für dieses Feature hängt davon ab, ob die entsprechende Spracherweiterung für die verwendete Sprache in Ihrer IDE installiert ist. Nicht alle Spracherweiterungen unterstützen dieses Feature.
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 Visual Studio:** Betätige Strg+Leertaste.
```
Copilot schlägt alternative Namen vor.
4. Wählen Sie in der Dropdownliste einen der vorgeschlagenen Namen aus.
Der Name wird im gesamten project geändert.