¿Vale la pena pagar por Github Copilot para VsCode? + GitHub Copilot X + GitHub Copilot CLI

Hemos comentado ya en diversas publicaciones acerca de GitHub Copilot, esta es una herramienta de autocompletado de código que es a la vez capaz de escribir código por nosotros, bloques, líneas, funciones o autocompletar lo que estemos escribiendo, el precio de esta herramienta es de 10 dólares, pero ¿vale la pena pagar por github Copilot?. Esta por supuesto no es lo única herramienta que tenemos, a través de las nuevas funcionalidades podemos acceder a un chat que a través de inteligencia artificial GPT-4 podremos potenciar nuestro proceso de desarrollo.

¿qué es Copilot y cómo funciona?

Como hablamos hace un momento, esta herramienta nos sugerirá autocompletando el código que nos encontremos escribiendo en nuestro editor de código, esta no es la única herramienta para lograr este funcionamiento, sino que tenemos también a whisper de Amazon y Tab Nine

Este autocompletado servirá desde que comencemos a escribir, la IA de esta, está alimentada de los repositorios de GitHub y del código que hayas escrito, por lo que tratará de sugerirte con base en lo que hayas escrito, otra forma de generar sugerencias es usar comentarios, con que escribamos un comentario sobre lo que necesitamos escribir a continuación, Copilot intentara descifrar que es lo siguiente que queremos escribir.

Instalacion de GitHub Copilot

Si quieres probar a Github Copilot, puedes obtener una versión de prueba de 30 días, después de este periodo comenzarán a cobrarte su costo mensual de 10 dólares o anual de 100 dólares. Para acceder al periodo de prueba tendrás que tener por supuesto una cuenta de GitHub, si aún no tienes una puedes crearla en el siguiente link, pero si no sabes para qué sirve o cómo usar esta red social para los desarrolladores, puedes ver nuestro curso Git: Sin Fronteras, Donde aunque estamos más enfocados en la herramienta Git también aprenderás como se usan en conjunto, ya que GitHub va totalmente de la mano con el gestor de versiones Git.

Ahora, para usar a copilot usaremos el editor de texto VsCode, igualmente para este tenemos él curso gratuito de VsCode por si quieres dominar este editor.

Dentro de vsCode tendremos que dirigirnos a la sección de extensiones, ahí tendremos que buscar a Github Copilot e instalar la extensión que vemos en la siguiente imagen:

Inmediatamente que instalemos la extensión, nos pedirá que iniciemos sesión en Github, por lo que nos redirigirá a nuestro navegador para comprobar y vincular la sesión, de esta manera, tendremos nuestra sesión iniciada y podremos utilizarla, en la esquina inferior derecha, vamos a ver el icono de copilot, en este podremos desactivarlo si es lo que necesitáramos.

Ejemplos de uso:

En el siguiente ejemplo estaba preparando un Mock de Pokémon, este es un array que contendría a los diferentes Pokémon, cada Pokémon sería un objeto y tendría dos atributos el nombre y su tipo, yo había escrito el primero de los Pokémon, pero al escribir la coma y dar enter en la siguiente línea, copilot comienza a hacer sugerencias acerca de lo que cree que seguiremos escribiendo, en este caso me ha dado el siguiente objeto completo para Charmander:

Con la tecla tab es que podemos aceptar estos cambios sugeridos, pero si no lo presionamos tab y continuamos escribiendo puede haber dos opciones:

