🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【Guía de VSCode】¿Qué es Visual Studio Code? Guía completa desde la instalación hasta la configuración básica

«Quiero empezar con el desarrollo web o la programación, pero ¿qué editor debería usar?»

¡Hola! Hace solo unos meses, yo era como muchos de ustedes, un autor con cero conocimientos de programación. Pero ahora, con la ayuda de la IA, he podido lanzar de forma independiente sitios web como buyonjapan.com y copicode.com.

No es una exageración decir que el mayor contribuyente a este éxito es el editor que presento hoy: Visual Studio Code (o VSCode para abreviar).

En este artículo, basándome en mis propios tropiezos y en los momentos de «si lo hubiera sabido antes...», explicaré todo, desde la instalación de VSCode hasta la configuración inicial «imprescindible», usando la menor jerga posible, como si me estuviera enseñando a mí mismo cuando era un principiante.

Al terminar de leer este artículo, no solo tendrás VSCode instalado, sino que también tendrás un entorno de desarrollo cómodo y estarás listo para dar tu primer paso en la alegría de escribir y ejecutar tu propio código.

¿Qué es exactamente Visual Studio Code (VSCode)?

VSCode es un «editor de texto» gratuito desarrollado por Microsoft. Como su nombre indica, un editor de texto es un software para escribir y editar texto. Piensa en él como una versión superpotente del «Bloc de notas» de Windows o «TextEdit» de Mac.

Hay muchos editores en el mercado, pero ¿por qué los desarrolladores de todo el mundo eligen VSCode? Las ventajas que yo mismo he experimentado son principalmente estas tres:

Existe un software con un nombre similar, «Visual Studio», pero es algo diferente: un «Entorno de Desarrollo Integrado (IDE)» para proyectos a gran escala, que es un poco más complejo y pesado. Para dar tus primeros pasos en el desarrollo web, elegir el ligero y fácil de usar VSCode es la decisión correcta.

【Manos a la obra】Instalemos VSCode

Bien, instalemos VSCode en tu ordenador ahora mismo. El proceso es muy sencillo.

Primero, visita el sitio web oficial de VSCode.

Al acceder, debería detectar automáticamente tu sistema operativo (Windows, Mac, Linux) y mostrar un botón de descarga grande y optimizado para ti. Básicamente, solo tienes que hacer clic en ese botón para descargar el instalador y seguir las instrucciones en pantalla.

Captura de pantalla del sitio web oficial de VSCode, donde se muestra de forma destacada el botón de descarga.

*El diseño del sitio web oficial puede cambiar.

Para usuarios de Windows

Ejecuta el archivo .exe que has descargado. Durante la instalación aparecerán varias casillas de verificación, pero si no tienes ninguna preferencia específica, te recomiendo marcar las siguientes opciones:

Marcar las dos últimas opciones hará que aparezca la opción «Abrir con Code» cuando hagas clic derecho en un archivo o carpeta. Es un pequeño detalle que, sin duda, mejora la eficiencia del trabajo.

Además, si usas una versión reciente de Windows 10/11, también puedes instalarlo usando el comando «winget». Simplemente abre el Símbolo del sistema o PowerShell y escribe el siguiente comando:

winget install Microsoft.VisualStudioCode

Para usuarios de Mac

Descomprime el archivo .zip descargado y aparecerá un archivo llamado Visual Studio Code.app. Arrástralo y suéltalo en tu carpeta de «Aplicaciones» y la instalación estará completa.

Para los usuarios de Mac, también recomiendo la instalación mediante la herramienta de línea de comandos «Homebrew». Abre la Terminal y ejecuta el siguiente comando:

brew install --cask visual-studio-code

Para usuarios de Linux

Desde el sitio web oficial, descarga el paquete .deb (para sistemas basados en Debian/Ubuntu) o .rpm (para sistemas basados en Red Hat/Fedora/SUSE) que corresponda a tu distribución e instálalo. También está disponible en los centros de software de muchas distribuciones.

Por ejemplo, en Ubuntu puedes usar el siguiente comando en la terminal:

sudo apt install code

【Lo más importante】La configuración inicial que debes hacer sí o sí

