Cómo configurar Visual Studio Code paso a paso

Visual Studio Code es uno de los editores de código más utilizados para desarrollo web, programación y tomar notas. Una de sus principales ventajas es que permite personalizar prácticamente todos los aspectos de la interfaz y del comportamiento del editor.

En esta guía vamos a configurar Visual Studio Code para programar de forma cómoda, ordenada y visual.

La configuración está pensada principalmente para trabajar con:

• HTML.
• CSS.
• JavaScript.
• PHP.

Como configurar VSCode

Si quieres configurar Visual Studio Code para programar con HTML, CSS, JavaScript y PHP, lo más recomendable es crear un perfil independiente, instalar Prettier, activar el formato automático y personalizar la interfaz a tu gusto y una fuente monoespaciada.

Empezamos la configuración

Antes de modificar ningún ajuste, crearemos un perfil independiente llamado CCH Tech Lab. De esta forma podremos mantener esta configuración separada de otros entornos de trabajo y trasladarla fácilmente a otros dispositivos.

Al terminar, tendremos un entorno con:

• Un perfil independiente para CCH Tech Lab.
• Una interfaz limpia y ampliada.
• El explorador de archivos colocado a la derecha.
• Temas e iconos personalizados.
• Una tipografía adecuada para programar.
• Formato automático del código.
• Historial local de los archivos.

Crear un nuevo perfil en Visual Studio Code

Lo primero que hemos realizado es crear un perfil independiente dentro de Visual Studio Code.

Para ello, accedemos a la siguiente ruta:

Rueda dentada → Perfiles → Añadir nuevo perfil

Al nuevo perfil lo hemos llamado:

CCH Tech Lab

Durante el proceso de creación hemos elegido la opción de crear un perfil vacío, es decir, no hemos copiado la configuración de ningún perfil existente.

De esta forma partimos de una configuración limpia y podemos decidir exactamente qué ajustes, extensiones, temas e iconos queremos incluir.

Qué son los perfiles de Visual Studio Code

Los perfiles permiten crear diferentes entornos de trabajo dentro de una misma instalación de Visual Studio Code.

Cada perfil puede disponer de su propia configuración, por ejemplo:

• Extensiones.
• Tema de color.
• Tema de iconos.
• Configuración del editor.
• Atajos de teclado.
• Fragmentos de código.
• Distribución de paneles y vistas.
• Preferencias específicas.

Esto significa que podemos utilizar Visual Studio Code de forma diferente según el tipo de proyecto o tarea que estemos realizando.

Por ejemplo, podríamos crear perfiles como:

CCH Tech Lab
PHP y WordPress
JavaScript
Administración de sistemas
Trabajo
Proyectos personales

El perfil CCH Tech Lab está pensado para la grabación de vídeos y tutoriales, por lo que utiliza un zoom elevado, una interfaz limpia y únicamente las extensiones necesarias.

Otro perfil podría estar optimizado para el trabajo diario, con un zoom más reducido, más paneles visibles y extensiones adicionales.

Ventajas de utilizar perfiles en VS Code

La principal ventaja de los perfiles es que permiten separar distintos entornos de trabajo.

Esto evita tener todas las extensiones instaladas y activadas al mismo tiempo, aunque solamente utilicemos algunas de ellas en determinados proyectos.

Por ejemplo, una extensión destinada al desarrollo PHP puede no ser necesaria cuando trabajamos únicamente con JavaScript. Del mismo modo, algunas herramientas utilizadas para grabar tutoriales pueden resultar innecesarias durante el trabajo habitual.

Los perfiles también permiten:

• Mantener una configuración más limpia.
• Reducir el número de extensiones activas.
• Evitar conflictos entre herramientas.
• Probar extensiones sin alterar el perfil principal.
• Cambiar rápidamente entre distintos entornos.
• Preparar perfiles específicos para cursos o proyectos.
• Compartir una configuración con otros usuarios.

Por qué hemos creado un perfil vacío

Al crear el perfil CCH Tech Lab hemos decidido no copiar ningún perfil existente.

Esto es importante porque, si copiáramos el perfil predeterminado, también podríamos arrastrar configuraciones que no necesitamos, como:

• Extensiones antiguas.
• Temas que no vamos a utilizar.
• Atajos personalizados.
• Ajustes específicos de otros proyectos.
• Configuraciones experimentales.
• Fragmentos de código innecesarios.

