Búsqueda y reemplazo

Búsqueda y reemplazo dentro de un archivo

La búsqueda y reemplazo dentro de un archivo individual es una de las operaciones más frecuentes durante el desarrollo. VSCode proporciona herramientas integradas que permiten localizar y modificar texto de manera eficiente sin necesidad de recorrer manualmente todo el código.

Búsqueda básica con Find

El panel de búsqueda básica se activa con Ctrl+F y aparece en la parte superior derecha del editor. Esta funcionalidad permite localizar cualquier cadena de texto dentro del archivo actual de forma instantánea.

function calcularPrecio(producto, descuento) {
    let precio = producto.precio;
    let precioFinal = precio - (precio * descuento);
    return precioFinal;
}

Al buscar "precio" en el código anterior, VSCode resalta todas las coincidencias y muestra un contador que indica cuántas apariciones encontró. Las flechas de navegación permiten saltar entre cada resultado usando F3 para avanzar y Shift+F3 para retroceder.

Opciones de búsqueda avanzada

El panel de búsqueda incluye varios botones de configuración que modifican el comportamiento de la búsqueda:

Match Case (Aa): Distingue entre mayúsculas y minúsculas. Activar esta opción hace que "Precio" y "precio" se consideren términos diferentes.

Match Whole Word (Ab): Busca únicamente palabras completas. Si buscas "precio" con esta opción activada, no encontrará "precioFinal" ni "precioDescuento".

Use Regular Expression (.*): Permite utilizar expresiones regulares para búsquedas más complejas. Por ejemplo, \d+ encuentra cualquier secuencia de números.

.container {
    margin: 10px;
    padding: 20px;
    border: 1px solid #ccc;
}

Usando la expresión regular \d+px en el CSS anterior, encontrarías tanto "10px" como "20px" de una sola búsqueda.

Reemplazo con Replace

El panel de reemplazo se activa con Ctrl+H y extiende la funcionalidad de búsqueda añadiendo un campo adicional para el texto de sustitución. Esta herramienta es especialmente útil para refactorizar código o corregir errores repetitivos.

def procesar_datos(lista_usuarios):
    for usuario in lista_usuarios:
        print(f"Procesando usuario: {usuario}")
        validar_usuario(usuario)
        guardar_usuario(usuario)

Para cambiar todas las apariciones de "usuario" por "cliente" en el código anterior, introduces "usuario" en el campo de búsqueda y "cliente" en el campo de reemplazo.

Estrategias de reemplazo controlado

VSCode ofrece tres opciones de reemplazo que proporcionan diferentes niveles de control:

Replace (Ctrl+Alt+1): Reemplaza únicamente la coincidencia actual resaltada. Esta opción permite revisar cada cambio antes de aplicarlo.

Replace All (Ctrl+Alt+Enter): Sustituye todas las coincidencias de una vez. Útil cuando estás seguro de que todos los cambios son correctos.

Replace and Find Next: Reemplaza la coincidencia actual y automáticamente salta a la siguiente. Combina velocidad con control.

<div class="contenedor-principal">
    <div class="contenedor-secundario">
        <p>Contenido del contenedor</p>
    </div>
</div>

Al cambiar "contenedor" por "wrapper" usando Replace and Find Next, puedes decidir en cada caso si aplicar el cambio, especialmente útil cuando algunas apariciones no deben modificarse.

Búsqueda con expresiones regulares básicas

Las expresiones regulares amplían significativamente las capacidades de búsqueda. VSCode soporta el estándar JavaScript para regex, permitiendo patrones de búsqueda más sofisticados.

const email1 = "usuario@ejemplo.com";
const email2 = "admin@sitio.org";
const email3 = "contacto@empresa.net";

Para encontrar todas las direcciones de email, utilizarías la expresión regular \w+@\w+\.\w+. Los elementos básicos incluyen:

• \d encuentra cualquier dígito
• \w encuentra cualquier carácter alfanumérico
• \. encuentra un punto literal
• + indica una o más repeticiones del carácter anterior

Reemplazo con grupos de captura

Los grupos de captura en expresiones regulares permiten reutilizar partes del texto encontrado en el reemplazo. Se definen con paréntesis y se referencian con $1, $2, etc.

function obtenerUsuario() { return "Juan"; }
function obtenerEmail() { return "juan@email.com"; }
function obtenerTelefono() { return "123456789"; }

Para cambiar el patrón function obtener(.+)() por const obtener$1 = () =>, transformarías las funciones tradicionales en arrow functions modernas. El $1 captura el contenido entre paréntesis del primer grupo.

Historial y navegación eficiente

VSCode mantiene un historial de búsquedas accesible mediante las flechas arriba y abajo en el campo de búsqueda. Este historial persiste entre sesiones, permitiendo reutilizar búsquedas complejas sin reescribirlas.

La navegación entre resultados se optimiza con atajos específicos: Enter para ir al siguiente resultado, Shift+Enter para el anterior, y Escape para cerrar el panel manteniendo las coincidencias resaltadas en el editor.

Búsqueda y reemplazo global

La búsqueda global permite localizar y modificar texto en múltiples archivos simultáneamente, una funcionalidad esencial cuando trabajas con proyectos de gran escala. Esta característica trasciende las limitaciones del archivo individual y proporciona una visión completa del código base.

Search in Files: búsqueda en todo el proyecto

El panel de Search in Files se activa con Ctrl+Shift+F y abre una vista lateral dedicada que permite explorar todo el workspace. A diferencia de la búsqueda local, esta herramienta indexa el contenido de todos los archivos del proyecto y presenta los resultados organizados por archivo.

