Instrucciones personalizadas para GitHub Copilot en VS Code

Usa instrucciones personalizadas para que GitHub Copilot entienda mejor tu proyecto en Visual Studio Code.

instrucciones-personalizadas-github-copilot

GitHub Copilot se ha convertido en una herramienta habitual para muchos de nosotros en el día a día. Nos ayuda a escribir código más rápido, sugiere fragmentos útiles y hasta nos echa una mano con tareas repetitivas. Sin embargo, a veces notamos que sus sugerencias, aunque correctas, no encajan del todo con las convenciones específicas de nuestro proyecto. O tal vez debemos repetir una y otra vez instrucciones cada vez que hacemos una consulta.

Vamos a ver cómo podemos guiar a Copilot para que sus respuestas sean aún más relevantes para nuestras necesidades.

¿Qué es el contexto para el chat de GitHub Copilot?

Antes de meternos con las instrucciones personalizadas, es útil entender qué información utiliza Copilot Chat para generar sus respuestas. Llamamos a esto el “contexto”. Por defecto, Copilot considera varios elementos:

  • El código que tienes abierto en el editor activo.
  • El fragmento de código que hayas seleccionado.
  • Información general sobre el lenguaje de programación que estás usando.
  • A veces, puede mirar otros archivos abiertos recientemente para tener una idea más amplia.

Este contexto le permite hacer sugerencias bastante acertadas en muchas situaciones. Pero, ¿qué pasa con las reglas específicas de nuestro proyecto? ¿O las bibliotecas concretas que preferimos usar? El contexto por defecto no siempre captura estas sutilezas. Es como hablar con alguien que entiende el idioma, pero no conoce las jergas o costumbres locales de nuestro grupo.

Ahí es donde las instrucciones personalizadas marcan la diferencia, permitiéndonos añadir esa capa extra de información específica del proyecto al contexto de Copilot.

Archivo de instrucciones personalizadas para un proyecto

Supongamos que tenemos un proyecto que usa JavaScript (TypeScript) con React y Tailwind. Para darle a Copilot instrucciones e información detallada sobre el stack usado, creamos un archivo llamado copilot-instructions.md dentro de una carpeta .github en la raíz de nuestro repositorio. Sí, igual que otros archivos de configuración de GitHub como los workflows.

El contenido de este archivo es texto en formato Markdown. Aquí podemos detallar nuestras preferencias y estándares.

# Instrucciones para GitHub Copilot en este Repositorio
Somos un equipo que sigue estas convenciones. Intenta seguirlas al generar código o responder preguntas sobre este proyecto.
## Lenguaje y Framework
- **TypeScript**: Preferimos TypeScript sobre JavaScript plano siempre que sea posible. Usa tipos claros y explícitos.
- **React**: Escribe componentes funcionales utilizando Hooks de React (useState, useEffect, useContext, etc.). Evita los componentes de clase.
- **JSX**: Mantén el JSX limpio y legible.
## Estilos
- **Tailwind CSS**: Usa clases de utilidad de Tailwind CSS para estilizar los componentes. Evita escribir CSS personalizado en archivos `.css` o usar estilos en línea (`style={{}}`) a menos que sea estrictamente necesario para algo muy específico que Tailwind no cubra.
- **Clases Concisas**: Intenta agrupar clases de Tailwind de forma lógica.
## Estructura y Patrones
- **Componentes Pequeños**: Favorece componentes pequeños y reutilizables.
- **Importaciones**: Organiza las importaciones al principio del archivo, primero las de React, luego librerías externas, y finalmente componentes locales o módulos (`./`, `../`).
## Pruebas
- **Testing Library**: Si generas código de prueba para componentes React, usa `@testing-library/react`.
- **Jest**: Para pruebas unitarias generales o de lógica, usamos Jest.
## Calidad de Código
- **Legibilidad**: Prioriza la claridad del código. Añade comentarios solo cuando sea necesario explicar lógica compleja, no lo obvio.
- **ESLint/Prettier**: Asume que usamos ESLint y Prettier para el formateo y linting. Intenta generar código que cumpla con estándares comunes.
## Dependencias
- **Manejo de Paquetes**: Usamos `npm`.

Este es solo un ejemplo. Lo adaptaremos a las particularidades de nuestro proyecto: si usamos Vue en lugar de React, si preferimos Styled Components en vez de Tailwind, o si tenemos reglas muy específicas sobre gestión de estado o nombres de variables. La clave es ser claros y directos en las instrucciones.

Cómo habilitar/deshabilitar las instrucciones personalizadas

  1. Abre el editor de configuración mediante el método abreviado de teclado Command+, (Mac)/Ctrl+, (Linux/Windows).
  2. Escribe instruction file en el cuadro de búsqueda.
  3. Activa o desactiva la casilla en Code Generation: Use Instruction Files.

También puedes elminar el archivo la carpeta .github si ya no quieres que GitHub Copilot lo siga usando.

En resumen

Usar instrucciones personalizadas con .github/copilot-instructions.md es una forma práctica de hacer que GitHub Copilot Chat sea un asistente aún mejor adaptado a nuestros proyectos. Al darle contexto específico sobre nuestras tecnologías, patrones y estándares preferidos, conseguimos que sus sugerencias y respuestas sean más coherentes y útiles en nuestro día a día.

Requiere un pequeño esfuerzo inicial para redactar unas buenas instrucciones, pero los beneficios en términos de consistencia y relevancia del código generado pueden ser notables.