Comenzar desde un perfil vacío nos permite construir el entorno paso a paso y entender exactamente qué aporta cada ajuste.

También facilita que el perfil pueda compartirse posteriormente con alumnos o usuarios que quieran replicar la misma configuración.

Exportar un perfil de Visual Studio Code

Otra ventaja importante de los perfiles es que pueden exportarse.

Esto permite guardar una copia del perfil o trasladarlo a otro ordenador sin tener que configurar manualmente Visual Studio Code desde cero.

Para exportar un perfil:

1. Pulsa la rueda dentada situada en la parte inferior de Visual Studio Code.
2. Accede a Perfiles.
3. Abre la administración de perfiles.
4. Selecciona el perfil CCH Tech Lab.
5. Elige la opción Exportar perfil.
6. Selecciona los elementos que deseas incluir.
7. Guarda el perfil.

Visual Studio Code permite guardar el perfil en un archivo con extensión: .code-profile

Este archivo puede utilizarse posteriormente para restaurar la configuración o compartirla con otras personas.

Importar el perfil en otro ordenador

Una vez exportado, el perfil puede importarse en otra instalación de Visual Studio Code.

Para hacerlo:

1. Abre Visual Studio Code en el nuevo equipo.
2. Pulsa la rueda dentada.
3. Entra en Perfiles.
4. Selecciona Importar perfil.
5. Elige el archivo .code-profile.
6. Revisa los elementos que se van a importar.
7. Crea el nuevo perfil.

También podemos utilizar la sincronización de Visual Studio Code para mantener configuraciones y perfiles entre distintos dispositivos.

Revisar las rutas locales después de importar

Aunque los perfiles permiten trasladar gran parte de la configuración, algunos valores dependen directamente del ordenador.

Por ejemplo, si tenemos guardada la ruta para PHP:

"php.validate.executablePath": "C:\\xampp\\php\\php.exe"Lenguaje del código: CSS (css)

Esta configuración solamente funcionará si XAMPP está instalado en:

C:\xampp

Si en el nuevo equipo XAMPP está instalado en otra carpeta o unidad, será necesario modificar la ruta manualmente.

Por tanto, después de importar un perfil conviene revisar:

• Rutas de ejecutables.
• Carpetas locales.
• Configuraciones vinculadas al sistema operativo.
• Herramientas instaladas fuera de Visual Studio Code.
• Variables de entorno.

Una vez creado y seleccionado el perfil CCH Tech Lab, podemos comenzar a modificar su configuración.

Abrir el archivo settings.json de Visual Studio Code

Aunque prácticamente todos los ajustes pueden modificarse desde la interfaz gráfica, resulta más cómodo reunirlos en el archivo settings.json.

Para abrirlo:

1. Abre Visual Studio Code.
2. Pulsa Ctrl + Shift + P.
3. Escribe:

Preferences: Open User Settings (JSON)Lenguaje del código: JavaScript (javascript)

4. Selecciona la opción que aparece.

También puedes acceder desde:

Archivo → Preferencias → Configuración

O en la rueda dentada > Configuración (Ctrl + ,)

Después, pulsa el botón para abrir la configuración en formato JSON.

Como estamos trabajando dentro del perfil CCH Tech Lab, los cambios quedarán asociados a este perfil y no afectarán necesariamente al resto de perfiles.

Configuración completa de Visual Studio Code

Esta es la configuración completa que hemos utilizado:

{
  "window.zoomLevel": 3,
  "workbench.sideBar.location": "right",
  "explorer.compactFolders": false,
  "workbench.tree.indent": 10,
  "workbench.localHistory.enabled": true,
  "workbench.localHistory.mergeWindow": 600,
  "editor.minimap.enabled": false,
  "workbench.editor.tabSizing": "shrink",
  "workbench.productIconTheme": "fluent-icons",
  "workbench.iconTheme": "symbols",
  "workbench.colorTheme": "One Dark Pro Darker",
  "editor.fontFamily": "'Cascadia Code', 'Fira Code', Consolas, 'Courier New', monospace",
  "editor.fontLigatures": false,
  "editor.fontWeight": "400",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "console-ninja.featureSet": "Community",
  "liveServer.settings.donotShowInfoMsg": true
}
Lenguaje del código: JSON / JSON con comentarios (json)

