Mi Configuración de VSCode para Acelerar VSCode 10 Veces

Seamos honestos. Todos hemos estado ahí. Estás concentrado, el código fluye, y de repente... VSCode empieza a ir lento. El cursor se traba, el autocompletado se toma un descanso y el ventilador de tu portátil suena como si se preparara para despegar. Es frustrante, rompe tu concentración y, francamente, es un enorme asesino de la productividad.

Durante mucho tiempo, simplemente acepté esto como el precio de usar un editor potente y extensible. Suspiraba, cerraba algunas pestañas y rezaba por un milagro. Eso fue hasta que decidí adentrarme en las entrañas de la bestia y optimizar sistemáticamente mi configuración. ¿El resultado? No solo obtuve un pequeño aumento de velocidad; transformé VSCode de un devorador de recursos lento en una máquina de codificación eficiente y potente que se siente casi 10 veces más rápido.

El viaje no se trató solo de copiar ciegamente configuraciones de un foro. Se trató de entender por qué VSCode se vuelve lento y de aplicar soluciones metódicamente.

Y oye, mientras hablamos de optimizar nuestro flujo de trabajo de desarrollo, si también estás cansado de hacer malabares entre Postman, Swagger y los servidores Mock para el trabajo con API, tienes que echar un vistazo a Apidog.

En esta publicación, te guiaré a través de las configuraciones y estrategias exactas que utilicé. Iremos más allá de lo básico de "desactivar una o dos extensiones" y entraremos en los detalles de la monitorización de archivos, la optimización de TypeScript y los drenajes de rendimiento ocultos. Prepárate para recuperar tu entorno de desarrollo.

Los Culpables: ¿Por qué tu VSCode es tan lento?

Antes de empezar a aplicar soluciones, es crucial entender a qué nos enfrentamos. Piensa en ello como diagnosticar un coche; no empiezas a reemplazar piezas al azar. Necesitas saber qué está causando el ruido.

A través de mi investigación, identifiqué tres villanos principales responsables de los problemas de rendimiento de VSCode:

1. Sobrecarga de Extensiones: Este es, sin duda, el culpable número uno. Cada extensión que instalas es como una pequeña aplicación ejecutándose dentro de VSCode. Algunas son bien comportadas y ligeras, pero otras son monstruos que consumen muchos recursos y pueden poner de rodillas a todo tu editor. El problema se agrava con cada nueva extensión que añades.
2. El Frenesí de la Monitorización de Archivos: VSCode tiene un servicio integrado que monitorea constantemente los archivos de tu proyecto en busca de cambios. Esto es lo que impulsa características como la actualización en vivo del explorador de archivos y el estado de Git en la barra lateral. Sin embargo, en proyectos grandes, especialmente aquellos con carpetas masivas como node_modules, dist o build, este monitor de archivos puede entrar en sobrecarga, consumiendo cantidades insanas de CPU y memoria mientras intenta rastrear miles y miles de archivos.
3. Sobrecarga del Servidor de Idioma y TypeScript: Para aquellos de nosotros en el mundo de TypeScript/JavaScript, el servidor de idioma (que proporciona IntelliSense, verificación de errores y refactorización) es un trabajador milagroso. Pero ese poder tiene un costo. En grandes bases de código, la verificación de tipos y el análisis constantes pueden ser un drenaje significativo del rendimiento.

Ahora que conocemos a los enemigos, construyamos nuestro plan de batalla. Los abordaremos en orden de impacto.

Fase 1: La Purga de Extensiones – Tu Palanca Más Poderosa

Aquí es donde verás la mejora más dramática. Pasé de 40 extensiones instaladas perezosamente a 20 esenciales, y la diferencia no solo fue medible, fue palpable.

Paso 1: Identifica los Devoradores de Recursos

Primero, necesitas ver qué extensiones te están ralentizando realmente. Afortunadamente, VSCode tiene herramientas integradas fantásticas para esto.

• Abre la Paleta de Comandos con Ctrl+Shift+P (o Cmd+Shift+P en Mac).
• Escribe y ejecuta Developer: Show Running Extensions.