Una vez completada la instalación, es hora de configurar. Esta es la parte más importante. He seleccionado cuidadosamente las configuraciones que me arrepiento de no haber hecho antes. Solo con aplicarlas, tu experiencia de desarrollo cambiará como de la noche al día.

Paso 1: ¡Lo primero es ponerlo en español!

Por defecto, VSCode viene en inglés. Aunque puedes usarlo así, leer los mensajes de error y las opciones de configuración en inglés puede ser agotador, especialmente para los principiantes. Vamos a ponerlo en español primero para reducir esa barrera mental.

  1. Haz clic en el icono de los cuatro cuadrados en la barra de menú de la izquierda (la vista de Extensiones).
  2. En el cuadro de búsqueda superior, escribe «spanish».
  3. Haz clic en el botón «Install» del primer resultado, que debería ser «Spanish Language Pack for Visual Studio Code».
  4. Una vez finalizada la instalación, aparecerá un mensaje en la esquina inferior derecha pidiéndote que reinicies. Haz clic en «Restart».

Con solo esto, todos los menús de VSCode deberían haber cambiado a español. ¡Fácil, verdad?

Paso 2: Abrir el archivo de configuración (`settings.json`)

La configuración detallada de VSCode se escribe en un archivo especial llamado settings.json. Aunque puedes configurarlo desde la interfaz de usuario, acostumbrarte a editar este archivo directamente facilitará mucho la gestión y el uso compartido de la configuración más adelante.

La forma más rápida de abrir settings.json es con un atajo de teclado:

Al pulsar estas teclas, aparecerá un cuadro de entrada en la parte superior de la pantalla llamado «Paleta de comandos». Escribe aquí «settings json» y selecciona «Preferencias: Abrir configuración de usuario (JSON) (Preferences: Open User Settings (JSON))».

Se abrirá un archivo vacío (o con algunas cosas ya escritas) entre llaves {}. Este es tu settings.json. Aquí es donde vamos a copiar y pegar la configuración que te mostraré a continuación.

Paso 3: ¡Copia y pega la configuración inicial definitiva!

Se acabó la espera. Esta es la configuración inicial «infalible» a la que llegué después de mucho ensayo y error. Copia y pega todo el código siguiente dentro de las llaves {} del archivo settings.json que acabas de abrir.

(Si ya hay alguna configuración escrita, añade una coma , antes de la última llave } y luego pega el código. El formato JSON requiere que cada elemento de configuración esté separado por una coma).

{
    // ----- Configuración de apariencia -----
    "editor.fontFamily": "'UDEV Gothic NF', 'Source Han Code JP', 'Menlo', 'Monaco', 'Courier New', monospace",
    "editor.fontSize": 16,
    "editor.lineHeight": 1.8,
    "editor.wordWrap": "on",
    "workbench.colorTheme": "Default Dark+",
    "workbench.iconTheme": "material-icon-theme",

    // ----- Configuración de operaciones de archivo -----
    "files.autoSave": "onFocusChange",
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true,

    // ----- Configuración del comportamiento del editor -----
    "editor.tabSize": 2,
    "editor.renderWhitespace": "all",
    "editor.cursorStyle": "line",
    "editor.cursorBlinking": "smooth",
    "editor.minimap.enabled": false,
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
    "breadcrumbs.enabled": true,

    // ----- Configuración para la extensión "Prettier" -----
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,

    // ----- Configuración de la terminal -----
    "terminal.integrated.fontSize": 14,
    "terminal.integrated.fontFamily": "monospace"
}

Breve explicación de las opciones de configuración

No es necesario que te lo aprendas todo de una vez. Echa un vistazo para hacerte una idea de lo que es posible.

【Imprescindibles】Extensiones que deberías instalar

Una vez terminada la configuración inicial, es el turno de las extensiones. Aquí es donde VSCode realmente brilla. Hay muchísimas y puede ser abrumador, pero para empezar, con estas tres es más que suficiente.