No es obligatorio utilizar todos estos ajustes. Podemos copiar la configuración completa o seleccionar únicamente las propiedades que se adapten a nuestra forma de trabajar.

Al final del articulo teneis el fichero para poder importaros el perfil de CCH Tech Lab

Aumentar el zoom de Visual Studio Code

"window.zoomLevel": 3
Lenguaje del código: JavaScript (javascript)

El ajuste window.zoomLevel aumenta el tamaño de toda la interfaz de Visual Studio Code.

Esto incluye:

• El editor.
• Los menús.
• El explorador de archivos.
• Las pestañas.
• Los iconos.
• La terminal.
• Los paneles.

El valor 3 aplica un zoom considerable.

Para trabajar habitualmente puede resultar excesivo, pero es especialmente útil al grabar tutoriales, ya que permite que el código y los elementos de la interfaz se lean mejor en el vídeo.

Esto es importante porque muchos usuarios visualizan los tutoriales desde pantallas pequeñas o teléfonos móviles.

Para un uso normal podemos utilizar valores más bajos:

"window.zoomLevel": 1Lenguaje del código: JavaScript (javascript)

o:

"window.zoomLevel": 2Lenguaje del código: JavaScript (javascript)

También podemos modificar temporalmente el zoom con estos atajos:

Ctrl + +    Aumentar zoom
Ctrl + -    Reducir zoom
Ctrl + 0    Restablecer zoom

Colocar la barra lateral a la derecha

"workbench.sideBar.location": "right"Lenguaje del código: JavaScript (javascript)

De forma predeterminada, Visual Studio Code muestra el explorador de archivos en el lado izquierdo.

Con este ajuste trasladamos la barra lateral a la derecha.

Así evitamos que el explorador compita visualmente con la zona más importante del código.

La posición de la barra lateral es una preferencia personal, pero situarla a la derecha funciona bien para vídeos educativos.

También se puede realizar dicha configuración, clicando en la barra lateral y seleccionar la opción Mover Barra Principal a la Derecha

Mostrar todas las carpetas del proyecto

"explorer.compactFolders": falseLenguaje del código: JavaScript (javascript)

Visual Studio Code, por defecto, compacta automáticamente varias carpetas consecutivas cuando cada carpeta contiene únicamente otra subcarpeta.

Por ejemplo, una estructura como:

src
└── components
    └── layout

podría mostrarse en una sola línea:

src/components/layout

Al configurar explorer.compactFolders como false, cada carpeta aparece en una línea independiente.

Esto hace que el árbol de archivos ocupe algo más de espacio, pero también permite comprender mejor la estructura del proyecto.

Reducir / Aumentar la sangría del explorador

"workbench.tree.indent": 10
Lenguaje del código: CSS (css)

Esta propiedad controla la separación horizontal entre los distintos niveles del árbol de archivos.

Una sangría de 10 mantiene visible la jerarquía de las carpetas sin desplazar demasiado hacia la derecha los archivos más profundos.

El valor puede ajustarse según el tamaño del monitor y la estructura habitual de los proyectos.

Activar el historial local

"workbench.localHistory.enabled": true
Lenguaje del código: JavaScript (javascript)

El historial local de Visual Studio Code guarda versiones anteriores de los archivos.

Esto permite consultar cambios recientes y recuperar contenido que hayamos modificado o eliminado por error.

Las versiones pueden revisarse desde la línea temporal o Timeline del archivo.

El historial local puede ayudarnos a:

• Comparar versiones.
• Restaurar contenido.
• Recuperar cambios recientes.
• Consultar modificaciones anteriores.
• Revertir errores accidentales.

Es importante tener en cuenta que el historial local no sustituye a Git.

Lo recomendable es utilizar ambos:

• El historial local para recuperar cambios rápidos.
• Git para controlar versiones completas del proyecto.
• GitHub u otro repositorio remoto para mantener una copia externa.

Agrupar cambios del historial durante diez minutos

"workbench.localHistory.mergeWindow": 600
Lenguaje del código: CSS (css)

Este ajuste indica durante cuánto tiempo se agrupan los cambios dentro de una misma entrada del historial local.

El valor está expresado en segundos:

600 segundos = 10 minutos

