Configurar VSCode como un profesional

Tu editor es tu taller. Puedes trabajar con una llave inglesa oxidada o con herramientas bien afiladas: el resultado se nota en la velocidad, en los errores que evitas y en la fatiga al final del día. Configurar bien VSCode es una inversión de quince minutos que recuperas en la primera semana.

Este capítulo no es una guía de todas las opciones posibles: son las que de verdad usarás cada día en un proyecto frontend real.

Por qué importa el editor#

Un editor bien configurado hace tres cosas por ti:

1. Detecta errores antes de ejecutar. Ves el problema en rojo en el momento en que lo escribes, no cuando el navegador te lo lanza en producción.
2. Mantiene el código limpio sin esfuerzo. El formato se aplica solo al guardar. No hay que recordar nada.
3. Reduce la fricción. Saltar a la definición de una función, renombrar una variable en todo el proyecto, abrir cualquier fichero por nombre: con los atajos correctos son gestos de un segundo.

En equipo, esto se multiplica: un editor configurado igual para todos hace que el código de cualquier compañero sea predecible y coherente.

Extensiones imprescindibles#

Abre el panel de extensiones (Ctrl+Shift+X / Cmd+Shift+X) e instala estas cinco. Son la base de cualquier proyecto frontend serio en 2026.

ESLint#

Analiza tu código mientras escribes buscando errores reales: variables declaradas pero nunca usadas, imports de módulos que no existen, patrones inseguros en React, comparaciones que siempre son verdaderas… No da formato; eso lo hace Prettier. ESLint encuentra problemas de lógica y calidad.

Prettier — Code formatter#

Reformatea el código automáticamente: indentación, comillas, punto y coma, longitud de línea. Sin configuración de tu parte: guardas el fichero y queda limpio. En equipo elimina el 100% de las discusiones de estilo y el ruido en las revisiones de código.

EditorConfig for VS Code#

Lee el fichero .editorconfig del repositorio (si existe) y aplica las reglas básicas del proyecto: tipo de salto de línea, indentación, codificación. Parece menor hasta que trabajas en un equipo con Mac y Windows a la vez, y los ficheros dejan de tener saltos de línea mezclados (CRLF vs LF).

GitLens#

Añade contexto de git directamente en el editor. Git es el sistema con el que se guarda el historial de un proyecto, y un commit es cada uno de esos puntos guardados; aún no los has usado, pero los verás un par de capítulos más adelante, en Git básico. La función estrella de GitLens es el blame inline: al lado de cada línea ves, sin salir del fichero, quién la escribió y en qué commit. Cuando algo falla, en dos segundos sabes cuándo entró el cambio. Instálala ahora; le sacarás partido en cuanto domines Git.

Error Lens#

Muestra los errores y advertencias de ESLint (y de TypeScript) inline, en la misma línea donde ocurren, sin tener que abrir el panel de problemas. El código en rojo de ESLint es visible a distancia; no tienes que ir a buscarlo, el fichero te habla.

Hay miles de extensiones. Estas cinco son la capa base; a partir de aquí añadirás las específicas de tu stack (por ejemplo, la extensión de Tailwind, Svelte, o la de tu framework). El criterio para añadir una extensión más: que resuelva un problema real que ya hayas sufrido, no porque alguien la recomiende en una lista.

Ajustes clave en settings.json#

VSCode guarda sus ajustes en un fichero JSON. Puedes editarlo directamente con Ctrl+Shift+P / Cmd+Shift+P, buscando “Open User Settings (JSON)”.

Pega estos ajustes. Cada uno está comentado para que sepas exactamente qué hace y por qué:

{
  // Formatea el fichero automáticamente cada vez que guardas.
  // Es el ajuste que más tiempo ahorra: nunca vuelves a formatear manualmente.
  "editor.formatOnSave": true,

  // Deja claro qué formateador usar. Sin esto, VSCode pregunta cada vez.
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // Guarda el fichero después de 1000 ms sin escribir.
  // "onFocusChange" (guardar al cambiar de fichero) es otra opción popular,
  // pero puede sorprenderte si guardas código a medio escribir.
  // Empieza con "off" o "afterDelay" según tu preferencia.
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,

  // ESLint corrige automáticamente los problemas que puede al guardar
  // (imports sin usar, orden de imports si tienes la regla, etc.).
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // Muestra el número de columna en la barra inferior.
  // Útil cuando Prettier te dice "error en la línea 42, columna 18".
  "editor.rulers": [80, 120],

  // Resalta el par del paréntesis, corchete o llave donde está el cursor.
  // Parece cosmético; en código anidado es un salvavidas.
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",

  // Activa las sugerencias de TypeScript/JavaScript en ficheros .ts y .tsx.
  // Normalmente viene activado, pero vale la pena confirmarlo.
  "typescript.suggest.autoImports": true,
  "javascript.suggest.autoImports": true,

  // Saltos de línea al estilo Unix (LF) por defecto.
  // Evita conflictos en repositorios con colaboradores de Windows.
  "files.eol": "\n"
}

