npm color 🎨

Gestión visual de packages para monorepos y microfrontends. Detecta todos tus package.json automáticamente, lanza scripts con un click y distingue cada proyecto por color en el terminal.

El problema

Si trabajas con monorepos o microfrontends en VSCode sabes lo que es esto:

La extensión NPM Scripts solo detecta packages cuando abres el archivo — inútil con 10+ packages
Tienes 5 terminales abiertas y no sabes cuál pertenece a qué proyecto
Los nombres muestran rutas de carpeta (apps/frontend/packages/ui) en vez del nombre real del package
No hay una vista unificada — buscas por el árbol de archivos para saber qué está corriendo

npm color resuelve los tres problemas nada más abrir tu workspace.

Features

🔍 Detección automática — sin abrir archivos

Escanea todo el workspace al arrancar VSCode. Todos tus packages aparecen al instante en el panel lateral, tengas 3 o 30.

🎨 Terminales con color e identidad

Cada terminal lanzada desde npm color recibe un color único y un nombre reconocible:

🔵 auth-service [dev]
🟢 dashboard-app [dev]
🟢 dashboard-app [build]
🔴 api-gateway [start]

Cada script muestra también la hora de inicio mientras corre y el último uso cuando está parado.

📋 Panel unificado

Un solo panel muestra todos tus packages con:

Nombre real del package.json (no la ruta de carpeta)
Package manager detectado automáticamente (npm / pnpm / yarn)
Lista de scripts con estado en tiempo real
Packages con scripts activos suben automáticamente al top

✏️ Personalización por package

Haz click derecho en cualquier package para:

Cambiar el alias (nombre visible)
Elegir un icono de la librería de VSCode
Asignar un color personalizado

📊 Barra de estado

En la barra inferior siempre visible: ● 2 running · 📦 31 packages

Instalación

Busca npm color en el Marketplace de VSCode o instala desde el panel de extensiones.

Uso

Abre un workspace con archivos package.json
Haz click en el icono de npm color en la barra lateral izquierda (Activity Bar)
Todos los packages aparecen automáticamente — sin abrir ningún archivo
Haz click en cualquier script para ejecutarlo
Haz click de nuevo para pararlo

Panel en el Explorer

Por defecto npm color aparece en la Activity Bar (icono propio). Si prefieres verlo también en el panel del Explorer (junto a archivos y git), actívalo en Settings:

"npmcolor.showInExplorer": true

O desde Cmd+, busca npm color y activa la opción Show In Explorer.

Configuración

Setting	Tipo	Por defecto	Descripción
`npmcolor.showInExplorer`	boolean	`false`	Muestra el panel también en el Explorer
`npmcolor.packageManager`	string	`auto`	Fuerza un package manager: `auto`, `npm`, `pnpm`, `yarn`
`npmcolor.exclude`	array	`["/node_modules/", ...]`	Patrones glob a excluir del escaneo
`npmcolor.packageColors`	object	`{}`	Colores hex personalizados por nombre de package

Ejemplo de configuración

{
  "npmcolor.showInExplorer": true,
  "npmcolor.packageManager": "pnpm",
  "npmcolor.packageColors": {
    "auth-service": "#ff6b6b",
    "dashboard-app": "#61afef"
  }
}

Personalizar un package

Haz hover sobre cualquier package en el panel y haz click en el icono ✏️, o click derecho → Edit Package. Puedes cambiar:

Alias — nombre que se muestra en el panel y en el terminal
Icono — elige entre los iconos de VSCode (package, rocket, star, gear...)
Color — elige el color del icono

Los cambios se guardan por workspace y persisten entre sesiones.

Por qué no NPM Scripts

Feature	NPM Scripts	npm color
Detección sin abrir archivos	❌	✅
Nombres reales de packages	❌	✅
Terminales con color	❌	✅
Hora de inicio / último uso	❌	✅
Estado en tiempo real	❌	✅
pnpm / yarn auto-detect	❌	✅
Icono y alias personalizados	❌	✅
Panel en Explorer	❌	✅
30+ packages sin problema	❌	✅

Licencia

MIT

NPM Color

Rosa Cardenal