TSServer Consume Mucha CPU o Se Bloquea en VS Code: Cómo Solucionarlo
¿El servidor de TypeScript (tsserver) consume 100% CPU en VS Code? Causas, soluciones paso a paso y configuraciones para proyectos grandes que hacen que VS Code vaya lento.
Tabla de contenidos
Abres VS Code con tu proyecto de TypeScript. El ventilador del portátil arranca. Miras el administrador de tareas: tsserver.js consume 98% de CPU y 3GB de RAM. El autocompletado tarda 5 segundos. Escribir una línea congela el editor.
Es el problema número uno de TypeScript en VS Code y afecta especialmente a monorepos y proyectos con +500 archivos.
Qué es TSServer y por qué consume tanto
TSServer es el proceso que VS Code lanza para:
- Autocompletado (IntelliSense)
- Verificación de tipos en tiempo real
- Navegación (Go to Definition, Find References)
- Refactoring automático
Para hacer esto, tsserver carga el proyecto entero en memoria: todos los .ts, .tsx, los .d.ts de node_modules/@types, y todo lo referenciado por tu tsconfig.json.
En un proyecto con React + Material UI + Prisma + tRPC:
| Concepto | Archivos | Memoria aprox. |
|---|---|---|
| Tu código | ~200 archivos | ~50 MB |
@types/react | ~150 archivos | ~80 MB |
| Material UI types | ~500 archivos | ~200 MB |
| Prisma Client generado | ~50 archivos | ~100 MB |
Otros @types/* | ~300 archivos | ~150 MB |
| Total | ~1.200 archivos | ~580 MB |
Y eso es un proyecto mediano. Un monorepo con 5+ packages puede llegar a 3-4 GB fácilmente.
Solución rápida: Reiniciar TSServer
Antes de tocar configuraciones, prueba reiniciarlo:
Ctrl+Shift+P → "TypeScript: Restart TS Server"
Si tras reiniciar vuelve a consumir CPU en 30 segundos, el problema es estructural — sigue leyendo.
Solución 1: Excluir archivos del análisis
tsconfig.json — exclude
{
"compilerOptions": { ... },
"exclude": [
"node_modules",
"dist",
"build",
".next",
"coverage",
"**/*.test.ts",
"**/*.spec.ts",
"**/*.stories.tsx"
]
}
Los archivos en exclude no se analizan para tipos. Si tus tests o Storybook stories importan cosas raras que enlentecen tsserver, exclúyelos.
tsconfig.json — include (más agresivo)
En vez de excluir, di explícitamente qué incluir:
{
"compilerOptions": { ... },
"include": [
"src/**/*.ts",
"src/**/*.tsx"
]
}
Esto hace que tsserver ignore todo lo que no esté en src/. Drástico pero efectivo.
Solución 2: Configurar VS Code
Limitar memoria de TSServer
// settings.json
{
// Memoria máxima para tsserver (en MB)
"typescript.tsserver.maxTsServerMemory": 4096,
// Desactivar análisis automático de proyectos adyacentes
"typescript.disableAutomaticTypeAcquisition": true,
// Retrasar el análisis al escribir (menos CPU)
"typescript.suggest.autoImports": true
}
Desactivar features que no uses
{
// Si no usas las sugerencias de imports automáticos
"typescript.suggest.autoImports": false,
// Si no usas el resaltado de referencias
"editor.occurrencesHighlight": "off",
// Si no necesitas el breadcrumb (barra de navegación arriba)
"breadcrumbs.enabled": false,
// Desactivar validación de JS si solo trabajas con TS
"javascript.validate.enable": false
}
Solución 3: Monorepos — Un TSServer por package
En monorepos, tsserver intenta cargar todo. El truco es abrir solo el package en el que trabajas:
# ❌ Abrir la raíz del monorepo (carga todo)
code /mi-monorepo
# ✅ Abrir solo el package específico
code /mi-monorepo/packages/frontend
O usa workspaces de VS Code:
// mi-monorepo.code-workspace
{
"folders": [
{ "path": "packages/frontend" },
{ "path": "packages/api" }
],
"settings": {
"typescript.tsserver.maxTsServerMemory": 3072
}
}
Cada folder tendrá su propio tsserver, limitando la carga.
Solución 4: skipLibCheck
Si los tipos de node_modules son el problema:
// tsconfig.json
{
"compilerOptions": {
"skipLibCheck": true // No verifica .d.ts de node_modules
}
}
Esto reduce drásticamente el tiempo de análisis. La desventaja es que no detectarás errores en los tipos de las dependencias, pero en la práctica rara vez necesitas eso.
Solución 5: El proyecto generado de Prisma
Prisma genera un cliente con miles de tipos. Si tienes Prisma y tsserver consume mucha CPU:
// tsconfig.json
{
"compilerOptions": {
"skipLibCheck": true
},
"exclude": [
"node_modules/.prisma" // Excluir tipos generados de Prisma
]
}
Y en VS Code:
// settings.json
{
"files.watcherExclude": {
"**/node_modules/.prisma/**": true
}
}
Solución 6: File watcher — Reducir lo que VS Code monitoriza
VS Code vigila cambios en archivos para reanalizar. En proyectos grandes, el watcher consume CPU:
// settings.json
{
"files.watcherExclude": {
"**/node_modules/**": true,
"**/dist/**": true,
"**/.next/**": true,
"**/build/**": true,
"**/coverage/**": true,
"**/.git/objects/**": true
}
}
Diagnóstico: Cómo saber qué consume CPU
1. Perfilado de TSServer
Ctrl+Shift+P → "TypeScript: Open TS Server Log"
Esto abre el log de tsserver. Busca líneas con tiempos altos:
[Info] Perf: 2845ms — getSemanticDiagnostics — src/components/Dashboard.tsx
[Info] Perf: 1203ms — getCompletionsAtPosition — src/utils/api.ts
Si un archivo tarda +1s, es el culpable. Probablemente tiene tipos complejos (generics anidados, conditional types, template literals).
2. Ver procesos de VS Code
# Windows — PowerShell
Get-Process -Name "node" | Sort-Object CPU -Descending | Select-Object -First 5
# Mac/Linux
ps aux | grep tsserver
3. VS Code Process Explorer
Ctrl+Shift+P → "Developer: Open Process Explorer"
Muestra todos los procesos de VS Code con CPU y memoria. El proceso tsserver.js aparecerá con su consumo real.
Tabla resumen de soluciones
| Problema | Solución | Impacto en CPU |
|---|---|---|
| Muchos archivos | exclude / include en tsconfig | -40% |
| Tipos de node_modules | skipLibCheck: true | -30% |
| Monorepo completo | Abrir solo el package | -60% |
| File watcher | files.watcherExclude | -15% |
| Autocompletado lento | Desactivar autoImports | -20% |
| Prisma genera muchos tipos | Excluir .prisma | -25% |
| Todo junto | Aplicar todas | -70-80% |
Artículos relacionados
- Prettier no formatea al guardar — otro problema común de VS Code
- Errores comunes al configurar IA en VS Code — cuando Copilot también enlentece el editor
- Cursor vs Copilot vs Windsurf — editores alternativos que manejan mejor proyectos grandes