• Si continuamos escribiendo sobre los mismos pasos de la sugerencia, de la imagen anterior, por ejemplo escribiéramos name: { Charmander , esta sugerencia no desaparecerá, y nos servirá como una guía de los que podremos escribir, pero
• Si escribimos algo diferente a la sugerencia, esta va a desaparecer y copilot comenzara a generar una nueva sugerencia conforme escribamos, se verá de la misma manera, y así repetimos el ciclo hasta que dejemos de escribir código:

Igualmente, otra forma de ver sugerencias es que puedes usar el atajo: ctrl + enter , en teclados en español para que Copilot genere hasta 10 alternativas de código al que estemos escribiendo, desde este archivo podremos aceptar los cambios de la solución que elijamos.

Si necesitamos algo muy puntual, por ejemplo desarrollar la lógica de una función lo que podemos hacer es colocar un comentario lo que necesitamos, entre más específico es mejor, en la siguiente imagen te mostraré un ejemplo:

El comentario aquí fue sencillo para un componente de React, «fetch data from API and render using use effect» , entonces presioné el atajo ctrl + enter para que me diera las sugerencias en un nuevo archivo, entonces acepté una de las sugerencias y me ha llenado todo el código del componente:

Lo bueno de usar copilot

Llevo desde Julio del 2022 usando Copilot, desde que tomé la prueba Beta de esta herramienta, y es una maravilla.

Lo realmente bueno es que te ayuda a completar código repetitivo o que es muy común que llegues a escribir, por ejemplo, la sintaxis de un método map, reduce o un ciclo for, y lo que más ame durante mucho tiempo, autocompletar los paréntesis y llaves de cada bloque de código.

Igualmente dando como comentarios el output y la descripción del funcionamiento de, por ejemplo, una función, es que podemos obtener ideas de cómo resolver un problema, me ha tocado estar en un par de ocasiones atorado con un problema de código, por lo que nos brinda nuevas soluciones o caminos que tal vez en ese momento no podemos ver por qué estamos atorados o por qué no los conocíamos.

Por supuesto, en este año 2023 con herramientas como chatGPT es que podemos acceder a nuevas ideas mucho más rápido y de manera gratuita en la web. Y con esto vamos a pasar a lo malo.

Lo malo de usar copilot

El lado malo de usar esta herramienta, es también la misma predicción, a veces me ha llegado a escribir código obsoleto, que no funciona de todo correcto como yo esperaba, o que solo necesito una parte de todo lo que escribió, aproximadamente el 80% del código que he aceptado lo he tenido que editar, digamos que es obtener una parte para mejorarla o lograr el resultado que necesitaba desde el principio.

El código para el que se basa este autocompletado proviene de los repositorios que hay en GitHub, este puede incluir código con malas prácticas, que es de lo que muchos desarrolladores han llegado a quejarse de esta herramienta.

Por supuesto, no va a escribirte todo el código de una aplicación en específico, por lo que si no sabes programar puedes llegar a tener un par de inconvenientes al usar esta herramienta.

GitHub Copilot X

Pero esta no es la única herramienta que tiene GitHub, con la llegada de las inteligencias artificiales, podría ser que, como mencionábamos antes, la herramienta copilot podría haberse quedado obsoleta, no lo considero así ya que el autocompletado es de mucha utilidad, pero la parte de predecir código o de completar un bloque entero de código, sí que se ve atrasada comparada con chat GPT, la cual además es gratis.

Para esto Github ha incluido nuevas funcionalidades en Copilot, la primera GitHub Copilot X, la cual nos permite integrar a VsCode un chat como el que tenemos en Chat GPT para poder hacer preguntas sobre programación o sobre nuestro código en específico.

Requisitos e Instalación

Para usar esta herramienta necesitaremos tener una cuenta de GitHub con una suscripción activa de Copilot y que nos hayan permitido el acceso, si aún no lo has solicitado puedes hacer clic en este link y te llevara a la página de GitHub para unirte a la waitlist con tu cuenta.

Cuando tengas acceso te llegarán las instrucciones para su uso mediante correo electrónico, lo primero será que necesitaremos descargar VSCode Insiders, esta es una versión que tendrá disponible los últimos recursos que vayan saliendo en VsCode, te dejaré él link de descarga en este link.

Cuando tengas instalado verás esta pantalla, que es totalmente igual al VsCode que ya conocemos,

Esto es opcional, pero si haces uso de WSL en Windows como yo, verás que también tendrás la opción para tener la extensión en este sistema operativo.

Ahora con este editor de texto instalado vamos a instalar la extensión para el uso de Copilot, tendremos que instalar GitHub Copilot Nightly.

Al igual que con Copilot, esta extensión nos pedirá hacer login a nuestra cuenta de GitHub, esto para verificar que tenemos acceso. Y una vez que con login exitoso podremos usar esta herramienta, además de lo que ya tenemos con GitHub.

¿Cómo se usa Copilot X?

Hay dos formas de utilizarla y es que podemos hacer la selección de nuestro código y después con clic derecho iremos a la opción para seleccionar una de las dos opciones, «comenzar chat» o «explicar código».

Si usamos la opción de comenzar chat, nos mostrará debajo el lugar donde podemos escribir, para este caso del mismo ejemplo del Mock de Pokémon , le he solicitado que me de los siguientes 19 ejemplos, como vemos en la siguiente imagen:

La otra forma de acceder a este chat sin necesidad de tener que seleccionar código, es con el atajo ctrl + alt + i , con esto, en la barra de actividades (la barra derecha de VsCode), vamos a ver desplegada la pestaña para poder interactuar con este chat:

Si vemos las opciones que nos tiene escribiendo «/» veremos algunas de las opciones disponibles en esta versión:

Como en el siguiente ejemplo en el que también di clic aquí vamos a tener lo que sucede si usamos la opción para explicar código bajo esta forma o la anterior dando clic derecho y seleccionar la opción «Explain This», lo cual explicará qué hace nuestro código:

Ahora, teniendo un par de componentes de React y el Mock de Pokémon:

export const PokemonItem = ({ pokemon }) => {
    return (
        <li>
        <span>{pokemon.name}</span>
        <span>{pokemon.type}</span>
        </li>
    );
}

export const PokemonList = () => {
    // fetch data from API and render using useEffect
    const [pokemon, setPokemon] = React.useState([]);
    React.useEffect(() => {
        fetch('https://pokeapi.co/api/v2/pokemon?limit=807')
        .then(response => response.json())
        .then(data => setPokemon(data.results));
    }, []);
    return (
        <ul>
        {pokemon.map(p => <PokemonItem key={p.name} pokemon={p} />)}
        </ul>
    );
}

Le he solicitado que lo pase a código TypeScript, y como ves en la imagen, puedes también hacer peticiones en el idioma español:

Con esto, me ha dado el resultado en un nuevo archivo example.tsx:

Lo siguiente que le solicité fue si podría darme una aplicación de todos y lo ha realizado con éxito:

import React, { useState } from "react";

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

const TodoList: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [inputValue, setInputValue] = useState("");

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
  };

  const handleAddTodo = () => {
    if (inputValue.trim() === "") return;

    const newTodo: Todo = {
      id: todos.length + 1,
      text: inputValue,
      completed: false,
    };

    setTodos([...todos, newTodo]);
    setInputValue("");
  };

  const handleToggleTodo = (id: number) => {
    const updatedTodos = todos.map((todo) => {
      if (todo.id === id) {
        return { ...todo, completed: !todo.completed };
      }
      return todo;
    });

    setTodos(updatedTodos);
  };

  const handleDeleteTodo = (id: number) => {
    const updatedTodos = todos.filter((todo) => todo.id !== id);

    setTodos(updatedTodos);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => handleToggleTodo(todo.id)}
            />
            <span style={{ textDecoration: todo.completed ? "line-through" : "none" }}>
              {todo.text}
            </span>
            <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

