Refactorización de código con GitHub Copilot

Saque provecho de la inteligencia artificial de Copilot para ayudarle a refactorizar el código de forma rápida y eficaz.

En este artículo

Introducción

La refactorización de código es el proceso de reestructuración del código existente sin cambiar su comportamiento. Las ventajas de la refactorización incluyen mejorar la legibilidad del código, reducir la complejidad, facilitar el mantenimiento del código y permitir que se agreguen más fácilmente nuevas características.

En este artículo se proporcionan algunas ideas para usar Copilot a fin de refactorizar el código en el IDE.

Note

En este artículo se incluyen respuestas de ejemplo. GitHub Copilot Chat puede proporcionar respuestas diferentes de las que se muestran aquí.

Descripción del código

Antes de modificar el código existente, debe asegurarse de comprender su propósito y de cómo funciona actualmente. Copilot puede ayudarle con esto.

  1. Seleccione el código pertinente en el editor del IDE.

  2. Abra el chat insertado:

    • En VS Code: presione Comando+i (Mac) o Ctrl+i (Windows o Linux).
    • En Visual Studio: presione Alt+/.
    • En los IDE de JetBrains: presione Control+Mayús+i (Mac) o Ctrl+Mayús+g (Windows o Linux).

  3. En el cuadro de entrada del chat insertado, escriba una barra diagonal (/).

  4. En la lista desplegable, seleccione /explain y presione Entrar.

  5. Si la explicación que Copilot devuelve es más de unas pocas líneas, haga clic en Ver en chat para permitirle leer la explicación más fácilmente.

Optimización del código ineficaz

Copilot puede ayudarle a optimizar el código; por ejemplo, para que el código se ejecute más rápidamente.

Ejemplo de código

En las dos secciones siguientes, usaremos el siguiente script de Bash de ejemplo para demostrar cómo optimizar el código ineficaz:

#!/bin/bash

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

Uso del panel de Copilot Chat

Copilot puede indicarle si el código, como el script de Bash de ejemplo, se puede optimizar.

  1. Seleccione el bucle for o todo el contenido del archivo.

  2. Abra Copilot Chat haciendo clic en el icono de chat de la barra de actividad o mediante la función rápida de teclado:

    • VS Code y Visual Studio: Control+Comando+i (Mac) / Ctrl+Mayús+i (Windows o Linux)
    • JetBrains: Control+Mayús+c

  3. En el cuadro de entrada de la parte inferior del panel de chat, escriba: Can this script be improved?

    Copilot responde con una sugerencia que hará que el código sea más eficaz.

  4. Para aplicar el cambio sugerido:

    • En VS Code y JetBrains: mueva el puntero sobre la sugerencia en el panel de chat y haga clic en el icono Insertar en cursor.

      Captura de pantalla del icono "Insertar en cursor" del panel de Copilot Chat.

    • En Visual Studio: haga clic en Vista previa y, en la vista de comparación, haga clic en Aceptar.

Uso del chat insertado de Copilot

Como alternativa, si ya sabe que el código existente, como el script de Bash de ejemplo, es ineficaz:

  1. Seleccione el bucle for o todo el contenido del archivo.

  2. Abra el chat insertado:

    • En VS Code: presione Comando+i (Mac) o Ctrl+i (Windows o Linux).
    • En Visual Studio: presione Alt+/.
    • En los IDE de JetBrains: presione Control+Mayús+i (Mac) o Ctrl+Mayús+g (Windows o Linux).

  3. Escriba optimize y presione Entrar.

    Copilot sugiere código revisado. Por ejemplo:

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

    Esto es más eficaz que el código original, que se ha mostrado anteriormente en este artículo, porque el uso de -exec ... + permite a find pasar varios archivos a la vez a wc en lugar de llamar a wc una vez para cada archivo *.txt que se encuentra.

  4. Evalúe las sugerencias de y Visual Studio:** haga clic en Aceptar.

    • En JetBrains: haga clic en el icono Vista previa (flechas dobles) y, a continuación, haga clic en el icono Aplicar todas las diferencias (corchetes angulares dobles).

