Free

Introducción a Visual Studio Code

Activar audio

Aprende a instalar, configurar y comenzar a usar Visual Studio Code, el editor de código estándar en el desarrollo web moderno. Una introducción esencial para principiantes.

⚠️ Nota: esta es solo una breve introducción a Visual Studio Code. Se trata de lo imprescindible que debes saber para poder comenzar a utilizarlo. Por supuesto que queda mucho por hablar y tratar, pero todo llegará de forma orgánica (más Fundamentales como este), a su debido tiempo. En este punto de tu camino de aprendizaje debes ser muy selectivo y cuidadoso con tu carga cognitiva.


¿Qué es Visual Studio Code?

Definición sencilla: Visual Studio Code es un editor de texto creado para escribir y gestionar código de manera eficiente. Piensa en él como un "bloc de notas súper potente" diseñado específicamente para programadores.

¿Por qué usar Visual Studio Code?

  • Es ligero, rápido y gratuito.
  • Está lleno de herramientas que te ayudan a escribir código más rápido y sin errores.
  • Puedes personalizarlo según tus necesidades con temas, extensiones y atajos.
  • Es el estándar hoy en día. Es un genial primer editor de código.

Características clave para principiantes

  • Colores y resalte de sintaxis: VSCode te ayuda a leer y entender el código al mostrar diferentes colores para etiquetas, variables y palabras clave.
  • Autocompletado: Te sugiere palabras o comandos mientras escribes, ahorrándote tiempo y errores.
  • Estructura de archivos: Organiza tus proyectos y archivos en un panel lateral para que todo sea fácil de encontrar.

Primeros pasos en Visual Studio Code

  • Descarga e instala desde code.visualstudio.com.
  • Configuración de fuente:
  • Abre tu primer archivo HTML (o crea uno nuevo) y observa cómo resalta el código automáticamente.
  • Explora lo básico:
    • Explorador de archivos: Navega por tus carpetas y abre tus archivos de proyecto.
    • Extensiones: Agrega funcionalidades como formatear el código o trabajar con diferentes lenguajes: Marketplace.
    • Terminal integrada: Ejecuta comandos sin salir del editor.

Buenas prácticas

  • Usa atajos básicos, como:
    • F1: Buscar cualquier opción.
    • Ctrl + P o Cmd + P: Buscar archivos rápidamente.
    • Hay mucho, muchísimos más, como por ejemplo:
      • Ctrl + B o Cmd + B: Mostrar u ocultar la barra lateral
  • Trabaja con pestañas para abrir múltiples archivos y moverte entre ellos fácilmente.
    • Arrastra tus archivos hacia la izquierda o derecha.
  • Echa un vistazo a la ayuda oficial.

Proyectos donde poner en práctica Introducción a Visual Studio Code

Juan Andrés Núñez

Juan Andrés Núñez

Ingeniero Frontend Senior. Especialista en Vue.js. Speaker. Docente profesional. Estoico.