Esto significa que varios guardados realizados dentro de ese intervalo pueden agruparse en una misma versión.

La ventaja es que evitamos llenar el historial con demasiadas entradas cuando guardamos continuamente.

Esto puede ocurrir con frecuencia si tenemos activado el guardado automático o utilizamos Ctrl + S constantemente.

La desventaja es que tendremos menos puntos intermedios de restauración.

Por tanto, este valor busca mantener un historial más limpio y fácil de revisar.

Desactivar el minimapa

"editor.minimap.enabled": false
Lenguaje del código: JavaScript (javascript)

El minimapa es la pequeña representación del código que aparece normalmente en el lado derecho del editor.

Puede resultar útil para desplazarse por archivos muy largos, pero también ocupa espacio horizontal.

En esta configuración lo hemos desactivado para conseguir una interfaz más limpia y disponer de una zona de edición más amplia.

Reducir el tamaño de las pestañas

"workbench.editor.tabSizing": "shrink"
Lenguaje del código: JavaScript (javascript)

El valor shrink permite que las pestañas reduzcan su anchura cuando abrimos varios archivos.

De esta forma podemos mantener visibles más pestañas al mismo tiempo.

Por ejemplo, en un proyecto web podemos tener abiertos:

index.html
styles.css
app.js
functions.php
README.md
Lenguaje del código: CSS (css)

Sin este ajuste, las pestañas pueden ocupar demasiado espacio rápidamente.

Con shrink, Visual Studio Code reduce progresivamente su anchura.

La desventaja es que algunos nombres pueden quedar parcialmente ocultos cuando hay demasiados archivos abiertos.

En ese caso podemos utilizar:

Ctrl + P

para buscar y abrir rápidamente cualquier archivo del proyecto.

Instalar extensión Fluent Icons

"workbench.productIconTheme": "fluent-icons"
Lenguaje del código: JavaScript (javascript)

Esta propiedad establece Fluent Icons como tema de iconos de producto.

Los iconos de producto son los que pertenecen a la propia interfaz de Visual Studio Code, como:

• Explorador.
• Búsqueda.
• Control de código fuente.
• Ejecución y depuración.
• Extensiones.
• Configuración.
• Paneles.
• Controles del editor.

Para instalar la extensión:

1. Abre el panel de extensiones con Ctrl + Shift + X.
2. Busca:

Fluent Icons

3. Comprueba que sea la extensión correcta.
4. Pulsa Instalar.
5. Selecciónala como tema de iconos del producto.

Esta extensión modifica los iconos de la interfaz, pero no los iconos de archivos y carpetas.

Instalar extensión Symbols como tema de iconos

"workbench.iconTheme": "symbols"
Lenguaje del código: JavaScript (javascript)

La extensión Symbols modifica los iconos utilizados en el explorador de archivos.

Permite distinguir visualmente diferentes tipos de archivo, por ejemplo:

• HTML.
• CSS.
• JavaScript.
• PHP.
• JSON.
• Markdown.
• Archivos de configuración.
• Carpetas.
• Archivos relacionados con Git.

Para instalarla:

1. Abre las extensiones con Ctrl + Shift + X.
2. Busca:

Symbols

3. Instala la extensión.
4. Selecciónala como tema de iconos de archivos.

La combinación de Fluent Icons y Symbols permite personalizar por separado:

• Los iconos de la interfaz.
• Los iconos de los archivos y carpetas.

Utilizar el tema One Dark Pro Darker

"workbench.colorTheme": "One Dark Pro Darker"
Lenguaje del código: JavaScript (javascript)

Esta configuración establece One Dark Pro Darker como tema de color.

Se trata de un tema oscuro que utiliza diferentes colores para distinguir elementos del código como:

• Variables.
• Cadenas de texto.
• Funciones.
• Etiquetas HTML.
• Propiedades CSS.
• Clases.
• Palabras reservadas.
• Comentarios.

Los temas oscuros suelen funcionar bien para grabar vídeos porque reducen el brillo de la pantalla y ofrecen una estética más tecnológica.

También pueden resultar cómodos en habitaciones con poca iluminación.

Sin embargo, la elección del tema depende de las preferencias personales.

Lo más importante es que el contraste sea suficiente y que el código siga siendo legible después de exportar y comprimir el vídeo.

Configurar Cascadia Code como fuente principal

