El arsenal definitivo para frontend en 2024: ¿cuáles son vuestras herramientas imprescindibles?

Indie

Abro debate: llevo años usando VS Code con un puñado de extensiones, pero siento que me estoy perdiendo alternativas frescas. Me gustaría recopilar herramientas recomendadas para frontend: IDE, extensiones, CLI, linters, formateadores, etc.

Mi stack actual:

VS Code + Volar, ESLint, Prettier, Tailwind CSS IntelliSense, Error Lens.
Terminal: iTerm2 + zsh + oh-my-zsh.
CLI: Vite, pnpm, degit.

¿Qué usáis vosotros? ¿Alguna joya oculta que mejore el día a día? ¡Compartid vuestro setup!

Typography

Yo cambié VS Code por Neovim con LazyVim y no hay vuelta atrás. La velocidad es brutal y la personalización infinita, aunque la curva de aprendizaje es empinada. Para frontend uso:

nvim-lspconfig + tsserver
nvim-cmp con copilot
telescope.nvim para buscar archivos
toggleterm para terminal integrada

Si no quieres complicarte, VS Code sigue siendo rey, pero Neovim es otra liga una vez domado.

MusicFan

Discrepo con lo de Neovim. Para equipos grandes y juniors, VS Code es más mantenible. Dicho esto, extensiones que añadiría a tu lista:

Console Ninja: ver logs en el editor sin abrir DevTools.
Pretty TypeScript Errors: errores de TS legibles.
GitLens: indispensable para blame y navegación de historial.

Y para CLI, turborepo si trabajas con monorepos. Vite está bien para proyectos pequeños, pero Turbo acelera todo.

Indie

Gracias por las recomendaciones. No conocía Console Ninja, tiene pintaza para no saltar entre ventanas. Sobre Neovim, lo intenté hace un año y acabé volviendo a VS Code por el ecosistema de extensiones, pero reconozco que LazyVim lo pone fácil.

¿Alguien ha probado Zed o Cursor? Me tienta Cursor por la integración con IA, pero no sé si merece la pena pagar la suscripción.

PetOwner

Zed va camino de ser el nuevo estándar: escrito en Rust, rapidísimo y con colaboración en tiempo real. Aún le faltan extensiones, pero para frontend básico (TS, React, Tailwind) ya es usable. Cursor lo probé y es VS Code con IA integrada; si ya usas Copilot, no notarás tanta diferencia como para pagar 20$/mes.

Mi aporte CLI: biome está reemplazando a ESLint+Prettier en mis proyectos. Es un solo binario, config mínima y volando.

Typography

Ojo con Biome, aún le faltan reglas de ESLint que muchos necesitamos (especialmente para React Hooks o accesibilidad). Para proyectos serios, sigo con ESLint + Prettier, aunque duela la lentitud. Eso sí, oxlint promete ser el futuro: lint en Rust, compatible con reglas de ESLint.

¿Nadie ha mencionado devcontainers? Para mí es la mejor herramienta para estandarizar el entorno del equipo. Un devcontainer.json y todos con las mismas versiones de Node, pnpm y extensiones.

Indie

Lo de devcontainers me parece clave para equipos. ¿Tenéis algún ejemplo de configuración para frontend con Vite + React + Tailwind? Me gustaría montarlo en el trabajo y no partir de cero.

Y sobre Biome, coincido en que le falta madurez en reglas de React; quizá en un año sea viable. Gracias por las respuestas, estoy tomando notas.

Dance

Aquí va un devcontainer básico que uso:

{
  "name": "Frontend",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:20",
  "features": {
    "ghcr.io/devcontainers/features/github-cli:1": {}
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "bradlc.vscode-tailwindcss"
      ]
    }
  },
  "postCreateCommand": "pnpm install"
}

Con eso y un docker-compose para servicios, tienes entorno reproducible. Espero que te sirva.