GitHub Copilot en WebStorm: la mejor configuración para turbinar tu día a día

WebStorm es mi IDE preferido para trabajar con JavaScript y TypeScript, y GitHub Copilot se volvió parte esencial de mi flujo. Pero instalar el plugin y usarlo en automático deja mucho potencial sobre la mesa. En esta guía te voy a mostrar la configuración que uso, con los atajos que más tiempo ahorran y las opciones que hacen que Copilot deje de pelearse con el autocompletado nativo de WebStorm.

Antes de empezar: requisitos

Para seguir este tutorial, vas a necesitar:

• WebStorm 2024.3.6 o superior (recomiendo la 2026.1, que trajo el motor TypeScript turbinado)
• Cuenta en GitHub con una licencia activa de Copilot (Individual, Business o Enterprise)
• Conexión a internet (Copilot corre en la nube)
• Java 17+ embebido en el propio WebStorm (ya viene por defecto)

Si todavía estás en una versión vieja, actualizá antes de continuar. Versiones por debajo de la 2024.3.6 tienen un conflicto conocido entre Copilot y el Full Line Code Completion nativo, y el Tab queda peleando entre los dos.

Paso 1: instalar el plugin oficial

1. Abrí WebStorm
2. Andá a Settings (Cmd + , en Mac / Ctrl + Alt + S en Windows/Linux)
3. Navegá hasta Plugins
4. Clickeá la pestaña Marketplace
5. Escribí GitHub Copilot en la búsqueda
6. Clickeá Install en el plugin oficial de GitHub
7. Reiniciá WebStorm cuando te lo pida

En algunas versiones el plugin GitHub Copilot Chat viene separado. Si es tu caso, instalalo también: es el que entrega la ventana de chat, el inline chat y el Agent Mode, que son las partes más poderosas de Copilot hoy.

Paso 2: hacer login con tu cuenta de GitHub

Después de que WebStorm reinicia, vas a ver el ícono de Copilot en la barra inferior.

1. Clickeá el ícono de Copilot en la esquina inferior derecha
2. Elegí Login to GitHub
3. Una ventana va a mostrar un device code: copialo
4. WebStorm abre el navegador en github.com/login/device
5. Pegá el device code y autorizá el acceso
6. Volvé a WebStorm y esperá la confirmación

Cuando el ícono se pone verde, Copilot está activo.

Paso 3: resolver el conflicto con el Full Line Code Completion

Este es el paso que más diferencia hace y casi nadie lo cuenta. WebStorm tiene un autocompletado de línea entera nativo, local, que compite con Copilot por la misma tecla (Tab). Si dejás los dos activos sin ajustar nada, el Tab a veces acepta uno, a veces el otro, y perdés la confianza en el flujo.

Tenés dos buenas opciones.

Opción A (mi preferida): desactivar el Full Line Code Completion

1. Settings > Editor > General > Inline Completion
2. Destildá Enable local full line completion suggestions
3. Aplicá y cerrá

Así el Tab siempre acepta la sugerencia de Copilot, sin dudas.

Opción B: mantener los dos, pero separar las teclas

Si te gusta el Full Line porque es instantáneo y offline, podés mantener los dos:

1. Settings > Keymap
2. Buscá Insert Inline Completion (es el nativo de WebStorm)
3. Remapealo a un atajo que no entre en conflicto, tipo Cmd + Shift + ] (Mac) / Ctrl + Shift + ] (Windows/Linux)
4. Dejá Apply completions to Editor (Copilot) en el Tab

Paso 4: configuración fina del plugin

Andá a Settings > Tools > GitHub Copilot > Completions y ajustá:

Más abajo, en la sección Languages, podés activar/desactivar por lenguaje. Mi recomendación:

• Activo: JavaScript, TypeScript, JSX, TSX, Vue, Astro, HTML, CSS, SCSS, JSON, Markdown, YAML, Shell
• Desactivado: archivos de lockfile (package-lock.json, yarn.lock, pnpm-lock.yaml): Copilot solo estorba acá

Si preferís editar directamente el archivo github-copilot.xml, podés usar wildcards. Pero la interfaz gráfica resuelve el 99% de los casos.

Paso 5: activar el Copilot Chat y el Agent Mode