"editor.fontFamily": "'Cascadia Code', 'Fira Code', Consolas, 'Courier New', monospace"
Lenguaje del código: JavaScript (javascript)

Esta propiedad establece una lista de fuentes por orden de preferencia.

Visual Studio Code intentará utilizar primero:

Cascadia Code

Si no está instalada, utilizará:

Fira Code

Si tampoco está disponible, probará con:

Consolas
Courier New
monospace
Lenguaje del código: PHP (php)

Gracias a este sistema, el editor siempre tendrá disponible una fuente alternativa.

Cascadia Code es una fuente diseñada para programación y se integra especialmente bien en Windows.

Fira Code también es una opción muy popular entre desarrolladores.

Ambas son fuentes monoespaciadas, lo que significa que todos los caracteres ocupan la misma anchura.

Esto es fundamental para:

• Mantener correctamente la indentación.
• Alinear el código.
• Diferenciar caracteres.
• Mejorar la lectura.
• Mostrar código claramente en vídeos.

Desactivar las ligaduras

"editor.fontLigatures": false
Lenguaje del código: JavaScript (javascript)

Algunas fuentes de programación pueden mostrar varios caracteres como si fueran un único símbolo.

Por ejemplo:

!=
>=
<=
=>
===
Lenguaje del código: HTML, XML (xml)

Estas representaciones reciben el nombre de ligaduras.

Aunque pueden mejorar la apariencia del editor, también pueden causar confusión a quienes están aprendiendo.

Un alumno necesita ver exactamente los caracteres que debe escribir.

Por este motivo hemos desactivado las ligaduras.

Así, una expresión como:

const esMayor = edad >= 18;
Lenguaje del código: JavaScript (javascript)

se muestra utilizando los caracteres reales, sin transformaciones visuales.

Configurar el grosor de la fuente

"editor.fontWeight": "400"
Lenguaje del código: JavaScript (javascript)

El valor 400 corresponde normalmente a un grosor regular.

Esta configuración mantiene el texto suficientemente definido sin que resulte demasiado grueso.s.

El valor 400 ofrece un equilibrio adecuado para la mayoría de pantallas.

Configurar Prettier como formateador predeterminado

"editor.defaultFormatter": "esbenp.prettier-vscode"
Lenguaje del código: JavaScript (javascript)

Esta propiedad establece la extensión Prettier – Code formatter como formateador predeterminado.

Prettier permite aplicar un formato consistente al código.

Puede corregir automáticamente aspectos como:

• Sangrías.
• Espacios.
• Saltos de línea.
• Posición de llaves.
• Comillas.
• Separación entre operadores.
• Estructura visual del código.

Para instalar Prettier:

1. Abre el panel de extensiones con Ctrl + Shift + X.
2. Busca:

Prettier - Code formatter

3. Comprueba que el identificador sea:

esbenp.prettier-vscode
Lenguaje del código: CSS (css)

4. Pulsa Instalar.

Prettier es especialmente útil durante la grabación de tutoriales porque permite mantener el código ordenado sin corregir manualmente cada detalle.

Formatear automáticamente al guardar

"editor.formatOnSave": trueLenguaje del código: JavaScript (javascript)

Con esta opción, Visual Studio Code aplica automáticamente el formateador cada vez que guardamos el archivo.

Por ejemplo, este código:

const saludar=(nombre)=>{console.log("Hola "+nombre)}Lenguaje del código: JavaScript (javascript)

podría convertirse automáticamente en:

const saludar = (nombre) => {
  console.log("Hola " + nombre);
};Lenguaje del código: JavaScript (javascript)

Esto permite mantener un estilo uniforme durante todo el proyecto.

En proyectos compartidos conviene incluir una configuración específica de Prettier dentro del repositorio.

Por ejemplo:

.prettierrcLenguaje del código: CSS (css)

Así todos los desarrolladores utilizarán las mismas reglas.

Formatear automáticamente al pegar

"editor.formatOnPaste": trueLenguaje del código: JavaScript (javascript)

Esta opción permite que Visual Studio Code intente formatear automáticamente un fragmento de código después de pegarlo.

Es útil cuando copiamos código desde:

• Otro archivo.
• Una documentación.
• Una página web.
• Un repositorio.
• Un ejercicio.
• Una respuesta generada por inteligencia artificial.

