Tema 7 · Extensiones

7. Extensiones Imprescindibles para Desarrollo Web (HTML, CSS, JS, PHP y SQL)

Selecciona e instala las mejores extensiones sin degradar la memoria RAM y estandariza las recomendaciones de equipo con extensions.json.

6. Maestría en Emmet y Creación de Snippets Personalizados por Lenguaje 8. Terminal Integrada (Ctrl+Ñ), Perfiles de Shell y Automatización con tasks.json

Menos es Más: Cómo Elegir Extensiones sin Ralentizar VS Code

El Marketplace de Visual Studio Code (Ctrl + Shift + X) cuenta con más de 50,000 extensiones gratuitas. Sin embargo, un error clásico es instalar 40 o 50 extensiones redundantes que consumen memoria RAM y hacen que el autocompletado tarde segundos en responder. Un entorno profesional se construye con un conjunto selecto de 8 a 10 extensiones esenciales y bien mantenidas.

El Kit Oficial de Extensiones para Desarrolladores Web

Extensión (ID Oficial) Categoría ¿Por qué es indispensable?
GitHub Copilot & Copilot Chat
GitHub.copilot		 Inteligencia Artificial Asistente de código en tiempo real, chat contextual y edición multi-archivo asistida.
PHP Intelephense
bmewburn.vscode-intelephense-client		 Backend PHP El motor de autocompletado, análisis estático, definición de clases y formateo más rápido para PHP 8+.
Prettier - Code formatter
esbenp.prettier-vscode		 Formato Frontend Formatea automáticamente HTML, CSS, JavaScript, JSON y Markdown al guardar el archivo.
Live Server
ritwickdey.LiveServer		 Servidor Local Lanza un servidor web local con recarga automática en el navegador (Hot Reload) para maquetación HTML/CSS/JS.
Error Lens
usernamehw.errorlens		 Diagnóstico en Línea Muestra los errores de sintaxis y advertencias directamente al final de la línea sin tener que pasar el ratón por encima.
Path Intellisense
christian-kohler.path-intellisense		 Rutas de Archivos Autocompleta nombres y rutas de imágenes, hojas CSS y scripts al escribir src="./..." o require.
GitLens
eamodio.gitlens		 Control de Versiones Muestra quién modificó cada línea de código, cuándo lo hizo y en qué commit (Git Blame en línea).
⚠️ Extensiones que YA NO necesitas instalar: Bracket Pair Colorizer y Auto Close Tag ya están integradas de forma nativa en el motor de VS Code y son 10,000 veces más rápidas sin extensión externa.

⚡ Archivo .vscode/extensions.json para Estandarizar Proyectos en Equipo

Al incluir este archivo en tu repositorio Git, VS Code sugerirá instalar automáticamente estas extensiones a cualquier compañero que abra el proyecto.

.vscode/extensions.json
Solo lectura 
{
  // Extensiones recomendadas para este proyecto web
  "recommendations": [
    "GitHub.copilot",
    "GitHub.copilot-chat",
    "bmewburn.vscode-intelephense-client",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "ritwickdey.LiveServer",
    "usernamehw.errorlens",
    "christian-kohler.path-intellisense",
    "PKief.material-icon-theme"
  ],

  // Extensiones obsoletas que no se recomiendan en este espacio de trabajo
  "unwantedRecommendations": [
    "CoenraadS.bracket-pair-colorizer-2"
  ]
}
🧠
Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección
1 Pregunta
Pregunta 1
¿Cuál es el propósito de crear un archivo ".vscode/extensions.json" dentro de la carpeta de un proyecto?
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Visual Studio Code & GitHub Copilot Profesional y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.