Esto abre un panel que te muestra cada extensión en ejecución y, lo más importante, su "Tiempo de Activación". Esto es lo que tarda la extensión en iniciarse. Las extensiones con un tiempo de activación alto suelen ser las que tienen el mayor impacto en el rendimiento de tu inicio. Ver esta lista por primera vez fue una verdadera revelación para mí.

Paso 2: El Ataque Quirúrgico con Extension Bisect

¿Qué pasa si no sabes qué extensión está causando el problema? Deshabilitarlas manualmente una por una es un fastidio. Entra en uno de los secretos mejor guardados de VSCode: **Extension Bisect**.

• Abre la Paleta de Comandos de nuevo y ejecuta Developer: Start Extension Bisect.

Esta brillante característica utiliza un algoritmo de búsqueda binaria. Deshabilitará la mitad de tus extensiones y te preguntará si el problema persiste. Dices sí o no, y deshabilita/habilita otra mitad, acorralando rápidamente al culpable en solo unos pocos pasos. Es como un detective que encuentra sistemáticamente al malhechor en tu lista de extensiones.

Paso 3: Poda Despiadada y Gestión del Espacio de Trabajo

Una vez que hayas identificado las extensiones problemáticas o simplemente no utilizadas, es hora de ser despiadado.

• Deshabilitar Globalmente: Para las extensiones que nunca usas, simplemente haz clic derecho y desactívalas globalmente.
• Deshabilitar por Espacio de Trabajo: Esto cambia las reglas del juego. No necesitas tu linter de Python activo en tu proyecto de React, y viceversa. Haz clic derecho en una extensión y selecciona "Deshabilitar (Espacio de trabajo)". Esto la mantiene habilitada para otros proyectos pero la desactiva para el actual, ahorrando recursos valiosos.

Además, no olvides las extensiones integradas. Busca @builtin en la vista de extensiones. Podrías encontrar extensiones predeterminadas para lenguajes o frameworks que no usas. Deshabilitarlas también puede proporcionar una pequeña mejora de rendimiento.

Los Resultados de Mi Purga de Extensiones

Hablemos de números. Medí el rendimiento de inicio de mi VSCode antes y después de la gran purga de extensiones. Los resultados fueron asombrosos:

Mi editor no solo se inició más rápido; se sintió más receptivo en general. Este único paso es la acción con mayor retorno de inversión que puedes tomar.

Fase 2: Domando el Observador del Sistema de Archivos

Después de lidiar con las extensiones, la siguiente gran victoria proviene de controlar el insaciable observador de archivos de VSCode. Este servicio es esencial, pero no necesita observar cada archivo de tu proyecto.

La Configuración Poderosa files.watcherExclude

Esta configuración es tu mejor amiga. Le dice a VSCode que deje de malgastar recursos observando carpetas que cambian a menudo pero que no afectan tu trabajo de desarrollo principal.

Aquí está la configuración que agregué a mi settings.json y que marcó una diferencia masiva en el uso de CPU y memoria:

json

{
  "files.watcherExclude": {
    ".git/objects": true,
    ".git/subtree-cache": true,
    "node_modules/*": true,
    "dist": true,
    "build": true,
    ".vscode": true,
    "coverage": true,
    "__generated__": true,
    "tmp": true,
    ".cache": true
  }
}

Lo que hace esto: Ignora específicamente todo el caos dentro de node_modules, tus salidas de compilación (dist, build), los internos de Git y otros directorios de caché. Estas carpetas son actualizadas por gestores de paquetes y herramientas de compilación, no directamente por ti, por lo que no hay necesidad de que VSCode se agote observándolas.

Limpieza Adicional: files.exclude y search.exclude

Ya que estamos, limpiemos tu barra lateral y aceleremos las búsquedas.

• files.exclude: Oculta archivos y carpetas de la barra lateral del explorador. Esto no ahorra una tonelada de rendimiento, pero hace que el árbol de tu proyecto sea mucho más limpio.
• search.exclude: Este sí mejora el rendimiento. Evita que VSCode indexe y busque a través de miles de archivos irrelevantes en node_modules y otros directorios de compilación, haciendo que la función de búsqueda sea increíblemente rápida.

