Visual Studio Code

IS093 - DESARROLLO DE APLICACIONES WEB

Mg. Jaime Suasnábar Terrel

¿Qué es Visual Studio Code?

Visual Studio Code es un editor de código fuente ligero pero potente que se ejecuta en el escritorio. Incluye soporte integrado para JavaScript, TypeScript y Node.js, y cuenta con un rico ecosistema de extensiones para otros lenguajes y herramientas de desarrollo.

Descarga e Instalación

Puedes descargar Visual Studio Code de forma gratuita desde el sitio oficial:


Descargar Visual Studio Code

Características Principales

🖥️ Interfaz Principal (UI)

Interfaz intuitiva y personalizable con paneles laterales, editor central, y barra de estado que proporciona toda la información necesaria para el desarrollo.

⌨️ Paleta de Comandos

Acceso rápido a todas las funciones mediante Ctrl + Shift + P. Permite ejecutar comandos predefinidos como crear terminales, comentar código y más.

💻 Terminal Integrada

Terminal incorporada que permite ejecutar comandos del sistema sin salir del editor, facilitando el flujo de trabajo de desarrollo.

🚀 Emmet

Conjunto de complementos que permiten codificación de alta velocidad en HTML, XML y CSS mediante abreviaciones inteligentes.

Comandos Útiles de la Paleta

Accede con Ctrl + Shift + P a estos comandos frecuentes:

Emmet - Codificación Rápida

Emmet permite escribir código HTML y CSS de forma ultra-rápida usando abreviaciones. Aquí algunos ejemplos:

Ejemplos de Emmet

div.container <div class="container"></div>
ul>li*3 <ul><li></li><li></li><li></li></ul>
nav>ul>li.item$*3 Genera nav con ul y 3 li con clases item1, item2, item3
! Estructura HTML5 completa

Recursos:

Atajos de Teclado Esenciales

Navegación

Ctrl + P - Abrir archivo rápidamente

Ctrl + Shift + E - Explorador de archivos

Ctrl + ` - Abrir/cerrar terminal

Edición

Ctrl + D - Seleccionar palabra

Alt + Shift + ↑/↓ - Duplicar línea

Ctrl + / - Comentar/descomentar

Laboratorio N° 02

Actividades prácticas para dominar VSCode y las herramientas de desarrollo web

Volver a Cuadernos Ir a Semana 02