Visual Studio Code, también conocido como VS Code, es uno de los editores de código más utilizados por programadores, estudiantes y desarrolladores web. Su popularidad se debe a que es gratuito, ligero, muy personalizable y compatible con una gran cantidad de lenguajes de programación.

En este artículo veremos cómo configurar Visual Studio Code desde cero, creando un nuevo perfil, modificando la apariencia del editor, cambiando el tema, instalando iconos y añadiendo extensiones útiles para programar.

Este artículo acompaña al video del canal, donde puedes ver todo el proceso paso a paso.

Recuerda que tenemos una formación gratuita de Desarrollo Web, si quieres aprender a programar webs, esta formación es tu lugar idoneo para empezar.

Video: configurar VS Code desde cero

Aquí tienes el video donde realizamos la configuración completa de Visual Studio Code:

En el video configuramos VS Code desde el principio para dejarlo preparado para trabajar en proyectos de programación y desarrollo web.

¿Qué es Visual Studio Code?

Visual Studio Code es un editor de código desarrollado por Microsoft. Aunque a simple vista puede parecer un editor de texto avanzado, realmente es una herramienta muy potente para programar.

Con VS Code podemos trabajar con lenguajes como:

• HTML
• CSS
• JavaScript
• PHP
• Python
• Java
• C#
• SQL
• JSON
• XML

Además, gracias a su sistema de extensiones, podemos ampliar sus funciones y adaptarlo al tipo de proyecto en el que estemos trabajando.

Por qué configurar VS Code antes de empezar a programar

Cuando instalamos Visual Studio Code por primera vez, viene con una configuración bastante básica. Se puede empezar a programar directamente, pero no siempre es lo más cómodo.

Configurar VS Code correctamente nos ayuda a:

• Ver el código de forma más clara.
• Identificar mejor los archivos del proyecto.
• Trabajar con una interfaz más cómoda.
• Añadir herramientas que facilitan la programación.
• Evitar errores comunes.
• Mejorar la productividad.

Por eso, antes de empezar un curso de desarrollo web o un proyecto de programación, es recomendable dedicar unos minutos a dejar preparado el entorno de trabajo.

Crear un nuevo perfil en Visual Studio Code

Una de las opciones más interesantes de VS Code es la posibilidad de crear perfiles.

Un perfil permite tener una configuración independiente dentro del editor. Esto es muy útil porque podemos tener diferentes perfiles según el tipo de trabajo que vayamos a realizar.

Por ejemplo:

• Un perfil para desarrollo web.
• Un perfil para Python.
• Un perfil para pruebas.
• Un perfil para clases o tutoriales.
• Un perfil limpio para empezar desde cero.

En el video creamos un nuevo perfil para preparar Visual Studio Code desde cero, sin mezclarlo con configuraciones anteriores.

Esto es especialmente útil si estás siguiendo un curso, ya que puedes tener un entorno limpio y controlado para practicar.

Mejorar la visualización del editor

Una vez creado el perfil, el siguiente paso es ajustar la visualización de VS Code.

La idea es que el código se vea más claro y que trabajar durante varias horas sea más cómodo.

Algunos ajustes visuales recomendados son:

• Aumentar o ajustar el tamaño de la fuente.
• Activar el ajuste de línea si lo necesitas.
• Mejorar la visibilidad del explorador de archivos.
• Ajustar el zoom general de la interfaz.
• Configurar la apariencia del editor para que sea más cómoda.

Estos pequeños cambios pueden parecer poco importantes, pero cuando pasas mucho tiempo programando, ayudan bastante.

Cambiar el tema de Visual Studio Code

El tema visual de VS Code cambia los colores del editor, del código y de la interfaz.

Elegir un buen tema es importante porque afecta directamente a la comodidad visual. Un tema con buen contraste ayuda a leer mejor el código y a distinguir más fácilmente etiquetas, variables, funciones, comentarios y errores.

Existen temas claros y oscuros. Muchos programadores prefieren los temas oscuros porque suelen cansar menos la vista, aunque esto depende de cada persona.

Lo importante es elegir un tema que te resulte cómodo y que permita leer el código con claridad.

Instalar iconos para los archivos

Otra mejora muy recomendable es instalar un paquete de iconos.

Los iconos permiten identificar rápidamente el tipo de archivo dentro del proyecto. Por ejemplo, no es lo mismo ver una lista de archivos todos iguales que poder distinguir visualmente un archivo HTML, CSS, JavaScript, PHP o JSON.