Mi configuración:

json

{
  "files.exclude": {
    ".git": true,
    ".DS_Store": true,
    "node_modules": true,
    "__pycache__": true,
    ".next": true,
    "dist": true,
    "build": true
  },
  "search.exclude": {
    "node_modules": true,
    "bower_components": true,
    ".code-search": true,
    "dist": true,
    "build": true,
    ".next": true,
    "coverage": true
  }
}

Fase 3: Optimizando tu Motor TypeScript

Si eres desarrollador de TypeScript, el servidor de lenguaje puede ser un drenaje silencioso de recursos. Así es como puedes hacerlo más eficiente.

Potencia tu tsconfig.json

El primer lugar donde buscar es el tsconfig.json de tu proyecto. Una configuración adecuada aquí ayuda al compilador de TypeScript (y por extensión, a VSCode) a evitar trabajo innecesario.

json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "build",
    ".spec.ts",
    ".test.ts",
    "coverage"
  ]
}

La opción skipLibCheck: true es particularmente importante. Omite la verificación de tipos de los archivos de declaración en node_modules, lo que puede reducir drásticamente el tiempo de compilación y análisis.

Configuración de TypeScript Específica de VSCode

A continuación, añade estas configuraciones centradas en el rendimiento a tu settings.json de VSCode:

json

{
  "typescript.tsserver.log": "off",
  "typescript.disableAutomaticTypeAcquisition": true,
  "typescript.tsserver.experimental.enableProjectDiagnostics": false
}

• "typescript.tsserver.log": "off": Detiene la salida de logs internos, ahorrando E/S de disco.
• "typescript.disableAutomaticTypeAcquisition": true": Evita que VSCode intente descargar automáticamente definiciones de tipos para tus node_modules, un proceso que puede ser lento e impredecible.
• "typescript.tsserver.experimental.enableProjectDiagnostics": false": Reduce la carga de diagnóstico, lo cual es útil en proyectos muy grandes.

La Opción Nuclear: Borrar la Caché de TypeScript

A veces, la caché del servidor de lenguaje de TypeScript puede corromperse o hincharse. Borrarla puede resolver problemas extraños de rendimiento y alto uso de memoria.

• Windows: C:\\Users\\<YourUsername>\\AppData\\Local\\Microsoft\\TypeScript
• macOS: ~/Library/Caches/Microsoft/TypeScript
• Linux: ~/.cache/typescript

Una advertencia: Este no es un procedimiento oficial, así que hazlo bajo tu propio riesgo. Sin embargo, en mi experiencia, eliminar estas carpetas es seguro y a menudo tiene un efecto de "limpiar las telarañas", haciendo que las cosas sean más ágiles.

Fase 4: Optimizando la Interfaz de Usuario

La interfaz de usuario de VSCode es rica en funciones, pero no necesitas que se rendericen todos esos píxeles. Deshabilitar los elementos de la interfaz de usuario que no utilizas puede liberar recursos de renderizado, haciendo que el editor se sienta más fluido.

Aquí están mis optimizaciones de UI preferidas:

json

{
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.codeLens": false,
  "workbench.activityBar.visible": false,
  "window.menuBarVisibility": "toggle"
}

Descubrí que el **minimapa** era un particular drenaje de recursos para archivos más grandes. Desactivarlo fue una victoria instantánea. De manera similar, **CodeLens** (esos enlaces accionables como referencias e implementaciones encima de tus funciones) puede ser costoso de calcular y renderizar.

Fase 5: Ajustando Finamente los Comportamientos Automáticos

La automatización es genial hasta que se interpone en el camino.

Guardado Automático y Formateo

El guardado automático y el formateo agresivos pueden causar micro-retrasos mientras escribes. Encontré un punto óptimo con estas configuraciones:

json