Al igual que con el paquete de idioma, busca sus nombres en la vista de Extensiones de la izquierda e instálalas.

  1. Prettier - Code formatter

    Es la «herramienta de formateo de código» que mencionamos en la configuración. Sin ella, la opción formatOnSave no funcionará. Formatea al instante el código de varios lenguajes como HTML, CSS y JavaScript a un estilo bonito y estándar en la industria. Te libera de preocupaciones triviales como «¿esta sangría es con tabuladores o espacios?» o «¿debería poner punto y coma?», permitiéndote centrarte en la lógica.

  2. Live Server

    Esta extensión revoluciona la codificación de HTML/CSS. Cuando la activas, la vista del navegador se recarga automáticamente en el momento en que guardas un archivo. El tedioso proceso de «modificar código → guardar → cambiar al navegador → hacer clic en actualizar» se vuelve innecesario. Mejora drásticamente la eficiencia del desarrollo, así que debes instalarla sí o sí.

  3. Material Icon Theme

    Esta no es funcional, sino estética. Muestra iconos bonitos junto a los nombres de los archivos en el explorador según el tipo de archivo (HTML, CSS, JS, etc.). Facilita la distinción visual de los tipos de archivo y hace que sea un poco más fácil encontrar lo que buscas. ¡También ayuda a mantener la motivación!

*Como has establecido "workbench.iconTheme": "material-icon-theme" en settings.json, los iconos deberían aplicarse automáticamente en cuanto instales esta extensión.

【Experiencia】¡Vamos a ver cómo funciona!

¡Buen trabajo! Tu VSCode es ahora un entorno de desarrollo que podría envidiar un profesional. Para terminar, usemos este nuevo entorno para experimentar algo «en acción».

  1. Abrir una carpeta de trabajo
    Primero, crea una nueva carpeta en un lugar fácil de encontrar, como el escritorio, y llámala algo como «vscode-test». Luego, desde el menú de VSCode, selecciona «Archivo» → «Abrir carpeta...» y abre la carpeta que acabas de crear.
  2. Crear un archivo
    En la vista del Explorador de la izquierda, pasa el cursor sobre el nombre de la carpeta y haz clic en el icono «Nuevo archivo». Crea un archivo llamado «index.html».
  3. Copiar y pegar el código
    Copia y pega el siguiente código en el archivo index.html que has creado. 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Prueba de VSCode</title>
  <style>
    body {
      display: grid;
      place-content: center;
      min-height: 100vh;
      background-color: #282c34;
      color: #ffffff;
      font-family: sans-serif;
      text-align: center;
    }
    h1 {
      font-size: 3rem;
      color: #61dafb;
    }
  </style>
</head>
<body>

  <h1>¡Hola, VSCode!</h1>
  <p>¡Bienvenido a mi entorno de desarrollo!</p>
  
</body>
</html>
  1. Iniciar Live Server
    Deberías ver un botón que dice «Go Live» en la esquina inferior derecha de la ventana. Haz clic en él.

¿Qué tal? ¡El navegador debería haberse abierto automáticamente, mostrando el HTML que acabas de crear!

Ahora, vuelve a VSCode, cambia el contenido de la etiqueta h1 por algo como «¡Hola, Mundo!» y guarda el archivo (Ctrl+S / Cmd+S). ¿Ves cómo el navegador se actualizó al instante sin que tuvieras que cambiar de ventana y recargar?

Ese es el poder de «Live Server» y el poder del nuevo entorno de desarrollo que has conseguido.

Conclusión: Para ti, que ahora tienes un arma poderosa

En este artículo, hemos cubierto todo, desde la instalación de VSCode hasta la configuración inicial que recomiendo de corazón, e incluso hemos experimentado verlo «en acción».

La configuración que has hecho hoy será una base sólida para tu futuro aprendizaje de desarrollo web y programación. Puede parecer mucho que recordar al principio, pero todas las configuraciones y extensiones que hemos presentado hoy están diseñadas para automatizar «tareas tediosas» y ayudarte a concentrarte en «pensar» y «crear».

Ahora que tienes el arma poderosa que es VSCode, ya no eres un principiante. Eres un «desarrollador». ¡Adelante, usa este cómodo entorno para escribir mucho código y crear cosas increíbles!

Hacia el siguiente paso

Ahora que tu editor está listo, el siguiente paso es familiarizarte con el manejo básico de la interfaz de VSCode. Aprender a gestionar archivos y carpetas de manera eficiente aumentará aún más tu velocidad de desarrollo.

[Cómo usar VSCode] Guía de operaciones básicas: gestión de archivos, explorador y uso de pestañas

Plantillas Relacionadas