// archivo: utils/validation.js
export function validateEmail(email) {
    return email.includes('@');
}

// archivo: components/UserForm.js
import { validateEmail } from '../utils/validation';

function handleSubmit(formData) {
    if (!validateEmail(formData.email)) {
        throw new Error('Email inválido');
    }
}

Al buscar "validateEmail" globalmente, VSCode muestra todas las apariciones organizadas en una estructura de árbol que incluye el nombre del archivo, el número de línea y el contexto circundante. Cada resultado es clickeable y navega directamente a la ubicación exacta.

Filtros por tipo de archivo

Los filtros de archivo refinan la búsqueda limitándola a extensiones específicas o patrones de nombre. Esta funcionalidad resulta crucial en proyectos que mezclan diferentes tecnologías y tipos de archivo.

La sintaxis de filtros utiliza patrones glob en el campo "files to include":

• *.js busca únicamente en archivos JavaScript
• src/**/*.ts limita la búsqueda a archivos TypeScript dentro del directorio src
• !node_modules excluye la carpeta node_modules de los resultados

// package.json
{
  "name": "mi-proyecto",
  "version": "1.0.0"
}

// src/config.js
const VERSION = "1.0.0";

// docs/README.md
# Mi Proyecto v1.0.0

Buscando "1.0.0" con el filtro src/**/*.js encontraría únicamente la aparición en config.js, ignorando package.json y README.md.

Exclusiones y configuración de búsqueda

El campo "files to exclude" permite omitir directorios o archivos específicos de la búsqueda. VSCode respeta automáticamente las configuraciones de .gitignore, pero puedes añadir exclusiones adicionales:

• dist/ excluye la carpeta de distribución
• *.min.js omite archivos JavaScript minificados
• test/** ignora todos los archivos de prueba

// src/main.js
const API_URL = "https://api.ejemplo.com";

// dist/main.min.js
const API_URL="https://api.ejemplo.com";

// test/main.test.js
const API_URL = "https://api.ejemplo.com";

Con la exclusión dist/,test/**, la búsqueda de "API_URL" mostraría únicamente el resultado de src/main.js.

Replace in Files: reemplazo masivo controlado

El reemplazo global se activa expandiendo el panel de búsqueda para mostrar el campo de reemplazo. Esta funcionalidad requiere precaución especial debido a su capacidad de modificar múltiples archivos simultáneamente.

/* styles/components.css */
.button-primary {
    background-color: #007bff;
}

/* styles/layout.css */
.button-primary:hover {
    background-color: #0056b3;
}

/* components/Button.js */
<button className="button-primary">Enviar</button>

Para cambiar "button-primary" por "btn-primary" en todo el proyecto, VSCode muestra una vista previa de todos los cambios antes de aplicarlos. Cada archivo modificado aparece con un indicador que muestra el número de reemplazos pendientes.

Estrategias de reemplazo seguro

El reemplazo global ofrece controles granulares que permiten revisar y aprobar cambios selectivamente:

Replace All in Files: Aplica todos los reemplazos de una vez. Utiliza esta opción únicamente cuando estés completamente seguro de los cambios.

Replace in File: Reemplaza todas las coincidencias dentro de un archivo específico. Útil para aplicar cambios archivo por archivo.

Replace: Sustituye únicamente la coincidencia seleccionada. Proporciona el máximo control sobre cada modificación individual.

// models/User.ts
interface User {
    userId: string;
    userName: string;
}

// services/UserService.ts
function getUserById(userId: string): User {
    return database.findUser(userId);
}

// components/UserProfile.ts
const currentUserId = getCurrentUser().userId;

Al cambiar "userId" por "id", puedes aplicar el reemplazo selectivamente: en la interfaz User y en getUserById, pero mantener "currentUserId" sin cambios para preservar la claridad del código.

Expresiones regulares en búsqueda global

Las expresiones regulares globales combinan la potencia del pattern matching con el alcance de múltiples archivos. Esta funcionalidad es especialmente útil para refactorizaciones complejas que siguen patrones específicos.

// api/users.js
app.get('/users/:id', getUserById);
app.post('/users', createUser);
app.put('/users/:id', updateUser);

// api/products.js
app.get('/products/:id', getProductById);
app.post('/products', createProduct);

Usando la expresión regular app\.(get|post|put)\('(/\w+) puedes encontrar todas las definiciones de rutas API. Para modernizar el código a Express Router, podrías reemplazar con router.$1('$2 transformando sistemáticamente la estructura de rutas.

Gestión de resultados y navegación

Los resultados de búsqueda global se organizan en una vista colapsible que permite expandir o contraer archivos individuales. VSCode mantiene esta vista sincronizada con los cambios del editor, actualizando automáticamente los números de línea cuando modificas archivos.

La navegación entre resultados utiliza F4 para el siguiente resultado y Shift+F4 para el anterior. Estos atajos funcionan incluso cuando el panel de búsqueda no está visible, permitiendo un flujo de trabajo eficiente durante la revisión de coincidencias.

Consideraciones de rendimiento

La búsqueda global en proyectos grandes puede impactar el rendimiento del editor. VSCode implementa optimizaciones automáticas como la indexación incremental y la búsqueda asíncrona, pero es recomendable utilizar filtros específicos para limitar el alcance cuando sea posible.

Los archivos binarios y directorios como node_modules se excluyen automáticamente para mejorar la velocidad de búsqueda. Sin embargo, puedes ajustar estas configuraciones en las preferencias del editor si necesitas incluir tipos de archivo específicos en tus búsquedas.