El chat es donde vive la mitad de la productividad. Abrilo con Ctrl + Shift + C o por la barra lateral derecha (ícono de Copilot).

Dentro de la ventana de chat vas a ver tres modos:

• Ask: resuelve dudas y explica código (bueno para entender legacy)
• Edit: hace cambios puntuales en archivos que vos indicás
• Agent: Copilot decide qué archivos tocar y ejecuta tareas enteras

Para habilitar el Agent Mode:

1. Settings > Tools > GitHub Copilot > Chat
2. Tildá Enable Agent Mode
3. Tildá Enable Agent Skills (todavía en preview, pero ya vale la pena)
4. Elegí el modelo por defecto (Claude Sonnet y GPT son excelentes para front-end)

Paso 6: custom instructions, el secreto para que Copilot deje de alucinar

Las custom instructions son un archivo que Copilot lee antes de cada respuesta. Ahí escribís las reglas de tu proyecto, las bibliotecas que usás, los patrones de código, y Copilot empieza a seguirlos de verdad.

Configurando en el proyecto

1. En la raíz del proyecto, creá la carpeta .github/ (si no existe)
2. Dentro de ella, creá el archivo copilot-instructions.md
3. Poné las reglas de tu proyecto, por ejemplo:

# Instrucciones para Copilot

Este proyecto es un sitio en Hugo con posts en portugués, inglés y español.

## Stack
- Hugo (static site generator)
- SCSS con Dart Sass
- JavaScript vanilla (sin frameworks)
- Imágenes optimizadas en WebP

## Estándares de código
- Indentación con 2 espacios
- Strings con comillas simples en JS
- Nombres de archivo en kebab-case

Copilot va a leer esto cada vez que abras el chat o pidas una sugerencia con Agent Mode.

Configurando globalmente

Si querés instrucciones que valgan para todos los proyectos:

1. Settings > Tools > GitHub Copilot > Customizations
2. En la sección Global Custom Instructions, pegá tus reglas
3. Aplicá

AGENTS.md y CLAUDE.md

A partir de la versión 2026.2 Copilot también lee AGENTS.md y CLAUDE.md anidados en el proyecto. Si ya usás Claude Code o Cursor, aprovechá el mismo archivo. Habilitalo en Settings > Tools > GitHub Copilot > Customizations > Enable nested AGENTS.md and CLAUDE.md.

Atajos esenciales (los que uso todos los días)

Sugerencias inline