Esto ayuda especialmente cuando trabajamos en proyectos con muchas carpetas y archivos.

Gracias a los iconos, el explorador de archivos de VS Code queda mucho más visual y ordenado.

Extensiones recomendadas para programar

Una de las grandes ventajas de Visual Studio Code es su sistema de extensiones.

Las extensiones añaden nuevas funcionalidades al editor. Algunas nos ayudan a escribir código más rápido, otras nos muestran errores, otras mejoran la visualización y otras facilitan el trabajo con determinados lenguajes.

Algunas extensiones útiles para programación son:

Code Runner

Code Runner nos permite ejecutar parte de nuestro código directamente desde VSCode

Nos ayudará a ganar tiempo para probar parte de nuestros códigos

Color Picker

Color Picker nos permite abrir una paleta de colores y poder seleccionar directamente con el raton para que nos ponga el código de color automaticamente.

Path Intellisense

Path Intellisense permite que el editor nos autocomplete la ruta completa de los ficheros de nuestros proyectos

Nos evita errores a la hora de seleccionar un fichero entre varias carpetas de nuestro proyecto.

Live Server / Live Preview

Live Server / Live Preview permite abrir una página HTML en el navegador y ver los cambios automáticamente cada vez que guardamos el archivo.

Es una extensión muy útil para desarrollo web, especialmente cuando estamos trabajando con HTML, CSS y JavaScript.

Prettier – Code Formatter

Prettier sirve para formatear el código automáticamente.

Esto ayuda a mantener el código más limpio, ordenado y fácil de leer. Es especialmente útil cuando estamos aprendiendo, porque nos permite acostumbrarnos a una estructura de código más clara.

Material Icon Theme, Symbols o vscode-icons

Estas extensiones añaden iconos personalizados a los archivos y carpetas del proyecto.

Gracias a ellas, es mucho más fácil identificar cada tipo de archivo.

PHP Intelephense

Si vas a trabajar con PHP, esta extensión es muy recomendable.

Ayuda con el autocompletado, la detección de errores y la navegación por el código PHP.

Auto Rename Tag

Si solo usas HTML, ya no es necesaria dicha extensión porque viene embebida en la configuración de VSCode, pero si trabajas con otros lenguajes de etiquetas (XML por ejemplo) te es muy util

Cuando cambias una etiqueta de apertura, también modifica automáticamente la etiqueta de cierre. Por ejemplo, si cambias un <div> por un <section>, la etiqueta de cierre también se actualiza.

Error Lens

Error Lens muestra los errores y advertencias directamente en la línea del código.

Esto hace que sea más fácil detectar problemas mientras programamos.

ESLint

ESLint resalta código de Javascript y nos ayuda a autocompletar

Configurar VS Code para desarrollo web

Si estás aprendiendo desarrollo web, Visual Studio Code es una excelente opción.

Para trabajar con HTML, CSS, JavaScript y PHP, es recomendable tener una configuración sencilla pero práctica.

Una buena configuración inicial podría incluir:

• Un tema visual cómodo.
• Iconos para los archivos.
• Live Server para previsualizar páginas web.
• Prettier para formatear el código.
• Extensiones para HTML, CSS, JavaScript y PHP.
• Un perfil específico para desarrollo web.
• Activar Local History para no perder partes de código
• Formatear el código cuando se grabe y/o pegue código
• …

Con esto ya tenemos una base muy sólida para empezar a crear proyectos.

Ventajas de usar perfiles en VS Code

Los perfiles de Visual Studio Code son muy útiles porque permiten separar configuraciones.

Esto significa que puedes tener un VS Code diferente según el tipo de proyecto.

Por ejemplo, puedes tener un perfil para tu curso de desarrollo web con extensiones de HTML, CSS, JavaScript y PHP, y otro perfil diferente para trabajar con Python o bases de datos.

Esto evita tener demasiadas extensiones activas al mismo tiempo y ayuda a mantener el editor más limpio.

Conclusión

Configurar Visual Studio Code desde cero es uno de los primeros pasos recomendados antes de empezar a programar.

Aunque VS Code funciona nada más instalarlo, dedicar unos minutos a personalizarlo puede mejorar mucho la experiencia de trabajo.

Crear un nuevo perfil, cambiar el tema, instalar iconos y añadir extensiones útiles nos permite tener un entorno más cómodo, visual y preparado para programar.

Si estás empezando en el mundo del desarrollo web, esta configuración te servirá como base para trabajar con HTML, CSS, JavaScript, PHP y otros lenguajes.