Tema 1 · Instalación & CLI

1. Instalación de VS Code en Windows, macOS y Linux (Comando code . y PATH)

Instala Visual Studio Code paso a paso habilitando las opciones críticas del menú contextual, variables de entorno PATH y paquete de idioma.

2. Anatomía de la Interfaz, Activity Bar y la Paleta de Comandos (Ctrl+Shift+P)

¿Por qué Visual Studio Code Domina el Desarrollo Web Mundial?

Visual Studio Code (VS Code) es el editor de código fuente gratuito y multiplataforma desarrollado por Microsoft que utilizan más del 75% de los desarrolladores profesionales en todo el mundo. A diferencia de su hermano pesado Visual Studio IDE, VS Code combina la ligereza y velocidad de un editor de texto con la potencia de un entorno integrado completo gracias a su arquitectura de extensiones y soporte nativo para GitHub Copilot.

La descarga oficial se realiza exclusivamente desde https://code.visualstudio.com/. En Windows existen dos variantes del instalador:

  • User Installer (Instalador de Usuario - Recomendado): Se instala en la carpeta personal (AppData\Local\Programs), no solicita permisos de administrador para actualizarse y ofrece actualizaciones automáticas transparentes en segundo plano.
  • System Installer (Instalador del Sistema): Se instala en C:\Program Files y requiere privilegios de administrador; sólo se recomienda en salas de cómputo compartidas por múltiples usuarios de Windows.

Las 4 Casillas Críticas Durante la Instalación en Windows

Durante el asistente de instalación en Windows, llegarás a la pantalla "Seleccionar tareas adicionales". Es fundamental marcar todas las casillas para habilitar el flujo profesional:

Opción del Instalador Estado Recomendado ¿Para qué sirve en el día a día?
Agregar la acción "Abrir con Code" al menú contextual de archivo ✅ Activar Permite hacer clic derecho sobre cualquier archivo suelto (.php, .html, .json) y abrirlo al instante.
Agregar la acción "Abrir con Code" al menú contextual de directorio ✅ Activar Permite hacer clic derecho sobre la carpeta de tu proyecto en el Explorador de Windows y abrir todo el espacio de trabajo.
Registrar Code como editor para tipos de archivo admitidos ✅ Activar Establece VS Code como programa predeterminado para archivos de código fuente sin alterar el navegador web.
Agregar a PATH (disponible después de reiniciar) ✅ ¡Obligatorio! Habilita el comando code . en PowerShell, CMD o Git Bash para abrir cualquier carpeta desde la terminal.
🍎 Usuarios de macOS: Tras mover Visual Studio Code.app a la carpeta Aplicaciones, abre el editor, presiona Cmd + Shift + P y ejecuta Shell Command: Install 'code' command in PATH para activar el comando en tu terminal zsh.

⚡ Comandos de Terminal (CLI) de VS Code para Abrir Proyectos y Comparar Archivos

Cómo usar el ejecutable code en la terminal para abrir carpetas, editar archivos específicos e instalar extensiones por consola.

vscode-cli-commands.sh
Solo lectura 
# 1. Verificar que VS Code quedó correctamente registrado en la variable PATH
code --version

# 2. Abrir la carpeta actual completa como espacio de trabajo en VS Code
cd C:/xampp/htdocs/mi-proyecto
code .

# 3. Abrir un archivo específico posicionando el cursor exactamente en la línea 45, columna 12
code --goto app/core/Router.php:45:12

# 4. Comparar visualmente dos archivos (Diff View) directamente desde la terminal
code --diff config.produccion.php config.local.php

# 5. Listar todas las extensiones que tienes instaladas actualmente
code --list-extensions

# 6. Instalar el paquete de idioma Español y Prettier desde la línea de comandos
code --install-extension MS-CEINTL.vscode-language-pack-es
code --install-extension esbenp.prettier-vscode
🧠
Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección
1 Pregunta
Pregunta 1
¿Qué casilla del instalador de VS Code permite abrir la carpeta actual desde cualquier terminal escribiendo el comando "code ."?
🦉
¿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.