Importante para quienes usan teclado ABNT2: el estándar oficial de Copilot es Option + ], Option + [ y Option + \, pero en el teclado brasileño esas combinaciones generan caracteres tipográficos («, », entre otros) y nunca llegan a Copilot. La solución es agregar Shift a la combinación (queda Shift + Option + ...), que es lo que dejé en la tabla de arriba. Si usás teclado US, podés usar el estándar sin el Shift.

Inline chat (el más poderoso)

El inline chat es lo que reemplaza el 90% del Copy/Paste a ChatGPT. Seleccionás un bloque de código, apretás Ctrl + Shift + I, escribís “convertí esto a TypeScript strict” y listo.

Chat completo

Atajos customizados que configuré

Vale mucho la pena entrar en Settings > Keymap y buscar copilot. El plugin solo expone un puñado de acciones bindables (copilot.chat.show, copilot.chat.inline, copilot.openCopilot, copilot.applyInlays, copilot.cycleNextInlays, copilot.cyclePrevInlays y copilot.requestCompletions), pero cubren el 100% de lo que realmente se puede acelerar. Los otros comandos (explain, fix, tests, doc) son slash commands que escribís dentro del chat, no teclas de atajo.

Lo que dejo en mi keymap:

Si algún atajo ya está en uso, WebStorm avisa y vos elegís si remover el viejo o mantener. Cmd + Shift + K por defecto abre Push… de Git: yo no uso Push por atajo, así que liberé esa tecla para Copilot, pero si vos sí la usás, elegí otra.

Una vez que el chat está abierto, los slash commands resuelven el resto:

• /explain explica el código seleccionado
• /fix intenta corregir errores reportados por TS o ESLint
• /tests genera tests unitarios
• /doc genera documentación JSDoc
• /simplify propone una versión más corta

Trucos que multiplican la productividad

Los comentarios se convierten en prompts

Escribí un comentario claro arriba de la función y Copilot genera la implementación. Por ejemplo:

// Devuelve la lista de posts publicados en los últimos 30 días,
// ordenados por fecha descendente, con máximo 10 items.
// Usa la API interna en services/posts.ts
function recentPosts(): Promise<Post[]> {
  // Copilot completa desde acá
}

Cuanto más específico sea el comentario (incluyendo las rutas a archivos relevantes), mejor el resultado.

Usá # para referenciar archivos en el chat

Dentro del chat, escribí #package.json o #services/posts.ts y Copilot carga el archivo al contexto. Te ahorra describir la estructura a mano.

Agent Mode para refactors grandes

Cuando necesitás renombrar una función en 20 archivos, cambiar la firma de un hook o migrar de una librería a otra, abrí el chat en Agent Mode, describí el objetivo y dejá que proponga los cambios. Vos revisás archivo por archivo antes de aceptar.

Inline chat para code review de vos misma

Antes de abrir un PR, seleccioná el diff de un método, apretá Ctrl + Shift + I y pedí “revisá este código buscando edge cases y tests que falten”. Agarra mucha cosa boba antes de llegar a GitHub.

Slash commands dentro del chat

Dentro del inline chat o del chat normal, escribí:

• /tests: genera tests unitarios para el código seleccionado
• /doc: genera documentación JSDoc
• /fix: intenta corregir errores reportados por TS o ESLint
• /explain: explica el código seleccionado
• /simplify: propone una versión más corta

Ajustes finos por tipo de proyecto

React / Next.js

• Activá el plugin oficial de Copilot Chat para sugerencias específicas de hooks
• En copilot-instructions.md, especificá si usás App Router o Pages Router
• Avisá si usás Server Components (cambia mucho la sugerencia)

Vue / Nuxt

• WebStorm 2026.1 integra el @vue/typescript-plugin actualizado
• Si estás en Nuxt, mencioná la versión en las custom instructions
• Desactivá Copilot dentro de <style> puros si te parece que alucina mucho CSS

Astro

• Avisá en las custom instructions si es SSG o SSR
• Activá Copilot para archivos .astro (normalmente hay que habilitarlo manualmente)

Problemas comunes y soluciones

El Tab no acepta sugerencias

Casi siempre es el Full Line Code Completion peleando. Volvé al Paso 3 y aplicá una de las dos opciones.

Copilot está lento

1. Verificá tu conexión (el plugin habla con la API de GitHub en cada keystroke)
2. Settings > Tools > GitHub Copilot > Completions, destildá Show completions automatically y usá Shift + Option + \ (Mac) / Shift + Alt + \ (Windows/Linux) a demanda
3. Confirmá que no tenés 30 pestañas abiertas peleando por el Language Server

El ícono de Copilot está en rojo

1. Clickealo para ver el error
2. Si dice Not signed in, volvé a hacer login
3. Si dice Network error, verificá proxy/VPN. En Settings > Appearance & Behavior > System Settings > HTTP Proxy, revisá la configuración
4. Si dice Quota exceeded, te pasaste del límite mensual del plan Free o Individual

Copilot sugiere código viejo

Actualizá el plugin y reiniciá. Las versiones más nuevas cambiaron el modelo por defecto y la calidad subió bastante.

El chat no abre

Puede ser que el plugin GitHub Copilot Chat no esté instalado. Volvé al Paso 1 e instalá el chat por separado.

Checklist final

Después de seguir el tutorial, verificá que:

• Plugin GitHub Copilot instalado y actualizado
• Plugin GitHub Copilot Chat instalado
• Logueada con la cuenta correcta de GitHub
• Full Line Code Completion desactivado (o remapeado)
• Copilot activo para los lenguajes de tu proyecto
• Agent Mode habilitado en Settings
• Archivo .github/copilot-instructions.md creado
• Atajos customizados configurados en el Keymap
• Ícono verde en la barra inferior

Con eso cerrado, tenés WebStorm corriendo Copilot de la forma más productiva posible. El próximo paso es practicar. En una semana vas a estar escribiendo comentarios que generan funciones enteras y usando el inline chat para refactorizar sin sacar las manos del teclado.

Y si también escribís Go, ¿viste mi otra guía? GitHub Copilot en GoLand: la mejor configuración para escribir Go más rápido.