Cómo detener los bucles de auto-corrección de eslint provocados por GitHub Copilot

GitHub Copilot genera sugerencias de código que a veces violan tus reglas de ESLint. Cuando guardas el archivo, la auto-corrección de ESLint cambia el código. Copilot vuelve a sugerir el estilo original, creando un bucle sin fin. Este artículo explica por qué ocurren estos bucles y proporciona ajustes exactos para detenerlos.

La causa raíz es un desajuste entre el estilo de sugerencia de Copilot y tu configuración de ESLint. Copilot aprende de código público, que puede no seguir las reglas de tu proyecto. La auto-corrección de ESLint al guardar revierte la salida de Copilot, pero Copilot no aprende de esas correcciones en tiempo real.

Aprenderás a deshabilitar la auto-corrección de ESLint para líneas generadas por Copilot, configurar Copilot para que respete las reglas de ESLint de tu proyecto y usar ajustes del editor para romper el bucle permanentemente.

Por Qué Copilot y ESLint Crean un Bucle de Auto-Corrección

GitHub Copilot sugiere código basado en patrones de repositorios públicos. Estos patrones a menudo usan comillas simples, sangría de dos espacios o comas finales que difieren de tu configuración de ESLint. Cuando guardas el archivo, tu editor ejecuta la auto-corrección de ESLint, que reformatea el código para que coincida con tus reglas. Copilot entonces ve el código corregido como contexto y sugiere el estilo original nuevamente en la siguiente línea o edición.

Este bucle se repite cada vez que guardas. El bucle no es un error en Copilot o ESLint. Es un conflicto entre dos herramientas con puntos de referencia diferentes. Copilot referencia patrones de código público. ESLint referencia las reglas de tu proyecto. Ninguna herramienta ajusta su comportamiento basándose en la salida de la otra durante una sesión de edición.

Los desencadenantes más comunes son reglas de formato como quotes, indent, comma-dangle y semi. Si tu configuración de ESLint exige comillas dobles y Copilot sugiere comillas simples, el bucle comienza. Lo mismo ocurre con comas finales o punto y coma.

Pasos para Romper el Bucle de Auto-Corrección

Método 1: Deshabilitar la Auto-Corrección de ESLint al Guardar para Archivos Afectados por Copilot

1. Abrir settings.json de VS Code
   Presiona Ctrl+Shift+P, escribe “Preferencias: Abrir Configuración (JSON)” y presiona Enter.
2. Localizar la configuración editor.codeActionsOnSave
   Encuentra o añade la línea "editor.codeActionsOnSave": { "source.fixAll.eslint": true }.
3. Deshabilitar la auto-corrección de ESLint para tipos de archivo específicos
   Cambia la configuración a "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" } y añade un ámbito de archivo. Solo para archivos JavaScript, usa:
   "[javascript]": { "editor.codeActionsOnSave": { "source.fixAll.eslint": false } }
   Esto mantiene la auto-corrección para otros lenguajes pero la detiene para archivos JavaScript donde Copilot desencadena el bucle.
4. Guardar settings.json
   Presiona Ctrl+S para guardar. El bucle debería detenerse inmediatamente.

Método 2: Deshabilitar Temporalmente las Completaciones de Copilot

1. Abrir el menú de estado de Copilot
   Haz clic en el icono de Copilot en la barra de estado de VS Code en la parte inferior derecha.
2. Deshabilitar completaciones
   Selecciona “Deshabilitar Completaciones” en el menú. Copilot dejará de sugerir código mientras guardas y corriges el archivo actual.
3. Guardar y corregir el archivo
   Presiona Ctrl+S para guardar. La auto-corrección de ESLint se ejecuta una vez y se detiene porque Copilot no está generando nuevas sugerencias.
4. Rehabilitar completaciones
   Haz clic en el icono de Copilot nuevamente y selecciona “Habilitar Completaciones”. El bucle no debería reanudarse porque el archivo ahora coincide con las reglas de ESLint.

Método 3: Configurar Copilot para Respetar las Reglas de ESLint