Este código es funcional y se ve de la siguiente manera en el navegador:

Otro ejemplo que siempre pruebo es si me puede dar código para verificar con regex un correo electrónico y me entrego lo siguiente:

GitHub Copilot CLI

La siguiente herramienta es GitHub Copilot Cli, el cual nos dará recomendación de comandos para ejecutar en nuestra terminal en caso de necesitarlos. Igualmente, debes de tener una cuenta activa de copilot y que te den acceso, para esto hay otra lista de espera, te dejare igualmente el link aquí y el link con el proceso de instalación y uso, aquí vamos a ver rapidamente de que se trata.

Uso de GitHub Copilot CLI

En nuestra terminal necesitaremos tener Node versión 16 por lo menos y después ejecutaremos los siguientes comandos:

npm install -g @githubnext/github-copilot-cli

Después de haber instalado con éxito, vamos a ejecutar el siguiente comando para autentificarnos con nuestra cuenta de GitHub:

github-copilot-cli auth

Y por último, para agregar los alias ??, gh?, y git?, para hacer las consultas directamente y no usar el comando completo de esta herramienta, donde:

• ?? Para buscar comandos generales en nuestra terminal,
• gh? para comandos relacionados con github, y
• git? para comandos relaciones con git

Usaremos el siguiente comando:

eval "$(github-copilot-cli alias -- "$0")"

Ahora vamos a hacer una pequeña consulta a esta herramienta, la cual fue:

Uso de GitHub Copilot CLI

?? how to search all node_modules directories

Y este fue el resultado:

Aquí podemos seleccionar, ejecutar el comando descrito o replantear qué es lo que necesitemos. En este caso acepté y ahora puedo ver el resultado en la terminal.

Conclusiones

Copilot tiene varias cosas que ofrecer, no todos los desarrolladores están dispuestos a tomar 10 dólares mensuales para pagar este servicio, en mi caso cuando por alguna razón lo he desactivado ya estoy esperando la sugerencia, ya que sí, a mí me ha ayudado un montón para todo el código repetitivo o esa ventaja de darnos la opción de darnos alternativas a lo que escribimos, y ahora si lo combinamos con Copilot X, es que ahora tenemos integrada inteligencia artificial para poder hacer consultas en el mismo editor de código sin depender de un servicio externo.

Para el caso de chat GPT, en su modo gratuito le he realizado algunas consultas, pero la mayoría son de código, pero ahora ya lo tengo en el editor, lo cual le da una gran ventaja, aún desconozco si estas dos herramientas vendrán siempre incluidas en el precio de Copilot, ya que aún no se sabe si este se cobrará por separado, pero por el momento tenemos todo integrado en un mismo precio en este periodo de pruebas.

Por aquí te dejaré la página de donde podras ver todas nuevas implementaciones que el equipo de GitHub tiene para sus productos

Aprender a programar

Antes de despedirnos, te dejaremos el enlace a todos nuestros cursos de programación, los cuales los encontrarás disponibles en la academia Hola Mundo y puedes optar por adquirir los cursos de manera individual en el siguiente link: todos los cursos de Hola Mundo, si prefieres acceso a todo, también puedes elegir un plan de suscripción mensual o anual, o tambien puedes optar por cada curso de manera individual en Udemy.

Y esto ha sido todo de este post, si te ha encantado, ¡golpea al botón de me gusta!, dejanos un comentario, y para no perderte nada, no olvides suscribirte a este blog, seguirnos en todas las redes como Youtube, Twitter, Instagram y Tiktok, y por último, te invitamos a escuchar nuestra música «Hola Beats«, diseñada para ayudarte a concentrarte y acompañarte en tu aprendizaje o trabajo, la puedes encontrar en Spotify, Apple Music, Amazon Music, Youtube Music y Deezer.

¡Hasta la próxima!, y chao mundo