{
  "files.autoSave": "onFocusChange",
  "files.autoSaveDelay": 1000,
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Esto guarda solo cuando cambio de archivo actual, y formatea solo al guardar, no en cada pulsación de tecla o pegado. Esto evita que el formateador se ejecute constantemente en segundo plano mientras intento pensar y escribir.

Integración con Git

La integración de Git de VSCode es conveniente, pero su constante sondeo puede ser un drenaje.

json

{
  "git.enabled": true,
  "git.autorefresh": false,
  "git.autofetch": false,
  "git.decorations.enabled": false
}

Esto mantiene Git habilitado pero desactiva la actualización y la obtención automáticas. Siempre puedes obtener y actualizar manualmente cuando lo necesites. Deshabilitar las decoraciones (las líneas de colores en la barra lateral) también ahorra un poco de sobrecarga de renderizado.

Uniéndolo Todo: El settings.json Definitivo

Muy bien, consolidemos todo. Aquí está el settings.json completo y anotado que forma la columna vertebral de mi experiencia con VSCode 10 veces más rápido. Este es el "un copiar-pegar para gobernarlos a todos".

json

{
  // ===== EXCLUSIONES DE MONITORIZACIÓN DE ARCHIVOS (Ahorro de CPU y Memoria) =====
  "files.watcherExclude": {
    ".git/objects": true,
    ".git/subtree-cache": true,
    "node_modules/*": true,
    "dist": true,
    "build": true,
    ".vscode": true,
    "coverage": true,
    "__generated__": true
  },

  // ===== LIMPIAR BARRA LATERAL DEL EXPLORADOR =====
  "files.exclude": {
    ".git": true,
    ".DS_Store": true,
    "node_modules": true,
    "dist": true,
    "build": true
  },

  // ===== POTENCIAR EL RENDIMIENTO DE BÚSQUEDA =====
  "search.exclude": {
    "node_modules": true,
    "dist": true,
    "build": true,
    ".next": true,
    "coverage": true
  },

  // ===== OPTIMIZACIONES DE TYPESCRIPT =====
  "typescript.tsserver.log": "off",
  "typescript.disableAutomaticTypeAcquisition": true,

  // ===== MODO LIGERO DE UI =====
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.codeLens": false,

  // ===== GUARDADO AUTOMÁTICO Y FORMATO INTELIGENTES =====
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.formatOnType": false,
  "editor.formatOnPaste": false,

  // ===== INTEGRACIÓN EFICIENTE DE GIT =====
  "git.autorefresh": false,
  "git.autofetch": false,
  "git.decorations.enabled": false,

  // ===== MANEJO DE ARCHIVOS GRANDES =====
  "files.maxMemoryForLargeFilesMB": 4096
}

Diagnósticos Avanzados y Reflexiones Finales

Si has aplicado todas estas configuraciones y aún tienes curiosidad, VSCode tiene una herramienta más potente.

• Ejecuta Developer: Startup Performance desde la Paleta de Comandos.

Esto te proporciona un desglose detallado, milisegundo a milisegundo, de lo que sucede durante el inicio de VSCode. Es fantástico para identificar cualquier cuello de botella final y persistente.

Un Enfoque Holístico del Rendimiento

Optimizar VSCode es un paso fantástico, pero recuerda que un entorno de desarrollo lento puede tener muchas fuentes. Así como hemos optimizado nuestro editor de código, vale la pena usar herramientas que optimicen otras partes de nuestro flujo de trabajo. Por eso integré Apidog en mi proceso. La gestión de API puede ser una gran pérdida de tiempo si tus herramientas son lentas o están desconectadas. Tener una solución rápida y todo en uno para diseñar, depurar y probar API complementa perfectamente un entorno de codificación de alto rendimiento, manteniendo todo el ciclo de desarrollo ajustado y eficiente.

En conclusión, un VSCode rápido no es cuestión de magia. Se trata de intencionalidad. Se trata de comprender las ventajas y desventajas de las herramientas y extensiones que usamos y de tomar decisiones conscientes. Al tomar el control de tus extensiones, domar el observador de archivos, optimizar TypeScript y agilizar la interfaz de usuario, puedes lograr absolutamente esa sensación de "10 veces más rápido".

¿Entonces, qué estás esperando? Abre la configuración de tu VSCode y comienza tu propio viaje de optimización. Tu CPU (y tu cordura) te lo agradecerán.