1. Añadir un archivo .github/copilot-instructions.md
   Crea este archivo en la raíz de tu repositorio. Escribe instrucciones como:
   Always use double quotes.
Never use trailing commas.
Indent with two spaces.
   Copilot lee este archivo y ajusta sus sugerencias para tu proyecto.
2. Reiniciar VS Code
   Cierra y vuelve a abrir VS Code. Copilot recarga las instrucciones.
3. Probar con una nueva línea
   Escribe algunas líneas de código y acepta una sugerencia de Copilot. Guarda el archivo. El bucle no debería ocurrir porque Copilot ahora coincide con tus reglas de ESLint.

Método 4: Anular Reglas de ESLint para Código Generado por Copilot

1. Abrir tu archivo .eslintrc.json
   Este archivo está en la raíz de tu proyecto. Si no existe, créalo con una configuración básica.
2. Añadir una anulación de regla para la regla problemática
   Por ejemplo, para permitir comillas simples en código generado por Copilot sin desencadenar la auto-corrección, añade:
   "rules": { "quotes": ["warn", "single"] }
   Cambiar de “error” a “warn” evita que la auto-corrección se ejecute en esa regla. ESLint aún resalta el problema pero no cambia el código.
3. Guardar .eslintrc.json
   Presiona Ctrl+S. El bucle se detiene porque ESLint ya no auto-corrige la regla de comillas.

Si Copilot Aún Desencadena un Bucle de Auto-Corrección Después de Estos Arreglos

Copilot sugiere código que ESLint auto-corrige a un estilo diferente en la misma línea

Esto ocurre cuando Copilot completa una línea con punto y coma y tu regla de ESLint exige no usar punto y coma. ESLint elimina el punto y coma al guardar. Copilot entonces ve la línea sin punto y coma y sugiere agregarlo nuevamente. Para solucionarlo, añade un archivo .github/copilot-instructions.md con la instrucción Never use semicolons. Esto le dice a Copilot que coincida con tu estilo desde el principio.

La auto-corrección de ESLint se ejecuta en cada pulsación de tecla, no solo al guardar

Algunos editores ejecutan la auto-corrección de ESLint en tiempo real mientras escribes. Esto puede crear un bucle incluso antes de guardar. Para detenerlo, abre la configuración de VS Code y establece "eslint.run": "onSave". Esto restringe ESLint para que se ejecute solo cuando guardas el archivo, no durante la escritura.

Copilot continúa sugiriendo el estilo antiguo después de que corriges el archivo

La ventana de contexto de Copilot puede seguir haciendo referencia a las líneas sin corregir. Cierra el archivo y vuelve a abrirlo. Copilot reconstruye su contexto a partir del contenido actual del archivo, que ahora coincide con las reglas de ESLint. El bucle no debería regresar.

Elemento	Deshabilitar la Auto-Corrección de ESLint al Guardar	Deshabilitar Temporalmente las Completaciones de Copilot
Efecto en el bucle	Detiene la auto-corrección, por lo que las sugerencias de Copilot nunca se revierten	Detiene que Copilot genere nuevas sugerencias mientras corriges el archivo
Persistencia	Permanente para los tipos de archivo configurados	Temporal hasta que vuelvas a habilitar las completaciones
Tiempo de configuración	30 segundos	5 segundos
Mejor para	Proyectos con reglas de ESLint estrictas y uso frecuente de Copilot	Soluciones rápidas cuando el bucle bloquea tu trabajo

Ahora puedes detener el bucle de auto-corrección deshabilitando la auto-corrección de ESLint al guardar para tipos de archivo específicos, deshabilitando temporalmente las completaciones de Copilot, o configurando Copilot para que respete tus reglas de ESLint. Para problemas persistentes, añade un archivo .github/copilot-instructions.md con tus preferencias de estilo. Intenta combinar el cambio de configuración permanente con el archivo de instrucciones para obtener el resultado más confiable. Un consejo avanzado: usa la configuración "eslint.run": "onSave" junto con "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" } para mantener la auto-corrección disponible pero bajo tu control.