Tema 5 · Multicursores

5. Multicursores (Ctrl+D), Selección en Columna y Búsqueda con Regex

Edita decenas de líneas simultáneamente con cursores múltiples y transforma código masivo usando búsqueda y reemplazo con grupos de captura.

4. Atajos de Teclado Esenciales: Navegación, Movimiento y Duplicación de Líneas 6. Maestría en Emmet y Creación de Snippets Personalizados por Lenguaje

El Superpoder de Editar 50 Líneas al Mismo Tiempo

Cuando necesitas agregar una clase CSS a 15 elementos <li>, convertir una lista de nombres en un arreglo de PHP o cambiar el nombre de un atributo repetido, hacerlo uno por uno es tedioso y propenso a errores. Los Multicursores de VS Code te permiten colocar múltiples puntos de escritura activos y editar todas las líneas en un solo golpe de teclado.

Las 5 Formas de Invocar Multicursores en VS Code

Combinación Comportamiento Exacto Cuándo Usarlo
Ctrl + D (repetidas veces) Selecciona la palabra actual y, en cada pulsación adicional, agrega la siguiente ocurrencia idéntica. Cuando quieres cambiar una variable o etiqueta solo en las próximas 4 o 5 líneas (si te pasas una, usa Ctrl+U para deshacer el último cursor).
Ctrl + Shift + L Coloca un cursor en TODAS las ocurrencias de la palabra seleccionada en el archivo entero. Reemplazos globales instantáneos dentro de un mismo archivo.
Alt + Clic Izquierdo Agrega un nuevo cursor exactamente en cada punto donde hagas clic con el ratón. Cuando los puntos a editar están en posiciones irregulares que no siguen un patrón vertical.
Ctrl + Alt + ↓ / ↑ Clona el cursor en línea recta hacia abajo o hacia arriba (Selección en Columna). Ideal para editar listas alineadas, tablas SQL o propiedades de objetos.
Shift + Alt + I Selecciona varias líneas con el ratón y presiona este atajo para poner un cursor al final de cada línea. Perfecto para agregar punto y coma ; o comas , al final de 30 líneas de golpe.
🔎 Búsqueda y Reemplazo con Expresiones Regulares (Ctrl+H): Al presionar Ctrl + H y activar el icono .* (Use Regular Expression), puedes capturar patrones con paréntesis (...) y reutilizarlos en el campo de reemplazo mediante $1, $2.

⚡ Transformación Masiva con Multicursores y Regex en VS Code

Cómo convertir una lista de texto plano en un arreglo asociativo o etiquetas HTML en 5 segundos sin escribir línea por línea.

multicursor-practice.html
Solo lectura 
<!-- 
  EJERCICIO PRÁCTICO 1: Uso de Ctrl + D
  Objetivo: Cambiar solo los primeros tres <div> por <article class="card">
  Pasos:
  1. Pon el cursor sobre el primer "div".
  2. Presiona Ctrl + D tres veces (seleccionará los 3 primeros).
  3. Escribe: article class="card"
  (Gracias a linkedEditing, las etiquetas de cierre </div> cambiarán solas a </article>)
-->
<div>Producto 1</div>
<div>Producto 2</div>
<div>Producto 3</div>
<div>Pie de página (no tocar)</div>

<!-- 
  EJERCICIO PRÁCTICO 2: Búsqueda y Reemplazo con Regex (Ctrl + H)
  Imagina que tienes esta lista cruda de productos y precios:
  Laptop Pro - 1200
  Monitor 4K - 450
  Teclado Mecánico - 95

  1. Presiona Ctrl + H y activa el botón [.*] (Expresión Regular).
  2. En "Buscar" escribe:      ^(.+?)\s*-\s*(\d+)$
  3. En "Reemplazar" escribe:  ['producto' => '$1', 'precio' => $2],
  4. Clic en "Reemplazar todo" (Ctrl + Alt + Enter).
  
  Resultado generado instantáneamente:
  ['producto' => 'Laptop Pro', 'precio' => 1200],
  ['producto' => 'Monitor 4K', 'precio' => 450],
  ['producto' => 'Teclado Mecánico', 'precio' => 95],
-->
🧠
Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección
1 Pregunta
Pregunta 1
Estás seleccionando ocurrencias una por una con Ctrl+D en VS Code y por accidente presionaste una vez de más seleccionando una línea que no querías tocar. ¿Qué atajo deshace únicamente esa última selección de cursor?
🦉
¿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.