No copies y pegues a ciegas: lee qué hace cada línea. El día que algo se comporte raro en tu editor, entender tus propios ajustes es lo primero que te salva.

Atajos imprescindibles#

Aprender atajos no es memorizar una lista: es practicar los que más usas hasta que salgan solos. A continuación, primero los que practican hasta que salen solos los desarrolladores profesionales — con una explicación de por qué cambian el día a día —, y después una tabla de referencia completa para cuando necesites consultar el resto.

Los que practicas hasta que salen solos#

Ctrl+P / Cmd+P — Abrir fichero por nombre

En lugar de navegar por el árbol lateral con el ratón, escribes las primeras letras del nombre y llegas al fichero en menos de un segundo. En un proyecto con cientos de ficheros es el gesto que más tiempo ahorra.

Ctrl+Shift+P / Cmd+Shift+P — Paleta de comandos

El acceso universal al editor. Desde aquí puedes ejecutar cualquier acción de VSCode —abrir ajustes, cambiar el tema, reformatear, reiniciar servicios— sin saber dónde está en el menú y sin soltar el teclado.

Alt+↑ / Alt+↓ — Mover línea arriba o abajo

Mueve la línea donde está el cursor (o la selección entera) hacia arriba o hacia abajo. Sin copiar, sin pegar, sin cortar. Una vez que lo usas, no entiendes cómo lo hacías antes.

Shift+Alt+↓ / Shift+Alt+↑ — Duplicar línea

Crea una copia exacta de la línea actual justo debajo (o encima). Útil cuando necesitas una variante de algo que acabas de escribir y no quieres teclearlo desde cero.

Ctrl+D / Cmd+D — Multicursor: seleccionar siguiente ocurrencia

Coloca el cursor sobre una palabra y pulsa Ctrl+D repetidamente: cada pulsación selecciona la siguiente aparición de esa palabra en el fichero. Puedes tener diez cursores activos a la vez y editar todos al mismo tiempo. Es la forma más rápida de cambiar varias instancias sin escribir una expresión regular.

Si quieres seleccionar todas las ocurrencias de golpe en lugar de ir una a una, usa Ctrl+Shift+L / Cmd+Shift+L.

F2 — Renombrar símbolo

Un buscar-y-reemplazar normal cambiaría la palabra en comentarios, en strings y en variables que se llamen igual por casualidad. Rename Symbol entiende el código: solo toca las referencias reales al símbolo que tienes seleccionado. Cuando renombras una función que se usa en veinte sitios, la diferencia es enorme.

F12 — Ir a definición

Salta directamente al lugar donde se define la función, variable o componente sobre el que está el cursor. Si no quieres perder el sitio donde estás, Alt+F12 abre la definición en una ventana flotante encima del código actual (“peek”), sin abandonar el fichero.

Ctrl+` — Terminal integrada

Abre (o cierra) una terminal dentro de VSCode, en el mismo directorio que el proyecto. No necesitas cambiar de ventana: editas código y ejecutas comandos en el mismo espacio.

Emmet y snippets — expansión de abreviaturas

VSCode incluye Emmet de serie. Emmet te permite escribir abreviaturas cortas que se expanden automáticamente a código cuando pulsas Tab. Lo usarás intensamente cuando llegues a los capítulos de HTML, donde escribir una sola línea puede generar una estructura completa en décimas de segundo. Por ahora quédate con la idea: cuando llegues a HTML, intenta escribir div y pulsar Tab — el editor ya sabe qué hacer.

Los snippets funcionan de forma parecida: son plantillas de código completas, nombradas con una palabra clave, que se expanden al seleccionarlas de la lista de sugerencias. Los hay predefinidos (VSCode trae algunos para JavaScript y TypeScript) y puedes crear los tuyos propios para los patrones que más repites. Como Emmet, los verás en acción cuando tengas código que expandir.

Tabla de referencia completa#

Cuando necesites un atajo que no recuerdas, búscalo aquí. No intentes aprenderlos todos a la vez: vuelve a esta tabla cuando sientas que repites un gesto lento.

Hazlo ahora#

Una checklist concreta. Cuando la termines, tu VSCode estará listo para cualquier proyecto frontend:

• Instala las cinco extensiones: ESLint, Prettier, EditorConfig for VS Code, GitLens, Error Lens.
• Abre los ajustes de usuario en JSON (Ctrl+Shift+P → “Open User Settings (JSON)”) y añade los bloques de formatOnSave, defaultFormatter y codeActionsOnSave.
• Abre cualquier fichero .js o .ts con código, pon un par de líneas mal indentadas y guarda. Comprueba que Prettier las reformatea solo.
• Prueba Ctrl+P / Cmd+P: abre el fichero que quieras en menos de dos segundos sin usar el árbol lateral.
• Prueba F2 sobre el nombre de una variable: renómbrala y comprueba que el cambio se propaga en todos los usos del fichero.

Comprueba lo que sabes#