{"meta":{"title":"Umgestalten von Code mit GitHub Copilot","intro":"Mit der künstlichen Intelligenz von Copilot können Sie Code schnell und effektiv umgestalten.","product":"GitHub Copilot","breadcrumbs":[{"href":"/de/copilot","title":"GitHub Copilot"},{"href":"/de/copilot/tutorials","title":"Anleitungen"},{"href":"/de/copilot/tutorials/refactor-code","title":"Umgestalten von Code"}],"documentType":"article"},"body":"# Umgestalten von Code mit GitHub Copilot\n\nMit der künstlichen Intelligenz von Copilot können Sie Code schnell und effektiv umgestalten.\n\n## Einführung\n\nBeim 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.\n\nIn diesem Artikel finden Sie einige Ideen dazu, wie Sie mit Copilot den Code in Ihrer IDE umgestalten können.\n\n> \\[!NOTE] Beispielantworten sind in diesem Artikel enthalten. Die Antworten von GitHub Copilot Gespräch können von den hier gezeigten abweichen.\n\n## Verständnis des Codes\n\nVor der Änderung von vorhandenem Code müssen Sie sicherstellen, dass Sie dessen Zweck und aktuelle Funktionsweise verstehen. Dabei kann Ihnen Copilot helfen.\n\n1. Wählen Sie den entsprechenden Code im Editor Ihrer IDE aus.\n2. Öffnen des Inlinechats:\n\n * **In VS Code:** Drücken Sie COMMAND+i (Mac) oder STRG+i (Windows/Linux).\n * **In Visual Studio:** Drücken Sie ALT+/.\n * **In JetBrains-IDEs:** Drücken Sie CTRL+UMSCHALT+i (Mac) oder STRG+UMSCHALT+g (Windows/Linux).\n3. Geben Sie im Eingabefeld für den Inlinechat einen Schrägstrich (`/`) ein.\n4. Wählen Sie in der Dropdownliste **/explain** aus, und drücken Sie die EINGABETASTE.\n5. 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.\n\n## Optimieren von ineffizienten Code\n\nCopilot kann Ihnen bei der Optimierung des Codes helfen, z. B. um den Code schneller auszuführen.\n\n### Beispielcode\n\nIn den beiden folgenden Abschnitten veranschaulichen wir anhand des folgenden beispielhaften Bash-Skripts, wie ineffizienter Code optimiert wird:\n\n```bash\n#!/bin/bash\n\n# Find all .txt files and count lines in each\nfor file in $(find . -type f -name \"*.txt\"); do\n wc -l \"$file\"\ndone\n```\n\n### Verwenden Sie das Copilot-Chat Panel\n\nCopilot kann Ihnen mitteilen, ob Code wie das beispielhafte Bash-Skript optimiert werden kann.\n\n1. Wählen Sie entweder den `for` loop oder den gesamten Inhalt der Datei aus.\n\n2. Öffne Copilot-Chat, indem du auf das Chatsymbol in der Aktivitätsleiste klickst oder die Tastenkombination verwendest:\n\n * **VS Code and Visual Studio:**Strg+Befehl+i (Mac)/Strg+Alt+i (Windows/Linux)\n * **JetBrains:**Strg+Umschalt+c\n\n3. Geben Sie im Eingabefeld am Ende des Chatbereichs Folgendes ein: `Can this script be improved?`\n\n Copilot antwortet mit einem Vorschlag, der den Code effizienter gestaltet.\n\n4. So wenden Sie die vorgeschlagene Änderung an:\n\n * **In VS Code und JetBrains:** Zeigen Sie im Chatbereich auf den Vorschlag, und klicken Sie auf das Symbol **An der Cursorposition einfügen**.\n\n \n\n * **In Visual Studio:** Klicken Sie auf **Vorschau** und dann in der Vergleichsansicht auf **Akzeptieren**.\n\n### Verwenden Sie den Inline-Chat von Copilot\n\nWenn Sie bereits wissen, dass vorhandener Code wie das beispielhafte Bash-Skript ineffizient ist, können Sie alternativ wie folgt vorgehen:\n\n1. Wählen Sie entweder den `for` loop oder den gesamten Inhalt der Datei aus.\n\n2. Öffnen des Inlinechats:\n\n * **In VS Code:** Drücken Sie COMMAND+i (Mac) oder STRG+i (Windows/Linux).\n * **In Visual Studio:** Drücken Sie ALT+/.\n * **In JetBrains-IDEs:** Drücken Sie CTRL+UMSCHALT+i (Mac) oder STRG+UMSCHALT+g (Windows/Linux).\n\n3. Geben Sie `optimize` ein, und drücken Sie die EINGABETASTE.\n\n Copilot schlägt überarbeiteten Code vor. Zum Beispiel:\n\n ```bash\n find . -type f -name \"*.txt\" -exec wc -l {} +\n ```\n\n 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.\n\n4. Bewerten Sie den Vorschlag von Copilot, und gehen Sie wie folgt vor, wenn Sie mit der Änderung einverstanden sind:\n\n * **In VS Code und Visual Studio:** Klicken Sie auf **Akzeptieren**.\n * **In JetBrains**: Klicken Sie auf das Vorschausymbol (Doppelpfeile) und anschließend auf das Symbol \"Alle Unterschiede anwenden\" (doppelte spitze Klammern).\n\nWie 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.\n\n## Bereinigen von wiederholtem Code\n\nDie 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.\n\nIm folgenden sehr einfachen JavaScript-Beispiel wird die gleiche Berechnung (Artikelpreis multipliziert mit der Anzahl der verkauften Artikel) an zwei Stellen ausgeführt.\n\n```javascript\nlet totalSales = 0;\n\nlet applePrice = 3;\nlet applesSold = 100;\ntotalSales += applePrice * applesSold;\n\nlet orangePrice = 5;\nlet orangesSold = 50;\ntotalSales += orangePrice * orangesSold;\n\nconsole.log(`Total: ${totalSales}`);\n```\n\nSie können Copilot bitten, die wiederholte Berechnung in eine Funktion zu verschieben.\n\n1. Wählen Sie den gesamten Inhalt der Datei aus.\n\n2. Öffnen des Inlinechats:\n\n * **In VS Code:** Drücken Sie COMMAND+i (Mac) oder STRG+i (Windows/Linux).\n * **In Visual Studio:** Drücken Sie ALT+/.\n * **In JetBrains-IDEs:** Drücken Sie CTRL+UMSCHALT+i (Mac) oder STRG+UMSCHALT+g (Windows/Linux).\n\n3. Geben Sie `move repeated calculations into functions` ein, und drücken Sie die EINGABETASTE.\n\n Copilot schlägt überarbeiteten Code vor. Zum Beispiel:\n\n ```javascript\n function calculateSales(price, quantity) {\n return price * quantity;\n }\n\n let totalSales = 0;\n\n let applePrice = 3;\n let applesSold = 100;\n totalSales += calculateSales(applePrice, applesSold);\n\n let orangePrice = 5;\n let orangesSold = 50;\n totalSales += calculateSales(orangePrice, orangesSold);\n\n console.log(`Total: ${totalSales}`);\n ```\n\n4. Bewerten Sie den Vorschlag von Copilot, und gehen Sie wie folgt vor, wenn Sie mit der Änderung einverstanden sind:\n\n * **In VS Code und Visual Studio:** Klicken Sie auf **Akzeptieren**.\n * **In JetBrains**: Klicken Sie auf das Vorschausymbol (Doppelpfeile) und anschließend auf das Symbol \"Alle Unterschiede anwenden\" (doppelte spitze Klammern).\n\nWie 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.\n\n## Prägnantere Gestaltung des Codes\n\nWenn 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.\n\nIm folgenden Beispiel gibt der Python-Code den Bereich eines Rechtecks und eines Kreises aus, er könnte jedoch prägnanter geschrieben werden:\n\n```python\ndef calculate_area_of_rectangle(length, width):\n area = length * width\n return area\n\ndef calculate_area_of_circle(radius):\n import math\n area = math.pi * (radius ** 2)\n return area\n\nlength_of_rectangle = 10\nwidth_of_rectangle = 5\narea_of_rectangle = calculate_area_of_rectangle(length_of_rectangle, width_of_rectangle)\nprint(f\"Area of rectangle: {area_of_rectangle}\")\n\nradius_of_circle = 7\narea_of_circle = calculate_area_of_circle(radius_of_circle)\nprint(f\"Area of circle: {area_of_circle}\")\n```\n\n1. Wählen Sie den gesamten Inhalt der Datei aus.\n\n2. Öffnen des Inlinechats:\n\n * **In VS Code:** Drücken Sie COMMAND+i (Mac) oder STRG+i (Windows/Linux).\n * **In Visual Studio:** Drücken Sie ALT+/.\n * **In JetBrains-IDEs:** Drücken Sie CTRL+UMSCHALT+i (Mac) oder STRG+UMSCHALT+g (Windows/Linux).\n\n3. Geben Sie `make this more concise` ein, und drücken Sie die EINGABETASTE.\n\n Copilot schlägt überarbeiteten Code vor. Zum Beispiel:\n\n ```python\n import math\n\n def calculate_area_of_rectangle(length, width):\n return length * width\n\n def calculate_area_of_circle(radius):\n return math.pi * (radius ** 2)\n\n print(f\"Area of rectangle: {calculate_area_of_rectangle(10, 5)}\")\n print(f\"Area of circle: {calculate_area_of_circle(7)}\")\n ```\n\n4. Bewerten Sie den Vorschlag von Copilot, und gehen Sie wie folgt vor, wenn Sie mit der Änderung einverstanden sind:\n\n * **In VS Code und Visual Studio:** Klicken Sie auf **Akzeptieren**.\n * **In JetBrains**: Klicken Sie auf das Vorschausymbol (Doppelpfeile) und anschließend auf das Symbol \"Alle Unterschiede anwenden\" (doppelte spitze Klammern).\n\nWie 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.\n\n## Aufteilen komplexer Codeeinheiten\n\nGroß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.\n\nCopilot kann Ihnen helfen, komplexe Codeblöcke in kleinere Einheiten aufzuteilen, die für die Wiederverwendung besser geeignet sind.\n\nDer 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.\n\n```python\nimport pandas as pd\nfrom pandas.io.formats.style import Styler\n\ndef process_data(item, price):\n # Cleanse data\n item = item.strip() # Strip whitespace from item\n price = price.strip() # Strip whitespace from price\n price = float(price) # Convert price to a float\n # More cleansing operations here\n\n # Create and print a DataFrame\n data = {'Item': [item], 'Price': [price]}\n df = pd.DataFrame(data)\n print(df.to_string(index=False))\n\n# Example usage\nitem = \" Apple \"\nprice = \" 1.25\"\nprocess_data(item, price)\n```\n\nSo teilen Sie die Funktion `process_data` auf:\n\n1. Setzen Sie den Cursor in den Namen der Funktion.\n\n2. Öffnen des Inlinechats:\n\n * **In VS Code:** Drücken Sie COMMAND+i (Mac) oder STRG+i (Windows/Linux).\n * **In Visual Studio:** Drücken Sie ALT+/.\n * **In JetBrains-IDEs:** Drücken Sie CTRL+UMSCHALT+i (Mac) oder STRG+UMSCHALT+g (Windows/Linux).\n\n3. Geben Sie `split into 2 separate functions: one for cleansing data, the other for printing` ein, und drücken Sie die EINGABETASTE.\n\n Copilot schlägt überarbeiteten Code vor. Zum Beispiel:\n\n ```python\n def cleanse_data(item, price):\n # Cleanse data\n item = item.strip() # Strip whitespace from item\n price = price.strip() # Strip whitespace from price\n price = float(price) # Convert price to a float\n return item, price\n\n def print_data(item, price):\n # Create and print a DataFrame\n data = {'Item': [item], 'Price': [price]}\n df = pd.DataFrame(data)\n print(df.to_string(index=False))\n\n def process_data(item, price):\n item, price = cleanse_data(item, price)\n print_data(item, price)\n ```\n\n > \\[!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.\n\n4. Bewerten Sie den Vorschlag von Copilot, und gehen Sie wie folgt vor, wenn Sie mit der Änderung einverstanden sind:\n\n * **In VS Code und Visual Studio:** Klicken Sie auf **Akzeptieren**.\n * **In JetBrains**: Klicken Sie auf das Vorschausymbol (Doppelpfeile) und anschließend auf das Symbol \"Alle Unterschiede anwenden\" (doppelte spitze Klammern).\n\nWie 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.\n\n## Umschreiben von Bedingungscode zur besseren Lesbarkeit\n\nHä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.\n\nDie folgende Java-Methode bestimmt anhand mehrerer `if`- und `else if`-Anweisungen, welcher Vorgang ausgeführt werden soll:\n\n```java\npublic String getSound(String animal) {\n if (animal == null) {\n System.out.println(\"Oops! A null animal?\");\n } else if (animal.equalsIgnoreCase(\"Dog\")) {\n return \"Bark\";\n } else if ( animal.equalsIgnoreCase(\"Cat\")) {\n return \"Meow\";\n } else if ( animal.equalsIgnoreCase(\"Bird\")) {\n return \"Tweet\";\n }\n return \"Unknown\";\n}\n```\n\nEine `switch`-Anweisung bietet unter Umständen eine bessere Möglichkeit zum Anwenden derselben Logik.\n\n1. Setzen Sie den Cursor in den Namen der Methode.\n\n2. Öffnen des Inlinechats:\n\n * **In VS Code:** Drücken Sie COMMAND+i (Mac) oder STRG+i (Windows/Linux).\n * **In Visual Studio:** Drücken Sie ALT+/.\n * **In JetBrains-IDEs:** Drücken Sie CTRL+UMSCHALT+i (Mac) oder STRG+UMSCHALT+g (Windows/Linux).\n\n3. 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`.\n\n Das veranschaulicht, wie Sie Copilot mit einem einzelnen Prompt auffordern können, mehrere Änderungen vorzunehmen.\n\n4. Drücken Sie die EINGABETASTE.\n\n Copilot schlägt überarbeiteten Code vor. Zum Beispiel:\n\n ```java\n /**\n * Retrieves the sound made by a given animal.\n * * @param animal The name of the animal.\n * @return The sound made by the animal, or \"Unknown\" if the animal is not recognized.\n */\n public String getAnimalSound(String animal) {\n return switch (animal) {\n case null -> {\n System.out.println(\"Oops! A null animal?\");\n yield \"Unknown\";\n }\n case String a when a.equalsIgnoreCase(\"Dog\") -> \"Bark\";\n case String a when a.equalsIgnoreCase(\"Cat\") -> \"Meow\";\n case String a when a.equalsIgnoreCase(\"Bird\") -> \"Tweet\";\n default -> \"Unknown\";\n };\n }\n ```\n\n5. Bewerten Sie den Vorschlag von Copilot, und gehen Sie wie folgt vor, wenn Sie mit der Änderung einverstanden sind:\n\n * **In VS Code und Visual Studio:** Klicken Sie auf **Akzeptieren**.\n * **In JetBrains**: Klicken Sie auf das Vorschausymbol (Doppelpfeile) und anschließend auf das Symbol \"Alle Unterschiede anwenden\" (doppelte spitze Klammern).\n\nWie 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.\n\n## Neuformatieren von Code zur Nutzung einer anderen Struktur\n\nAngenommen, Sie haben folgende Funktion in JavaScript:\n\n```javascript\nfunction listRepos(o, p) {\n return fetch(`https://api.github.com/orgs/${o}/repos?per_page=${parseInt(p)}`)\n .then((response) => response.json())\n .then( (data) => data);\n}\n```\n\nWenn 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.\n\n1. Setzen Sie den Cursor in den Namen der Funktion.\n2. Öffnen des Inlinechats:\n\n * **In VS Code:** Drücken Sie COMMAND+i (Mac) oder STRG+i (Windows/Linux).\n * **In Visual Studio:** Drücken Sie ALT+/.\n * **In JetBrains-IDEs:** Drücken Sie CTRL+UMSCHALT+i (Mac) oder STRG+UMSCHALT+g (Windows/Linux).\n3. Geben Sie `use arrow notation and better parameter names` ein, und drücken Sie die EINGABETASTE.\n\n Copilot schlägt überarbeiteten Code vor. Zum Beispiel:\n\n ```javascript\n const listRepos = (org, perPage) => {\n return fetch(`https://api.github.com/orgs/${org}/repos?per_page=${parseInt(perPage)}`)\n .then(response => response.json())\n .then(data => data);\n };\n ```\n\n## Verbessern des Namens eines Symbols\n\n> \\[!NOTE]\n>\n> * Nur VS Code und Visual Studio.\n> * 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.\n\nSorgsam 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.\n\n1. Setzen Sie den Cursor in den Namen des Symbols.\n\n2. Drücken Sie F2.\n\n3. ```\n **Nur Visual Studio:** Betätige Strg+Leertaste.\n ```\n\n Copilot schlägt alternative Namen vor.\n\n \n\n4. Wählen Sie in der Dropdownliste einen der vorgeschlagenen Namen aus.\n\n Der Name wird im gesamten project geändert."}