Al igual que con todas las sugerencias de Copilot, siempre debe comprobar que el código revisado se ejecute sin errores y genere el resultado correcto.

Limpieza del código repetido

Evitar la repetición hará que el código sea más fácil de revisar y depurar. Por ejemplo, si el mismo cálculo se realiza más de una vez en diferentes lugares de un archivo, puede mover el cálculo a una función.

En el siguiente ejemplo muy sencillo de JavaScript, el mismo cálculo (precio de artículo multiplicado por el número de artículos vendidos) se realiza en dos lugares.

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}`);

Puede pedir a Copilot que mueva el cálculo repetido a una función.

  1. Seleccione todo el contenido del archivo.

  2. Abra el chat insertado:

    • En VS Code: presione Comando+i (Mac) o Ctrl+i (Windows o Linux).
    • En Visual Studio: presione Alt+/.
    • En los IDE de JetBrains: presione Control+Mayús+i (Mac) o Ctrl+Mayús+g (Windows o Linux).

  3. Escriba move repeated calculations into functions y presione Entrar.

    Copilot sugiere código revisado. Por ejemplo:

    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. Evalúe las sugerencias de y Visual Studio:** haga clic en Aceptar.

    • En JetBrains: haga clic en el icono Vista previa (flechas dobles) y, a continuación, haga clic en el icono Aplicar todas las diferencias (corchetes angulares dobles).

Al igual que con todas las sugerencias de Copilot, siempre debe comprobar que el código revisado se ejecute sin errores y genere el resultado correcto.

Hacer que el código sea más conciso

Si el código es innecesariamente detallado, puede ser difícil de leer y mantener. Copilot puede sugerir una versión más concisa del código seleccionado.

En el ejemplo siguiente, este código de Python genera el área de un rectángulo y un círculo, pero podría escribirse de forma más concisa:

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. Seleccione todo el contenido del archivo.

  2. Abra el chat insertado:

    • En VS Code: presione Comando+i (Mac) o Ctrl+i (Windows o Linux).
    • En Visual Studio: presione Alt+/.
    • En los IDE de JetBrains: presione Control+Mayús+i (Mac) o Ctrl+Mayús+g (Windows o Linux).

  3. Escriba make this more concise y presione Entrar.

    Copilot sugiere código revisado. Por ejemplo:

    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. Evalúe las sugerencias de y Visual Studio:** haga clic en Aceptar.

    • En JetBrains: haga clic en el icono Vista previa (flechas dobles) y, a continuación, haga clic en el icono Aplicar todas las diferencias (corchetes angulares dobles).

Al igual que con todas las sugerencias de Copilot, siempre debe comprobar que el código revisado se ejecute sin errores y genere el resultado correcto.

División de unidades complejas de código

Es probable que los métodos o funciones grandes que realizan varias operaciones ofrezcan menos oportunidades de reutilización que las funciones más pequeñas y sencillas que se centran en realizar una operación determinada. También pueden ser más difíciles de entender y depurar.

Copilot puede ayudarle a dividir bloques complejos de código en unidades más pequeñas que sean más adecuadas para su reutilización.

El siguiente código de Python es un ejemplo muy sencillo, pero muestra el principio de dividir una sola función en dos funciones que realizan operaciones concretas.

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)

Para dividir la función process_data:

  1. Coloque el cursor en el nombre de la función.

  2. Abra el chat insertado:

    • En VS Code: presione Comando+i (Mac) o Ctrl+i (Windows o Linux).
    • En Visual Studio: presione Alt+/.
    • En los IDE de JetBrains: presione Control+Mayús+i (Mac) o Ctrl+Mayús+g (Windows o Linux).

  3. Escriba split into 2 separate functions: one for cleansing data, the other for printing y presione Entrar.

    Copilot sugiere código revisado. Por ejemplo:

    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

    La sugerencia de ejemplo mostrada anteriormente reemplaza la función existente por tres funciones. La tercera función simplemente llama a las otras dos funciones y permite el código existente que llama a la función process_data.

  4. Evalúe las sugerencias de y Visual Studio:** haga clic en Aceptar.

    • En JetBrains: haga clic en el icono Vista previa (flechas dobles) y, a continuación, haga clic en el icono Aplicar todas las diferencias (corchetes angulares dobles).

Al igual que con todas las sugerencias de Copilot, siempre debe comprobar que el código revisado se ejecute sin errores y genere el resultado correcto.

Reescritura del código condicional para mejorar la legibilidad

A menudo hay varias maneras de escribir código que sí, o no, se ejecuta en función de varias condiciones. Algunas estructuras condicionales son más adecuadas que otras para casos de uso concretos y elegir una estructura condicional alternativa a veces puede facilitar la lectura del código.

Este método de Java usa una serie de instrucciones if y else if para determinar qué operación se va a realizar:

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";
}

Una instrucción switch podría ser una mejor manera de aplicar la misma lógica.

  1. Coloque el cursor en el nombre del método.

  2. Abra el chat insertado:

    • En VS Code: presione Comando+i (Mac) o Ctrl+i (Windows o Linux).
    • En Visual Studio: presione Alt+/.
    • En los IDE de JetBrains: presione Control+Mayús+i (Mac) o Ctrl+Mayús+g (Windows o Linux).

  3. Escriba: 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.

    Esto muestra cómo puede usar una sola consulta para pedir a Copilot que realice varios cambios.

  4. Presione ENTRAR.

    Copilot sugiere código revisado. Por ejemplo:

    /**
 * 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. Evalúe las sugerencias de y Visual Studio:** haga clic en Aceptar.

    • En JetBrains: haga clic en el icono Vista previa (flechas dobles) y, a continuación, haga clic en el icono Aplicar todas las diferencias (corchetes angulares dobles).

Al igual que con todas las sugerencias de Copilot, siempre debe comprobar que el código revisado se ejecute sin errores y genere el resultado correcto.

Volver a formatear el código para usar una estructura diferente

Supongamos que tiene esta función en 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);
}

Si los estándares de codificación requieren que use la notación de flecha para las funciones y los nombres descriptivos de los parámetros, puede usar Copilot para que le ayude a realizar estos cambios.

  1. Coloque el cursor en el nombre de la función.

  2. Abra el chat insertado:

    • En VS Code: presione Comando+i (Mac) o Ctrl+i (Windows o Linux).
    • En Visual Studio: presione Alt+/.
    • En los IDE de JetBrains: presione Control+Mayús+i (Mac) o Ctrl+Mayús+g (Windows o Linux).

  3. Escriba use arrow notation and better parameter names y presione Entrar.

    Copilot sugiere código revisado. Por ejemplo:

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

Mejora del nombre de un símbolo

Note

  • Solo VS Code y Visual Studio.
  • La compatibilidad con esta característica depende de tener instalada la extensión de lenguaje adecuada en el IDE para el lenguaje que usa. No todas las extensiones de lenguaje admiten esta característica.

Los nombres bien elegidos pueden ayudar a facilitar el mantenimiento del código. Copilot en VS Code y Visual Studio pueden sugerir nombres alternativos para símbolos como variables o funciones.

  1. Coloque el cursor en el nombre del símbolo.

  2. Presione F2.

  3. Solo Visual Studio: presione Ctrl+Espacio.

    Copilot sugiere nombres alternativos.

    Captura de pantalla de una lista desplegable en VS Code que proporciona alternativas para un nombre de símbolo.

  4. En la lista desplegable, seleccione uno de los nombres sugeridos.

    El nombre se puede cambiar durante todo el proyecto.