El código pegado puede tener una indentación diferente a la utilizada en nuestro proyecto.

Con esta propiedad activada, Visual Studio Code intentará adaptarlo al formato del documento.

El resultado dependerá del lenguaje y del formateador instalado.

Extensiones necesarias para utilizar esta configuración

Algunos ajustes forman parte de Visual Studio Code, pero otros requieren extensiones.

Para replicar completamente esta configuración necesitaremos instalar:

Fluent Icons

Modifica los iconos de la interfaz de Visual Studio Code.

Symbols

Modifica los iconos de archivos y carpetas.

One Dark Pro Darker

Añade el tema oscuro utilizado en el editor.

Prettier – Code formatter

Formatea automáticamente el código.

Configuración recomendada para grabar tutoriales

Los ajustes más orientados a la grabación son:

{
  "window.zoomLevel": 3,
  "workbench.sideBar.location": "right",
  "explorer.compactFolders": false,
  "workbench.tree.indent": 10,
  "editor.minimap.enabled": false,
  "editor.fontLigatures": false
}
Lenguaje del código: JSON / JSON con comentarios (json)

Estos cambios permiten:

• Mostrar el código a mayor tamaño.
• Mantener el comienzo de las líneas despejado.
• Explicar mejor la estructura de carpetas.
• Reducir elementos visuales innecesarios.
• Mostrar claramente los operadores.
• Aprovechar mejor el espacio disponible.

Configuración recomendada para programar

Los ajustes más útiles para el trabajo diario son:

{
  "workbench.localHistory.enabled": true,
  "workbench.localHistory.mergeWindow": 600,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
}
Lenguaje del código: JSON / JSON con comentarios (json)

Estos ajustes mejoran:

• La seguridad frente a pérdidas accidentales.
• La consistencia del código.
• La productividad.
• La validación de PHP.
• La organización del proyecto.

¿Es una buena configuración para Visual Studio Code?

Esta configuración busca equilibrar dos objetivos:

1. Mejorar la legibilidad.
2. Mantener el código ordenado.

No existe una configuración perfecta para todos los usuarios.

Algunos valores son ampliamente recomendables, como:

"workbench.localHistory.enabled": true
Lenguaje del código: JavaScript (javascript)

"editor.formatOnSave": true
Lenguaje del código: JavaScript (javascript)

Otros dependen de las preferencias personales:

"workbench.sideBar.location": "right"
Lenguaje del código: JavaScript (javascript)

"editor.minimap.enabled": false
Lenguaje del código: JavaScript (javascript)

Y otros están pensados especialmente para la grabación:

"window.zoomLevel": 3
Lenguaje del código: JavaScript (javascript)

Lo recomendable es utilizar esta configuración como punto de partida y ajustar los valores según:

• El tamaño del monitor.
• La resolución.
• El tipo de proyecto.
• El lenguaje utilizado.
• La experiencia del usuario.
• La forma de trabajar.
• La necesidad de grabar vídeos.

FAQ

Conclusión

Personalizar Visual Studio Code no consiste únicamente en instalar un tema atractivo.

Una buena configuración debe ayudar a:

• Programar más cómodamente.
• Reducir distracciones.
• Mantener un formato consistente.
• Recuperar cambios.
• Identificar archivos rápidamente.
• Adaptar el editor a cada proyecto.
• Mostrar el código claramente durante una grabación.

En esta guía hemos comenzado creando un perfil independiente llamado CCH Tech Lab, sin copiar ningún perfil anterior.

Esto nos permite mantener una configuración específica para los tutoriales, instalar únicamente las extensiones necesarias y exportar el entorno para utilizarlo en otros dispositivos.

Después hemos configurado:

• El zoom de la interfaz.
• La posición de la barra lateral.
• La visualización de carpetas.
• La sangría del explorador.
• El historial local.
• El minimapa.
• Las pestañas.
• Los iconos.
• El tema de color.
• La fuente.
• Las ligaduras.
• El formato automático.

El resultado es un entorno limpio, cómodo y adaptado tanto al desarrollo web como a la creación de contenido educativo.

La configuración no debe considerarse una regla obligatoria, sino una base que podemos modificar según nuestras necesidades.

Lo importante es que Visual Studio Code se adapte a nuestra forma de trabajar y no al contrario.

---