Extensiones

Cómo instalar y gestionar extensiones desde el marketplace, y cuáles son muy útiles para desarrollo web: ESLint, Prettier, Live Server y más.

Las extensiones añaden idiomas, temas, linters, formateadores e integraciones (Git, bases de datos, APIs).

Se instalan desde el panel de extensiones (Ctrl+Shift+X) o desde la paleta de comandos buscando «Extensions: Install Extensions».

Algunas imprescindibles para web: ESLint (calidad de código), Prettier (formato), Live Server (recarga al guardar), y paquetes de idioma si quieres la interfaz en español.

  • Panel de extensiones y marketplace.
  • Abre el panel de extensiones con Ctrl+Shift+X (Cmd+Shift+X). Escribe el nombre de la extensión, lee la descripción y las valoraciones, y pulsa Instalar. Puedes desinstalar, deshabilitar o actualizar desde el mismo panel. Las extensiones se instalan por usuario, no por proyecto, aunque muchas permiten configuración por workspace.
  • Buscar por nombre o por categoría (Linting, Formatters, etc.).
  • Deshabilitar temporalmente sin desinstalar desde el menú de la extensión.
  • Actualizar todas desde el panel o permitir actualizaciones automáticas.

Instalar y gestionar extensiones

Panel de extensiones y marketplace.

Abre el panel de extensiones con Ctrl+Shift+X (Cmd+Shift+X). Escribe el nombre de la extensión, lee la descripción y las valoraciones, y pulsa Instalar. Puedes desinstalar, deshabilitar o actualizar desde el mismo panel. Las extensiones se instalan por usuario, no por proyecto, aunque muchas permiten configuración por workspace.

  • Buscar por nombre o por categoría (Linting, Formatters, etc.).
  • Deshabilitar temporalmente sin desinstalar desde el menú de la extensión.
  • Actualizar todas desde el panel o permitir actualizaciones automáticas.

Extensiones recomendadas para desarrollo web

ESLint, Prettier, Live Server y más.

ESLint: analiza JavaScript/TypeScript y señala errores y malas prácticas; configurable con .eslintrc. Prettier: formatea el código al guardar (o al ejecutar el comando); evita discusiones de estilo en el equipo. Live Server: lanza un servidor local y recarga el navegador al guardar, ideal para HTML/CSS/JS estático. Otras útiles: HTML CSS Support (autocompletado), GitLens (historial y blame en línea), Error Lens (muestra errores en la misma línea).

  • ESLint: linting para JS/TS.
  • Prettier: formateo automático.
  • Live Server: servidor local con recarga en caliente.
  • Spanish Language Pack: interfaz en español.
VS Code
05

Extensiones

Cómo instalar y gestionar extensiones desde el marketplace, y cuáles son muy útiles para desarrollo web: ESLint, Prettier, Live Server y más.

Código del tema: Extensions

📘 Teoría

Instalar y gestionar extensiones

Panel de extensiones y marketplace.

Abre el panel de extensiones con Ctrl+Shift+X (Cmd+Shift+X). Escribe el nombre de la extensión, lee la descripción y las valoraciones, y pulsa Instalar. Puedes desinstalar, deshabilitar o actualizar desde el mismo panel. Las extensiones se instalan por usuario, no por proyecto, aunque muchas permiten configuración por workspace.

  • Buscar por nombre o por categoría (Linting, Formatters, etc.).
  • Deshabilitar temporalmente sin desinstalar desde el menú de la extensión.
  • Actualizar todas desde el panel o permitir actualizaciones automáticas.

Extensiones recomendadas para desarrollo web

ESLint, Prettier, Live Server y más.

ESLint: analiza JavaScript/TypeScript y señala errores y malas prácticas; configurable con .eslintrc. Prettier: formatea el código al guardar (o al ejecutar el comando); evita discusiones de estilo en el equipo. Live Server: lanza un servidor local y recarga el navegador al guardar, ideal para HTML/CSS/JS estático. Otras útiles: HTML CSS Support (autocompletado), GitLens (historial y blame en línea), Error Lens (muestra errores en la misma línea).

  • ESLint: linting para JS/TS.
  • Prettier: formateo automático.
  • Live Server: servidor local con recarga en caliente.
  • Spanish Language Pack: interfaz en español.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre VS Code.

Test de VS Code

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .