VS Code recién instalado es un editor de texto con colores. Lo que lo convierte en un entorno de trabajo serio son las extensiones y, sobre todo, configurarlas bien. La mayoría de listas se quedan en «instala esto y esto»; aquí te dejo también los ajustes que hacen que cada una funcione de verdad.
Antes de nada: para instalar cualquiera de estas, pulsa Ctrl + Shift + X, busca el nombre y dale a instalar.
1. Prettier — formateo automático
Formatea tu código al guardar: indentación, comillas, espacios y saltos de línea, todo consistente. Dejas de discutir contigo mismo sobre si tabulador o espacios.
Instalarla no basta: hay que decirle a VS Code que la use. Abre los ajustes en JSON (Ctrl + Shift + P → Preferences: Open User Settings (JSON)) y añade:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}Si trabajas en equipo, crea además un archivo .prettierrc en la raíz del proyecto para que todos formateen igual. Es la diferencia entre un diff de Git limpio y uno con 200 líneas cambiadas porque cada uno usa un formato distinto.
2. ESLint — errores antes de ejecutar
Prettier se ocupa de cómo se ve el código; ESLint, de si tiene sentido. Te marca variables que declaras y no usas, comparaciones con == donde querías === y promesas sin await.
Ojo con un detalle que confunde a mucha gente: ESLint necesita estar instalado en el proyecto, no solo como extensión. En la raíz del proyecto:
npm init @eslint/config@latestSi la extensión parece que no hace nada, casi siempre es porque falta el archivo de configuración en el proyecto.
3. Live Server — recarga automática
Levanta un servidor local y refresca el navegador solo cada vez que guardas. Clic derecho sobre tu index.html → Open with Live Server.
Más allá de la comodidad, hay una razón técnica para usarlo en vez de abrir el HTML con doble clic: al abrirlo directamente, la página se sirve con el protocolo file:// y eso rompe cosas como las peticiones fetch por restricciones de CORS. Con Live Server se sirve por http:// y se comporta como en un servidor real.
4. GitLens — el historial visible
Te muestra al final de cada línea quién la escribió, cuándo y en qué commit. Cuando entras en un proyecto que no es tuyo, poder ver el contexto de cada cambio sin salir del editor acelera muchísimo.
Lo que más uso es comparar mi rama con develop antes de abrir un pull request. Revisar tú mismo el diff antes de pedir revisión te ahorra la mitad de los comentarios.
5. GitHub Copilot — y lo tienes gratis
Autocompletado con IA dentro del editor, con el contexto de tu proyecto. Es distinto a pegar código en un chat: aquí sugiere mientras escribes.
Y lo importante: siendo estudiante lo tienes gratis verificando tu condición en GitHub Education. Lo explico con más detalle en la guía de IA para estudiantes.
Un consejo de uso: en primero, mientras estás aprendiendo lógica, desactívalo para los ejercicios de clase. Pelearte tú con el error es el ejercicio, y aceptar sugerencias sin entenderlas se paga en el examen práctico.
6. Thunder Client — probar APIs sin salir del editor
Un cliente de peticiones HTTP integrado. En el módulo de entorno servidor vas a construir endpoints y necesitas probarlos: mandar un POST con su cuerpo JSON, ver el código de respuesta y la cabecera.
La ventaja sobre abrir otra aplicación es que las colecciones se guardan en el propio proyecto, así que las peticiones de prueba viajan con el repositorio.
7. Error Lens — los errores donde ocurren
En vez de tener que mirar el panel de problemas, te escribe el mensaje de error al lado de la línea que lo provoca. Parece un detalle menor y es de las que más tiempo ahorra al cabo del día.
8. Auto Rename Tag
Cambias <div> por <section> y la etiqueta de cierre se actualiza sola. En documentos HTML largos evita el clásico error de dejar una etiqueta sin cerrar correctamente.
9. Cliente de base de datos integrado
Te conectas a MySQL, PostgreSQL o MariaDB y lanzas consultas sin salir del editor. Poder ver la estructura de las tablas mientras escribes el backend evita muchísimos errores por nombres de columna mal escritos.
Aviso importante: guarda las credenciales de conexión fuera del repositorio. Si la extensión te ofrece guardarlas en la configuración del proyecto, asegúrate de que ese archivo está en tu .gitignore.
10. Material Icon Theme
Iconos distintos según el tipo de archivo. Es estética, sí, pero cuando el árbol del proyecto tiene cincuenta archivos localizas de un vistazo el que buscas.
Ajustes que valen tanto como las extensiones
Estas opciones no requieren instalar nada y se notan desde el primer día:
{
"files.autoSave": "onFocusChange",
"editor.bracketPairColorization.enabled": true,
"editor.linkedEditing": true,
"files.trimTrailingWhitespace": true,
"files.eol": "\n"
}La última es la más importante y la que nadie te cuenta: files.eol fija el final de línea al estilo Unix. Si estás en Windows y no lo pones, cada vez que toques un archivo Git va a marcar el archivo entero como modificado aunque solo hayas cambiado una línea, porque cambian los finales de línea invisibles. Es una fuente de conflictos absurdos en trabajos en grupo.
Dos atajos que deberías automatizar
Ctrl + Py escribes parte del nombre del archivo: saltas a él al instante. Deja de navegar por carpetas con el ratón.Ctrl + Shift + F: busca un texto en todo el proyecto. Es cómo se encuentra dónde está definida una función en un código que no conoces.
Por último, activa la sincronización de ajustes (Settings Sync) con tu cuenta de GitHub. Cuando te toque trabajar en el ordenador del aula o cambies de equipo, recuperas tu configuración entera en un minuto.
