Herramientas
Tutorial: configura VS Code como todo un profesional
Instala extensiones y ajustes clave en VS Code para programar más rápido y más cómodo.
VS Code recién instalado funciona bien, pero con unos ajustes se convierte en una herramienta que se siente hecha a tu medida. Vamos a configurarlo en diez minutos.
Paso 1: instala extensiones esenciales
Abre la pestaña de extensiones (el ícono de cuadros en la barra lateral, o Ctrl/Cmd + Shift + X) e instala:
- Prettier: formatea tu código automáticamente para que siempre se vea ordenado.
- ESLint: te avisa de errores y malas prácticas mientras escribes.
- Live Server: abre tu HTML en el navegador con recarga automática cada vez que guardas.
Paso 2: activa el formateo automático al guardar
Abre la configuración (Ctrl/Cmd + ,), busca "format on save" y actívalo. O agrega esto directamente a tu settings.json:
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
A partir de ahora, cada vez que guardes un archivo, Prettier lo va a acomodar por ti. Se acabó discutir con tu equipo sobre si usar tabs o espacios.
Paso 3: activa el autoguardado (para los que olvidan guardar)
{
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000
}
Con esto, VS Code guarda tus archivos automáticamente un segundo después de que dejas de escribir. Menos "¿por qué no se ve mi cambio?" y más programar en paz.
Paso 4: aprende dos atajos que te van a cambiar la vida
Ctrl/Cmd + P: busca y abre cualquier archivo del proyecto por nombre.Ctrl/Cmd + Shift + F: busca texto en todos los archivos del proyecto, no solo el actual.
¿Qué acabas de aprender?
- Qué extensiones instalar primero (Prettier, ESLint, Live Server).
- Cómo activar el formateo y guardado automáticos.
- Dos atajos de teclado que vas a usar todos los días, para siempre.